どうも、まさとらん（@0310lan）です！
今回は、ブラウザ上で多彩な学習モデルを誰でも作れるWebサービスの使い方をチュートリアル形式でご紹介します。
面倒な設定や導入準備・高価な機材などは一切不要で、ノートパソコン1台あれば今すぐ始められる手軽さが魅力です。
最終的に簡単なJavaScriptで独自の学習モデルを活用できるので、機械学習を利用したWebアプリ開発にご興味ある方はぜひ参考にしてみてください！
なお、paizaラーニングでは動画で学べる「Python×AI・機械学習入門講座」を公開しています。合わせてチェックしてみてください。
■「Teachable Machine」の使い方
それでは、どのようなサービスなのか実際に使いながら見ていきましょう！
まずはTeachable Machineのトップページを開いて【Get Started】ボタンをクリックします。
2019年12月時点では、3種類の機械学習を体験できるようになっているのですが、試しに【Image Project】を選択してみます。
このプロジェクトは画像やWebカメラに写っているモノを認識可能な学習モデルを構築できるのが特徴になっています。
以下のような編集エディタが表示されたら準備は完了です！
とてもシンプルなエディタですが、これだけで機械学習用のサンプル収集から入力・トレーニング・テストまで一通り完結できるスグレモノなのです。
さっそく、次の章からこのエディタを活用した学習モデルの作り方を詳しく見ていきましょう！
■学習モデルを作ってみよう！
さきほど表示された編集エディタは、以下のように3つの機能で構成されています。
左から右へ処理が流れるようなイメージになっており、学習モデルのベースになるサンプルを収集・入力してから訓練（トレーニング）をおこない、最終的に完成したモデルのテストができるようになっています。
今回はサンプル例として、Webカメラで撮影した【手】のカタチを判別できる学習モデルを作ってみたいと思います。カタチとしては、一般的なじゃんけんで使う「グー」「チョキ」「パー」にしてみましょう。
まずは「グー」のカタチを学習させるためのサンプル画像を収集します。
手を「グー」にしている画像が100枚以上あればそれを使ってもよいのですが、おそらく持っている人は少ないと思うのでWebカメラを使って収集しましょう。
編集エディタから【Webcam】を選択します。
カメラは、ノートパソコンなどに搭載されているものやUSB接続のカメラでも構いません。
カメラの映像が表示されるので、手が「グー」のカタチになっていることが分かるようにしてから青いボタンを押し続けます。
ボタンを押している間は、どんどん画像が自動的に生成されるようになっています。
手の向きやズームイン・アウトなどをしながら、さまざまな「グー」のカタチを画像にしておくのがポイントです。だいたい100枚前後の画像が作成できたところでボタンを離せば完了です。
同じ手順で「チョキ」「パー」の画像も生成していきます。
入力要素は画面下の【Add a class】をクリックすることで、増やしていくことが可能です。
「グー」「チョキ」「パー」それぞれのサンプル画像が収集できれば完成です！
次に、作成したサンプル画像を訓練（トレーニング）させましょう！
と言っても、やることは簡単で【Train Model】のボタンを1クリックするだけです。
あとの面倒な処理はすべて自動的におこなわれるので、そのまま数十秒ほど待っているだけでOKです。
（※ブラウザのタブを切り替えたり閉じたりしないようにだけ注意しましょう）
訓練が完了したら、テストできるようになります！
Webカメラに向かって手のカタチを作ってみてください。「グー」「チョキ」「パー」のカタチに合わせて、画面下の判定結果が変化するのが分かります。
正しい判定結果になっていることを確認しておきましょう！
もし、判定が正常でない場合は再度モデルの収集からやり直せば問題ありません。
■JavaScriptで学習モデルを使う
さきほど作成した学習モデルは、Teachable Machineのサービス内だけでなくJavaScriptを使ってどこからでも利用することができます。
JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので、まずJavaScriptを学習したいという方はチェックしてみてください。
利用方法は簡単で、画面右上にある【Export Model】ボタンをクリックします。
作成した学習モデルの書き出し方法が表示されます！
もっとも簡単な利用方法としては、学習モデルをアップロードすることです。
【Upload my model】ボタンをクリックすると、Teachable Machineのサーバー上に学習モデルのデータを無料でホストしてくれるようになります。つまり、クラウドにデータが保存されるので、どこからでも呼び出せるようになるわけです。
固有のURLも生成されているのが分かります。
あとは、画面に表示されているJavaScriptのソースコードを参考にしながらプログラムを組み立てていきましょう。
基本的にHTMLファイル1つで手軽に構築できるようになっています。
ソースコードを少し解説すると、まず最初にtmImageというオブジェクトが提供されているので、これを利用してload()メソッドから学習モデルを読み込みます。
model = await tmImage.load(modelURL, metadataURL);
引数のURLは、さきほど学習モデルをアップロードしたときに生成されたURLの末尾に、【model.json】【metadata.json】を追記するだけで利用可能です。
https://teachablemachine.withgoogle.com/models/****/model.json
https://teachablemachine.withgoogle.com/models/****/metadata.json
次にWebカメラを起動する処理ですが、こちらもtmImageオブジェクトで提供されているWebcam()メソッドを使えば次の3行で準備できます。
webcam = new tmImage.Webcam(200, 200);
await webcam.setup();
await webcam.play();
実際に学習モデルを利用して手のカタチを認識させる処理は次のとおりです！
async function loop() { const prediction = await model.predict(webcam.canvas); webcam.update(); window.requestAnimationFrame(loop); }
基本的にはpredict()メソッドの引数にWebカメラの映像を当てはめるだけで認識されるので簡単です。
ただし、定期的にカメラの映像をアップデートしないといけないのですが、これはwebcam.update()を記述するだけで処理されます。また、繰り返し処理にはrequestAnimationFrame()を利用することで、各種ブラウザに最適化された更新処理が作れます。
ちなみに、predict()の返り値としては学習モデルのクラス名と認識された値が格納されています。
[ { className: "グー", probability: 0.904417037963867223} { className: "チョキ", probability: 0.00020572013454511762} { className: "パー", probability: 0.000909352719783783} ]
【probability】は0から1の間で変化するようになっており、100%認識されれば1になるというわけです。あとは、このデータを好きなように活用すれば学習モデルを使ったWebアプリを開発していくことができますね。
実際にブラウザで実行すると以下のように【Start】ボタンが表示されるのでクリックします。
すると、Webカメラが起動するので手を「グー」「チョキ」「パー」のカタチにしてみてください。
判定結果がTeachable Machineでテストしたときと同じになっているのが分かります。
この仕組みを活用して「じゃんけんゲーム」を作るのも楽しいですし、人物の顔を判定する機能を作ったり、良品と不良品を認識できるようにするなど、アイデアしだいでさまざまな活用方法が考えられるでしょう。
ここまでのソースコードを以下のリンクからすべて閲覧できますので、ぜひ合わせて参考にしてみてください！
＜参考リンク＞
■その他の学習モデルについて
これまでTeachable Machineを使ってWebカメラの映像を認識させてきましたが、他にも音声やポージングなどの学習モデルも作成できます。
【Audio Project】を選択すると、音声や効果音などを認識できるようになります。
パソコンのマイクから人間の声を録音できるようになっているのでサンプル収集も簡単です。他にも手を叩いた音やノイズなど、さまざまな音声を学習させていくことができます。
たとえば、自分の声だけに反応するボットを開発してみたり、鳥の声を聞き分けられるシステムを作るなどいろいろ楽しいアイデアを考えることができるでしょう。
【Pose Project】を選択すると、体のパーツを認識できるようになります。
頭の傾き、手の動き、体の位置、顔の向き…など、さまざまなパーツを把握できる学習モデルを作成できるわけです。
たとえば、体の動きをコントローラーにしたゲームアプリやフィットネスアプリなどを開発するのも楽しいですし、正しい姿勢を監視する装置やスポーツなどの動きを研究するのにも活用できるでしょう。
これらの学習モデルを作成するチュートリアルは、以下の公式動画でも視聴できるので合わせて参考にしてみてください！
■ 動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
Python×AI・機械学習入門編は、実際に画像認識技術を使いながら、初心者でも機械学習を体験・学習できるレッスン内容になっています。進行役として、上坂すみれさんが声を担当するキャラクター「スベトラーナ・小百合・ベレフスカヤ」が登場します。
詳しくはこちら
■まとめ
今回は、誰でも簡単に機械学習を活用できるWebサービスをご紹介しました！
Teachable Machineはバージョン1から大きく進化して、多彩な学習モデルを作れるようになっただけでなく独自のプログラムへ手軽に組み込めるようになって楽しさが倍増したように感じます。
簡単なJavaScriptで学習モデルを活用できるようになったのは非常に便利なので、みなさんもぜひオリジナリティ溢れる作品を作って公開してみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
