webエンジニアにとってのiot - physical webの技術とサイネージへの応用

51
WebエンジニアにとってのIoT PhysicalWebの技術と サイネージへの応用 株式会社リクルートテクノロジーズ アドバンスドテクノロジーラボ 加藤 亮 W3C/慶應 デジタルサイネージとHTML5セミナー

Upload: recruit-technologies

Post on 16-Jul-2015

1.308 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

WebエンジニアにとってのIoT

PhysicalWebの技術と サイネージへの応用

株式会社リクルートテクノロジーズ アドバンスドテクノロジーラボ

加藤 亮

W3C/慶應 デジタルサイネージとHTML5セミナー

Page 2: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

PhysicalWeb

• 技術概要(&制作事例)

• 展望とサイネージへの応用

Page 3: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

PhysicalWeb 技術概要

Page 4: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

iBeaconのような ビーコンを使います

Page 5: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

UriBeacon

Page 6: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

http://example.com

http://example.com

http://example.com

http://example.com

ビーコンからURLを Bluetooth LEで周囲にブロードキャストします

Page 7: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

http://example.com

 スマホを持ったユーザーが ビーコンの横を通り過ぎるときに

ビーコンから飛ばされたURLを 見つけます

Page 8: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

Metadata Resolver

Page 9: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

WEBサーバー Metadata Resolver

スマホはそのURLに関する情報を Resolverに問い合わせます

http://example.com

Page 10: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

WEBサーバー Metadata Resolver

Resolverは指定されたURLの サーバーからHTMLを取得し

解析します

WEBサーバー example.com

Page 11: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

WEBサーバー Metadata Resolver

Resolverはスマホに 解析結果である

メタデータを返します

Metadata• original URL

• final URL

• title

• icon URL

• description

• その他拡張データ(JSON-LD)

Page 12: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

http://example.com

http://example.com

http://example.com

http://example.com

http://example2.com

http://example2.com

http://example2.com

こういうビーコンの横を 通り過ぎていくと

Page 13: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

(1)各ビーコンからURLを拾い (2)Resolverに問い合わせ (3)結果をリストアップできます

Page 14: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

WEBサーバー Metadata Resolver

WEBサーバー example.com

メタデータを見て ユーザーが詳細を欲しくなったときには

Webブラウザでアクセス

Page 15: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

欲しい情報が見つかったらWebブラウザで表示

WebView

Page 16: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

どのようなネットワークで

どのようなデータを

どのように表示するか

Page 17: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

どのようなネットワークで

どのようなデータを

どのように表示するか

Page 18: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

どのようなネットワークで

UriBeacon

Metadata Resolver

Page 19: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

どのようなネットワークで

どのようなデータを

どのように表示するか

Page 20: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

バス停についたら 次のバスがいつ来るか知りたい

(時刻表が見たい)

Page 21: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

レストランについたら メニューが見たい

Page 22: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

まさに今、その場所で 重要な情報というのは決まっている

というシーンはたくさんあります

Page 23: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

看板や、ポスター、パンフレットなど アナログ媒体の方が相性が良かった

コンテンツのデジタル化

レストランメニュー

バス停時刻表

デパート売り場案内

催事場案内

Page 24: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

動的な情報も組み込んでいくことが可能になる

WebView

Page 25: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

田中

鈴木

佐藤

レストラン: メニュー

会議: 資料

バショだけでなくヒトも?

Page 26: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

田中

鈴木

佐藤

レストラン: メニュー

会議: 資料

名刺交換、チャットなどの起点

ソーシャルネットワークサービスなどの プロフィールページへ

Page 27: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

バショやヒトに限らず様々なモノが URIを発信する世界へ

Real-World Wide Web

Web of Things

Page 28: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

どのようなネットワークで

どのようなデータを

どのように表示するか

Page 29: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

このような インフラが整った世界では ウェアラブルが真価を 発揮するかもしれない

Page 30: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

ウェアラブル連動 (google glass)

Page 31: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

ウェアラブル連動(Android Wear)

Page 32: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

ただし現実的には 課題がたくさんあり

当面はスマートフォンがメイン

Page 33: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

スマートフォンは In-Pocket Device

実際のユースケースでは 歩いている間にバックグラウンドで情報を拾う

Page 34: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

偶発的な情報との出会いに 即座に気付けない

(スパム問題があるので、この用途でPUSH通知は使いづらい)

Attentionが弱い

Page 35: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

サイネージとの 連動が重要

ファーストアテンション

手元へのナビゲーション

サイネージ

Page 36: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

今までの セカンドスクリーンへの ナビゲーション

• URLを入力

• 「⚪⚪」で検索

• QRCodeを撮影

Page 37: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

サイネージが UriBeaconの機能をもてば ブラウザを開けば既に情報がある

消費者の行動コストが劇的に下がり

高いコンバージョンへ

サイネージ

http://example.com

Page 38: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

AIDMA/AISAS

Page 39: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

AISAS

Attention -> Interest -> Search -> Action -> Share

Page 40: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

AISAS

Attention -> Interest -> Search -> Action -> Share

検索すらいらない世界へ

Page 41: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

コンバージョンへの 施策

Page 42: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

店舗誘導へつながる機能

Page 43: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

検索 「たしかレストランの情報拾ってたはず」 「自分の移動経路にレストランないかな」

お店の情報や場所の確認へ

Page 44: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

位置情報連動 「この情報どこで拾ったんだろう」

ビーコンから情報取得した時点での位置情報を取得しておき あとでマップで確認

Page 45: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

パーソナライズされたサービスへ

Page 46: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

アプリ連動(DeepLinkによる実験)

Page 47: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

アプリ連動(DeepLink)

このページに対応するアプリがあるならストアへ誘導

Page 48: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

アプリ連動(DeepLink)

アプリがデバイスに既にインストールされていたら

Page 49: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

もちろんそのまま Webブラウザでのサービス

も提供可能

WebNFCなど いままでの一般的なWebサービスとは違うタイプの

HTML5技術を応用していける可能性も

Page 50: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

まとめ

Real-World Wide Webを目指すPhysicalWebの登場

サイネージの世界と相性が良さそう

普及前の技術で課題もたくさんあるが 様々な展望につなげられるのでは

Page 51: WebエンジニアにとってのIoT - Physical Webの技術とサイネージへの応用

ご清聴 ありがとうございました