cep-guide-banner

CEPガイド6:ツール・パネル間のイベント

本記事はCEPスーパーメガガイドのPart 6です。
エクステンションの参考用ソースはこちら

前回の記事でツール側のスクリプトをほぼカバーしたが、残った課題はツールとHTMLパネルの間のイベントのやり取り。

概要

  • パネルVM側でのイベント処理は簡単。パネル同士、エクステンション同士、ツール同士のイベントやり取りを出来るし、仕組みはツールによって変わらない。
  • ツール側からパネルVMへのイベントはツールで異なる:
    • ExtendScriptに対応するツールでは、Pluginを使ってカスタムイベントをパネルに渡せる。
    • FlashとPhotoshopの場合、ツールの多くのネイティブイベント(ファイル編集など)をパネルから直接取得できる
    • Flash・PS以外のツールではいくつかのネイティブイベントをとれるが、場合によってはツールVM側で取得してからカスタムイベントとしてパネルに渡す必要がある
パネルVMでのイベント取得・発送

パネルVMで出来るイベント処理は全てCSInterface.jsにある。(CSInterfaceの概要についてはPart 3まで)

パネル側のカスタムイベントのやり取りは上記の通り。CSEventクラスはCSInterface.jsに定義され、詳細を把握するにはソースを見るのが最も有効的。

エクステンション同士のイベントは、デフォルトの仕組みである。イベント名の名前空間はグローバルなので、イベントの type さえ一致すれば他のエクステンションに渡せる。イベント名が被らないように、IDをプレフィックスするのがお勧め:

パネルVMのイベントの使い方

カスタムイベント以外に、CEPの仕組みからのイベントもパネル側で取得できる。各ツールにはUIの背景色を変更できるが、その変更イベントを取ればHTMLパネルのデザインをツールに合わせて、標準UIの一部に見せることが出来る。しかし色情報はイベントオブジェクトに入っていないのでイベントを取ったらCSInterfaceから取得する。方法は:

Continue reading

cep-guide-banner

CEPガイド5:ツール連携

本記事はCEPスーパーメガガイドのPart 5です。
エクステンションの参考用ソースはこちら

いよいよ、カスタムパネルからホストツール側のAPIを呼ぶ話まで参りました。ちょっと詳細になるがどうぞ付き合ってください。

概要・設計

CEP 5に対応するアドビツールはそれぞれ、ツールの自動化などのためにJavascriptエンジンを実装する。しかし、これはエクステンションのパネルが実装するブラウザ環境のJSエンジンと違うもの。そのため、エクステンションとツールの連携を作るには、2つのJavascript環境をまたぐやり取りになる。

本記事では2つJS環境をパネルVM、そしてツールVMとする。

cep-architecture

つまり、ツールの内部機能(ファイルの編集など)はツールVMのみから直接触れる。パネルVMのスクリプトから触れるには、ツールVMでスクリプトを実行させるコマンドを利用する。

そしてツールによって、ツールVMはさらに2種類ある。Flash ProはJSFLになり、それ以外のツールはExtendScript。それぞれのAPIが異なるが、呼び方と使い方は主に一緒。ちなみに、JSFLとExtendScript用スクリプトには「jsfl、jsx」の拡張子を使うことが歴史的に多いが、言語はどちらも標準Javascriptである。拡張子も任意なので「.js」を使っても問題はない。(パネル用とツール用のスクリプト間違わないように拡張子を分けることをお勧めするが。)

ツールVMでのスクリプト実行

パネルコンテンツからツールVMでスクリプトを実行するには、本シリーズのPart 3で説明したCSInterfaceオブジェクトを使う。 evalScript メソッドでツール用のスクリプトをストリングとして渡す。例えばツール側から alert() を呼ぶには:

cep-alert

evalScript に渡すストリングはツールVMによって実行される。そしてコールバック関数も渡すと結果も取得できる。ツールVMを学ぶため私は、パネルVMでこんなこんな関数を用意した:
Continue reading

cep-guide-banner

CEPガイド4: Node.js との連携

本記事はCEPスーパーメガガイドのPart 4です。
エクステンションの参考用ソースはこちら

概要

