HTML5Experts.jp

Webの最先端では何が起こっているか、今Googleが取り組んでいることは?──Google I/O 2016セッションレポート【後編】

Google I/O 2016のセッション「What’s new for the web?」についてのレポート後編です。(前編はこちら) 前編では、既に導入済みの機能、API、またこれから導入される機能が怒涛のごとく紹介してきました。後編では、Web Platformをより先に進めるためにGoogleが取り組んでいること、そしてWeb BluetoothやPhysical Webについて解説していきます。

Google loves the web

ChromeチームWeb Platformをより先に進めるために、ここ1~2年取り組んでいるアプローチの紹介です。

まず、前提としてGoogleはWebが大好きです。Googleの同僚は皆、Webが大好きです。そしてChrome Teamには「Webをより先に進める」という重要なMissonがあります。ここで私がWebと言っているのはChrome Webということではなく、全てのWebのことを指していて、それら全てのWebが素晴らしくなってほしいと思っています。

よって、Interoperability(相互運用性)を保ちモダンブラウザの全てにShipされるまでが我々の使命です。なぜならInteroperabilityが保たれずShipしてしまったら、誰でも・いつでも・どこでも利用できるというWebの最も大きく重要な利点の1つが失われてしまうからです。Vender Prefixを廃止したのもそういった理由です。

Chromeにおいては、Web Platformをより先に進めるために4つのアプローチをを持ち取り組んでいます。

Chromeチームが取り組んできたこと

しかし、機能を追加するだけではWeb Platformを健康に保つことはできません。よって、機能の削除も行います。削除の理由には、他のAPIとの入替えや、実験的に作ったが上手くいかなかった、というものがあったりします。3つ前までで削除された機能のリストがこちら(goo.gl/5gq1Im)です。今後、requestAutoCompleteだったり、HTML5 App Cacheのような影響の大きな機能も削除しようとしています。まだ使われている機能、APIをいきなり削除しないというようなポリシーもありますので安心してください。

これまでの成功の紹介

それでは、ここ数年での成功を紹介します。私がここに立っている、ということは何のことだか分かる方も多いかも知れませんが、そうですWeb MIDIです。

MIDIは知ってる方もそうでない方もいると思います。仕様ができてから30年以上にもなる楽器のキーボード、シンセサイザー等、電子楽器同士、またはコンピュータとを接続する標準化されたプロトコルです。数年前Web Audioで遊んでいたときに「これを楽器のキーボードから操作したい」と思い立ったW3Cにて標準化を始め、Chromeでは去年Shipされました。

ChromeでのShip以降、多くの楽器メーカがユーザー体験を提供するプラットフォームとしてWebを使い始めました。Yamahaはrefaceという新しいシンセサイザーのラインナップに対してSoundmondoという音色のエディタ、ライブラリアンを提供するWeb MIDIを使ったサービスを展開しています。NovationのCircuit Groove BoxはWebに接続して新しいサンプルをダウンロードします。これらの作業においてソフトウェアを新たにインストール必要はないのです。

そして、間違いなくスゴイことはフランスのEDMアーティストであるMadeonがWeb Audioで作られたRemixBoardをWebサイトで公開したことです。ファンに向けられて作られたサイトで、彼のアルバムの中の音をRemixして遊ぶことができるのです。もちろんMIDIデバイスも接続してプレイすることができるようになっているのです。
(デモ(パフォーマンス?)が始まります。実際の動画を御覧ください)

何が起きたかはここまたは画像をクリックして動画を御覧ください!

デモアプリのURLはこちらwww.madeon.fr/adventuremachineです。

「これスゴイでしょ?!」と言いたいのですが、本質はそこではなくて「ハードウェアがブラウザにアクセスできる」ということが大きな可能性を生んだ、ということを伝えたいのです。ちょうど加速度センサから素晴らしいユーザー体験(UX)が生まれ、モバイル・デバイスが大きな可能性を持ったのと同じようにです。他にも接続できることで大きな可能性が生まれるデバイスはたくさんあると思います。我々は、そこにある可能性を積極的に解き放っていきたいと考えています。

