Google Developers Japan: 機械学習がこれからの Web 体験とインタラクション・デザインの可能性を押し広げる

Local blog for Japanese speaking developers

機械学習がこれからの Web 体験とインタラクション・デザインの可能性を押し広げる

2018年10月8日月曜日

TensorFlow.js を使ったモバイル Web アプリの開発と UX ケーススタディ糖尿病に起因した失明の兆候の早期発見を手助けデーターセンターでの冷却電力の削減に貢献「ラーメン二郎」のラーメンを、写真だけでどこの店舗のものかを識別する
機械学習を使った Web アプリ「Emoji Scavenger Hunt（絵文字借り物競争）」

Emoji Scavenger Hunt. (絵文字借り物競争)
出題された絵文字と同じものを、制限時間内に身の回りから探し出すモバイルゲーム。見つけたアイテムをスマホのカメラにかざすと、ニューラルネットワークがそのアイテムを推測・判定します。

Emoji Scavenger Hunt（絵文字借り物競争）
（こちらのゲームが日本語にも対応しました。スマートフォンからこちらの URL へアクセスしてお試しください。）
機械学習を活用したインタラクションが高速かつリアルタイムで可能に

Web ブラウザ上での機械学習の活用は、それまでは実現が難しかったさまざまなインタラクションを可能にしていくと期待されています。例えば Emoji Scavenger Hunt は「スマホのカメラを身の回りのアイテムにかざして遊ぶ」という、画像認識技術をつかったインタラクションが基本コンセプトのゲームです。ただ、こうした画像認識をスマートフォンで、かつブラウザ上で実行することは、従来の方法では非常に難易度の高いインタラクションでした。

例えばラップトップの Web カメラのような環境では、入力される画像は常に定点撮影によって背景が固定され、かつ顔やアイテムが画面の中央付近に来るだろうという予測（と制限）が設けられます。また負荷がかかる画像認識の演算処理能力でもラップトップはモバイルよりも数段優れています。一方、どこへでも持ち運べるスマートフォンでは、たとえ同じアイテムであっても撮影する背景やアングル、光の加減など、その組み合わせが無限に考えられます。従来の手法でこうした画像処理を行うには、その無限とも思えるパターンすべてに対応するプログラムを組まねばなりませんでした。

そうした処理の対応に機械学習が威力を発揮します。機械学習の大きな特徴は、あらかじめ用意された学習用のデータからパターンを抽出することで、新しい入力データに対しても有用な出力を推論することです。これは私たち人間が学習するプロセスと良く似ています。例えば、見たことのない腕時計を見ても「これはきっと腕時計」と私たちが推測できるのは、過去の経験から「腕時計とはこういうもの」という何かしらのパターンを学んでいるからで、ざっくりと言えば機械学習もこれと同じコンセプトです。

こうした機械学習の技術はこれまでも Web サービスで使われていました。ただそのほとんどは機械学習モデルをサーバー側に置き、デバイスからの入力データをサーバーに送り、そこで推論を実行、出力された結果をクライアントに送り返すといものでした。こうしたアプローチは高精度の推論を可能にしますが、データ送信によるタイムラグが発生します。それではこうしたゲームに必要な軽快なユーザー体験が損なわれてしまいます。

一方で TensorFlow.js は WebGL（*デバイスの GPU を用いてブラウザ上で高速に画像処理を実行する JavaScript API）に対応しており、モバイルブラウザ上でも機械学習モデルの推論を高速かつ高頻度で実行することが可能です。またデバイス上で直接機械学習モデルによる推論ができるため、サーバーとのデータのやりとりによる遅延が発生しません。

そこで実際に👖から🐱、 🍔 から 🍲などの絵文字を含む約 500 個の日用品を認識するプロトタイプモデルを作成し、検証をはじめました。すると驚いたことに、従来では複雑であった画像解析処理が、手元のスマートフォン（Pixel 2）で 1 秒間に 15 回、ラップトップでは 60 回の高頻度で画像を識別することができました。このような高速かつ高頻度での推論が、ゲームの精度とスピード感の両方を高め、スムーズなゲーム体験を可能にしました。

カメラに映ったアイテムが瞬時に識別されている様子。数値は予測スコア。ある程度の精度で、かつ高頻度で推論を実行することで絵文字とアイテムのマッチ率を高め、軽快なゲーム体験を可能にしている。
推論の様子はこの URL からお試しいただけます。

キャッシュが可能なファイル変換によって、ローディングも高速に

