次世代プラグイン開発環境【UXP】（Unified Extensibility Platform）を本格的に学んでみた。【CEP】との比較もしてみました 2/3

Adobe Plugin、DTP、UXP Script、、、

つーわけで第２回です。いよいよコーディングしていきます。参考は下記URLより。

UXP API JavaScript Reference

参考：Adobe Developer

まずボタンを配置

まずパネルにボタンを配置していきます。下記のような感じ【CEP】も同じく。

  • HTML（index.html）
    • <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
    <ul>
        <li id="btn1">system Info</li>
        <li id="btn2">open Document</li>
        <li id="btn3">close Document</li>
        <li id="btn4">canvas Change</li>
        <li id="btn5">saveAsJpg</li>
    </ul>
    <script src="index.js"></script>
</body>
</html>

    ほんでスタイルシートで【li】タグをボタン形式にします。

  • CSS（style.css）
    • li{
    font-size: 85%;/*【CEP】のみ適用*/
    text-align: center;
    border: 1px solid #888;
    margin: 0px 2px 5px 4px;
    padding: 2px 10px;
    cursor: pointer;
    border-radius: 3px;
    list-style: none;
    -webkit-user-select: none;
}
li:hover{
    background-color: #888;
}
li:active{
    background-color: #666;
}

    まぁこの辺は大体で…。font-size: 85%;は【CEP】のみ適用してます。ちょうどいい大きさになったもんで。

    ちなみに【UXP】は【body】タグに下記スタイルを適用するとライトモード・ダークモードに簡単に適応できます。メンドくさくなくて、楽チンだ。

    body{
    background-color: var(--uxp-host-background-color);
    color: var(--uxp-host-text-color);
    border-color: var(--uxp-host-border-color);
    font-size: var(--uxp-host-font-size);
}

    UXP for Adobe Photoshop – Code Samples

    参考：Adobe Developer

左が【CEP】で右が【UXP】のパネルです。見た目クリソツだぜ！これで準備は整った！

基本情報とダイアログ

まずはアプリケーション名やバージョン、特殊フォルダの取得とファイル選択ダイアログなどにチャレンジしました。

１つ目のボタン【system info】（ID：btn1）にクリックイベントを追加します。

  • CEPのサンプルコード
    • const csInterface=new CSInterface();
document.getElementById("btn1").addEventListener("click",function(){
    const APID=csInterface.getApplicationID();
    const appVersion=csInterface.getHostEnvironment().appVersion;
    const myDocmentDir=csInterface.getSystemPath(SystemPath.MY_DOCUMENTS);
    console.log(APID,appVersion,myDocmentDir);
    const openFile=window.cep.fs.showOpenDialogEx(false,false,"open File",myDocmentDir.toString(),["psd"]);
    console.log(openFile.data[0]);
},false);

    １行ずつ解説を、【CEP】はまず【CSInterface】を呼び出します。

    const csInterface=new CSInterface();

    で、【getApplicationID()】で使用しているアプリケーションIDを取得できます。イラレなら【ILST】、インデザインなら【IDSN】とかですね。【CEP】のマニフェストに記述するのもこの形式です。フォトショップなら【PHXS】になるわけです。【CEP】ならこのIDで処理ルートを変えたりします。

    const APID=csInterface.getApplicationID();
    実行結果：PHXS

    使用バージョンは【getHostEnvironment().appVersion】で取得できます。何に使うかは、あなた次第です。

    const appVersion=csInterface.getHostEnvironment().appVersion;
    実行結果：23.1.1

    ちなみに【getHostEnvironment().appId】、【getHostEnvironment().appName】というコマンドもありますが、結果は【getApplicationID()】と同じく【PHXS】でした、、、。

    const APID=csInterface.getHostEnvironment().appId;
const appName=csInterface.getHostEnvironment().appName;
    実行結果：PHXS PHXS

    お次はシステムフォルダの取得。【getSystemPath(SystemPath.MY_DOCUMENTS)】でユーザドキュメントフォルダが取得できます。他にも【SystemPath.USER_DATA】や【SystemPath.HOST_APPLICATION】などコマンドがあります。

    const myDocmentDir=csInterface.getSystemPath(SystemPath.MY_DOCUMENTS);
    実行結果：C:/Users/shock-tm/Documents

    そのフォルダ情報を利用して、オープンダイアログを表示させてみます。【window.cep.fs】という所から【showOpenDialogEx】というコマンドを呼び出します。

    const openFile=window.cep.fs.showOpenDialogEx(false,false,"open File",myDocmentDir.toString(),["psd"]);
console.log(openFile.data[0]);

    【showOpenDialogEx】引数は［複数選択］,［フォルダ選択］,［ウィンドウタイトル］,［初期表示フォルダ］,［ファイルタイプ］になります。

    複数選択も可能なダイアログなのでコンソールは[0]を使用しています。

    実行結果：C:/Users/shock-tm/Documents/test.psd

    サンプルコードですと下記のような感じです。初期フォルダがドキュメントフォルダでpsdファイルのみ１つだけ選択できます。

    フォルダ選択ダイアログはこんな感じで、引数［フォルダ選択］を[true]にします。

    const myDocmentDir=csInterface.getSystemPath(SystemPath.MY_DOCUMENTS);
