FlashBuilderを使ったPhotoshop用エクステンションパネルの作成方法（CS5）

一年近く更新してませんでしたが、書けそうなネタができたのでちょっと更新してみますｗ

ふとPhotoshopでレイヤー名の置換とかできたらいいなぁと思い立っていじり始めました。

jsxでGUIも書いてそこから置換もできると思いますが

常に画面内にあれば便利かなぁと思い、 エクステンションパネルについて調べ始めました。

その際にどうせならエクステンションのパッケージ化もやってみようと調べて、

簡単ですがそれらをまとめました。

注）はじめに書いておきますが機能としては動きますがスクリプトの書き方が悪いのかレイヤー数が多いとPhotoshopがしばらく固まってしまいますので使用される場合は保存してからをオススメします。

改善できそうであれば、修正します。

まず下記のjavascript（jsx）です。

自分はAdobe ExtendScript Toolkit CS5で書きました。

下記の内容としては、

●入力された文字からレイヤーを検索・選択する関数

●入力された文字と一致するレイヤー名を置換する関数

（再帰的検索の部分はPhotoshopCS5自動化作戦さんのこちらのページを参考にさせてもらいました）

●スクリプトリスナーから得たレイヤーを複数選択するための関数

（↑通常の書き方だと複数選択できないので…）

という感じです。

まだまだスクリプトとかはへなちょこなので、スクリプトかける方からすると全く大したことない感じで「何だコレ」と思われる部分があるかもしれませんが(・_・;)

function searchLayer(seNm1){
    var searchName1 = new RegExp(seNm1,"i")
    var layObj = activeDocument;
    recursiveLayer(layObj);
    alert("選択しました");
    
    //レイヤー、レイヤーセットを再帰的検索
    function recursiveLayer(layObj){
        var n = layObj.artLayers.length;
        for (var i=0; i<n; i++){
            var layName = layObj.artLayers[i].name;
            if (layName.match(searchName1)){
                //selectLayer関数を呼んで選択
                selectLayer(layName);
                //alert(layName)
            }
        }
        var ns = layObj.layerSets.length;
        for (var i=0; i<ns; i++){
            recursiveLayer(layObj.layerSets[i])
        }
    }
}

function replaceAllLayerName(seNm2,reNm1){
    var replaceName;
    var searchName2 = new RegExp(seNm2,"i")
    var layObj = activeDocument;

    recursiveLayer(layObj);
    
    alert("置換終了しました");
    //レイヤー、レイヤーセットを再帰的検索
    function recursiveLayer(layObj){
        var n = layObj.artLayers.length;
        for (var i=0; i<n; i++){
            var layName = layObj.artLayers[i].name;

            if (layName.match(searchName2)){
                //名前を置換
                replaceName = layName.replace(seNm2,reNm1);
                layObj.artLayers[i].name = replaceName;
            }
        }
        var ns = layObj.layerSets.length;
        for (var i=0; i<ns; i++){
            recursiveLayer(layObj.layerSets[i])
            //alert(layObj.layerSets[i].name)
        }
    }
}


//スクリプトリスナーから得た複数選択コード
function selectLayer(selectLayerName){
    var idslct = charIDToTypeID( "slct" );
        var descX = new ActionDescriptor();
        var idnull = charIDToTypeID( "null" );
            var refX = new ActionReference();
            var idLyr = charIDToTypeID( "Lyr " );
            refX.putName( idLyr, selectLayerName );
        descX.putReference( idnull, refX );
        var idselectionModifier = stringIDToTypeID( "selectionModifier" );
        var idselectionModifierType = stringIDToTypeID( "selectionModifierType" );
        var idaddToSelection = stringIDToTypeID( "addToSelection" );
        descX.putEnumerated( idselectionModifier, idselectionModifierType, idaddToSelection );
        var idMkVs = charIDToTypeID( "MkVs" );
        descX.putBoolean( idMkVs, false );
    executeAction( idslct, descX, DialogModes.NO );
}

続きまして、Photoshop上で表示させるパネルを作ります。

まずはこちらのPhotoshop デベロッパーセンター からSDKをDLしてください。

DLしてもらったadobe_photoshop_cs5_sdk_winの中の

flashpanelsの中の「Readme.html」を開いてもらえば英語ですが

チュートリアルが書かれています。

Flashでも作れるようですが、チュートリアルがFlash Builderで解説されてるので

Flash Builderでやりましたがパネル作る事自体はやってみると簡単でした。

Flash Builderを起動して、ファイル＞新規＞Flexプロジェクト　を開きます。

その際に生成されたプロジェクトのディレクトリに「libs」というフォルダができていると思いますが、そちらにDLしたadobe_photoshop_cs5_sdk_win＞flashpanels＞librariesの中の

CSXSLibrary-2.0-sdk-3.4.swcをコピーして下さい。

（3.3も入ってると思いますが使い分けはよく分かっていません…orz）

今回のパネルの場合は、デザインモードでコンポーネントから

主にTextInputとButtonを使っています。

それらを投げ入れ、ソースモードに切り替えるとButtonなどのコードが記載されています。