(ここでChris氏からFrançois氏に交代)

これから何が起こるのか

Web Bluetooth

Bluetoothの名称の由来の説明から始まります。(詳しくはWikipediaのBluetooth 「名称の由来」をどうぞ)

Bluetoothはいろいろなバージョンで20年成長してきた技術で、最新はBluetooth Low Energy(BLE)が導入されたVersion 4でリリースされてから6年経過しています。Wi-Fi、Ethernetのスピードは継続的に上がっていますが、Bluetoothはちょっと様子が違っています。

なぜなら、今まで接続されていなかった多くのデバイスに搭載できるようにバッテリの消費量を最小限にできるようにデザインされているからです。例えば小型のデバイスが使うバッテリは、通常CR2032です。(2032の20は直径、32は厚さを表すそうです!)なので、転送速度はとっても遅いのです。ですが、BLEはそもそも転送速度が遅くても大丈夫なデバイスをターゲットにしているので問題はありません。

それでは、デモをしてみます。デモはPlaybulb Candleという電球のOn/Off、色をBluetooth通信にて変更できるデバイスをWebアプリから操作します。(映像には全体が映っていませんでしたが、会場ではこんな感じでデモが行われていました)

Bluetooth SIG(Bluetoothの規格の策定、技術利用に対する認証を行う団体)は、これから先2年で96%の電話、タブレットにBLEが搭載されると予想している。そこからも、いろいろな場所でBLEが存在するであろうことがお分かりになると思います。

Web BluetoothのAPIを説明する前に、一度BLEの動作を復習してみます。Bletoothには、以下の2つの機能があります。

PeripheralがCentralに接続(ペアリング)されると、Peripheralはアドバタイジング・パケットのBroadcastを停止し、CentralがPeriferalで動作するGATTサーバと通信を開始する。通信に関しては、デフォルトで用意されているバッテリ、心拍のようなサービスも存在していますが、もちろん独自にサービスを作ることも可能になっています。それぞれのサービスにはそれぞれのCharastristicに属性を持っていて、読込み(バッテリーレベルの取得等)、書込み(設定の変更等)、また更新時に通知(心拍数のリアルタイム監視)してもらうことも可能です。Web Bluetooth APIを使って書いたサンプルを説明していきます。

値の読込み

コードはラップトップがCentral、何かしらのデバイスがPeripheralとなっていることを想定しています。まず、Centralのラップトップがnavigator.bluetooth.requestDevice(option)をCallして近隣のデバイスを探索します。optionにデバイスが山ほど列挙されないためにどの種類でフィルタするかを記述します。コードではバッテリのサービスは標準化されているので「batttery_service」と文字列で指定していますが、アドバタイジングパケットにはカスタマイズした値も書込むことが可能です。

navigator.bluetooth.requestDevice(option)をCallすることで探索が開始され、それと同時にアドレスバーの直下に該当するデバイスを列挙するポップアップが出てきます。ユーザがリストからデバイスを選択すると、JavaScript側ではそのデバイスのデバイス名、利用可能なサービスが格納されているオブジェクトにアクセスが可能になります。

ここでセキュリティに関する注意点。
navigator.bluetooth.requestDevice(option)はユーザのインタラクションにて初めて動作します。デモではボタンクリックで開始していました。Localhost以外のホストでWeb Bluetoothを使う場合は、HTTPSでコンテンツがServeされたことを要求している。

device.get.connect()をCallしてGATTサーバと接続をします。その後に、server.getPrimaryService(‘battery_service’)でバッテリサービスを取得、service.getCharacteristic(‘battery_level’)で読込みたいCharacteristicを指定して取得、最後にcharacteristic.getValue()をCallすることで、バッテリのレベルの読込み(取得)をすることができます。

値の書込み

先ほどとは違い、心拍センサをPeripheralとしています。その他、ハイライトされた部分が違います。charctristic.writeValue()にUint8Arrayにて、1バイトを引数に渡すことで書込みを行っています。

更新の受取り

