使用した技術について

アプリの作成には、下記の図にある技術を使用しました。フレームワーク・ライブラリーとして、CreateJSBootstrapAngular 2を使用しています。アプリとしてパッケージングするためには、ElectronApache Cordovaを使用しています。また、開発効率を上げるための開発言語としてTypeScriptSassを使用しています。

使用したライブラリー・フレームワーク

ライブラリーやフレームワークを組み合わせて使用すると、スピーディーな開発を行うことが可能です。今回は主に3つのライブラリー・フレームワークを使用しています。

パーティクルプレビュー機能にCreateJSを利用

CreateJSはHTML5 Canvas上でのグラフィカルな表現に最適なJSライブラリーです。主にパーティクルの表現にCreateJSを使用しています。

また、本アプリの特徴的な機能「SVGファイルの書き出し」ですが、CreateJSが内部でベクターグラフィックスの情報を管理しているため可能となっています。ただし、CreateJS本体のみではSVGファイルとして書き出すことができません。そのため、「SVGExporter」というJSライブラリーを使用しています。SVGExporterはCreatelJSの公式のGitHubリポジトリ内で提供されています。

CSSのベースはBootstrapを利用

BootstrapはWebページ用の便利なコンポーネントが多数用意されているCSSフレームワークです。本アプリでは全体のデザイン設計に使用していますが、主にレスポンシブ対応や設定パネルに使用しています。

シングル・ページ・アプリケーション構築のためにAngular 2を利用

Angular 2はアプリケーションフレームワークです。本アプリでは全体を構成するフレームワークとして使用しています。Angular 2を使用するとHTMLの構造とデータをまとめてコンポーネントとして管理できます。そして、コンポーネントと関連付けたデータの変更を検知して別のコンポーネントへの値の反映が可能です。例えば、設定パネルのスライダーを動かすと、プレビュー画面へパラメーターが反映されるところへ使用しています。

フレームワークAngular 2については、カンファレンス「ng-japan」で発表した資料「クリエイティブの視点から探るAngular 2の可能性」を参照ください。Particle Developの開発で役だったAngular 2の仕組みを詳しく解説しています。

▲2016年3月に開催された Angular のカンファレンスでの発表資料(登壇者:ICS池田)

次のページではHTMLコンテンツのパッケージングについて紹介します。