【CEP Extensions】アプリケーションのバージョン番号をパネルに表示
公開日：2018年5月26日
メニューから「○○について」をクリックすると見られるバージョン番号を、パネルにも表示しよう。ということで、エクステンション作成の肝となるであろう部分を理解するために作りました。
操作方法
対応アプリ（Photoshop、Illustrator、InDesignそれぞれCC 2015~2018）を起動した状態で、［ウインドウ］メニューから［エクステンション］を開き［ClickGetVersion］を選択します。
開いたパネルの「取得」ボタンをクリックすると、アプリケーション名とバージョン番号がパネルに表示されます。
「リセット」ボタンでパネルを開いたときの状態に戻ります。
スクリプトに関して
ClickGetVersion.zxpをダウンロード（dropbox）
zxpファイルをダウンロードし、インストールする手順（外部サイト）
今回のは、「jsxで取得した情報をパネル側に受け渡す」のを理解するのが狙いでした。コードの編集は、index.html、main.js、hostscript.jsxの3つを行ったり来たりする必要があります。
index.html
…前略…
<p id="info">ここにアプリのバージョンが入ります</p>
<br />
<button id="get" class="topcoat-button--large hostFontSize">取得</button>
<button id="reset" class="topcoat-button--large hostFontSize">リセット</button>
</div>
</div>
<script src="js/libs/CSInterface.js"></script>
<script src="js/libs/jquery-2.0.2.min.js"></script>
<script src="js/themeManager.js"></script>
<script src="js/main.js"></script>
</body>
</html> パネルを構成する要素に、それぞれidをつけています。<p id="info">は、hostscript.jsxで取得した情報を、main.jsでパネルに反映させるためつけたidです。
main.js（実行部分のみ抜粋）
$("#get").click(function () {
csInterface.evalScript('getinfo()',
function(res){
document.getElementById("info").innerHTML=res;
});
}); hostscript.jsx
function getinfo(){
var appver=app.version;
var appname=app.name;
return appname+appver;
}非常に理解に時間がかかったのがmain.jsとhostscript.jsxのやりとりです。「今回はjsxで取得したものをパネルに渡す」のためこれでもまだエクステンション作成では易しいほうみたいです。マジかよ。
ざっくり中で起こっている動作を示すと、
パネル上のgetのidがついているボタンをクリックすると、パネル側からcsInterface.evalScriptでhostscript.jsxを呼び出し、その関数getinfo()を実行し、取得した値（作例ではアプリのバージョン番号と名称）を受け取りreturnで外に出し、パネルのhtmlでinfoというidが付いている部分に反映する
ということをしています。
main.jsのevalScriptは、
csInterface.evalScript('hostscript.jsxの関数',returnを受け取ったときの処理)
と書く必要があります。ただhostscript.jsxの内容を実行するだけの場合は「returnを受け取ったときの処理」を記載しなくても動きますが、パネルに何かを反映したいときは、returnで取得した値を受け取ったときの処理を書かないとイカンわけですね。
今までのスクリプトの書き方はあまり関数を意識していなかったので、方法を変えていかないと…return文苦手だけど…苦手だけど…
広告