トップページ » DTP全般 » 【CEP Extensions】アプリケーションのバージョン番号をパネルに表示
公開日:2018年5月26日 最終更新日:2019年6月6日
メニューから「○○について」をクリックすると見られるバージョン番号を、パネルにも表示しよう。ということで、エクステンション作成の肝となるであろう部分を理解するために作りました。
対応アプリ(Photoshop、Illustrator、InDesignそれぞれCC 2015~2018)を起動した状態で、[ウインドウ]メニューから[エクステンション]を開き[ClickGetVersion]を選択します。
開いたパネルの「取得」ボタンをクリックすると、アプリケーション名とバージョン番号がパネルに表示されます。
「リセット」ボタンでパネルを開いたときの状態に戻ります。
ClickGetVersion.zxpをダウンロード(dropbox)
zxpファイルをダウンロードし、インストールする手順(外部サイト)
今回のは、「jsxで取得した情報をパネル側に受け渡す」のを理解するのが狙いでした。コードの編集は、index.html、main.js、hostscript.jsxの3つを行ったり来たりする必要があります。
…前略…
<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です。
$("#get").click(function () {
csInterface.evalScript('getinfo()',
function(res){
document.getElementById("info").innerHTML=res;
});
});
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文苦手だけど…苦手だけど…
【Illustrator】塗りブラシツールなどのブラシサイズを素早く変更するショートカット 13524 views
【InDesign/Illustrator/グレースケール画像】なぜ色がつかない? 6358 views
【InDesign】オブジェクトの位置をササッと入れ替える操作 5567 views
【InDesign】ベースライングリッド/カスタムベースライングリッドを設定 5114 views
【InDesign】InDesignタグを使うときの覚え書き 4756 views
【DTP】分版プレビューをする方法まとめ2014年版 4512 views
【InDesign/Illustrator】配置したグレースケールpsdファイルも着色できるが、いくつか注意が必要 4133 views
【Illustrator/InDesign】それぞれの[パスファインダー]パネルでできること、できないこと 4114 views
【InDesign】「拡大/縮小」に関わるショートカット 4051 views
【InDesign】サンプルスクリプトもかなり便利 3893 views
【Illustrator】[段組設定]を使った長方形の分割→結合→再分割 3723 views
【Illustrator】通常のレイヤーとサブレイヤーでは、オブジェクトのロック/表示の挙動が異なる 3673 views
【InDesign】[検索と置換]で文字をアンカー付きオブジェクトに一括置換 3635 views
【Illustrator/Acrobat】マルチアートボードから、まとめてpng/jpgで保存する方法あれこれ 3355 views
ツイート