このページの本文へ

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

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

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

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
Photoshop

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");


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

 適当な名前を付けて保存したらPhotoshopに切り替え、[ファイル]メニューから[スクリプト]→[参照...]を選択します。

Photoshop画面

 ファイル選択ダイアログが表示されます。保存したJavaScriptのファイルを指定します。

Photoshop画面

 するとPhotoshop上でアラートダイアログにメッセージが表示されます。

Photoshop画面

 頻繁に使用するスクリプトファイルは、Photoshop本体があるフォルダの[プリセット]>[スクリプト]フォルダに入れておけば、[ファイル]>[スクリプト]のメニューに自動的に表示されるようになります。

Photoshop画面

●リファレンス、サンプルの入手方法

 Photoshop上で動作するJavaScriptについては、PDFのリファレンスやサンプルファイルが用意されています。場所は、Photoshop本体のフォルダにある「スクリプティングガイド」フォルダ内です。参考にしてください。

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング