TensorFlow.js を使ったモバイル Web アプリの開発と UX ケーススタディ


機械学習（マシーンラーニング）は近年のコンピューターサイエンスの歴史において最も画期的な技術革新のひとつと言えるでしょう。ディープラーニングの出現によって機械学習に再び注目が集まってからの歴史はまだ浅いものの、機械学習はすでに幅広い分野で応用されはじめています。例えば、医療分野においては糖尿病に起因した失明の兆候の早期発見を手助けし、エネルギー分野ではデーターセンターでの冷却電力の削減に貢献を果たしています。また、「ラーメン二郎」のラーメンを、写真だけでどこの店舗のものかを識別する、そんなユニークなシステムの開発にも機械学習が用いられています。

こうした機械学習の応用は Web 体験にも活かされ始めています。Google では、今年 3 月に TensowFlow の JavaScript 版となる「TensorFlow.js」を発表しました。TensorFlow.js は Chrome などの Web ブラウザ上での機械学習モデルの学習、また学習済みモデルの実行を可能にする JavaScript ライブラリです。本記事では、TensorFlow.js による機械学習技術の活用によってどのような新しい Web 体験が可能になるか、Web アプリの開発事例を紹介しながらインタラクション、デザインの視点から解説します。

機械学習を使った Web アプリ「Emoji Scavenger Hunt（絵文字借り物競争）」

 Emoji Scavenger Hunt. (絵文字借り物競争)
出題された絵文字と同じものを、制限時間内に身の回りから探し出すモバイルゲーム。見つけたアイテムをスマホのカメラにかざすと、ニューラルネットワークがそのアイテムを推測・判定します。
TensorFlow.js のアナウンスに際し、そのデモとして Google Brand Studio チームが制作した「Emoji Scavenger Hunt（絵文字借り物競争）」という Web アプリのゲームを発表しました。出題された絵文字と同じものを（例えば⌚なら腕時計を）制限時間内に見つけ、スマホのカメラにかざすと、ニューラルネットワークがそのアイテムを推測し、判定します。アイテムを見つければ制限時間が増え、次の絵文字が出題されます。段々とお題のレベルが上がっていくなかで、時間内に見つけたアイテムの数を競うゲームです。この一連の動作体験がすべてブラウザ上で動作するように開発されています。

（こちらのゲームが日本語にも対応しました。スマートフォンからこちらの URL へアクセスしてお試しください。）
ゲームのリリースから約半年の間に、世界中で 200 万回以上の絵文字が出題されました。8 万 5,000 個ものさまざまなタイプの💡や、6 万 5,000 着の👖が世界中で発見されました。数ある絵文字の中でも✋を見つけるのが一番簡単（平均 2.91 秒）で、📭 を探し出すのはなかなか難しい（平均 21.2 秒）ようです。このゲームのコアなインタラクションである画像認識、つまりカメラに映ったアイテムを自動で判別する部分で機械学習の技術が用いられています。


機械学習を活用したインタラクションが高速かつリアルタイムで可能に


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.


 Posted by Takashi Kawashima, Designer / Creative lead for Google Brand Studio