CreateJS × Angular Materialでグリーティングボードの作成
P-Arts Boardはグリーティング用に使えるお絵かきサイトです。
新年の挨拶や各種イベントのちょっとした紹介、またはWebサイトの埋め込み用パーツとして利用することを前提に作成したものになりますが、作成した一番の目的はCreateJSとAngular Materialを使ってなにか一つ作ってみたかっただけなので、利用方法についての指定はとくにありません。
以下、機能についての説明です。
目次
- シェイプの設定
- プレイリスト
- その他の設定
- 一時停止、スクリーンショット、キャンバスクリア
- 作成したデータの公開について
シェイプの設定
左上のメニューをクリックすると以下のような設定パネルが表示されます。
Flower ～ HelloWorld のボタンはプリセットデータです。今後、増やす予定ですが、予定はあくまで予定です。
SHAPE、EMIT、COLOR、MOVEタブ内の各項目は発生させるシェイプの形状や色、挙動などの設定項目になります。
設定したデータはAdd（Save）ボタンで50件まで登録することができますが、クライアントのWebサイトデータとして保存されるので、ブラウザの履歴やキャッシュの削除で間違って削除されたくない場合はインポート、エクスポート機能を利用してください。
各設定項目について
- Name
設定の名称。
- Shape
シェイプの選択（円、四角、星形、画像、テキスト）。
- Line Width
枠線の幅。値が0の場合は塗りつぶし。シェイプが円、四角、星形の場合のみ有効。
- Image URL
画像のURL（http://example.com/～～.png）を指定。シェイプが画像の場合のみ有効。
- Text
文字の指定。シェイプがテキストの場合のみ有効。
- Size
シェイプのサイズ。
- Size Random
Sizeを最大値として、毎回ランダムなサイズのシェイプを発生させます。
- Count
シェイプの発生個数。基本的に60fpsで動作しており、1フレームでの発生個数を指定します。
- Roll Radius
指定した半径の円周上にシェイプを発生させます。
- Roll Speed
回転速度。
- Reverse Roll
逆回転
- Delay
発生のタイミングを遅らせます。後述するプレイリスト機能からの再生では無効となります。
- Type
発生方法。常時発生（Permanent）、押している時のみ（Press）、一回だけ（Once）から選択。
- Life
シェイプが発生してからの生存時間。指定した値が120の場合、60fps動作では約2秒間生存します。
- Lige Scale
時間経過とともにシェイプを拡大・縮小します。値が1の場合は変化なし。
- Transparent
時間経過とともに透明になっていき、最後には消えてなくなります。
- Hue、Saturation、Lightness
色相、彩度、輝度。シェイプのカラーはHSL色空間で指定します。シェイプが画像の場合は無効。
- Composite
シェイプが重なった時の動作。
- Speed X、Y
シェイプの移動速度。
- Direction X、Y
シェイプの移動方向。
- Random X、Y
シェイプの移動方向と速度をランダムにします。
- Accelerate X、Y
加速または減速。
- Gravity X、Y
縦または横方向の重力操作。
- Frame
Top、Bottom、Left、Right。選択した枠にシェイプがぶつかると跳ね返ってきます。
プレイリスト
右上のレコーディングボタン（赤丸）を押すと、録画が開始され、シェイプの設定情報と発生した場所を記録します。1回の録画で10秒間（600フレーム）の記録が可能です。記録途中でシェイプの設定は変更できません。変更する場合はいったん録画を停止してから、再度、別のデータとして録画を行ってください。
シェイプの設定データ同様に50件まで登録することができますが、こちらもクライアントのWebサイトデータとして保存されるので、ブラウザの履歴やキャッシュの削除で間違って削除されたくない場合はインポート、エクスポート機能を利用してください。
録画されたデータはレコーディングボタンの上のプレイリストボタンを押すことで確認できます。
録画データ1件毎に以下の設定が可能です。
- Name
録画データの名称。
- Skip
プレイリスト再生時にスキップします。
- Start same time
チェックした場合、一つ上の録画データと同時に再生されます。
歯車のボタンを押すことでシェイプの設定情報を変更できます。加えて録画データの場合のみ以下の項目を設定可能です。
- Offset X、Y
再生位置の指定。
- Delay Time
再生開始を指定した秒数だけ遅らせます。
- Repeat Count
再生回数。-1を指定するとプレイリストの再生が終わるまで無限に繰り返されます。
- Repeat Interval
再生間隔を指定した秒数で行います。
その他の設定
プレイリスト表示パネルの下に以下の設定があります。
- Autoplay
サイトアクセス時にプレイリストに設定された録画データを自動で再生します。デフォルトはチェックされているので不要であればチェックを外してください。
- Repeat
プレイリストの再生を無限にリピートします。
- Size
再生時のキャンバスサイズを指定します。デフォルトではチェックが外れており、その場合、最初に再生されたデータのキャンバスサイズが有効になります。
- 60fps
再生時のfpsを60に固定します。チェックしなくとも大抵のデバイスは60fpsで動作すると思いますが、念のため指定できるようにしています。
- PNG(Screenshot)
後述するスクリーンショット機能の保存形式をJPGとPNGで切り替えます。PNGの場合は背景が透明になり、JPGの場合は黒で塗りつぶされます。
- background
背景色の設定。styleでの指定と同様です。また、JPGのスクリーンショットで背景が黒に塗りつぶされるのは保存時の仕様がそうなっているためで、こちらで設定した背景色は適用されませんので注意してください。
一時停止、スクリーンショット、キャンバスクリア
作成したデータの公開について
プレイリスト表示パネルの一番下に公開用のボタンが配置されており、押すと以下のようなダイアログが表示されます。
タイトル（必須）と説明（任意）入力後、SENDボタンを押して処理が成功すると、公開用のURLと操作キーが配布されます。
誰かに見てもらいたい場合、この配布された公開用URLを相手に送って見てもらいます。
公開時の注意点としては、PCでフルHDの解像度で作成したものをスマートフォンのような画面が小さなデバイスで再生すると文字がつぶれて見えなくなることと、再生するデバイスのスペックによっては滑らかに再生されないという点です。
作ってみた後にわかりましたが、同時に発生させるシェイプ数が多い場合、そこそこのスペックは必要のようです。
なお、公開期間は10日間となります。
今のところ、公開されたデータをサイトで取り上げたり一覧で表示したりとした予定はありません。
公開URLと一緒に操作キーを配布している点から、公開の延長や公開途中での削除、ツイッターカード用にサムネイル画像のアップロードなどを想定はしていますが、使ってくれるかどうかもわからないので現状は保留としています。