Web サイトがなかなか開けずにイライラ・・・誰もが身に覚えがある経験です。いかに高度な機械学習を用いても、ローディングに長時間を要すればユーザー体験には致命的です。そんな場合には TensorFlow.js converter がツールとして提供されています。TensorFlow.js converter は TensorFlow や Keras 等を使って訓練された学習済みモデルを Web 上で実行するためのフォーマットに変換するライブラリです。また変換されたファイルはキャッシュが可能でかつ最大 75% まで縮小されます。

Emoji Scavenger Hunt で使われている画像認識モデルもこのツールを利用し、ファイルサイズをわずか約 3 MB、スマートフォンで撮影した写真よりも小さなサイズに抑えることができました。またキャッシュが可能なため、2 度目以降はより短時間で Web サイトを読み込むことが可能です。

クライアントサイドによる推論とコスト的なメリットまた学習済みモデルは静的ファイルとして処理されるため、サーバーは機械学習モデルによる推論を行う必要がなく、ファイルをデバイス側に供給するだけで済みます。従来のサーバー側での推論を行うアプローチではサーバー側での高度で負荷を要する演算処理が必要で、スケールに伴うコストの増大が課題でした。しかしこうした設計では、推論の演算をデバイス側で処理をします。そのため、アクセスやリクエストの増減に応じて推論用のサーバーを拡張する必要がなく、コスト的な効果も期待ができます。
ブラウザ上での機械学習が Web デザイナーの役割を大きく広げる

著名メディア・アーティストのカイル・マクドナルド氏によるツイート。モバイルブラウザ上でのリアルタイムでの機械学習の実行とカメラの活用は、どちらもここ最近で可能になった最新のテクノロジーであり、この 2 つを掛け合わせたプロジェクトが今後ますます出現すると予期しています。

近年、スマートフォンに搭載された多くのセンサーを Web を通して活用することが可能になってきました。カメラやマイクはほんの一例にすぎません。例えば Generic Sensor API を使うことで、スマートフォンに搭載された加速度センサーや GPS などさまざまなセンサーへのアクセスが JavaScript からできます。こうしたデバイスセンサーとブラウザ上での機械学習技術を融合することで、今までになかった数多くの新しいインタラクションが可能になっていくでしょう。

時代はデスクトップからモバイルにシフトし、それに伴ってオンライン体験の割合も Web からネイティブアプリへと移行しています。その一方で、Web がもたらすユーザー体験とその力が再評価されていることも注目に値します。Web はアプリと違い、モバイルからデスクトップまで、また OS も問わずにひとつの URL でコンテンツを体験できるクロスプラットフォームのメディアです。またアプリと違い、ダウンロードやインストール、複雑な設定も必要としません。シェアすることも容易です。

スマートフォンにおける機械学習技術の活用と、Web ならではのシンプルでスピーディーなユーザー体験、この 2 つを融合することでオンライン体験の可能性の幅がぐっと広がるのではないでしょうか。またそこを押し拡げることが今後 Web デザイナーに期待される役割であり、活躍できるスペースなのではないかと考えます。

まとめ

Web 開発における機械学習の活用とその取り組みはまだまだ始まったばかりです。これからどんな新しいユーザー体験のアイデアが生み出され、デザインされていくのか。その可能性をこれから皆さんと探っていければと思っています。何か新しいプロジェクトがあれば、ぜひハッシュタグ #tensorflowjs を使ってシェアしてください。また AI Experiments サイトにて作品の応募も受け付けています。このプロジェクトの技術的な側面にも興味がありましたら、コードをオープンソース化していますのでご参照ください。

謝辞

このプロジェクトは Google Brand Studio と TensorFlow.js の両チームによるコラボレーションで制作されました。以下のチームメンバーに感謝申し上げます。

Jacques Bruwer, Jason Kafalas, Shuhei Iitsuka, Cathy Cheng, Kyle Gray, Blake Davidoff, Kyle Conerty, Daniel Smilkov, Nikhil Thorat, Ping Yu, and Sarah Sirajuddin.

Takashi Kawashima

ラベル

ブログアーカイブ

2025
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2024
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2023
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2022
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2021
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2020
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2019
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2018
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2017
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2016
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2015
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月

2014
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2013
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2012
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2011
- 12月
- 11月
- 10月
- 9月
- 8月
- 7月
- 6月
- 5月
- 4月
- 3月
- 2月
- 1月

2010
- 12月
- 11月

Feed

"プロダクトに関するご意見はプロダクトフォーラムにお願いします"

Google
Privacy
Terms