Node.jsとはChromeのJavascriptエンジン上にできてる開発プラットフォーム。一言で言うとサーバサイドJSのようなもの。CEP 5に対応する各アドビツールが内部的にNode.jsを組み込み、エクステンション開発の際にそれがサーバと思って使える。Nodeには豊富なコアモジュールもあり、ビックリするほど数多くのサードパーティライブラリもあるので、JS開発者には欠かせないツールである。

Nodeのコアモジュールの使い方

コアモジュールは、CEP 5エクステンションのJSから直接インポートできる。通常と同じく、 require を利用する:

 外部モジュールの使い方(手動)

外部のNode.jsモジュール(自分で書いたものでもnpmで取得したものでも)も簡単に使える。パネルからの呼び方は上記と変わらないので必要な作業はソースに入れるだけ。

手動でモジュールを追加する場合は、エクステンションのフォルダに node_modules を作って、モジュールのソースをその中に入れる。例えば、ファイルをOSのデフォルトアプリで開くには、openというモジュールのソースを取得して node_modules に入れる:

cep-modules

そうするとソースからrequireできるようになる:

Continue reading

cep-guide-banner

CEPガイド3:HTML開発とそのデバッグ

本記事はCEPスーパーメガガイドのPart 3です。
エクステンションの参考用ソースはこちら

HTML開発の概要と注意点

CCツール上のHTML5パネルはCEFによって表示される。CEFのエンジンはChromeと同じなので、CEPパネルが機能的には大体Chromeと変わらない。パネルがいわゆる「モダンブラウザ」と同じく、WebGLやWeb-RTCのような最新なWeb技術でも使える(使おうと思えば)。動いている様子を見たい方には、色んな機能を実装するこの参考用エクステンションがお勧め。

ようは、CEP向けのHTML開発はほとんど通常の制作と変わらないので、制作ツール・ライブラリ・フレームワークは基本的に問わない。

しかしパネルを囲んでいるのはブラウザではなくてCCツールなので、ブラウザに触れるAPIは思い通りに動かないことはいくつかだけがある。例えば window.open(url, "_blank") を呼ぶと、ブラウザと違ってCEFのウィンドウが出て来るので通常の動作をしない。こんな時はNode.jsの出番。URLをシステムのデフォルトブラウザで開くライブラリはいくつかもある(私が使ったのはnode-open)ので、簡単に実装できる。ファイルシステムに触れる時も、純HTMLのAPIではなくてNodeがお勧め。(Node.jsとの連携については本シリーズのPart 4までご参照を)

もう一つの注意点はパネルコンテンツの永続性。ユーザがパネルを閉じて、また開く場合にコンテンツが再リロードされるかどうかは、現時点ではCCツールで異なる。例えばPhotoshopではリロードされるがFlashならコンテンツが永続する。イベントのAPIを呼べがPhotoshopのパネルも永続することが出来る、その詳細はシリーズのPart 6 まで。また、パネル内でCookieは通常に使えるので、ホストツールが再起動しても設定を永続させたい場合はCookieを使おう。

CSInterface.js について

パネル内のJavascriptはCEFのスクリプトエンジンで実行されるので、ホストとなるCCツールのスクリプトエンジンとは異なる実行環境となる。ホストツールとの連携のためには、CEPチームが提供するCSInterface.jsというライブラリを使う。CSInterfaceには以下のような機能がある:
Continue reading

cep-guide-banner

CEPガイド2:開発の初め方

本記事はCEPスーパーメガガイドのPart 2です。
エクステンションの参考用ソースはこちら

開発環境について

CEP 5用エキステンションのソースファイルはHTML・JS・テキストしかないので、テキストエディタやHTML制作ツールさえあれば問題なく開発開始ができる。下記の外部アプリも役に立つかも知れない:

  • Node.jsを使うならインストールしよう。厳密に言うとなくても開発できるが、npmモジュールの取得などを出来たほうが便利。
  • ベータ状態だが、Extension Builder 3というIDEがAdobe Labsから提供されて、最新版はCEP 5に対応する。マニフェスト編集とか動作確認をやりやすくしてくれる。Eclipseベースなので、Eclipseに慣れている方にはお勧めだが、私はそうでもないので特に使っていない。EB3の使い方についてはこの記事までご参照を。
  • アドビのDavid Deraedtが作ったBracketsプラグインは参考になるかも知れない。だが現在はCEP 4用のもので、CEP 5の対応は準備中のようである。

