ゲーム型キャンペーンサイト「URBAN RESEARCH Christmas 2011」

意匠部ME課あらため、HTMLファイ部所属となった比留間です。

今回は、先日リリースした「アーバンリサーチ」のキャンペーンで
「アーバンサンタ」からのプレゼント、というサイト制作に携わりました。

簡単にキャンペーンの概要を説明すると、Webとアーバンリサーチの店舗が連動して先着でクリスマス限定のキャンドルをもらえるというキャンペーンです。
内容はサイト内に隠されたプレゼントボックスを見つけ出して、それをアーバンサンタにおねだりする、
というとてもシンプルなゲーム型キャンペーンサイトになっています。
さらに抽選でおねだりした商品がもらえるので、ぜひぜひ参加してみてください。

さて、今回この記事でご紹介したいのは、
このキャンペーンサイトで使用した「CSSで作る光のアニメーション」の作り方を
簡単に説明したいと思います。

これを追加したことによって、だいぶ雰囲気が出ました。（アーバンリサーチのゲームページで雰囲気を確認）
HTMLファイ部ということで、HTML5関連技術であるCSS3をメインに使用したものとなっています。
jsdo.itにもサンプルコードが載っているので、自分で色々といじってみたい方は以下のサンプルコードをForkしてみてください。

ホタルっぽい雰囲気の演出をCSSだけで作る - jsdo.it - share JavaScript, HTML5 and CSS

ホタル風オブジェクトのベースを作る

ということで、早速作り方に入って行きます。
まず、ホタル風オブジェクトのベースとなるオブジェクトを作ります。
今回のサンプルではdiv要素ひとつに、CSS3で色々とスタイルを当てていきます。

実際に使ったコードは以下。

	.fireflyDot {
        width: 4px;
        height: 4px;
        background-color: rgba(255, 241, 202, 0.8);
        border-radius: 2px;
        box-shadow: 0 0 5px rgba(255, 241, 202, 0.8), 0 0 8px rgba(255, 241, 202, 0.8), 0 0 15px rgba(255, 241, 202, 0.9);
    }
    

見てもらうとわかりますが、数種類のプロパティだけで実現しているのがわかります。
これを適用したものが↓

ベンダープレフィクス（-webkitとか）とCSS3の細かな説明は省きますが、widthとheightでサイズを、border-radiusで丸みを、そしてbox-shadowでふんわり光る光彩を演出しています。

実際のホタル風オブジェクトの生成などについてはJavaScriptで対応していますが、サイズや光加減などをすべてCSSで実現しているので、サイズや色味を自由に変更できるのが強みです。

ホタル風オブジェクトを動かす

上記のCSSを適用することでホタル風オブジェクトが表現できました。
しかし、ただ配置しただけではただのぼやけた丸ですね。
なので動きを加えてみましょう。
そしてその動きの部分もCSSで対応します。

使用している主なプロパティは以下。

	opacity: 0;
        transition-property: transform, opacity;
        transition-duration: 2.5s;
        transition-timing-function: ease-out;
    

これだけです。
動きの実装で重要なのはtransitionプロパティだけ、ということになります。（移動の際の位置指定はJavaScript側で自動生成しているため）
このtransitionプロパティ、設定しておくとtransition-propertyプロパティで指定したプロパティの値（サンプルではtransform、opacity）に変化があった際、トランジション（遷移）を伴って変化を表現する、というものです。

つまり、サンプルで指定している「transform」と「opacity」の変化を監視させることで、その値が変更された際に、それをアニメーションで表示する、というものになります。
そしてJavaScriptで移動後の位置を動的に決定し、それを指定してあげれば、あとはCSSが勝手にアニメーションをつけてくれる、というわけです。
これだけで、移動と同時に透明度も1→0と変化するためホタルが光ってふんわりと消えながら移動する、というような演出が完成します。

もちろん、こうした処理はCSS3のtransitionやtransformに対応していないと動作しませんが、jQueryを使えばこれと似たような処理を実現することは可能です。（animateメソッド）

iPhone / Android対応

今回の実装のいいところとしては、CSSで表現しているためスマートフォンでも表示可能なこと、とりわけiPhone/iPadではとてもスムーズにアニメーションが実行される点です。

