More than 3 years have passed since last update.

【10分で出来る】Teachable Machineを使って簡単なじゃんけん判別アプリを作ってみた

Last updated at 2020-09-03Posted at 2020-09-03

はじめに

先日、池袋の水族館に行ってきました。
水族館の入り口に、「LINNÉ LENS - 水族館と動物園のARガイド」というアプリのダウンロードQRコードがありました。

***「LINNÉ LENS - 水族館と動物園のARガイド」***とは、

スマホをかざすだけで、10000種類越えの生き物の名前やAIが瞬時に認識できる
魚、鳥、昆虫、哺乳類、両生・爬虫類、貝、甲殻類など様々な動物に対応。
国内の水族館と動物園にいる生きものの9割をカバー。
あなたの写真と充実の解説で、世界に一つだけの図鑑が作れます。
参考：AppStore

とのこと。おもしろそうなので、実際に入れて水族館を楽しみました。
精度もかなり良く、実際に自分で撮った写真で自分だけの図鑑（解説付き）が作れとても良かったです。

ふと、自分もエンジニアの端くれとして「いつかこんなアプリ作ってみたいな～」と思いました。でも機械学習難しそうでなかなか手を出しにくいイメージだなとも思っていました。

そんなとき、Qiitaである記事を拝見しました。

読んでみると、なにやらTeachable Machineというものを使って開発しているらしい。
自分は聞いたことがなかったため、簡単に調べてみました。

Webカメラを使って学習することで、モノや表情などを認識させることが出来るブラウザアプリケーションらしい

使い方もとても簡単！
１．学習したい画像をPCカメラorアップロードで与えてモデルの作成
２．モデルを元に学習
３．学習が終わったら完成！
簡単すぎる．．．。

Teachable Machineはブラウザアプリ（無料）のため、使用するのになにか特別準備する必要は無い！ただただカメラ付きのPCさえあれば出来る！
すごい！とりあえずやってみよう。

まずは、Teachable Machineのサイトにゴー！
Teachable Machine

「使ってみる」というボタンがあるのでクリック！

そうすると、このような画面が表示されます。

「Class1」と書いてある箇所をクリックして、学習モデルの名前を付ける。
今回はじゃんけん判別アプリなので「グー」「チョキ」「パー」とつけます！!

ウェブカメラのボタンを押すと、PCのカメラから、以下のように画像の撮影が出来ます。
「長押しして録画」ボタンを押している間、ずっと写真が撮影されます。

今回は、200枚を目安に写真を撮りました。手を近づけてみたり、遠ざけてみたり様々な写真を撮ることで精度が上がるかと思います。

同様にチョキとパーの学習モデルを作成します。
クラスを追加から、追加することが出来ます。
グー・チョキ・パーのモデルが出来たらひとまず終了。

１．で作ったモデルを機械学習で学習します。とはいってもやることは簡単で、真ん中にある「モデルをトレーニングする」を押すだけ。簡単すぎる･･･。

トレーニングを開始すると、このようになります。
※注意　トレーニング中はタブの切り替えを行わないこと

学習が終わったら、完成。

一番右にある、プレビューで実際に確認できます！PCカメラに移ったモノを、先程学習したデータを元に判断します。

こんな感じで、学習データを元に何パーセントどれに当てはまるかを出力してくれます。

試しに、グーチョキパーでもないものを写してみると

こんな感じになりました（笑）

ここまで、5分ほどで簡単にできてしまいました。感動。

ここまでは、Teachable Machineのブラウザアプリ内で使っていました。しかし、今回学習したモデルはJavaScriptを使ってどこからでも使用できます。

プレビューから、「モデルをエクスポートする」をクリック

そうすると、このような画面が表示されます。
まずは、モデルをアップロードをクリックして今回作った学習モデルをサーバー上に保存します。その後、コピーを押すとソースコードが保存されます。

コピーしたソースコードをブラウザで開いてみると、このようにカメラに写ったものを学習モデルを元に数値として出力されます。

今回は、Teachable Machineを使ってみました。大体10分もあれば作れるかと思います！
とても簡単で、非エンジニアの方にもおすすめです。これをきっかけに、プログラミング勉強してみようかなと思う人が一人でも増えたらいいですね！

今回、取り急ぎ書いたので、ミスなどがある可能性もありますので随時修正していきます。

次は、Teachable Machineで作ったモデルを元に、ソースコードをいじってもっとオモシロいモノ作ってみたいと思います。

以上！