2015/03/26に行われた「W3C/慶應 デジタルサイネージとHTML5セミナー」での発表資料です。

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

2. PhysicalWeb
• 技術概要(&制作事例)
• 展望とサイネージへの応用

3. PhysicalWeb
技術概要

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

5. UriBeacon

6. http://example.com
http://example.com
http://example.com
http://example.com
ビーコンからURLを
Bluetooth LEで周囲にブロードキャストします

7. http://example.com
スマホを持ったユーザーが
ビーコンの横を通り過ぎるときに
ビーコンから飛ばされたURLを
見つけます

8. Metadata
Resolver

9. WEBサーバー
Metadata Resolver
スマホはそのURLに関する情報を
Resolverに問い合わせます
http://example.com

10. WEBサーバー
Metadata Resolver
Resolverは指定されたURLの
サーバーからHTMLを取得し
解析します
WEBサーバー
example.com

11. WEBサーバー
Metadata Resolver
Resolverはスマホに
解析結果である
メタデータを返します
Metadata
• original URL
• final URL
• title
• icon URL
• description
• その他拡張データ(JSON-LD)

12. http://example.com
http://example.com
http://example.com
http://example.com
http://example2.com
http://example2.com
http://example2.com
こういうビーコンの横を
通り過ぎていくと

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

14. WEBサーバー
Metadata Resolver
WEBサーバー
example.com
メタデータを見て
ユーザーが詳細を欲しくなったときには
Webブラウザでアクセス

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

16. どのようなネットワークで
どのようなデータを
どのように表示するか

17. どのようなネットワークで
どのようなデータを
どのように表示するか

18. どのようなネットワークで
UriBeacon
Metadata Resolver

19. どのようなネットワークで
どのようなデータを
どのように表示するか

20. バス停についたら
次のバスがいつ来るか知りたい
(時刻表が見たい)

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

22. まさに今、その場所で
重要な情報というのは決まっている
というシーンはたくさんあります

23. 看板や、ポスター、パンフレットなど
アナログ媒体の方が相性が良かった
コンテンツのデジタル化
レストランメニュー
バス停時刻表
デパート売り場案内
催事場案内

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

25. 田中
鈴木
佐藤
レストラン: メニュー
会議: 資料
バショだけでなくヒトも?

26. 田中
鈴木
佐藤
レストラン: メニュー
会議: 資料
名刺交換、チャットなどの起点
ソーシャルネットワークサービスなどの
プロフィールページへ

27. バショやヒトに限らず様々なモノが
URIを発信する世界へ
Real-World Wide Web
Web of Things

28. どのようなネットワークで
どのようなデータを
どのように表示するか

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

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

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

32. ただし現実的には
課題がたくさんあり
当面はスマートフォンがメイン

33. スマートフォンは
In-Pocket Device
実際のユースケースでは
歩いている間にバックグラウンドで情報を拾う

34. 偶発的な情報との出会いに
即座に気付けない
(スパム問題があるので、この用途でPUSH通知は使いづらい)
Attentionが弱い

35. サイネージとの
連動が重要
ファーストアテンション
手元へのナビゲーション
サイネージ

36. 今までの
セカンドスクリーンへの
ナビゲーション
• URLを入力
• 「⚪⚪」で検索
• QRCodeを撮影

37. サイネージが
UriBeaconの機能をもてば
ブラウザを開けば既に情報がある
消費者の行動コストが劇的に下がり
高いコンバージョンへ
サイネージ
http://example.com

38. AIDMA/AISAS

39. AISAS
Attention -> Interest -> Search -> Action -> Share

40. AISAS
Attention -> Interest -> Search -> Action -> Share
検索すらいらない世界へ

41. コンバージョンへの
施策

42. 店舗誘導へつながる機能

43. 検索
「たしかレストランの情報拾ってたはず」
「自分の移動経路にレストランないかな」
お店の情報や場所の確認へ

44. 位置情報連動
「この情報どこで拾ったんだろう」
ビーコンから情報取得した時点での位置情報を取得しておき
あとでマップで確認

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

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

47. アプリ連動(DeepLink)
このページに対応するアプリがあるならストアへ誘導

48. アプリ連動(DeepLink)
アプリがデバイスに既にインストールされていたら

49. もちろんそのまま
Webブラウザでのサービス
も提供可能
WebNFCなど
いままでの一般的なWebサービスとは違うタイプの
HTML5技術を応用していける可能性も

50. まとめ
Real-World Wide Webを目指すPhysicalWebの登場
サイネージの世界と相性が良さそう
普及前の技術で課題もたくさんあるが
様々な展望につなげられるのでは

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