+RECOMMEND
+RECOMMEND
+Ad
+OTHERS

無料ブログ作成サービス JUGEM

paperboy&co.
RSS 1.0
ATOM  0.3
<< November 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
<< 使いやすいWEBサイトランキング2010 & WEBサイト価値ランキング2010 | main | 写真のとり方を学べ!STROBOX >>
コレはすごい。HTML5+Google Map を使ったPV「The Wilderness DownTown」


今年に入ってWeb制作者のだけでなく、一般のサイトにも徐々に広まりつつある印象のHTML5。
そんなHTML5の可能性を見ることが出来るPVが公開されました。

カナダのバンド「ARCADE FIRE(アーケイドファイア)」とGoogleが送り出す

The Wilderness DownTown

です。


アーケイド・ファイア
ユニバーサルインターナショナル
¥ 2,500
(2010-09-08)

このPVはGoogle Mapとストリートビュー、そしてHTML5の機能をつかってブラウザそのものをインタラクティブに演出しています。

何年か前にJavascriptを駆使して、2つのWindowをつかったインタラクティブなコンテンツが存在していましたが、このPVはその上をいっている感じです。




始めにGoogleMapに場所や街を入力します。
できるだけストリートビューのサポート範囲の地域がいいのです。
入力後、ムービースタートです。



始めはパーカーの人物がただ走っているだけのムービーなんですが、ある時点で、別ウィンドウが立ち上がります。そこに鳥の群れ。
急降下する群れの先には、先ほど入力した場所が・・・。


そこからは音楽と映像とGoogleMapとの見事なシンクロで展開していきます。
パーカーの人物が走っているところは、いつの間にか始めに指定した場所になり、人物の視点とストリートビューの視点が重なってゆきます。
あたかも、その場所でPVが展開しているかの様に。




途中では、ドローイングとタイピングのできるコンテンツも差し込まれています。
このあたりはCanvas機能なんかを使っているんでしょうか。





ラストシーンもかっこいいです。



Flashなどを使えば実現できるようなこともありますが、HTML5という新しい可能性を示す一つの要になるんではないでしょうか。
これから、もっと面白い試みがなされると思います。




最後に百聞は一見にしかず。
サイトをご覧下さい。

サイトはChromeで閲覧が推奨されています。

The Wilderness DownTown
http://www.thewildernessdowntown.com/




あ、言うまでもないですが、音楽もかっこよかったッス。
バンドの情報はこちら。

■オフィシャルサイト ARCADE FIRE.com
http://www.arcadefire.com/


ウィキペディア
http://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%BC%E3%82%B1%E3%82%A4%E3%83%89%E3%83%BB%E3%83%95%E3%82%A1%E3%82%A4%E3%82%A2

| HTML | 23:59 | comments(0) | trackbacks(0) | - | - |はてなブックマーク - コレはすごい。HTML5+Google Map を使ったPV「The Wilderness DownTown」 | このエントリーをはてなブックマークに追加









http://blog.tug.lomo.jp/trackback/990210