CEP Extension Primer 1 – Setting up tools

あいかわらず日中は暑いのですが、朝晩に涼を感じる頃合いになってきましたね。通勤電車も制服組が復帰して賑やかです。特に傍若無人な小学生がｗ
しかし、わたしの日常はこれっぽっちも変わるわけではないのですがｗ
で、今回はCEP絡みをまとめにかかった第一弾ということで、エクステンションの変遷とツールのセットアップに関する情報をお届けしておきます。えーと、ちょっとまじめに書いてます。

Adobe社が提供する機能拡張環境
Adobeが各アプリケーション向けに提供する機能拡張機能はいくつかありますが、まず思いつくのがExtendscriptと呼ばれるJavascriptやApple Script、Visual Basic等のスクリプトシステムを利用してアプリケーションオブジェクトをコントロールする方法です。メリットとしては開発・デバッグ環境が整っていて使いやすいということが筆頭にあげられるでしょう。しかし、各アプリケーションにおいて、オブジェクトモデルの差異は大きく、実装レベルもまちまちです。また、同じコードで各アプリケーションをコントロールすることはできません。インタプリタであるために動作が遅いという難点もあります。
次に挙げられるのが各アプリケーションに用意されるSDKを利用してネイティブオブジェクトをコントロールするプラグイン。こちらはC++を利用するために作成者を選びます。しかも、多くはローカライズされたドキュメントが存在しません。それどころか英語のリファレンスさえ整えられていないものもあります。
しかしながら、ネイティブオブジェクトをダイレクトにコントロールする為に高速で動作する事や、多くの場合サポートするオブジェクトが一番多いのがこのネイティブ系の利点といえるでしょう。
続いてAdobe Extension SDK／Adobe Creative Suite SDKですが、基本的にドッキング可能なフローティングパネル形態のエクステンションを作成するためのツールです。比較的新しい仕組みで最初にリリースされたのはCS5ファミリー向けでした。現在まで各リリースに対応したライブラリがCS/CCメジャーリリースごとに提供されていますが、基本的に上位互換ですので、アプリケーション自体のオブジェクトモデルの変更がない場合はmanifestファイルの編集のみで処理できます。今回からのシリーズではこのAdobe Extension SDK（CEP Extension）に焦点を当てて解説していくことにします。

