HTML5Experts.jp

アドビの制作ツールをHTML5で拡張する3つの方法

私が所属するアドビはご存知のとおり、制作ツールの会社です。近年はそのアドビの制作ツールを拡張する方法は、すべてHTML5に依存しています。今回は3つの例をピックアップして紹介したいと思います。

Node.js+Photoshop Generator

PhotoshopがNode.jsのサーバを組み込むようになりました。最新版のPhotoshopではNode.jsを使ったアプリをプラグインとして起動できるので、Node.jsアプリからPhotoshopの内蔵的なDOMを直接いじれます。PhotoshopでできることとNode.jsでできることが一緒になった、というかんじです。開発と設計の詳細については私のブログ「Node.js+Photoshop: Generatorの設計と使い方」を参照してください。

HTML5 カスタムパネル

CCバージョンのアップデートから6つのアドビツールが共通の拡張パネルに対応しますが、そのフォーマットは“純”HTML5です。設計については、各ツールが拡張パネルのためにCEFを実装するので、コンテンツの表示はモダンなブラウザと変わりません。

そして任意のHTML5・CSS・JavaScriptコンテンツを決まったフォーマット(コンテンツ+マニフェストをZipする)にパッケージすると、そのコンテンツをツール内のパネルとして使えます。パネルのJavaScriptがツールの内面DOMにもアクセスできるので、基本的にツールを自由にカスタマイズできます。パッケージの仕方とか設計の詳細についてはこちら

Bracketsとその拡張

最後に、ツールの拡張だけではなく、開発ツールをHTML5で作ることも増えていますが、その代表的な事例はBracketsです。BracketsとはHTML5・CSS・JavaScriptの開発専用にデザインされたコードエディターですが、ツール自体がHTML5でできているので、もちろん拡張する際もHTML5を用います。と言っても、ツールがオープンソースなので、自分用にフォークすることも当然自由です。

Bracketsのエディターとしての特徴については、こちらも私のブログ「Brackets・Edge Codeの使い方」で詳しく書いています。拡張の開発と配布についてはAdobe Developer Connection [ADC]の「初めてのBrackets拡張機能の作成」でも紹介されています。

まとめ

日常的に使うツールの進化は、アップデートを待つのではなく、自分の仕事に合わせるように拡張することがこれからますます増えていきます。しかし、HTML5を使って拡張することは、HTML5開発者には嬉しい話だと思います。

自分でやる作業の自動化などもできるし、会社のワークフローを改善する仕事の可能性も出てきます。少なくともアドビのツールの拡張はたいていHTML5ベースになるので、Web開発者は一度目を通すべきでしょう。