Download to read offline
Uploaded byRecruit Technologies
2,360 views
Web先端技術味見部#28 Physical Webハンズーオン開発補助資料
htmlday (http://www.htmlday.jp/) 2015においてWeb先端技術味見部28回で行ったPhysical Webのハンズーオン開発の補助資料です
Recommended
More Related Content
What's hot
Viewers also liked
Similar to Web先端技術味見部#28 Physical Webハンズーオン開発補助資料
![ifLink[改善版].pdf](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fiflink-230714052555-8cd84b5f-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
Web先端技術味見部#28 Physical Webハンズーオン開発補助資料
- 1.
- 2.
- 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/
- 5.
- 6.
- 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 SimpleParing• 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とは言わないCentralPeripheral例: PC例: キーボードマウスPeripheral例:室温系Peripheral例: 体重系ペリフェラルがサービスの主体になるデータを提供するケース(ペリフェラルがサーバー、セントラルがクライアント)が多い複数のデバイスとやりとりする中心になるのがセントラルペリフェラルにデータをWriteするケースもある サーモスタットの温度とか(設定系)
- 11.BluetoothのネットワークトポロジスキャタネットMasterSlave例: PC例: キーボードマウスSlave例:室温系Slave例: 体重系Master例: ヘッドホンSlaveヘッドホンなどは主体となるデータ(音声データ)の置き場はPC側になり、データの流れが逆になるMasterは同時にSlaveとなり、他のピコネットに参加することができる
- 12.ネットワークへの参加• Classic: ServiceDiscovery(今回は省略)• LE: Advertising
- 13.Advertising Packet• サービスのUUID•LocalName• その他ネットワークへの参加Observer Broadcaster(Peripheral)(Central)ペリフェラルは周期的にアドバタイジングパケットを発信「こんなサービスを提供していますよ」という情報
- 14.Advertising Packet• サービスのUUID•LocalName• その他ネットワークへの参加Observer Broadcaster(Peripheral)(Central)セントラルは周期的にスキャンを行い、周囲からアドバタイジングパケットを探す。
- 15.
- 16.Scan Responseネットワークへの参加Observer Broadcaster(Peripheral)(Central)ペリフェラルは、ScanRequestを受け取った場合はScan Responseを返す。アドバタイジングパケットに乗り切らない情報をここに載せることが出来る最初のアドバタイジングパケットが大きすぎると省エネ的にも良くない。
- 17.Advertising Packet• サービスのUUID•LocalName• その他接続要求ネットワークへの参加Central Peripheralセントラルは受け取った情報からUUIDなどを見て、つなぎたいサービスかどうか判断。サービスを受けたい場合は接続要求をペリフェラルに投げて接続を開始接続が完了するとBroadcaster/Observerとしての役目は終わり、Peripheral/Centralとなる
- 18.
- 19.
- 20.
- 21.ProfileHostControllerProfiles (Application)HCI -Host Controller Interface物理層あらかじめ用意されたアプリケーション仕様(Profile)ヘッドセット、キーボードなどの入力、オーディオなどBluetoothでの利用されるような機能はProfile仕様が最初から用意されている• HSP(HeadSetProfile)• HIDP(HumanInterfaceDeviceProfile)• …
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.Bluetooth LEのサービス利用手順まとめ• Peripheralとして振る舞うデバイスがアドバタイズ•Centralとして振る舞うデバイスがスキャンしてアドバタイジングパケットを発見• CentralやPeripheralに接続して、目的のサービスを検索• サービスの中から目的のCharacteristicを発見し、読み書き等
- 28.iOS/Androidでのsupport状況• iOSは5.0からBTLEがSDK(CoreBluetooth)に、まずはセントラルのみ。6以降でペリフェラルとしても動作可能。なのでほぼ普及済と考えられる。• Androidは4.3からBTLE(セントラル)搭載。PreviewLからペリフェラルとしても動作可能。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)を取得する必要
- 30.
- 31.iBeacon• CoreLocation• 屋内位置情報•Ranging/Monitoring
- 32.
- 33.iBeaconAdvertising Packet• サービスのUUID•LocalName• その他Broadcaster(Peripheral)Broadcasterとしてのみ振る舞うBTLEデバイスパケットの送信距離が10m程度なのを利用してデータ転送よりも近接検知に利用
- 34.用語の注意• iBeaconが近接検知技術と言われるが• NFCなどのスマートカード界隈では近接(proximity)は10cm以内、70cm以内だと近傍(vicinity)とかiBeaconの近接= BTLEのパケット送信可能距離ICカードの近接 = カード/リーダで電磁誘導が発生する距離
- 35.
- 36.
- 37.
- 38.iBeaconでのBTLEまとめ• Bluetooth LEの Broadcasterである• Peripheral/Central間で接続確立&データ転送はしない• Advertising Packetの中に収まるデータしか使えない• major/minorという16bit整数値二つ入れるBluetooth LEの利用の仕方自体はものすごくシンプル
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 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.javaUriBeaconリポジトリのサンプルPhysicalWebリポジトリの公式アプリコード(Serviceなどちゃんと使ってるのでしっかり作るならこっちを参考に)BLEのAPI自体はOSのものをそのまま使い、パケットのパースなどはライブラリを使う
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.やってることは• JSONのencode/decode• 圧縮URLの展開•目的のURLをHTTP GETして取得したHTMLをパースしてデータを取得• キャッシュそこまで大したことはしてないので自作も難しくはない
- 55.
- 56.
- 57.
- 58.さらに• UITableViewでリストとして表示してみましょう• タップするとopenURLでブラウザ上で開くとか、あるいはWebViewで開くようにしてみましょう•同じURLに対して毎回解決しないようにキャッシュ機構を用意してみましょう
- 59.