Adobe Extenison SDK/Creative Suite SDKの歴史的変遷と概要
Creative Suite SDKとしてスタートした当初はFlashをベースとしたエクステンションであり、ユーザーインターフェースはFlexによるものでした。利用するオブジェクトモデルはExtendscriptが利用するScripting Document Object Modelですが、独自のラッパークラスを用意することでExtendscriptと比較すると２倍以上のパフォーマンスを得られました。ベースとなる技術はAir/Flexですから、Actionscript3の豊富なライブラリを利用出来る事もアドバンテージの一つでした。Actionscript自体はそこそこ枯れた言語ですから、データベース・ネットワークソケット・圧縮・暗号化…列挙するまでもなく様々なライブラリが出揃っており、迅速な開発を可能足らしめました。開発者が特に気を使うのがコードの拡散ですが、この件も中間コードにコンパイルされたswfを扱うFlashインターフェースでは特に問題になりませんでした。また、Extendscriptで書かれたファンクションをダイレクトにinvokeすることも可能で、豊富なJavascriptリソースの再利用とパフォーマンスのチューニングをトレードオフしながら調整できるという非常に柔軟性に富んだ仕様でした。
この状況が一変するのがCCのリリースでした。この前後にFlashベースのエクステンションの廃止がアナウンスされると同時にHTML5＋CSS3＋JavascriptをベースとしたCommon Extensibility Platformアーキテクチャのリリースが発表されました。この前後の経緯についてはhttp://chuwa.iobb.net/tech/archive/2013/11/aboutcep.htmlに書いてあります。
これはCEF（Chirome Embeded Framework）を中核としたアーキテクチャであり、Javascript実行エンジンはV8エンジンとなります。このCEP上で動作するエクステンションはHTMLとJavascriptで構成され、jqueryやAngularJS等の各種フレームワークも利用可能です。さらに、2014以降のバージョンにおいてはnode.jsが搭載されNPMが利用可能となり一段と利便性が良くなっています。
アプリケーションとのインターフェースにはExtendscriptオブジェクトモデルが利用されているため、従来から利用してきたJavascrriptの資産を引き続き利用できます。現在の対応状況ですが、PhotoshopがCC2014以降Flashランタイムを除去した影響でPhotoshopCC2014以降においてFlashベースのエクステンションが動作しません。しかしながら、全てのアプリケーションからのFlashランタイムの削除がアナウンスされて久しいのですが、Illustrator及びIndesignファミリーからは未だにFlashランタイムが削除されていません。その為にFlashベースのエクステンションが現在も利用可能です。
先に「基本的にドッキング可能なフローティングパネル形態のエクステンションを作成する」と書きましたが、他にフローティングパネル、モーダルダイアログ、モードレスダイアログや非表示エクステンションを作ることができます。しかし、各種の形態については各アプリケーションでのサポート状態がまちまちです。フローティングパネル以外を作成する場合はご注意下さい。また、当該ドキュメントにおいて単にパネルと表記されるものはドッキング可能なフローティングパネルを意味します。
ネイティブオブジェクトを扱うPlugin用のSDKにおいても、ADM（Adobe Dialog Manager）が廃止された事に伴いCEPベースのエクステンションパネルをUIとして利用するようになっています。Adobe社としてはユーザーインターフェースをプロプライエタリなものから標準的な技術へと切り替えることにより生産性や保守性を高める意味合いもあるでしょうが、自社のコード管理にかかるコスト（保守・開発）をどのようにマネジメントしていくかと言うことの方がウエイトが大きいのかもしれません。穿った見方ではありますが……。
しかしながら、今ではCEPも版を重ね機能的にも充実してきました。現状ではドキュメント類の整備はお世辞にも追いついているとはいえません。むしろ、まったく進んでいないと言う方が的確に現状を表すでしょう。ましてや日本語の情報なんて…トイウコトデ、ここらへんで情報を集約する作業を行う頃合いだろうとも思うのです。しかしながら、片手間で進めるために一体どれだけかかるのか不明です。期待しないでお待ちください。第１回は、開発環境のセットアップから解説します。

開発環境
開発環境についてはいくつか考えられます。それらをリストアップしてみましょう。

1. テキストエディタ
2. Extension Builder 3
3. Bracket
4. その他

まず１番目ですが、このCEP系のエクステンションというのは構造がHTML+Javascript＋Extendscript＋XMLですから全てのファイルがテキストエディタ１本で作成可能です。実
際にわたし自身が一番利用頻度が高い環境でもあります。
次にExtension Builder 3ですが、こちらはEcripseのプラグインとして提供されるもので、Adobe Labsよりダウンロード可能ですが、開発は既に停止しています。

上のイメージはExtension Builder 3の編集時の状態です。Eclipseですからコードの保守・管理といった部分においては申し分のない環境です。一連のデバッグ機能とパッケージ機能を内包しているので便利ではあるのですが、セットアップの難易度が高い（ドキュメントがしっかりしていないのが原因です。）事と、CC2015リリースのアプリケーションには対応していません。少々手を入れると対応させることは可能ですが、完全に対応させることはできません。わたしの環境からは既にドロップしました。しかしながら、公式を好む方には良い選択肢であることには変わりありません。こちらをご利用希望の場合は以下を一読ください。

http://chuwa.iobb.net/tech/archive/2013/07/extension-builder-3.html

３番目はBracketです。プロジェクトフォルダごと読み込んで編集ができますし、なによりAdobeのエバンジェリストの方がCreative Cloud Extension Builderという機能拡張を提供してくれていますから、エクステンションプロジェクトを雛形から簡単に生成することができます。利便性も高く、現状ではこれが第一選択となるでしょう。但し、この機能拡張 も最新のCSInterface6には対応していません。しかしながら、プロジェクトのCSInterface.jsをver.6に交換する事で対処可能ですし、CEP系のエクステンションというのは基本的にアップコンパチですからマニフェストのバージョンレンジを書き換える事によっても対応させることが可能です。
いずれの方法を取るにしてもパッケージ処理についてはわたしが公開しているzxpPackagerをご利用いただけます。手間のかかるコマンドライン入力を隠蔽する形で処理しますのでパッケージ処理が楽になります。CS5/6に関してはbuilderにてエクステンションをコンパイル・パッケージ可能になっています。以下に各種ツールへのリンクを挙げておきましょう。