この例でも、心拍センサをPeripheralとしています。この例でも、ハイライトされた部分が違います。characteristicにcharacteristicvaluechangedのイベント名でEventハンドラを設定し、beepという関数をCallbackとして指定しています。characteristic.startNotifications()で、更新の受け取りを開始します。これで、更新がある度にbeepが実行されます。

続いて、心拍センサを動作させるデモです。私(François氏)は心拍センサをつけています。リアルタイムに値を受け取ることができますので、ちょっと見てみましょう。通常私の心拍数は60-80ですが、今はどうでしょう?

(普段の倍近くの心拍数が表示されChris氏も会場も爆笑)
次に実際にリアルタイムに心拍数を受け取っていることを証明するために腕立て伏せをしてみます。(前編の最後に掲載さいた画像はここでの1シーンです)
(が、ペアリングが切断されたのか動作せず……そして、今度はChris氏も会場も大爆笑!失敗するということは、デモがリアルタイムに行われている証拠です!)

私以外にも、Web Bluetoothで遊んでいる同僚たちもいます。

Web Bluetoothでラジコンカーをコントロール

Web Bluetoothでプリンタをコントロール

Web BluetoothでBB-8をコントロール

Web BluetoothでLEDをコントロール

Web Bluetoothで空飛ぶ猫をコントロール

Bluetoothのパケット通信の中身を見るときはAndroidを使うのが最も簡単な方法です。AndroidのDeveloper Optionにある「Bluetooth HCI snoop log」を有効にしてください。(詳しくはこの辺りを参照してみてください)

現在Web BluetoothをサポートしているブラウザはOperaとChromeOS、マシュマロ上で動作しているChrome for Android、Chrome for LinuxでChromeでは chrome://flags/#enable-web-bluetooth (アドレスバーにコピー&ペーストしてください)を有効にすることで利用することが可能です。Mac、WindowsのChromeへは現在実装中です。

開発の助けになるであろう以下の2つを紹介します。

WebアプリからでもNativeアプリと同じように、Bluetoothでデバイスを操作できるようになりました。また、Webアプリですので、URLをシェアすることで、誰でもスグにアプリを利用できるようになります。当たり前のことかもしれませんが、これがWeb Platformの大きな強みです。

Physical Webとの連携

URLを載せたBluetoothのパケットをビーコンからブロードキャストするPhysical Webですが、これがもしBluetoothのアプリからブロードキャストできたらどうでしょう?

URLをPhysical Web経由で受け取り、そのURLにアクセスするとBluetoothデバイスをコントロールするアプリが表示され、Bluetoothデバイスとのペアリングが完了したら、その直後からBluetoothの利用が可能になりますよね。今までのアプリを検索してインストールする等の作業が一切必要がなくなり、通知エリア(Notification Area)に通知されたURLにアクセスするだけでペアリングも含め、Bluetoothデバイスを利用する準備が整うことになります。

今後、Web BluetoothはPhysical Webの機能を組み込み、前述の動作を一気通貫でJavaScriptで実装できるような機能を追加する予定です。

CodelabもControl a PLAYBULB candle with Web BluetoothInteractive with Bluetooth devices on the web with Polymerもありますので、是非挑戦してみてください。

(再びChris氏)

Web USB

Web USBは現存する全てのUSBデバイスに接続しようと考えているわけではなくて、Firmwareへのアクセスを許可されているような新しい種類のデバイスに適用されます。

まとめ

ここではカバーしきれなかった、まだまだ多くの以下の様な機能が進行中です。

さらに、まだデザインも始めていないPersistent Storageとか、Web Intents v2もあります。

そろそろ時間です。我々がWeb Platformの未来にワクワクしているのと同じくらいに、皆さんもワクワクしていることを期待しています。

developers.google.com/web/updates/ にさらなる情報がありますので、お時間がありましたらご覧ください。

(というところで、セッションは終了しました)

セッション終了後の素敵な笑みを浮かべるChris氏とガッツポーズのFrançois氏

ありがとうございました&お疲れ様でしたっ!!!