Mobile Safariでは、指定方法によってはCSSによるアニメーションはGPUを利用してレンダリングされるためPCと同じようになめらかに表示される、という特性があります。

もしスマートフォンをお持ちの方は、ぜひキャンペーンサイトをスマートフォンでも見てみてください。
PCとほぼ同じ感じで表示されるのが分かるかと思います。
もちろん、ゲームもプレイできるので、スマートフォンからも楽しめるコンテンツとなっています。

HTML5の可能性を示すコンテスト

ども、久々に投稿になります。ME課の比留間です。
さて、先日開催された「第0回 HTML5プログラミング＆クリエイティブ コンテスト」に作品を応募してみました。

結論から先に言ってしまうと、残念ながら賞をいただくことはできませんでした。
しかし、先日開催されたデブサミ2011のブースで、HTML5関連として自分の作品を展示していただくことができました。（コンテストのリンク先では「デブサミ2011でのブース展示に使わせていただいた作品」という項目に掲載されています）

自分は当日は参加することができなかったので、どういった形で展示されたのかはわからないのですが・・。ちなみに実際に展示された作品は下にある、canvasで描かれたシューティングゲームです。（※音が鳴るので注意）

実際に展示された作品

Meteorite Shooting Games - jsdo.it - share JavaScript, HTML5 and CSS

昨今のHTML5ブームで、今後ますますJavaScriptの需要と重要性は増して行くことは間違いないでしょう。
きたるHTML5時代に向けて、今からJSを学んでおくことは間違っていません。

そんな中、最近自分がはまっているサイトが「jsdo.it」です。
（まぁ弊社で運営しているサービスなので宣伝みたいですが、実際に自分のアカウントの投稿一覧を見てもらうと、かなり投稿してますｗ）

最近では、JS関係の質問を、コードプレビュー付きで投稿できるQ&Aコンテンツも出来たので、なかなか検索で目的の情報が見つからないときに質問してみてはどうでしょうか。
自分が作成した作品のバックアップにもなるので、これからJavaScriptを勉強しよう、という人はぜひぜひjsdo.itを使ってみてくださいね！

HTML5の可能性を示すコンテスト

ども、久々に投稿になります。ME課の比留間です。
さて、先日開催された「第0回 HTML5プログラミング＆クリエイティブ コンテスト」に作品を応募してみました。

結論から先に言ってしまうと、残念ながら賞をいただくことはできませんでした。
しかし、先日開催されたデブサミ2011のブースで、HTML5関連として自分の作品を展示していただくことができました。（コンテストのリンク先では「デブサミ2011でのブース展示に使わせていただいた作品」という項目に掲載されています）

自分は当日は参加することができなかったので、どういった形で展示されたのかはわからないのですが・・。ちなみに実際に展示された作品は下にある、canvasで描かれたシューティングゲームです。（※音が鳴るので注意）

実際に展示された作品

Meteorite Shooting Games - jsdo.it - share JavaScript, HTML5 and CSS

1要素に1クラスを指定するだけで、画像も使わずさっと作れるiPhone風CSSライブラリを作ってみました。

最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・)

↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone/Safariでしか最適化されていません)

1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - share JavaScript, HTML5 and CSS

ちなみにiPhoneで実際に見るとこんな感じに見えます↓

iPhoneで実際に見るには、以下のURLから見れます↓
(jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました)
http://goo.gl/s5fV

<a href="#" class="btnTypeA">ボタンタイプA</a>

<div class="listIPhone listTypeA">
<ul>
<li><a href="#">リストアイテム</a><a href="#" class="btnType-s-A noListLink floatBtn">削除</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
</ul>
<!-- /.listIPhone.listTypeA --></div>

<div class="listIPhone listTypeB">
<ul>
<li><a href="#">リストアイテム</a><a href="#" class="btnType-s-A noListLink floatBtn">削除</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
<li><a href="#">リストアイテム</a></li>
</ul>
<!-- /.listIPhone.listTypeB --></div>

<div class="toolbarBox">
<h1 class="toolbar">CSS3 UIテンプレート</h1>
<nav>
<ul>
<li class="toolBtnTypeA"><a href="#" class="toolBtnArr">TOP</a></li>
<li class="toolBtnTypeB"><a href="#" class="toolBtn">Reload</a></li>
</ul>
</nav>
<!-- /.toolbarBox --></div>