はじめまして、有馬ともうします！

2月15日のおきなわマラソンに向けて毎日練習しているのですが、
やっと5kmを走れるようになりました！
出場するのはフルマラソンではなく、一般10kmの部門。
5kmの倍を考えると時間内に完走できるか不安です。。。

さて私は普段、Webサイトの構築（HTMLコーディング）をメインにお仕事させていただいているのですが、
今回、新たな取り組みとしてJavaScriptアニメーションを作成してみましたのでご紹介いたします。

と、その前に、、、。

今回お仕事させていただきました、沖縄セルラーさんの春のauキャンペーン「ハッピージャンピー」のご紹介です！

沖縄セルラー 春のauハッピージャンピーキャンペーン！！

ハッピージャンピーキャンペーンとは、プレゼント企画が３つもあるキャンペーンで、auの人も、そうでない人も楽しめる素敵なキャンペーンを実施しています！
まだご覧になっていないかたはこちらから。

その内容は？

【01】auの人も、そうでない人も！テレビCM出演権100組に当たる！！

【02】スマホに新規ご契約「auの学割」申込の方！セルカ棒もらえる！

【03】auの人も、そうでない人も！きいやま商店CMソングもらえる♪

「auの人も、そうでない人も！」っていうのがいい！！さすが沖縄セルラーさん！ちゃんと他社ユーザーさんの事も考えていらっしゃいます！

バレットタイムという撮影技術

さて、もうこの「ハッピージャンピー」のテレビCMをご覧になった方も多いかと思いますが、
ハリウッド映画の「マト○ックス」を彷彿させるキャンペーン映像は、
映画公開後から時がたってもワクワクさせる仕上がりになっていますよね。

因みに、この撮影技術のことを「バレットタイム」と言うそうです。
その他には「タイムスライス」「マシンガン撮影」とも言うそうですが、
かなりのカメラが必要になります。

今回この「バレットタイム」の表現をどうにかしてWebサイトでも表現できないと色々と悩みました。
Flash（フラッシュ）でやればいいんじゃないか？とか、Web用の動画を作って埋め込みは？など、検討した結果がJavaScriptアニメーションでした。
FlashはMacで見れないし（厳密に言えばFlashPlayerをインストールすれば見れる）、動画は次への展開が難しく、容量の問題もある。
今回のサイトの適しているのがJavaScriptアニメーションというわけです！

JavaScriptアニメ（PCサイト）は「Adobe Edge Animate」で作成

このJavaScriptアニメーションは、今回アドビシステムズのソフトの一つ「Adobe Edge Animate」で制作いたしました。

「んっ？」アドビにそんなソフトがあったかなと思う方もいるかもしれませんが、CC版（Creative Cloud）から新たに追加されたソフトで、
このJavaScriptアニメーションを作成するソフトの他に複数あり、
「Adobe Edge Tools & Services」としてリリースされています。

インターフェイスはFlashソフトの画面ににており、タイムラインとステージがあるのが、Flash制作をしたことのある方なら直ぐに馴染めるのではないでしょうか。
レッスン機能もついており、ひと通り学習したら直ぐにでもJavaScriptアニメーションが作れます。

ハッピージャンピーのアニメーションで一番に苦労した箇所は、
やはり、あの「バレットタイム」の箇所。
最初のロゴの表示のタイミングからの繋がり部分や、画像1枚1枚のデータサイズや表示時間など、細かな調整をえて今の形になっております。

我ながらいい仕上がりになっていると思います。

ハッピージャンピーキャンペーンは体験イベントも開催！！！

そんな今話題の「バレットタイム」ですが、もちろんカメラの台数が用意できるなら自分で撮影する事も可能ですが、
そんなにカメラを用意するのは難しいですよね。
でも、この「バレットタイム」を体験してみたい！
そんなあなたに朗報です！

この「バレットタイム」が体験できるイベントを沖縄セルラーさんはちゃんとご用意しております！！！
沖縄本島４箇所の会場でこの「バレットタイム」が体験できます。

イベント開催スケジュール

■第1回 02/22（日） 12：00〜18：00　イオン那覇店（１階イベント広場）
■第2回 03/08（日） 12：00〜18：00　イオン名護店（1階イベント広場）
■第3回 03/14（土） 12：00〜18：00　サンエー那覇メインプレイス店（2階 シネマQ前特設会場）
■第4回 03/15（日） 12：00〜18：00　イオン北谷店（2階 ハイビスカス広場）

是非この機会に「マト○ックス」いや、「バレットタイム」を体験しに行っちゃいましょう！

くわしくはイベント開催情報ををチェック！

それではまた！