Extension Builderで新規プロジェクトを作成したときに作られるサンプルは、ボタンがクリックされたらアラートを出すというものです。その仕掛けはmain.jsに書かれています。

 

<main.js>

(function () {
    var csInterface = new CSInterface();
    function init() {
        themeManager.init();
        $("#btn_test").click(function () {
            csInterface.evalScript('sayHello()');
       });
    }
    init();
}());

main.jsはパネル起動時にHTMLファイルから呼び出され、V8 javaScriptエンジンで実行されます。「themeManager.init();」の部分はこのサンプルが用意しているもので、必須ではありません。

 

何はともあれ、ユーザーのアクションを拾うための仕掛けが必要になります。このサンプルでは以下のように、jQueryを使ってボタンにコールバックのフックをかけています。

$("#btn_test").click();

HTMLにあるID#btn_testがクリックされたら、引数の関数を実行します。ここでは無名関数を使って書かれていますが、あらかじめ関数化されたものを引数に渡すことも可能です。

 

<ExtendScriptの実行>

 

上記.click関数内に書かれている以下の文がExtendScript側を呼び出す手順になります。

csInterface.evalScript('sayHello()');

 

ここで使われるcsInterfaceオブジェクトは、あらかじめ関数の外側で宣言されています。

var csInterface = new CSInterface();

このようにExtendScriptへのアクセスは、CSInterfaceライブラリを実体化し、それを経由して行います。

なお、CSInterfaceオブジェクトの複製は関数内で行っても構いませんが、実際は複数のインターフェースに反応することが必要になりますので、このように関数の外側で宣言しておきます(関数ごとに宣言するのは効率が悪いので)。

 

CSInterfaceオブジェクト内にあるevalScript関数は、引数にあるExtendScriptで書かれた関数を実行します。

また、その引数となる関数は、マニフェストの<ScriptPath>タグに記述されている書類から検索されます。サンプルでは「hostscript.jsx」がそれにあたります。

なお、hostscript.jsxに記述されている関数sayHello()は以下のようなものです。

function sayHello(){
alert("hello from ExtendScript");
}

 

この手順さえわかってしまえば、既存のスクリプトをCEPパネル化するのは、それほど難しいものではないということがわかります。既存のスクリプトを呼び出し可能なように調整し、このhostscript.jsx(名称はマニフェストと一致していれば自由)に記述すればよいだけです。

 

<ExtendScript側から値を受け取る>

 

このサンプルでは関数を実行するだけですが、当然ながら関数からの返り値(Return文)を受け取ることも可能です。試しにhostscript.jsxの内容を以下のように書き換えます(あえて関数名はそのままにしました)。

function sayHello(a, b){
alert("hello from ExtendScript");
return a+b;
}

 

そして、main.jsの呼び出し部分を以下のように変更します。

csInterface.evalScript(
'sayHello(3,5)', function(x){console.log(x)}
);

evalScript関数の第2引数に関数を指定すると、その関数の引数に代入される形で値が返ってきます。そのままその関数内が実行されることになるので、ここではその値をコンソールに出力しています。

 

サンプル通りマニフェストに<Host Name="PHXS" Port="8088"/>と書かれているとすれば、ブラウザから「localhost:8088/」にアクセスするとコンソールの内容(計算結果)を確認することができます。

  

参照:デバッグの方法

Joomla templates by a4joomla