Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Photoshop Generatorプラグインの作り方

Photoshopとサードパーティツールとの相互運用性を高める「Generatorテクノロジー」(後編)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/12/18 14:00

目次

JSXを読み込んで実行する

 GeneratorからPhotoshop用JavaScript、JSXを利用できます。Generatorには2つのJSX評価用メソッドが用意されています。1つはevaluateJSXString(string)で文字列でJSXコードを渡すことで処理を実行してくれるメソッドです。文字列で書いていくのは少々しんどいので、外部jsxファイルを読み込んで実行するためにevaluateJSXString(path)というメソッドが用意されています。

 まずは自作のプラグインフォルダ内にjsxファイルを用意します。main.jsと同階層です。試しにレイヤーの選択を切り替えるごとにレイヤー名をアラートで表示してみましょう。imageChangedのリスナーが呼ばれたらjsxを読み込むようにしてみます。selectedLayer.jsxというファイル名で下記のコードを記述します。

alert(app.activeDocument.activeLayer);

 このjsxファイルをonImageChangedで読み込むようにします。下記のように記述します。ファイルパスはgenerator-core/lib/generator.jsから見た相対パスを指定します。実際にプラグインとして稼働させるにはファイルパスの指定の仕方が変わりますので、本稿の最後のセクションを御覧ください。

function onImageChanged(event) {
    console.log("イメージが変更されました。");

    _generator.evaluateJSXFile("../../plugins/first-plugin/selectedLayer.jsx").then(
        function(result) {
            console.log(result);
        },
        function(error) {
            console.error(error);
        }
    );
}

 ここまで用意してからPhotoshopへ再接続し、レイヤーを選択してみると、コマンドラインにレイヤー名が表示されると思います。

プラグインとして稼働させる

 このままでは任意のフォルダで開発している状態なので、実行コマンドを打たないと稼働しません。実際にプラグインとして稼働させるには、アプリケーションフォルダ内の下記の場所にプラグインを配置する必要があります。

  • /Applications/Adobe Photoshop CC/Plug-ins/Generator/

 また、jsxのファイルパスはこの配置によって変わってしまうので、下記の箇所を書き換えます。

変更前
_generator.evaluateJSXFile("../../plugins/first-plugin/selectedLayer.jsx")
変更後
_generator.evaluateJSXFile(this._photoshop._applicationPath + "/Plug-ins/Generator/first-plugin/selectedLayer.jsx")

 これでPhotoshopを起動すると、今度は起動しただけで下図のように[ファイル]-[生成]メニューに「はじめてのプラグイン」が追加されていることが確認できます。これでプラグインとして正式に稼働し始めました。

 いかがでしょうか。だいぶやりたいことが膨らんできたと思います。プラグインからjsxにパラメータを渡すこともできるので、JSX上でレイヤー情報を取得してCSSを生成したり、fsモジュールを使ってリアルタイムでファイル生成をしたりして、Photoshopとhtmlコードの自由な連携を独自に生み出すことができそうですね。これを機にnode.jsとjsxを使って楽しんでみてはいかがでしょうか。

 本稿のサンプルは下記URLで公開しています。

参考

 Generatorのリファレンスは現状見当たらないので、generator.jsのソースが参考になります。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 又村 洋史(マタムラ ヒロフミ)

    株式会社イノーヴ WEBクリエイター。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。 土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。日々学ぶことばかり。個人ブログ「Deconcepter」ではWEBに関わる人が押さえておきたい情報の...

バックナンバー

連載:Adobe Developer Connection

もっと読む

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5