" "

作品詳細

SOUL BOY

作品を見る

スマートフォンをメインデバイスにしたアニメーションのWEBアプリです。 「見ていて元気になる」をテーマに音楽に乗せてキャラクターがソウルダンスを踊ります。 気分が乗ったらサムアップ(親指を立ててキャラクターの親指にタッチ!)してみてください。 twiiterの応援メッセージがあなたをポジティブな気持ちにしてくれるかも。 スマートフォン(Android, iPhone)、パソコン(Windows, Mac)で動作します。パソコンで閲覧する際はブラウザーをスマフォサイズ(縦)にするとちょうど良いです。動作確認したブラウザーに関しては自由記入欄に記載しました。

制作者の情報
作者(チーム名)
寺田敬 (@takashiterada)
エントリー済みの賞
技術的なアピールポイント
[フレームワーク]
HTML5のCANVAS要素にJavascriptフレームワーク・CreateJSを使用してアニメーションを画像を使わず(※1)javascriptで生成しているので、デバイスや表示サイズを選びません。

[スマートフォン]
スマートフォンでFPS(※2)を20前後(設定は24)で動作するよう、デザインからコンテンツの流れまで調整して動きの質を確保しました。(※3)

[API]
サウンド再生はAudio APIを使用、スマートフォンでは再生や繰り返しに制約があるので、考慮しながら対応。
Twitter APIの使用は今更ですが、常に新しいTweetを取得出来るようにリクエストはクライアント側のJavascriptから非同期通信で行い、認証はサーバ側のphpで行うので認証コードは守られます。

[他言語]
ブラウザーが英語設定の場合は英語のキーワードでtweetを取得します。

※1 twitterのユーザアイコンは画像です。
※2 Frames Per Second
※3 最低FPSを割ったらメッセージを表示させるようにしています。
企画上のアピールポイント
ユーザ数の増えているスマートフォンをターゲットに、外出時の待ち時間のような「隙間の時間」の使用を想定した1分から3分程度を1サイクルに眺めて楽しめるようなコンテンツにしました。

「元気になってもらう」をテーマに「サウンド、キャラクターアニメーション」で見ていて楽しくなってもらい、応援キーワード(フレー、がんばれ、ファイト)で検索したTweet(※)を表示してポジティブな気持ちになってもらえればと思います。
キャラクターのサムアップにユーザもサムアップで返す(親指にタッチ )とTweetの表示が始まります。ちょっとした動作ですが、キャラクターに触れることで共感度が高まればと思います。

※ Tweet
TwitterのTweet、ブラウザーが英語設定の場合は英語の応援キーワード(cheer, go, fight)で検索したtweetを表示します。
自由記入欄
個人で制作をしているため、このように作品を発表出来る場を企画していただいて感謝しています。

スマートフォンやパソコン以外のデバイスが普及して行く中、インストール型のネイティブアプリが注目されている気がします。
HTML5による、ユーザに楽しんで貰えるWebアプリの提案が出来たらと考えています。

今後、制作時のポイントをWebサイト(以下のURL)で公開して行こうと思います。
http:furexfure.com/practice

- 動作環境 -
iPhone:標準ブラウザー推奨
Android:標準ブラウザー,Chrome最新推奨
PC:safari最新, Chrome最新, IE10以上推奨...ブラウザーをスマフォサイズ(縦)にすることをお勧めします。