http://chuwa.iobb.net/tech/archive/2012/06/creative-suite-sdk-builder.html
http://chuwa.iobb.net/tech/archive/2012/06/windowsbuilder.html
http://chuwa.iobb.net/tech/archive/2015/08/zxp-package-tool-for-cc.html

現時点では、このBracketを利用した開発をお奨めしています。その他色々と書けない事も絡むのですが、順次情報はお届けしますのでお待ちください。
あと一つ紹介しておかなければいけないものがあります。Configuratorシリーズの事なのですが、開発自体は完全に終了しています。今後Configuratorとしてリリースされるものはありませんが、CS5／6ではこの選択肢は魅力的なのも事実です。しかし、今年の春以降、パッケージ処理ができなくなりました。これはzxpSignToolの変更の影響です。大元が変わったためにパッケージ処理が不可能となりました。しかしながら、方法が無いではありません。デプロイかけたプロジェクトに対してmanifestファイルを手動で追加してbuilderでパッケージ処理を行えば処理可能です。以下に色々と書いてありますので興味のある方は一読下さい。

http://chuwa.iobb.net/tech/archive/2013/07/configurator4.html
http://chuwa.iobb.net/tech/archive/2013/08/hacking-configurator4-rev2.html
http://chuwa.iobb.net/tech/archive/2013/08/html-panel-reference-for-confi.html
http://chuwa.iobb.net/tech/archive/2014/06/configurator4-1.html

Bracketのセットアップ
長々と書きなぐっていますが本命のBracketのセットアップを説明しましょう。
まずはBracketのダウンロードから

http://brackets.io

インストールインストラクションは上記のページでご確認下さい。
インストール直後のBracketは機能が貧弱でとても使えたものではありません。そこで次に必要な作業が機能拡張を追加することです。まずファイルメニュー→機能拡張マネージャーと辿って機能拡張マネージャーを起動します。

入手可能タブをクリックすると入手可能なエクステンションがリストアップされます。
エクステンションはかなりの数があって一々見て回ると、それこそ日が暮れそうになりますから、必要なものを検索して順次インストールするというのが理想的です。
ということで、わたしが導入しているものをリストアップしておきます。Brackets Outline List、HTML Block Selector、Code Folding、Indent Guides、JSHint、Minimap、Rename JavaScript Identifier、Beautify、Brackets Bookmarks、Brackets File Icons、Brackets Tools、JavaScript Globals、Show Whitespace、String Convert、Tabs – Custom Working、Theseus for Brackets、colorHints、Whitespace Normalizer、Paste and Indent。又、Webを検索するともっと的確な情報もあるかもしれません。自分の好みに合うものを導入して下さい。
これらは機能拡張マネージャーの検索窓にペーストすることで検索→インストール可能です。
ここまでの作業で通常のHTML+Javascriptの編集には事欠かない環境となるでしょう。また、Bracketや各種機能拡張についての細かい解説は今回の趣旨ではありませんので割愛します。回線状況にもよりますが、ここまでのセットアップに必要な時間は30分以内といったところでしょうか。まったく便利な世の中になったものです。
では、つづいて、エクステンション作成用のツールを導入します。こちらも機能拡張ですから機能拡張マネージャーでCreative Cloud Extension Builderを検索します。
コレですね。迷わずインストールしましょう。
上のようにメニュー右端にCC Extension Builderメニューが追加されます。
ドロップダウンしてみます。
２項目ございます。上のものは、あのPlayerDebugModeを自動的に設定してくれるものです。
ここでPlayerDebugModeの制限の意味を記しておきましょう。
まず、CEP Extensionと言うのはかなりアプリケーションの深い所と連携できる機能があります。また、アプリケーション上で展開されているドキュメントのほぼ全ての情報ににアクセスすることが出来るものです。極端なことを言えば、システムに食い込むプラグインや実行ファイルも添付できたりします。もうおわかりでしょう。悪意のある者がエクステンションを作った場合、端末情報やドキュメントが包含する個人情報等が流出し放題になる可能性をはらんでいるのです。ですからAdobeは基本的に作成者が判別できない（インストーラー経由で無い）エクステンションを実行することを許しません。しかしながら、エクステンション開発者が実際に開発作業において、デプロイ→テストの流れの中にいちいちインストール作業を要求するというのは少々問題が有ります。そこを回避する為の仕組みがこのプレイヤーデバッグモードというものなのです。
ついでにふれておくと、Adobe社は将来的にエクステンションマネージャーは廃止し、エクステンションのインストールを自社のAddOnsサイト経由のもののみに絞る意向のようです。しかしながら、デベロッパーが自身で開発するセルフインストーラーは排除しないようです。どうなるかはまだはっきりしていませんが。
戻って、CC Extension Builderメニューについてです。このエクステンション自体はCC2014対応となっています。ですから、メニューで設定できるデバッグモードはCC2014のものです。その他のものに関しては以下をご覧ください。

