古籏一浩のJavaScriptラボ ― 第3回

PhotoshopのフィルターをJavaScriptで作る！

2009年07月20日 12時36分更新

文● 古籏一浩

Adobe PhotoshopもJavaScriptをサポート

　JavaScriptにはInternet ExplorerやFirefox、Safariなど、Webブラウザー上で動作するもの、というイメーシがありますが、JavaScriptはデスクトップアプリケーションにも活躍の場を広げています。

　特に、「Photoshop」に代表されるアドビシステムズのアプリケーションのほとんどがJavaScriptをサポートしており、Photoshopや「Bridge」「After Effects」はソケット通信まで対応しています。つまり、Webサーバーにアクセスして必要なデータを受け取り、Photoshopで画像を加工し保存する、といったことがJavaScriptで自動化できるのです。さらにBridgeと連携すれば、FTPを使って加工した画像データをサーバーに転送する、といった処理まで自動化できます。

　Photoshop上で動くJavaScriptプログラミングの手始めに、今回はオリジナルのフィルターを作ってみましょう。PhotoshopのJavaScriptは動作速度が遅く、大きな画像の加工処理には向いていませんが、C/C++言語などを使ってフィルタプラグインを作る手間と時間を考えれば「JavaScriptで作って何とかしてみる！」というのも悪くありません。

PhotoshopでJavaScriptを動作させるには

　Photoshopは、2002年に発売された「Photoshop 7.0」からJavaScriptをサポートしました。Photoshop 7.0では専用のプラグインを追加する必要がありましたが、「Photoshop CS」以降は標準でJavaScriptをサポートしています。ここではPhotoshop CS3をベースにして解説しますが、CS以降であれば基本的に同じと考えてください。

　PhotoshopでJavaScriptを動かしたことがない人も多いでしょうから、最初にスクリプトの作成・実行手順について説明しておきましょう。

　Photoshopで実行できるJavaScriptファイルは、文字コードがUTF-8（BOM＝Byte Order Mark付きが望ましい）、拡張子.がjsx（Photoshop 7～CSは.js）で保存されたテキストファイルです。Windows付属のメモ帳は標準で、秀丸エディターはオプションで、UTF-8形式保存時にBOM付きになります。また、Photoshop CS2以降にはBOM付きのUTF-8形式で保存してくれる専用エディター「Extend Script Toolkit」が付属しています。作成したJavaScriptファイルはExtend Script Toolkit上から実行ボタンをクリックするか、Photoshopの[ファイル]メニューから実行できます。今回はPhotoshopのメニューからスクリプトを実行する方法を使ってみましょう。

　始めに、アラートダイアログにメッセージを表示する簡単なスクリプトを実行してみましょう。アラートダイアログの表示はブラウザーの場合とまったく同じで、alert() を使います。以下のスクリプトをエディターに入力してください。


alert("PhotoshopでJavaScript");


「Extend Script Toolkit」でサンプルを入力。Windows版は「すべてのプログラム」＞「Adobe Photoshop CS3（またはスイート名）」内に、Mac版は「アプリケーション」＞「ユーティリティ」＞「Adobe ユーティリティ」内にある