paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

誰でも機械学習を活用したWebアプリを開発できる「Teachable Machine」の完全チュートリアル大公開!

f:id:paiza:20191211113134j:plain
どうも、まさとらん(@0310lan)です!

今回は、ブラウザ上で多彩な学習モデルを誰でも作れるWebサービスの使い方をチュートリアル形式でご紹介します。

面倒な設定や導入準備・高価な機材などは一切不要で、ノートパソコン1台あれば今すぐ始められる手軽さが魅力です。

最終的に簡単なJavaScriptで独自の学習モデルを活用できるので、機械学習を利用したWebアプリ開発にご興味ある方はぜひ参考にしてみてください!

なお、paizaラーニングでは動画で学べる「Python×AI・機械学習入門講座」を公開しています。合わせてチェックしてみてください。

Teachable Machine

f:id:paiza:20191211113409j:plain
 

■「Teachable Machine」の使い方

それでは、どのようなサービスなのか実際に使いながら見ていきましょう!

まずはTeachable Machineのトップページを開いて【Get Started】ボタンをクリックします。

f:id:paiza:20191211113431j:plain


2019年12月時点では、3種類の機械学習を体験できるようになっているのですが、試しに【Image Project】を選択してみます。

f:id:paiza:20191211113441j:plain

このプロジェクトは画像やWebカメラに写っているモノを認識可能な学習モデルを構築できるのが特徴になっています。


以下のような編集エディタが表示されたら準備は完了です!

f:id:paiza:20191211113452j:plain

とてもシンプルなエディタですが、これだけで機械学習用のサンプル収集から入力・トレーニング・テストまで一通り完結できるスグレモノなのです。

さっそく、次の章からこのエディタを活用した学習モデルの作り方を詳しく見ていきましょう!

■学習モデルを作ってみよう!

さきほど表示された編集エディタは、以下のように3つの機能で構成されています。

f:id:paiza:20191211113518j:plain

左から右へ処理が流れるようなイメージになっており、学習モデルのベースになるサンプルを収集・入力してから訓練(トレーニング)をおこない、最終的に完成したモデルのテストができるようになっています。

今回はサンプル例として、Webカメラで撮影した【手】のカタチを判別できる学習モデルを作ってみたいと思います。カタチとしては、一般的なじゃんけんで使う「グー」「チョキ」「パー」にしてみましょう。


まずは「グー」のカタチを学習させるためのサンプル画像を収集します。

手を「グー」にしている画像が100枚以上あればそれを使ってもよいのですが、おそらく持っている人は少ないと思うのでWebカメラを使って収集しましょう。

編集エディタから【Webcam】を選択します。

f:id:paiza:20191211113538j:plain

カメラは、ノートパソコンなどに搭載されているものやUSB接続のカメラでも構いません。


カメラの映像が表示されるので、手が「グー」のカタチになっていることが分かるようにしてから青いボタンを押し続けます。

f:id:paiza:20191211113559j:plain


ボタンを押している間は、どんどん画像が自動的に生成されるようになっています。

f:id:paiza:20191211113608j:plain

手の向きやズームイン・アウトなどをしながら、さまざまな「グー」のカタチを画像にしておくのがポイントです。だいたい100枚前後の画像が作成できたところでボタンを離せば完了です。


同じ手順で「チョキ」「パー」の画像も生成していきます。

入力要素は画面下の【Add a class】をクリックすることで、増やしていくことが可能です。

f:id:paiza:20191211113626j:plain


「グー」「チョキ」「パー」それぞれのサンプル画像が収集できれば完成です!

f:id:paiza:20191211113637j:plain


次に、作成したサンプル画像を訓練(トレーニング)させましょう!

と言っても、やることは簡単で【Train Model】のボタンを1クリックするだけです。

f:id:paiza:20191211113651j:plain


あとの面倒な処理はすべて自動的におこなわれるので、そのまま数十秒ほど待っているだけでOKです。

f:id:paiza:20191211113703j:plain

(※ブラウザのタブを切り替えたり閉じたりしないようにだけ注意しましょう)


訓練が完了したら、テストできるようになります!

f:id:paiza:20191211113726j:plain

Webカメラに向かって手のカタチを作ってみてください。「グー」「チョキ」「パー」のカタチに合わせて、画面下の判定結果が変化するのが分かります。

正しい判定結果になっていることを確認しておきましょう!

もし、判定が正常でない場合は再度モデルの収集からやり直せば問題ありません。

■JavaScriptで学習モデルを使う

さきほど作成した学習モデルは、Teachable Machineのサービス内だけでなくJavaScriptを使ってどこからでも利用することができます。

JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので、まずJavaScriptを学習したいという方はチェックしてみてください。

利用方法は簡単で、画面右上にある【Export Model】ボタンをクリックします。

f:id:paiza:20191211113752j:plain


作成した学習モデルの書き出し方法が表示されます!

f:id:paiza:20191211113819j:plain


もっとも簡単な利用方法としては、学習モデルをアップロードすることです。

f:id:paiza:20191211113832j:plain

【Upload my model】ボタンをクリックすると、Teachable Machineのサーバー上に学習モデルのデータを無料でホストしてくれるようになります。つまり、クラウドにデータが保存されるので、どこからでも呼び出せるようになるわけです。


固有のURLも生成されているのが分かります。

f:id:paiza:20191211113846j:plain


あとは、画面に表示されているJavaScriptのソースコードを参考にしながらプログラムを組み立てていきましょう。

f:id:paiza:20191211113858j:plain

基本的に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】ボタンが表示されるのでクリックします。

f:id:paiza:20191211114234j:plain


すると、Webカメラが起動するので手を「グー」「チョキ」「パー」のカタチにしてみてください。

f:id:paiza:20191211114244j:plain

判定結果がTeachable Machineでテストしたときと同じになっているのが分かります。

この仕組みを活用して「じゃんけんゲーム」を作るのも楽しいですし、人物の顔を判定する機能を作ったり、良品と不良品を認識できるようにするなど、アイデアしだいでさまざまな活用方法が考えられるでしょう。

ここまでのソースコードを以下のリンクからすべて閲覧できますので、ぜひ合わせて参考にしてみてください!


<参考リンク>

 

■その他の学習モデルについて

これまでTeachable Machineを使ってWebカメラの映像を認識させてきましたが、他にも音声やポージングなどの学習モデルも作成できます。

f:id:paiza:20191211114323j:plain


【Audio Project】を選択すると、音声や効果音などを認識できるようになります。

f:id:paiza:20191211114336j:plain

パソコンのマイクから人間の声を録音できるようになっているのでサンプル収集も簡単です。他にも手を叩いた音やノイズなど、さまざまな音声を学習させていくことができます。

たとえば、自分の声だけに反応するボットを開発してみたり、鳥の声を聞き分けられるシステムを作るなどいろいろ楽しいアイデアを考えることができるでしょう。


【Pose Project】を選択すると、体のパーツを認識できるようになります。

f:id:paiza:20191211114348j:plain

頭の傾き、手の動き、体の位置、顔の向き…など、さまざまなパーツを把握できる学習モデルを作成できるわけです。

たとえば、体の動きをコントローラーにしたゲームアプリやフィットネスアプリなどを開発するのも楽しいですし、正しい姿勢を監視する装置やスポーツなどの動きを研究するのにも活用できるでしょう。


これらの学習モデルを作成するチュートリアルは、以下の公式動画でも視聴できるので合わせて参考にしてみてください!


 

■ 動画でプログラミングが学べる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段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud