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

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

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

> スマホをかざすだけで、10000種類越えの生き物の名前やAIが瞬時に認識できる
魚、鳥、昆虫、哺乳類、両生・爬虫類、貝、甲殻類など様々な動物に対応。
国内の水族館と動物園にいる生きものの9割をカバー。
あなたの写真と充実の解説で、世界に一つだけの図鑑が作れます。
参考：[AppStore](https://apps.apple.com/jp/app/linn%C3%A9-lens-%E6%B0%B4%E6%97%8F%E9%A4%A8%E3%81%A8%E5%8B%95%E7%89%A9%E5%9C%92%E3%81%AEar%E3%82%AC%E3%82%A4%E3%83%89/id1406300416)

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

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

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

- [ジェイソン・ステイサムに「死にたくないなら手を挙げろ！」と言われるのが夢だったので、自分でそんなアプリを作りました。](https://qiita.com/twtjudy1128/items/4c29a98a035a6e8cbcb4)

- [一人笑ってはいけないゲームができるWEBアプリを機械学習でつくった](https://qiita.com/kaiser355/items/f62fd09b0e2bfe16e973)

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

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

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

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

## 実際にTeachable Machineを使って、じゃんけん判別アプリを作ってみよう！
まずは、Teachable Machineのサイトにゴー！
[Teachable Machine](https://teachablemachine.withgoogle.com/)

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

そうすると、このような画面が表示されます。
![Teachable Machine画面.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/a92c28f2-f30a-173f-a98c-80dd62a7b71e.png)

## １．学習モデルの作成をしよう！
「Class1」と書いてある箇所をクリックして、学習モデルの名前を付ける。
今回はじゃんけん判別アプリなので「グー」「チョキ」「パー」とつけます！!
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/0886c0bc-3c47-cd84-81df-9fe1ccab30a5.png)


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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/c50774ef-f186-e0f9-821a-d969fd49248e.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/993a1d94-1b77-c77d-c6da-897a8c4e8462.png)

トレーニングを開始すると、このようになります。
***※注意　トレーニング中はタブの切り替えを行わないこと***
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/f496fd08-e96d-b71a-5e00-0f17a0ccfd98.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/bf2f031e-c6ef-a3c6-a70f-8c98d8183136.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/0e4a02c4-1e87-6eaa-1f28-1c90a86a9282.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/d036bd31-2705-edb8-8afe-9925dc9e55cc.png)

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

試しに、グーチョキパーでもないものを写してみると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/38a32fe1-c501-c918-c9bf-ce8ce8cbab0f.png)

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

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

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

プレビューから、「モデルをエクスポートする」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/a5cadf7a-a4bf-57d3-c0ed-b8d46fc069b4.png)

そうすると、このような画面が表示されます。
まずは、モデルをアップロードをクリックして今回作った学習モデルをサーバー上に保存します。その後、コピーを押すとソースコードが保存されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/fb09ab39-f509-25b8-2613-28c665b63489.png)

コピーしたソースコードをブラウザで開いてみると、このようにカメラに写ったものを学習モデルを元に数値として出力されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381376/3815654d-0bea-e74e-2a7e-f2865481b91c.png)

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

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

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

以上！