お問い合わせ

ExtendScriptと、Adobe Configurator

UI開発者 泉口

Adobe Photoshopや、Adobe Illustratorは、デザイン、イラスト、モックの作成からスライス作成など、現在のフロントエンドにおける作業においても切り離せない存在になっています。 これらAdobe製品におけるショートカット機能は非常に柔軟で、覚えさえすれば殆どの機能を使いこなす事が出来ますが、複雑な作業が必要であったり、繰り返し作業においてはアクション機能及び、バッチ機能を使う必要があります。しかし、これらの機能では更に複雑な分岐処理や、ドキュメント自体の情報を取得した上での処理は不可能でした。

今回は上記アプケーションにおける課題の解決と、効率化を目的とした機能、ツールを紹介します。

ExtendScript（JSX）

ExtendScriptとは、アドビシステムズにより開発されたスクリプト言語。ECMAScriptに準拠しているため、JavaScriptやActionScriptに近しい書き方で処理を実行する事ができます。また、JavaScriptだけでなく、Apple Script、VBScriptでの書式もサポートしています。これらはPhotoshop CCのみではなく、CSからの共通項目となる為、バージョン固有機能では無い標準的な作業であれば、ある程度の後方互換性を持たせた処理を実行させる事が可能になります。

ExtendScriptの開発には、ExtendScript Toolkitを使用します。ExtendScript ToolkitはAdobe製品のプランやパッケージによって標準付属していますが、もしインストールされていない場合は以下のページからダウンロードする事ができます。

注意）今回のサンプルでは*.jsxと言う拡張子を使用しますが、DeNA社が提供しているJSXとは異なる点に注意してください。

例. 1280px四方のドキュメントを策し、幾つかのレイヤーセットとガイドを作成し、保存ダイアログを表示させる。

#target 'Photoshop';
(function () {
    documents.add(1280, 1280);
    
    var actdoc = activeDocument;
    var actdocWidth = actdoc.width;
    var actdocHeight = actdoc.height;
    var layerSet = actdoc.layerSets;
    var guides = actdoc.guides;
    
    app.preferences.rulerUnits = Units.PIXELS;
    actdoc.changeMode(ChangeMode.CMYK);
    
    layerSet.add().name = 'Footer';
    layerSet.add().name = 'Sidebar';
    layerSet.add().name = 'Content';
    layerSet.add().name = 'Header';
    layerSet.add().name = 'Color Palette';
    
    guides.add(Direction.VERTICAL, 0);
    guides.add(Direction.VERTICAL, actdocWidth / 2);
    guides.add(Direction.VERTICAL, actdocWidth);
    guides.add(Direction.HORIZONTAL, 0);
    guides.add(Direction.HORIZONTAL, actdocHeight / 2);
    guides.add(Direction.HORIZONTAL, actdocHeight);
    
    if (confirm('保存しますか？')) {
        var getDir = Folder.selectDialog('Select Directory');
        var fileName = prompt('File Name', 'test');
    
        if (getDir && fileName) {
            var createFile = new File(getDir  + '/' + fileName + '.psd');
    
            activeDocument.saveAs(createFile);
        } else {
            alert('ファイルは保存していません');
        }
    }
}());

上記例ではドキュメントの作成から、レイヤーセット・ガイドの配置、ファイルの保存処理を行っていますが、このレベルの実装であれば比較的短いコードで書く事ができるため、ある程度JavaScriptを理解している方であればリファレンスを見る事で目的の機能を実装できるのではないでしょうか。

Adobe Configurator

上記ExtendScriptではUIの実装も合わせて行う必要がありますが、相対配置において右上、左上、左下、右下の全てを設定する必要があるため、UIの実装には多少手間がかかります。また、JavaScriptを書いた事が無い方にとっては敷居が高いと感じるかもしれません。この場合、Adobe Configuratorを用いる事で、幾つかの機能制限は受けますが、より簡単にExtendScriptの恩恵を受ける事ができます。

Adobe Configuratorは元々、パネルを作成する為のユーティリティで、ドラッグ＆ドロップを用いた簡単な操作でオリジナルのメニュー、スクリプト、アクションの実装・実行が可能になります。実際の使用に関しては、Adobe Configurator 4 USER GUIDEにキャプチャと合わせて操作方法が記載されています。

Adobe Configuratorの特長として、HTMLウィジェットがあります。HTMLウィジェットを使用する事でHTML/CSSで作成したボタンやUIを用いたパネルの実装が可能になるので、使用したい機能をオブジェクトパレットで参照し、スクリプトだけをコピー＆ペーストする事で、より柔軟で自分好みのパネルを作成したり、ExtendScriptをHTML上に記述し、ボタン一つで実行させる事が可能です。

Adobe Configuratorで作成したパネルサンプル（弊社のWebサイトを埋め込み表示した例）

Adobe Configuratorの用途として、トレーニー用に機能を限定したパネルを表示したり、特定の処理を頻繁に使うデザイナーの専用パレットを表示すると言った用途が考えられますが、HTMLウィジェットを用いてPhotoshop上から特定のページを参照したり、ExtendScriptのスニペットページを実装し、ページ上から実行すると言った、より実用的な使い方ができるのも魅力の一つです。

2015年の記事一覧に戻る