Call Back from Extendscript
この所エクステンション周りに関する情報をまとめ読みする方が増えて来ました。で、わたしも試しに自身が書いたスクリプト絡みの記事を斜め読みして見ました。思いの外時間がかかりました。どうりで皆様、長居されるわけですね。無駄な文章も多いですしね。
最近、パネルを作る方が増えて来ました。ここで、ちょろっとご紹介させていただきます。まずはshspageさん。こちらではイラレのレイヤーのカラー絡みの不満に対する問題点を突き詰めた一品です。Illustrator系のパネルと言うのは公式のExchangeですら数が稼げてませんので、イラレに強い方のパネル参入は心強い限りです。続いてajabonさん。こちらはInDesign向けに作られた日常使用向けの品です。このパネル自体はConfigurator4で作られている物です。ちょっと使いたくて無理やりCC版作らせちゃいました。鯵さん、その節はゴメンなさい。お二方とも著名なスクリプターですので今後がとても楽しみです。
その他にもConfiguratorのテストやCCEB等の引き合いの声も聞いております。新しい物がリリースされましたら順次ご紹介させていただきたいと思います。また、エクステンションパネルの技術的な事に関しましてもご相談頂ければご協力させて頂こうかなって思ったりもします。お気軽にどうぞ。
さて、本題はここからです。Adobe社がCreative Cloud製品ラインに導入したCommon Extensibility Platformという機能拡張アーキテクチャではフロントエンドにChrome Embeded Frameworkが鎮座していらっしゃいますが、そのCEFがExtendscriptのScripting DOMにアクセスする為にはCSInterfaceクラスを利用します。
それほど大きなライブラリではありませんので、なめる様にご覧頂ければ利用方法は簡単に理解出来る様な代物です。
しかしながら、皆様お忙しそうですので、今回はわたしがIndesign用の分かりやすいサンプルを作っておきました。
こちらが今回作成したパネルです。IndesignCCのパフォーマンスメトリクスを表示するものです。
さて、詳細を見て行きましょう。
最初に見てみるのはパネルの構造です。今回利用するのAdobe社のエバンジェリストの方が作ったCreative Cloud Extension Builder for Bracketというフリーソフトです。
テンプレートを基に編集が始まりますが、以下のようなパネル構造になります。
./css/styles.css
./css/theme.css
./CSXS/manifest.xml
.index.html
./js/libs
./js/main.js
./js/themeManager.js
./jsx/hostscript.jsx
このファイル群で編集が必要なのは「index.html」「main.js」「hostscript.jsx」の３点と、恒例のmanifest.xmlです。その他は汎用のファイル群で、スタイルを調整したいならCSSを追加で修正するとかのスタンスで処理すれば宜しいかと思います。今回のパネルは前述の３点以外はCreative Cloud Extension Builder for Bracketのデフォルトの物を利用しています。
では、HTMLから
<p class="cdata" <!doctype="" html>
<html>
<head>
<meta charset=”utf-8″>
<link id=”hostStyle” rel=”stylesheet” href=”css/theme.css”/>
<title>Performance Metrics</title>
<style>
#message {
margin:1em;
width:330px;
border:1px solid gray;
padding:1em;
font-size:10px;}
</style>
</head>
<body>
<button id=”getMetrics”>Get Performance Metrics</button>
<div id=”message”></div>
<script src=”js/libs/CSInterface-4.0.0.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>
HTMLパネルは柔軟でフレキシブルかつインタラクティブなユーザーインターフェースが比較的楽に構成出来ると言えるでしょう。単純に比較する事は出来ませんが、ScriptUIより格段に扱いやすいというのがわたし自身の個人的感想です。
今回のパネルの構造はそれほど複雑ではありません、というより単純です。ボタンが１点とデータの書き戻し領域のみの単純な構成です。殆どがインクルードされるCSSやらスクリプトファイルの定義だと言うのが見て取れますね。面倒なのでstyleを直接定義していますが、本来はCSSに含めるべきでしょう。
次にメインのJavascriptファイルを見ます。
(function () {
‘use strict’;
var csInterface = new CSInterface();
function init() {
themeManager.init();
$(“#getMetrics”).click(function () {
csInterface.evalScript(‘$._getPM_IDSN.getPMetrics()’,
function(cb){
document.getElementById(“message”).innerHTML = cb;
});
});
}
init();
}());
今回はここだけにご注目ください。
$(“#getMetrics”).click(function () {
csInterface.evalScript(‘$._getPM_IDSN.getPMetrics()’,
function(cb){
document.getElementById(“message”).innerHTML = cb;
});
HTMLで書いたボタンにクリックイベントを割り当てている部分です。
CSInterfaceクラスのevalScriptメソッドを利用しますが、第１引数にはExtendscriptを直接記述します。この「$._getPM_IDSN.getPMetrics()」はmanifest.xmlで指定されたjsxファイルから読み出されます。第2引数はコールバックを受け取るためのJavascriptのファンクションを記述します。ややこしい事なのですが、第1引数のリターンはこちらに返される仕組みになっています。この例では返されたcbを先程のdivタグで定義したmessageに書き込みます。
最後にExtendscriptです。
$._getPM_IDSN = {
getPMetrics : function(){
var result = “”;
for (var a in PerformanceMetricOptions)
result += a + String.fromCharCode(9)
+ app.performanceMetric(PerformanceMetricOptions[a])
+ “<br />” + String.fromCharCode(13);
return result;
}
}
パフォーマンスメトリクスを取得するファンクションです。単純にプロパティをリストアップして値と並べて、テキストとして返すファンクションです。
ついでですのでmanifest.xmlも掲載しましょう。
<?xml version=”1.0″ encoding=”UTF-8″?>
<ExtensionManifest Version=”4.0″ ExtensionBundleId=”net.sytes.chuwa.getPM” ExtensionBundleVersion=”1.0.0″
ExtensionBundleName=”getPM” xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”>
<Author><![CDATA[Ten]]></Author>
<Abstract><![CDATA[]]></Abstract>
<ExtensionList>
<Extension Id=”net.sytes.chuwa.getPM” Version=”1.0″ />
</ExtensionList>
<ExecutionEnvironment>
<HostList>
<Host Name=”IDSN” Version=”[9.0,9.9]” />
</HostList>
<LocaleList>
<Locale Code=”All” />
</LocaleList>
<RequiredRuntimeList>
<RequiredRuntime Name=”CSXS” Version=”4.0″ />
</RequiredRuntimeList>
</ExecutionEnvironment>
<DispatchInfoList>
<Extension Id=”net.sytes.chuwa.getPM”>
<DispatchInfo >
<Resources>
<MainPath>./index.html</MainPath>
<ScriptPath>./jsx/hostscript.jsx</ScriptPath>
</Resources>
<Lifecycle>
<AutoVisible>true</AutoVisible>
</Lifecycle>
<UI>
<Type>Panel</Type>
<Menu>Performance Metrics</Menu>
<Geometry>
<Size>
<Height>400</Height>
<Width>395</Width>
</Size>
<MaxSize>
<Height>625</Height>
<Width>395</Width>
</MaxSize>
<MinSize>
<Height>200</Height>
<Width>395</Width>
</MinSize>
</Geometry>
</UI>
</DispatchInfo>
</Extension>
</DispatchInfoList>
</ExtensionManifest>
ご覧の通り、HTML5に対応出来るCSXSランタイムはバージョンが４となります。このバージョンはCCファミリーに搭載された最新の物です。ちなみにCS6はver.3、CS5／CS5.5はver.2が搭載されています。
えーと、zxpファイルも置いておきますね。StuffItとかに突っ込んで頂ければPKで始まるファイルですから解凍してもらえます。構造解析にご利用いただけたらと思います。もちろん、インデザインの監視にも有効ですので、そちらの用途にもご利用ください。