これであなたも「ポケモンマスター」？！親子で楽しめる機械学習をご紹介します。

##「機械学習」で、憧れの「ポケモンマスター」に？！
わが家の息子の将来の夢は、「**ポケモンマスター**」！【※1】
そんな夢を後押し（？）するべく、先日習った「機械学習」でポケモンに関する何かを作りたい！と思いました。
私は、息子と一緒にポケモンのアニメやゲームを楽しむ時間が大好きです。
そこで、**「ポケモンマスター」になりきれる楽しいツール**が作れたらよいな、と思いました。

<details><summary>【※1】ポケモンマスターとは？</summary><div>

あらゆるポケモンを使いこなす、最強のポケモントレーナーのこと。（Wikiより）
アニメでは、ピカチュウを連れている主人公が目指している目標です。
</div></details>

なお、完成に至るまでの苦戦した点は、別記事にメモとしてまとめています。
こちらもクスっと笑ってしまう面白さがあるので、ぜひご覧ください！

https://qiita.com/kokano23/items/e226dd746f43dc34d9b8


##完成品（名称：「めざせ！ポケモンマスター」）
- 「機械学習」で、モンスターボールを検知します。
- 検知した場合、ピカチュウが目の前に現れて、見事に「**ピカチュウゲット！**」となる仕掛けです。<br>（以下、デモ動画参照）
- ゲットできたら、LINEにも通知が届きます！<br>ポケモンの主人公は、「スマホロトム」という図鑑が備わったスマホを持ち歩いています。**ゲットした情報はスマホに連携されるので、この辺りも忠実に？！再現**しています。


###デモ動画（２つあります。）
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">無事に「ピカチュウ」ゲット！となったら、LINEにも通知がきます！😍<br><br>ポケモンの主人公が持ち歩いている「スマホロトム」をイメージ✨<a href="https://twitter.com/hashtag/%E6%A9%9F%E6%A2%B0%E5%AD%A6%E7%BF%92?src=hash&amp;ref_src=twsrc%5Etfw">#機械学習</a>　<a href="https://twitter.com/hashtag/%E3%83%9D%E3%82%B1%E3%83%A2%E3%83%B3?src=hash&amp;ref_src=twsrc%5Etfw">#ポケモン</a><a href="https://twitter.com/hashtag/%E5%AD%90%E3%81%A9%E3%82%82?src=hash&amp;ref_src=twsrc%5Etfw">#子ども</a>　<a href="https://twitter.com/hashtag/%E3%83%94%E3%82%AB%E3%83%81%E3%83%A5%E3%82%A6?src=hash&amp;ref_src=twsrc%5Etfw">#ピカチュウ</a> <a href="https://t.co/xPgiUA2WSw">https://t.co/xPgiUA2WSw</a> <a href="https://t.co/cl46UWSzOh">pic.twitter.com/cl46UWSzOh</a></p>&mdash; くるみ@5歳児、子育て中 (@Kokano23) <a href="https://twitter.com/Kokano23/status/1401510311857819653?ref_src=twsrc%5Etfw">June 6, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

##作成方法
###①Teachable Machine
以下の記事を参考に、[Teachable Machine](https://teachablemachine.withgoogle.com/)のクラスを登録しました。

https://qiita.com/misa_m/items/d8a20d153c8ee7daf0c1

ここでは、以下の２種類のクラスを「機械学習」しました。

■モンスターボール：　両手（片手モンスターボール、片手フリー）
■なし：右手のみ、左手のみ、両手（いずれもモンスターボールなし）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/34ca7868-3536-713c-48b9-555a0000cb01.png)


###②ライブラリ等
「**ml5.js**」「**Handpose**」を使っています。ソースコードは、CodePenに掲載しています。
「Handpose」は、画像内の手の範囲検出と関節位置の推定するというものです。
モンスターボールがうまく検知されずにかなり苦労しましたので、後日、別記事にまとめたいと思います。

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="kokano23" data-slug-hash="WNpJpqP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="モンスターボール">
  <span>See the Pen <a href="https://codepen.io/kokano23/pen/WNpJpqP">
  モンスターボール</a> by kokano23 (<a href="https://codepen.io/kokano23">@kokano23</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


「Handpose」は、以下のサンプルコードを参考にしています。

https://learn.ml5js.org/#/reference/handpose

###③LINEBot
以下前回の記事のとおり、IntegromatからWebhookでLINEに通知される設定にしました。

https://qiita.com/kokano23/items/a6bbfe82653a9ea3a535


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1280625/79e81870-1e6b-d813-4fd5-c8a7608b3948.png)

##改善したいこと
 - 今回は、HTML・CSSが整えきれなかったので、もう少し見栄えを改善したいと思います。
 - ピカチュウが現れた瞬間に**ポケモンの鳴き声が流れたり**、**LINEに画像も一緒に通知する**など、もう少し機能を実装してみたいです。
 - ピカチュウの画像は、**手のひらの上に表示**ができると、もう少しリアルな演出ができそうです。
 - もっとポケモンの種類を増やしたり、ボールの種類（マスターボールなど）によってゲットできるポケモンが変わる、という仕掛けも面白そうです！


##まとめ
 - 「ポケモンGO」にちょっと似てるのでは？と思ったのですが、アニメのポケモンを忠実？！に再現している点は、きっとこのツールのオリジナル性だと思っています！<br>（**息子が楽しんでくれたので、それだけで自己満足**です・・・）
 - 機械学習にはおもちゃのモンスターボールを使いましたが、モンスターボールの写真でも検知できました。
 - 精度の問題だと思いますが、たまにモンスターボール以外のものでも、ピカチュウが飛び出してくるのはご愛嬌です！（^^;）

##参考記事
https://qiita.com/khoahv/items/5e5683d2137a7a7c0d7a