const newFolder=window.cep.fs.showOpenDialogEx(false,true,"open Folder",myDocmentDir.toString());
console.log(newFolder.data[0]);
    実行結果：C:/Users/shock-tm/Documents

    ファイル保存選択ダイアログは【showSaveDialogEx】を使用します。

    const newFile=window.cep.fs.showSaveDialogEx("save psd",myDocmentDir,["psd"],"newFile.psd");
console.log(newFile.data);
    実行結果：C:\Users\shock-tm\Documents\newFile.psd

    ファイル保存の時だけ形式がちょっと違うので注意！

  • UXPのサンプルコード
    • const uxp=require("uxp");
const localFileSystem=require("uxp").storage.localFileSystem;
document.getElementById("btn1").addEventListener("click",function(){
    const appName=uxp.host.name;
    const appVersion=uxp.host.version;
    const myDesktop=uxp.storage.domains.userDesktop;
    (async()=>{
        const newFile=await localFileSystem.getFileForOpening({
            initialDomain:myDesktop,
            types:["psd"],
            initialLocation:"",
            allowMultiple:true
        });
        console.log(openFile[0].name);
    })();
},false);

    １行ずつ解説を、【UXP】はまずrequireで【uxp】を呼び出します。

    const uxp=require("uxp");

    ついでに、ファイルシステム【localFileSystem】も【uxp】から呼び出しておきます。まぁ別に呼び出さなくてもいいのですが、公式リファレンスではもう当然【fs】に呼び出した形で話を進めておりますので、それに倣っています。

    const fs=uxp.storage.localFileSystem;

    まず、【host.name】で使用しているアプリケーション名を取得できます。アプリケーションIDではありませんでした。

    const appName=uxp.host.name;
    実行結果：Photoshop

    使用バージョンは【host.version】で取得できます。何に使うかは、やはりあなた次第です。

    const appVersion=uxp.host.version;
    実行結果：23.1.1

    お次はシステムフォルダの取得。【uxp.storage.domains.userDesktop】でデスクトップを取得します。【Symbol】という形で返り値がいらっしゃいます。他にも【userDocuments】や【userPictures】などがありますが、、、。

    const myDesktop=uxp.storage.domains.userDesktop;
    実行結果：Symbol(userDesktop)

    ちなみにそのままconsole.logで吐き出すとエラーが出たので【console.log(myDesktop.toString());】で怒られないようにしました。

    そのフォルダ情報を利用して、オープンダイアログを表示させてみます。【localFileSystem.getFileForOpening】というコマンドで呼び出します。

    (async()=>{
    const openFile=await localFileSystem.getFileForOpening({
        initialDomain:myDesktop,
        types:["psd"],
        initialLocation:"",
        allowMultiple:true
    });
    console.log(openFile[0].name);
})();

    【getFileForOpening】引数はjson方式で［initialDomain］,［types］,［initialLocation］,［allowMultiple］があります。［initialDomain］と［initialLocation］の違いがよく分からない…。

    こちらも、複数選択もできるのでコンソールは[0]を指定しています。つける位置が【CEP】とちょっと違うので注意。

    実行結果：C:\Users\shock-tm\Documents\test.psd

    サンプルコードですと初期フォルダがデスクトップフォルダでpsdファイルのみ１つだけ選択できます。ビミョーに違うのが分かりますか？

    フォルダ選択ダイアログはこんな感じ。引数はjson方式で［initialDomain］のみです。複数選択はできない模様です。

    (async()=>{
    const newFolder=await localFileSystem.getFolder({
        initialDomain:myDesktop
    });
    console.log(newFolder.name);
})();

    ファイル保存選択ダイアログはこんな感じです。公式には記述は無かったのですが、１つ目の引数にデフォルトファイル名をねじ込めました。json方式の引数は［initialDomain］と［types］です。

    (async()=>{
    const newFile=await localFileSystem.getFileForSaving("newFile.psd",{
        initialDomain:myDesktop,
        types:["psd"]
    });
    console.log(newSaveFile.name);
})();

［async］と［await］

さて、ここまで［async］をスルーしてきましたが、今まで【CEP】のコマンド（純粋なjavascript部分以外）や【ExtendScript】は基本的に同期処理っぽかったので実はよく知らないのですが、どうやら非同期処理の模様です。［await］を使用しないと処理が先に先に行ってしまいます。

公式のサンプルをそのまま引き写しても、［async］の中で［await］を使えと怒られてしまいます。今回は、【無名async関数】でコーディングしてみました。

asyncな無名関数を使って非同期処理を書く

参考：Qiita

shock tmはjavascript自体を【ExtendScript】から習得してきたので、よく分かりませんでしたが、慣れるしかありません。っということで次回に続きます。

スポンサーリンク

More from my site

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です