[Photoshop]Visual Studio Codeの機能拡張ExtendScript Debuggerの始め方

Photoshopのスクリプトを書くときはExtendscript toolkitを使ってましたがExtendscript toolkitの開発が終了したため、開発環境の変更を余儀なくされました。

しばらくは慣れているExtendscript toolkitを騙し騙し使ってましたがphotoshopも2020になり流石に潮時かなと。

観念してアドビ推奨のVisual Studio Codeに環境を変えてみることにしました。

本記事では、Visual Studio Codeのインストールから対象のPhotoshopを指定、そしてスクリプトを実行するところまでやってみたいと思います

【デジハリONLINEの基礎動画 + AdobeCC一年ライセンスのお得プラン】

Adobeのプラチナパートナーに認定されているデジタルハリウッドのオンラインCGスクール「デジハリONLINE」が提供する「Adobeマスター講座」。
基礎動画教材とAdobe creative cloudの一年版ライセンスがセットになった、コスパ最強のパッケージプランです。

学習ノルマは一切ありません。AdobeCCだけを目的に契約してもOK！

>> デジハリONLINE「Adobeマスター講座」

・Visual Studio Code

・インストール

・ExtendScript Debugger

・日本語化する

・Photoshop2020をターゲットにする

・スクリプトを実行してみる

・まとめ

Visual Studio Code

Visual Studio Codeの特徴は

・主要なプログラム言語がサポートされてる

・機能拡張することで対応言語を増やすことが出来る

・マイクロソフト製で無料で使える
・軽量コードエディタ

これにアドビが提供しているプラグイン

ExtendScript Debugger

をVisual Studio Codeの機能拡張にインストールすることで、これまでのExtendscript toolkitに代わるPhotoshopのスクリプト開発環境に変更することが出来ます。

インストール

公式のHPからダウンロードできます。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

早速ダウンロードします。

[今すぐ無料ダウンロードする]

をクリック

各OSごとにのダウンロードボタンが並んでいるページに移動しました。

自分が使っている環境にあわせて選びます。

筆者は[Windows User Installer 64bit]を選びました。

ダウンロードのダイアログウィンドウが開くのでOKします。

※Visual Studio Codeの説明ページも同時に開いて、ちょっとだけダイアログウィンドウが開くのが遅れて、一瞬「アレッ」て思いましたが、直ぐ開きました。

がダウンロードされたので、クリックして実行します。

同意するにチェックして、[次へ]

インストール先を確認、問題がなければ[次へ]

プログラムグループの指定、特に問題がければ[次へ]

追加タスクの選択、任意にチェックをして[次へ]

[筆者はサポートされているファイルの種類のエディターとして、Codeを登録する]にチェックしました。

いよいよインストールです。[インストール]をクリック

インストール中….

直ぐにインストール終わりました。[完了]

Visual Studio Code　が開きました。

ExtendScript Debugger

続けて機能拡張　ExtendScript Debugger　を追加します。

左に並んでいるアイコンから一番下のアイコンをクリックします。

機能拡張の検索覧が開きました。
Search Extenshions in Marketplaceの検索窓に「ExtendScript」と入力すると[ExtendScript Debugger]が表示されます。

[ExtendScript Debugger]の[Install]を押します。

インストールされました。

日本語化する

検索窓に

「Japanese」

と入力すると

沢山出てきますが、一番上のMicrosoftの

「Japanese Language Pack for Visual Studio Code」

を選びました。

[Install]をクリック。

右下に再起動を促す表示が現れるので[Restart Now]

日本語化されました。簡単でした。

Photoshop2020をターゲットにする

メニューの

ファイル>ファイルを開く

ファイルを開くダイアログが開くので

任意の.jsxファイルを開きます。

下の青い帯に「ターゲットアプリケーションを選択」と黄色い文字が出てきました。

クリックしてみます。

上にターゲットアプリケーションの候補が出てくるので選択します。

「ターゲットアプリケーションを選択」が選択したターゲットアプリケーション名に変わりました。

スクリプトを実行してみる

まずlaunch.jsonという設定ファイルが必要らいしいので作ります。

メニューから

ファイル>フォルダーを開く

ダイアログが開くのでjsxスクリプトが置かれるファルダを指定します。

デバッグのアイコンを選択。

launch.jsonファイルを作成します。

と表示されるので、クリックします。

ExtendScript Debuggerを選択

launch.jsonが開きました。

ファイル>保存します。

ここで一度スクリプトを実行してみます。

新規でファイルを作り

アラート表示のスクリプトを書いて保存します。

左の上の表示が「スクリプト名を求める」なのを確認して、
緑の三角ボンタン又は[デバックの開始]します。

実行したいファイルの入力を求められます。

index.jsxと書かれた部分に実行したいスクリプトファイル名.jsxを入力して[Enter]を押すとスクリプトが実行されます。

しかし、この状態ではデバックを開始するたびに毎回ファイル名を入力しなければなりません。

なのでタブで開いているスクリプトが実行されるように修正します。

launch.json　のタブを開きます。

右下に[構成の追加..]の表示があるので選択します。

ExtendScript デバッグ起動設定　を選択します。

構成が追加されるので変更します。

program を”${file}”に変更して保存しました。これで開いているファイルが実行されるようなります。

nameは分かりやす名前にします。

先ほどと同じスクリプトを実行してみましょう。

ドロップダウンリストから変更した構成の名前を選びます。

緑の三角ボンタン又は[デバックの開始]

ファイル名を聞かれることなく実行できました。

まとめ

インストールするまでは何も難しいことは無いですね。

でもlaunch.jsonのあたりから面倒な感じがしました。

この記事では省いてますが、最初選択したフォルダーが読み取り専用だった為にファイルを作れませんでした。

administratorでログインして書き込み可能な設定にすることで、launch.jsonファイルを作れました。

あとlaunch.jsonの設定を変更することに気づかないと悪印象が付いてしまうかも。

まだ本格的に使ってないのでExtendscript toolkitの様にサッとメモを取るみたいに立ち上げてスクリプトを書く使い方には向かないのかな。

慣れの問題だと思うのでこれからガシガシ使っていきます。

Extendscript toolkit　は開発が終わって後戻りできないですし。

[Photoshop] javascript　フィルター効果のコードの書き方　画像付き一覧

Photoshopのスクリプトコードの中から、フィルタパートを画像付きで一覧にしました。 activeDocument.activeLayer.XXX();アクティブドキュメントのアクティブレイヤーにフィルターをかけます。フィルター効果の...

リンク

　月額定額制の完全オンライン・プログラミングスクール

　「SAMURAI TERAKOYA（侍テラコヤ）」

　・月々定額のサブスクで利用でき、入会金も不要、いつでも退会可能
　・現役エンジニアの講師とマンツーマン・レッスンで疑問や悩みを解決
　・オンラインで学べるので地方在住者でも受講可能

侍テラコヤ