Chrome for iOSでフィジカルウェブを試してみる

フィジカルウェブ

モノとWebを繋ぐための技術で、EddystoneのEddystone-URLを用いてビーコンデバイスからURLを配信して、Webに誘導するための仕組みです。

github.com

専用のアプリをインストールしたり、起動したりせずに、現実のモノに近づくだけで情報のやりとりができることを目標にしているプロジェクトです。

現段階では、iOSのChrome 44以降とAndroidのChrome 49以降がフィジカルウェブをサポートしています。

Eddystoneとは

Beacons  |  Google Developers

EddystoneはGoogleが発表したBLE（Bluetooth Low Energy）を利用したビーコン規格です。

AppleのiBeaconと同様にBLEのアドバタイジングパケットの形式を取り決めたものです。 iBeaconは正式にはiOSのみ対象としてるのに対して、Eddystoneはオープンな規格なので様々なプラットフォームで採用することができます。

Eddystoneのソースコードはこちらで公開されています。

github.com

Eddystoneには大きく分けて3つの送出フレームのパターンが決められています。

• Eddystone-UID … 16byteのユニークなIDを送出する
• Eddystone-URL … 短縮URLを送出する
• Eddystone-TLM … デバイスの温度、バッテリー残量、起動時間などのテレメトリーを送出する

Node.jsとiOSのChromeでEddystone-URLを試す

今回はBluetooth 4.0に対応したMacからEddystone-URLのアドバタイジングパケットを送信し、iPhoneで受け取ってみます。

iPhone側の準備

iPhoneにChromeの最新版をインストールします。

画面の上から下にスワイプして通知センターを表示して、画面下部にある編集をタップ。

TodayウィジェットにChromeを追加します。

Bluetoothを有効にして、フィジカルウェブを有効にします。

iPhone側の準備はこれでOKです。

Node.js

nodeはすでに入ってる前提で以下のnpmパッケージを利用します。

npm install eddystone-beacon

eddystone_url.js として以下のように作成しました。

var EddystoneBeacon = require('eddystone-beacon');

var url ='https://goo.gl/eGuo64';

EddystoneBeacon.advertiseUrl(url);

送信したいURLを短縮URLにして、 url に格納しています。

短縮URLにする理由は、 http(s):// の後に続く文字は最大17文字しか利用できないためです。

Google Shortenerを使って短縮URLを生成します。

また、短縮URLの元のURL（最終的に遷移させたいURL）は https である必要があります。

MacのBluetoothを有効にして eddystone_url.js を実行すると、アドバタイジングパケットが送信されます。

node eddystone_url.js

iPhone側で受信する

iPhoneのロック画面を解除して、通知センターを開くと周囲のフィジカルウェブオブジェクトが検索され、見つかると以下のようにフィジカルウェブのアイコンとURLのページタイトルが表示されます。

アイテムをタップすると、ブラウザが起動して、URLにアクセスすることができます。

まとめ

iBeaconと違い各々のアプリをインストールする必要がないEddystoneですが、現段階ではChromeアプリが必要な状況です。今後Eddystoneが広まり、OS側でサポートされるようになれば、多くの端末で準備なしに利用できるようになるのではないかと思います。 規格自体はオープンなのでビーコンのデバイスも作りやすいですし、さらにアプリと連携させたい場合もブラウザ（URL）からアプリを起動したりもできるので、さまざまな用途が生まれそうです。

［iBeacon＆Eddystone］統計・防災・位置情報がひと目でわかるビーコンアプリの作り方