それに上記で書いたjavascriptの関数を呼び出す関数などを加えたものが下記になります。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="400" minHeight="300" >
    <mx:Script>
        <![CDATA[
            import com.adobe.csxs.core.CSXSInterface;
            
            public function callSearch():void
            {
                var SWord_01:String = searchWord01.text;
                CSXSInterface.instance.evalScript("searchLayer",SWord_01);

            }
            public function callReplace():void
            {
                var SWord_02:String = searchWord02.text;
                var RWord:String = replaceWord.text;
                CSXSInterface.instance.evalScript("replaceAllLayerName",SWord_02,RWord);

            }
        ]]>
    </mx:Script>
    
    
    <mx:HBox x="10" y="10" width="70%">
        <mx:Label text="検索する文字" height="100%" width="70"/>
        <mx:TextInput width="100%" height="100%" id="searchWord01"/>
    </mx:HBox>
    <mx:Button x="10" y="40" label="検索" width="80" click="callSearch()"/>
    <mx:ProgressBar id="pBar" labelPlacement="bottom" themeColor="#F20D7A"
                     minimum="0" visible="false" maximum="100" label="CurrentProgress 0%" 
                     direction="right" mode="manual" x="100" y="40" />
    <mx:HBox x="10" y="70" width="70%">
        <mx:Label text="置換前の文字" height="100%" width="70"/>
        <mx:TextInput width="100%" height="100%" id="searchWord02"/>
    </mx:HBox>
    <mx:HBox x="10" y="100" width="70%">
        <mx:Label text="置換後の文字" height="100%" width="70"/>
        <mx:TextInput height="100%" width="100%" id="replaceWord"/>
    </mx:HBox>
    <mx:Button x="10" y="130" label="置換" width="80" click="callReplace()"/>

    
</mx:Application>

FlashBuilderでこれ↑を「リリースビルドの書き出し」を行うと

このプロジェクト内のbin-releaseというフォルダにswfファイルが出力されています。

ちなみにこのソースでデザインモードはこんな感じです。↓

書きだされたswfファイルとjavascript（jsx）ファイルを

インストールされてるPhotoshopのディレクトリ内のPlug-in>Panelsの中に入れると

Photoshopのメニューバーのウィンドウ＞エクステンションに表示されます。

例）C:\Program Files\Adobe\Adobe Photoshop CS5 (64 Bit)\Plug-ins\Panels

自分用ならこれでいいのですが、

他の人に配布したいなどの場合にファイルをコピーしてフォルダに入れてもらう手間をですよね。

その手間を省くためにAdobe Extension Manegerでそれらのファイルをパッケージ化できます。

パッケージ化するためにはmxiというXML形式のファイルが必要になります。

それを書いたものが下記になります。

<?xml version="1.0" encoding="UTF-8"?>

<macromedia-extension
     name="SearchAndReplace"
     version="1.0.0"
        requires-restart="true">

    <author name="redglasses" />

    <products>
        <product name="Photoshop64" version="12" />
    </products>

    <description>
    <![CDATA[
        このエクステンションは入力したキーワードからレイヤーを検索したり、レイヤー名を置換するものです。
    ]]>
    </description>


    <files>
        <file source="SearchAndReplace" destination="$pluginsfolder/Panels" shared="true" />
    </files>
</macromedia-extension>

このmxiファイルに記載する内容の参考は

こちらのSparkPrpjectさん を拝見させてもらいました。

日本語に訳されているので助かりました。

注意点といいますか、文字コードのせいかもしれないんですが

最初サクラエディタでmxiを書いていましたが何度パッケージ化してもできなくて

どこか間違ってるのかなぁとすごい時間かかりましたが

Windows標準のメモ帳にコピペして保存し直したら何事もなかったように

パッケージ化できました。

mxiの書き方の詳細はSparkProjectさんを見て頂いた方がいいですが、

簡単に説明しておきますと、

・product name でインストールするAdobeの製品名を書きます。

ただしPhotoshopの場合はPhotoshop32→32-bit、Photoshop64→64-bitの区別があります。

・version でインストールする製品のバージョンを書きます。

・description 内はエクステンションの説明を記載する場所です。

・file source にjsxやswfがあるフォルダ（mxiと同じ階層）、もしくはファイル名を書きます

・destination にインストールするAdobe製品のディレクトリ先を指定します。

（上記の場合はPhotoshopのPanels内にSearchAndReplaceフォルダができます）

という感じです。

Adobe Extension Managerを起動して、このmxiを読み込みます。

ファイル＞MXP拡張機能のパッケージ化　からmxiファイルを選択しmxpファイルを作成します。

その作成されたmxpファイルを　ファイル＞拡張機能をインストール　からインストールすると

上記の画像のようにインストールされます。

インストールされた後は指定したPhotoshopのディレクトリ（これでいうとPhotoshopのPlug-in>Panels）に入っています。

エクステンションマネージャーから削除をするとそのインストールされたファイルも削除されます。

ほんとに簡単な説明でしたがとりあえず以上となります。

改善予定の点

●レイヤー検索する際に同じ名前のレイヤー名があるとなぜか下の方のやつしか選択してくれない

●レイヤーを検索すると検索前にアクティブになってたレイヤーも選択されたままとか

●置換機能がアクティブドキュメントのすべてのレイヤーに対して

置換されてしまうので選択されたレイヤーだけにする

●レイヤー数やフォルダ階層が多いと処理速度が遅い

…などなど改善したい点はあるので後々改善していく予定です。(・_・;)

まだ実用的ではないですが一応こちらに

・SearchAndReplace.mxp（PhotoshopCS5 64bit版）

・SearchAndReplace_86.mxp（PhotoshopCS5 32bit版）

・SearchAndReplace.zip（jsxとswf）

の3つをアップしてありますのでご興味あれば入れてみて下さい。

軽く自分では使用してますが、ご使用は自己責任で。

DL用のパスは赤を英語に67です。（計5文字）

まだまだわかってないことだらけなのでアドバイスなどありましたらご教授下さい。