Web先端技術味見部#28 Physical Webハンズーオン開発補助資料
4 likes2,359 views
htmlday (http://www.htmlday.jp/) 2015において Web先端技術味見部28回で行った Physical Webのハンズーオン開発の補助資料です
Web先端技術味見部#28 Physical Webハンズーオン開発補助資料
- 1. Hello, Real-World Physical Web開発 ハンズーオン 株式会社リクルートテクノロジーズ アドバンスドテクノロジーラボ 加藤 亮 Web先端技術味見部#28
- 3. UriBeacon • 今回はUriBeaconを用意しました • 配置しておくのでここからURIを拾ってみます • 興味のある人はConfigで値を変えてみてください • https://itunes.apple.com/us/app/physical- web/id927653608?mt=8 (公式アプリ)
- 4. UriBeacon • 自分で用意する場合 • https://github.com/google/uribeacon/tree/ master/beacons (iOSはNG, Androidは5以降 でデバイスが対応してるものなら) • 購入する場合(技適マーク注意) • https://www.blesh.com/product/blesh- pack-3-beacons/
- 7. Bluetooth Classic • 旧来のよく知られているBluetooth • LEとの差別化のためにClassicと呼ばれる • 2000年くらいから流行 • ユビキタスネットワーク -> 最近でいうところのIoT • 高速化を追求 • 他の無線技術とあまり差別化できなくなってきていた
- 8. Bluetooth Low Energy (BTLE) • LE = Low Energy (省エネ) • Bluetooth 4.0から • それまで(Bluetooth Classic)は高速化を追求 • 別物と考えるくらいで • 4.0=LEではなく、4.0の中にLEの他にHS(HightSpeed)なども
- 9. Paring • 旧来のBluetoothでは基本的にデバイスのペアリング必要。2.1以上ではSecure Simple Paring • Just Works • Out of Band (NFCとか) • Passkey Entry • Numeric Comparison • iBeaconなどに見られるようにLEではペアリングの無いユースケースがほとんど • LEも似たようなモデルがあり、PassKeyEntryも一応存在するし、逆に、上に上げたように、 ClassicにもJust Worksがあり、確認なしで使える仕様も存在はする。 • とはいえ、LE用のSDK/チップではJust Worksしか採用されてなかったりする
- 10. Bluetoothのネットワークトポロジ ピコネット ClassicではMaster/Slaveという言い方をして、 Central/Peripheralとは言わない Central Peripheral 例: PC 例: キーボード マウス Peripheral 例: 室温系 Peripheral 例: 体重系 ペリフェラルがサービスの主体になるデータを提供するケース (ペリフェラルがサーバー、セントラルがクライアント) が多い 複数のデバイスとやりとりする中心になるのがセントラル ペリフェラルにデータをWriteするケースもある サーモスタットの温度とか(設定系)
- 11. Bluetoothのネットワークトポロジ スキャタネット Master Slave 例: PC 例: キーボード マウス Slave 例: 室温系 Slave 例: 体重系 Master 例: ヘッドホン Slave ヘッドホンなどは主体となるデータ(音声データ)の置き場はPC側になり、データの流れが逆になる Masterは同時にSlaveとなり、他のピコネットに参加することができる
- 12. ネットワークへの参加 • Classic: Service Discovery(今回は省略) • LE: Advertising
- 13. Advertising Packet • サービスのUUID • LocalName • その他 ネットワークへの参加 Observer Broadcaster (Peripheral)(Central) ペリフェラルは周期的にアドバタイジングパケットを発信 「こんなサービスを提供していますよ」という情報
- 14. Advertising Packet • サービスのUUID • LocalName • その他 ネットワークへの参加 Observer Broadcaster (Peripheral)(Central) セントラルは周期的にスキャンを行い、 周囲からアドバタイジングパケットを探す。
- 16. Scan Response ネットワークへの参加 Observer Broadcaster (Peripheral)(Central) ペリフェラルは、Scan Requestを受け取った場合はScan Responseを返す。 アドバタイジングパケットに乗り切らない情報をここに載せることが出来る 最初のアドバタイジングパケットが大きすぎると省エネ的にも良くない。
- 17. Advertising Packet • サービスのUUID • LocalName • その他 接続要求 ネットワークへの参加 Central Peripheral セントラルは受け取った情報から UUIDなどを見て、つなぎたいサービスかどうか判断。 サービスを受けたい場合は接続要求を ペリフェラルに投げて接続を開始 接続が完了するとBroadcaster/Observerとしての役目は終わり、 Peripheral/Centralとなる
- 20. CentralとPeripheralのやりとり Central Peripheral 前述のような接続維持を行いつつ、 セントラルは、接続先のペリフェラルが提供しているサービスを利用できる サービス
- 21. Profile Host Controller Profiles (Application) HCI - Host Controller Interface 物理層 あらかじめ用意された アプリケーション仕様(Profile) ヘッドセット、キーボードなどの入力、オーディオなど Bluetoothでの利用されるような機能は Profile仕様が最初から用意されている • HSP(HeadSetProfile) • HIDP(HumanInterfaceDeviceProfile) • …
- 22. Profile Host あらかじめ用意されたものでなくて、自由にサービスを設計したいときは？ Classicの場合はSPP(Serial Port Profile) LEの場合はGATT(General Attribute Profile)
- 26. GATT Peripheral サービス 設定温度: 28度 機械の内部のconfig値 スイッチ: off コントロールポイント 一つのPeripheralは複数のサービスを持つことが出来る サービス 現在の室温: 28度 センサーから取得できる変動値
- 27. Bluetooth LEのサービス利用手順まとめ • Peripheralとして振る舞うデバイスがアドバタイズ • Centralとして振る舞うデバイスがスキャンしてアドバタイジングパケッ トを発見 • CentralやPeripheralに接続して、目的のサービスを検索 • サービスの中から目的のCharacteristicを発見し、読み書き等
- 28. iOS/Androidでのsupport状況 • iOSは5.0からBTLEがSDK(CoreBluetooth)に、まずはセントラルのみ。 6以降でペリフェラルとしても動作可能。なのでほぼ普及済と考えられ る。 • Androidは4.3からBTLE(セントラル)搭載。Preview Lからペリフェラ ルとしても動作可能。Preview Lからはle用にパッケージが別になった ので、4.3のときに使えたセントラル用のAPIも刷新されてる。
- 29. iOS/AndroidでのBluetooth Classic • LEサポート前からClassicのほうは利用できた • LEのようにGATTがないので、既存のプロファイルにない自由なサービ スを使おうとするとSPP(serial port profile)を使う必要がある • iOSではAppleからMFi (Made for iPhone)を取得する必要
- 31. iBeacon • CoreLocation • 屋内位置情報 • Ranging/Monitoring
- 33. iBeacon Advertising Packet • サービスのUUID • LocalName • その他 Broadcaster (Peripheral) Broadcasterとしてのみ 振る舞うBTLEデバイス パケットの送信距離が10m程度なのを利用して データ転送よりも近接検知に利用
- 34. 用語の注意 • iBeaconが近接検知技術と言われるが • NFCなどのスマートカード界隈では近接(proximity)は10cm以内、 70cm以内だと近傍(vicinity)とか iBeaconの近接 = BTLEのパケット送信可能距離 ICカードの近接 = カード/リーダで電磁誘導が発生する距離
- 37. iBeacon ビーコンA 二つの数値を利用して、どのビーコンに近接したかの判断 施設内での移動の検知 ビーコンB Advertising Packet UUID major: 1 minor: 1 Advertising Packet UUID major: 1 minor: 2
- 38. iBeaconでのBTLEまとめ • Bluetooth LE の Broadcasterである • Peripheral/Central間で接続確立&データ転送はしない • Advertising Packetの中に収まるデータしか使えない • major/minorという16bit整数値二つ入れる Bluetooth LEの利用の仕方自体はものすごくシンプル
- 40. Hands-on
- 43. UBUriBeacon
- 45. 実装 • UBUriBeaconのヘッダを見て他の値を調べてみましょう • Viewにボタンを置いて、スキャンの開始、停止をできるようにしてみましょう • 拾ったURLをViewに表示してみましょう
- 46. Android • https://github.com/google/uribeacon/blob/ master/android-uribeacon/uribeacon-sample/ src/main/java/org/uribeacon/sample/ UriBeaconScanActivity.java • https://github.com/google/physical-web/blob/ master/android/PhysicalWeb/app/src/main/ java/org/physical_web/physicalweb/ UriBeaconDiscoveryService.java UriBeaconリポジトリのサンプル Physical Webリポジトリの公式アプリコード (Serviceなどちゃんと使ってるのでしっかり作るならこっちを参考に) BLEのAPI自体はOSのものをそのまま使い、パケットのパースなどはライブラリを使う
- 49. URLのような機械のためのものではなく ユーザーが見てわかりやすいデータに OGPの例 (PhyWebではOGP以外のデータも利用) title, thumbnail, descriptionなど
- 54. やってることは • JSONのencode/decode • 圧縮URLの展開 • 目的のURLをHTTP GETして取得したHTMLをパー スしてデータを取得 • キャッシュ そこまで大したことはしてないので自作も難しくはない
- 56. 実装例
- 57. Swiftでも 直訳するだけ
- 58. さらに • UITableViewでリストとして表示してみましょう • タップするとopenURLでブラウザ上で開くとか、 あるいはWebViewで開くようにしてみましょう • 同じURLに対して毎回解決しないようにキャッシュ 機構を用意してみましょう