HTML5 videoタグ、独自いいね!ボタンを実装したANA「IS JAPAN COOL?」

このエントリーをはてなブックマークに追加

今週は全日空が開設している、魅力ある日本を海外に紹介するウェブサイト「IS JAPAN COOL?」(日本ってカッコイイ?)を取り上げます。「IS JAPAN COOL?」は、日本の慣習やスポットを英語で紹介し、「COOL」かどうかを投票してフェイスブックでシェアできるウェブサイトです。

全日空「IS JAPAN COOL?」

全日空「IS JAPAN COOL?」

ウェブサイトでは、日本のよさを33項目で紹介しています。記事公開時の投票ランキング(COOL数順)は、1位が「おもてなし(Japanese Hospitality)」。2位以下には「ハイテクトイレ」「温泉」「富士山」「次世代型自動販売機」などが続きます。  2位の「ハイテクトイレ」のページでは、日本のトイレ事情が紹介されています。入室すると自動的に蓋が開き、便座が暖かく、使用後にシャワーで洗えるトイレの動画とともに、それが日本の家庭をはじめとしてほとんどの建物に備えつけられていることが説明されています。

ハイテクトイレ

ハイテクトイレ

「IS JAPAN COOL?」の要素としては以下があげらます。
1.動画再生
2.独自COOLボタン
3.COOLによるランキング
4.Facebook シェア
それぞれを詳しくみていきます。

1.動画再生
「IS JAPAN COOL?」ではサイト全体がFlashで制作されており、もちろん動画もFlashで再生されています。
現在、PCサイトで動画を再生させる場合はFlash PlayerがほとんどのPCにインストールされているので問題ないでしょう。
しかし、iPhoneでは再生できなくなってしまうのが難点です。
★iPhoneで動画再生させるには
iPhoneのsafariではFlashはサポートしていませんが、HTML5をサポートしています。
そこでHTML5での動画再生を確認しましょう。以下のようにvideoタグで囲むことで配置完了です。

<video src=”sample.ogv” preload=”none”></video>

まるで画像を配置するように簡単にできます。詳しくは以下を参照してください。
-<video>タグで動画を埋め込む

また、HTML5では動画上に文字も表示できるので、様々な表現を実現出来ます。

以下を参照して試してみてください。
-HTML5 videoでニコニコ動画風プレーヤーを作ろう

2.独自COOLボタン
一見、facebookのいいね!ボタンのようだが独自のポイントシステムを利用しています。
独自のポイントを利用するメリット/デメリットを見ていきましょう。

★「いいね!」ボタンを使わないメリット
「いいね!」だけではない評価基準をあたえることができます。

今回の例であれば、「COOL」「NOT SO COOL」を導入することによって「IS JAPAN COOL?」というサイトテーマを楽しく表現できるようにしています。「いいね!」ではない、サイトのテーマに合った表現をすることによって、ポイントを導入することによる楽しさがより一層増すのではないでしょうか。

ちなみに、「いいね!」ボタンのままでオリジナルデザインを採用することもできます。
以前も紹介しましたが、以下の記事をご参照ください。
- Facebookの「いいね!」ボタンをオリジナルデザインに変更する

★「いいね!」ボタンを使わないデメリット
facebook上で拡散がされない

いいね!ボタンであればfacebook上で共有されますが、独自ボタンでは共有されません。
ちなみにいいね!ボタンでも、いいねを押した人の属性までは特定できないので、そこはデメリットにはつながりません。
いいね!ボタンに関しては以下の記事をご参照ください。
-「ソーシャルカタログ」と名付けられたトヨタ・ハチロクのブランドサイト

3.COOLによるランキング
今回の核となっているランキング機能です。
独自のポイントを使用しているため、サーバに格納しておいて取り出す必要があります。

4.Facebook シェア
こちらは以下のブログで書きましたのでご参照ください。
-「ソーシャルカタログ」と名付けられたトヨタ・ハチロクのブランドサイト

以上です。

このエントリーをはてなブックマークに追加

This entry was posted in blog. Bookmark the permalink. Trackbacks are closed, but you can post a comment.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

トップ | tadashiku, Incについて | 製品・サービス | 実績のご紹介 | ニュース | ブログ | パートナーシッププロジェクト | お問い合わせ