ちなみに私はちょうどアドビプロモーションのためにエクステンションを作ったところだが、Edge AnimateとBracketsしか使わなかった。

ソースの構成

ext-source-1

最低限のCEP 5パネルのソースに必要なパーツは2つ:マニフェストと何かのHTML。マニフェストのパスは  /CSXS/manifest.xml と固定される(CSXSはCEPの旧名)。HTMLのパスはマニフェストに設定するので、 /index.html ではなくても良い。

マニフェストXMLについて

ミニマルなマニフェストはこんな感じになる:

Continue reading

cep-guide-banner

CEPガイド1:紹介と技術の概要

本記事はCEPスーパーメガガイドのPart 1です。

CEP 5の概要

2014年6月のCreative Cloudアップデートで、アドビツールを拡張するフレームワークが大きくアップデートされた。「CEP 5」(Common Extensibility Platform・共通拡張プラットフォーム)と言い、多くのアドビツールが共通に対応する拡張機能を作れるようになった。 そしてCEP 5の特徴は、拡張機能の開発がWeb技術を使うところ。UIは標準HTML5となり、バックエンドではNode.jsを使える。NodeのコアAPI以外にも幅広いモジュールのエコシステムがあるので、人気なWebサービスの対応から外部デバイスとの連携まで、CCツールのエクステンションから楽に出来ることになる。

使用事例

プロとして使うツールを自分用にカスタマイズ出来ることは大事。CEP 5の使い方は自由だが私には主に3つのような事例で使われる、のではないかと想定する:

Continue reading

cep-guide-banner

CEPスーパー メガ ガイド: HTML5+Node.jsでAdobeのツールを拡張する

今年6月でCreative Cloudツールの2014版アップデートがリリースされ、色んな新機能が発表されましたが、目立たないためによく見逃されたその一つは「CEP 5」と言います。CEP 5とは、9つのCCツールが共通に対応する、HTML5とNode.jsの拡張フレームワークのこと。要は、Javascriptさえわかればアドビのツールを好きにカスタマイズ出来るわけ! panel-banner だがCEP 5を使いこなすに必要な情報が特に日本語ではまだ見つかりにくいので、いくつの記事に分けて紹介します。

CEP 5スーパーメガ ガイドのシリーズ

そしてシリーズで紹介する各機能を実装するサンプルエクステンションを用意しましたので、困った時はそちらまでご参照ください。

では、次の投稿でCEP 5の技術の全体像を紹介します。

CEP-dev

CCツールのカスタムパネル、とその作りやすさについて

短く言うと、PhotoshopのUIの中で行われるマーケティングプロモーションを作りました。

最初から説明します。本日、アドビマーケティングの「Pinch In サマーキャンペーン」が開始して、「アドビのエバンジェリストがおくる Photoshop 謎解き」というプロモーションがライブアップされました。流れは、ユーザがPhotoshop CCの2014版専用のアドオンをインストールして、そのアドオンのカスタムパネルの中で現れるクイズとパズルをクリアすれば当選に応募できる、という感じです。当たる賞品はステキですのでぜひ一度トライしてみてください。

なお本記事は、このカスタムパネルを作る背景の技術についてです。まずは、CC 2014ツールのカスタマイズを実装している間に学んだ点: Continue reading

Parallax the easy way

It occurred to me a while back that it would be pretty easy to make parallax sites with Edge Animate – all you’d have to do is add a little code to sync up the browser’s scrollbar and the animation timeline.

So I whipped up a demo that both demonstrates and explains how to do it. It speaks for itself, have a look:

As always, questions/comments are welcome!

5分で済む Firefox OS アプリ開発 with PhoneGap / Cordova

話題を集めているFirefox OSですが、PhoneGapを使うとアプリ開発を5分でできますよ!嘘じゃない。方法はこんな感じです。

1. PhoneGap/Cordovaアプリをつくる

上記の cordova prepare コマンドで、Firefox OS向けのWebアプリが用意されます。

(PhoneGap/Cordovaとは何か、そして初め方についてはこちらをご参照ください!)

2. Firefoxを起動
pgff-1

3. 「about:app-manager」を開く

そして「Add Packaged App」で、アップマネージャにアプリを追加します
pgff-2
Continue reading

technical evangelist, Adobe Japan