本記事は2016年1月26日(金)に開催されたCreateJS勉強会 (第7回) の発表資料「CreateJSで開発するクロスプラットフォームなアプリ開発〜ElectronとPhoneGapで広がる可能性〜」の後編となります。前編記事「高まるHTML5製アプリの需要」に続けて本記事ではHTML5製デザインツール「Particle Develop」の開発事例を紹介します。
HTML5製デザインツール「Particle Develop」とは
今回、Particle Developという美しいパーティクルを作れるHTML5製のデザインツールを作成しました。雪や炎、キラキラなどのパーティクル表現を作成でき、ベクターグラフィックスとなっているので、保存したSVGファイルはAdobe Illustratorで配置したり、再編集できます。ベクターのパーティクルデザインツールということが、他のツールにないParticle Developの特徴です。
▲Particle Developのキャプチャー画像。左側にパーティクルのプレビュー画面、右側にパラメータ設定パネルがあります。
なぜParticle Developを作成したのか
パーティクルを作成するときに、Adobe Illustrator上でパーティクルの配置をするのは手間がかかり面倒で骨の折れる作業です。「パーティクルをプログラムで生成することで、より表現の調整がしやすくなるのではないか？」とデザイナーから提案されたのがもともとのアプリ作成の始まりになっています。
Particle Developの出力できる画像ファイル
Particle Developではパーティクルを画像ファイル（SVG・PNG・JPEG・WebP）として書き出すことができます。SVGファイルとして書き出すことでAdobe Illustratorに読み込むことが可能です。Adobe Illustratorで開いたSVGファイルはパーティクルひとつずつがレイヤーで分かれているので、パーティクルごとに編集できます。ベクターグラフィックスですので拡大縮小を何度行っても画像が劣化しません。
デスクトップアプリ・モバイルアプリへの展開
Particle Developはブラウザー版の他に、デスクトップアプリ版、モバイルアプリ版を開発中です。勉強会では開発中のアプリのプレビュー版を公開しました。
デスクトップアプリとして展開
デスクトップアプリ版ではブラウザー版の機能に加えて、調整したプロパティーの保存や読み込みが可能です。
▲デスクトップアプリの画面
モバイルアプリとして展開
モバイルアプリ版ではパーティクルのプレビュー、カメラ撮影による画像の合成、写真ライブラリーへの書き出しが可能です。
▲モバイルアプリの画面
Particle Developの内容についてのまとめ
Particle Developの内容のまとめです。
- 美しいパーティクルの作成
- パラメーターの調整
- テンプレート選択機能
- 画像の書き出し
- パラメーターの保存 / 読み込み（デスクトップアプリ版）
- カメラ機能を使った画像合成（モバイルアプリ版）
次のページではアプリを作成する際に使用した技術について紹介します。