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

vsCode_topimage
 
Photoshopのスクリプトを書くときはExtendscript toolkitを使ってました。
騙し騙し使ってましたがExtendscript toolkitの開発が終わりphotoshopも2020になり流石に潮時かなと。
観念してVisual Studio Codeに環境を変えてみることにしました。
 
Visual Studio Codeのインストールから対象のPhotoshopにスクリプト実行するところまでやってみたいと思います
 
 
 
 

Visual Studio Code

 
主要なプログラム言語がサポートされていて
機能拡張することで対応言語を増やすことが出来る
マイクロソフト製の無料で使える軽量コードエディタです。
 
これにアドビが提供しているプラグイン
 
ExtendScript Debugger
 
をVisual Studio Codeの機能拡張にインストールすることで、これまでのExtendscript toolkitからPhotoshopのスクリプト開発環境に変更することが出来ます。
 
 

インストール

 
公式のHPからダウンロードできます。
 
 
早速ダウンロードします。
 
[今すぐ無料ダウンロードする]
 
をクリック
 
 
各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 は開発が終わって後戻りできないですし。

 

Twitter Facebook Pocket LINE はてブ

おすすめの関連記事
コチラの記事も読まれています
あわせてよく読まれている記事