Photoshop Extensionの開発5 jsの概要
前回で最低限の環境の構築ができましたがここからパネルのインターフェイスを定義するindex.htmlとmain.jsの中身に触れます。
ぱっと見中身はいたって普通のhtmlファイルですね。パネルのインターフェイスはブラウザ向けのコードと同じようにhtmlとCSSで定義していきます。但しブラウザ向けと異なるのはPhotoshopのExtensionに搭載されているのはクロームベースのエンジンという事でクロスブラウザ対策の必要がそこまで必要ない（但し全く必要ないわけではない）事、スマートフォン向けのコーディングも必要なければSEO対策も全く必要ありません。正しくhtmlのコーディングが出来なくてdiv要素でガンガンコーディングしたところでCSSとjsさえ動けば問題無いと思います。
デフォルトでリンクされているjsファイルですがまずCSInterface.jsというAdobeがExtension向けに開発したライブラリは必ず必要になります。プラグインで最初の環境構築を作成するとj-queryが必ずついてくると思いますがj-queryの使用は必須では無いので不要ならリンクを消去してファイル自体も消去して問題ありません。themeManagerは必須ではありませんがユーザーがソフト自体の環境設定のウインドウカラーを変えた時にそれに合わせてパネルの色も変えてくれるライブラリになります。最後にmain.jsがパネルを動かすメインのjavascriptになります。このmain.jsをコーディングして実際のパネルの操作とPhotoshopの操作を行います。
main.js
関数initの中にj-queryのクリックイベントが登録されています。そこからcsinterfaceのevalScriptメソッドでjsxのsayHello関数を呼び出してアラートをPhotoshop経由で呼び出します。最低限の環境構築は終わったと述べましたがここから最新のjsにmain.jsを対応させるにはまだ十分ではありません。クロスブラウザ問題ですが確かにベースがクロームベースなのでIEやらsafariやら向けにコーディングする必要はありませんが実は古いPhotoshopのバージョンですとクロームのバージョン自体が古く最新のjsが動かなかったりします。勿論個人でやったり社内で小規模に共有する分には問題ありませんがそれでもECMA2015に対応できるようになったのがPhotoshopですとCC2018とかなり最近のバージョンで、CC2017ですらconst,letくらいしか対応していません。CC2017向けにECMA2015を使用しようと思ったらbabelなどでトランスパイルする必要が出てきます。さらに日々、日々更新されるjsとモダンブラウザに対してPhotoshop自体の大幅な更新は年に一、二回程。ECMA2017,ECMA2018と安定して使用したい場合はトランスパイルを使用する習慣をつけた方が無難でしょう。さらにこのPhotoshopのクロームエンジンにはサーバーサイドスクリプトのNode.jsも組み込まれているので普通のブラウザと違ってローカルのファイル操作なんかもパネル経由でコントロールできます。勿論豊富なモジュールも使用できますがそもそも古いPhotoshopですとエンジン自体が古すぎてモジュールが作動しなかったりするので対応バージョンの選択は常に気を使ってください。ちなみにご存知だとは思いますがjsxは未だにECMA3までの対応でbabelでトラスパイルしてもECMA5までの対応でそこからECMA3に対応しようとするとpolyfillがさらに必要になったりで完全にお手上げです。（もしかしたらECMA3向けのトランスパイラがあるかもしれないですが見つけられませんでした。）というわけで次回はwebpackによるトランスパイル。