PlayerDebugModeの設定
現在提供されているAdobe Extension SDKの前身であるCreative Suite SDKのver.1.5がCS5エクステンション向けにリリースされたのが2011年の春なのですが、当時はFlashベースでアプリ開発フローはFlexとかAIRのものでした。当時もFlashプレーヤー絡みのデバッグではこのモードの設定が必須でした。このCSSDKも同一のテクノロジーを流用したものですからPlayerDebugModeでのコントロールが盛り込まれたことは自然な成り行きでしょう。
ここで注意点なのですが、CS5以降の各メジャーバージョンに対してそれぞれにモード設定が必要となります。必要なものを設定して下さい。

Macintosh

• CS5/5.5     ~/Library/Preferences/com.adobe.CSXS.2.5.plist
• CS6     ~/Library/Preferences/com.adobe.CSXS.3.plist
• CC     ~/Library/Preferences/com.adobe.CSXS.4.plist
• CC2014     ~/Library/Preferences/com.adobe.CSXS.5.plist
• CC2015     ~/Library/Preferences/com.adobe.CSXS.6.plist
• CC2017     ~/Library/Preferences/com.adobe.CSXS.7.plist
• CC(2018)     ~/Library/Preferences/com.adobe.CSXS.8.plist

Windows
レジストリエディタを開き下記の必要なキーを設定して下さい。

• CS5/5.5     HKEY_CURRENT_USER/Software/Adobe/CSXS.2.5
• CS6     HKEY_CURRENT_USER/Software/Adobe/CSXS.3
• CC     HKEY_CURRENT_USER/Software/Adobe/CSXS.4
• CC2014     HKEY_CURRENT_USER/Software/Adobe/CSXS.5
• CC2015     HKEY_CURRENT_USER/Software/Adobe/CSXS.6
• CC2017     HKEY_CURRENT_USER/Software/Adobe/CSXS.7
• CC(2018)     HKEY_CURRENT_USER/Software/Adobe/CSXS.8

全て「PlayerDebugMode」というエントリを追加して値を1（String）に設定します。
ここまでで準備が完了したことになります。

追記（Nov.8.2017）
現在はコマンド利用を推奨しています。

Macの場合／ターミナルから以下のコマンドを実行
defaults write ~/Library/Preferences/com.adobe.CSXS.8.plist PlayerDebugMode 1

Windowsの場合／コマンドプロンプトから以下のコマンドを実行
reg add HKEY_CURRENT_USER\SOFTWARE\Adobe\CSXS.8 /t REG_SZ /v PlayerDebugMode /d 1 /f

必要なCSXSバージョンを適宜書き換えて実行して下さい。

※残念ながら各アプリケーションがサポートするCSXSバージョンは入り混じった状態です。詳細は以下のリンクにて確認して下さい。
https://forums.adobe.com/docs/DOC-8741

ついでにCEPについての情報は以下に集約されています。ご確認下さい。

https://github.com/Adobe-CEP/CEP-Resources

次回はプロジェクトの設定について解説します。