Experts.jp日本に、もっとエキスパートを。株式会社)Adobe,JavaScript,Node.js,Photoshop2013年10月29日0click01254私が所属するアドビはご存知のとおり、制作ツールの会社です。近年はそのアドビの制作ツールを拡張する方法は、すべてHTML5に依存しています。今回は3つの例をピックアップして紹介したいと思います。GeneratorPhotoshopがNode.jsのサーバを組み込むようになりました。最新版のPhotoshopではNode.jsを使ったアプリをプラグインとして起動できるので、Node.jsアプリからPhotoshopの内蔵的なDOMを直接いじれます。PhotoshopでできることとNode.jsでできることが一緒になった、というかんじです。Generatorの設計と使い方」を参照してください。カスタムパネルCCバージョンのアップデートから6つのアドビツールが共通の拡張パネルに対応しますが、そのフォーマットは“純”HTML5です。設計については、各ツールが拡張パネルのためにCEFを実装するので、コンテンツの表示はモダンなブラウザと変わりません。任意のHTML5・CSS・JavaScriptコンテンツを決まったフォーマット(コンテンツ+マニフェストをZipする)にパッケージすると、そのコンテンツをツール内のパネルとして使えます。パネルのJavaScriptがツールの内面DOMにもアクセスできるので、基本的にツールを自由にカスタマイズできます。パッケージの仕方とか設計の詳細についてはこちら。最後に、ツールの拡張だけではなく、開発ツールをHTML5で作ることも増えていますが、その代表的な事例はBracketsです。BracketsとはHTML5・CSS・JavaScriptの開発専用にデザインされたコードエディターですが、ツール自体がHTML5でできているので、もちろん拡張する際もHTML5を用います。言っても、ツールがオープンソースなので、自分用にフォークすることも当然自由です。Codeの使い方」で詳しく書いています。[ADC]の「初めてのBrackets拡張機能の作成」でも紹介されています。まとめ日常的に使うツールの進化は、アップデートを待つのではなく、自分の仕事に合わせるように拡張することがこれからますます増えていきます。HTML5を使って拡張することは、HTML5開発者には嬉しい話だと思います。自分でやる作業の自動化などもできるし、会社のワークフローを改善する仕事の可能性も出てきます。少なくともアドビのツールの拡張はたいていHTML5ベースになるので、Web開発者は一度目を通すべきでしょう。