この子は誰？選手の名前を教えてくれるアプリ開発

こんにちは！
テレビなどを見ていて、「この人名前なんだっけ？」となることありませんか？
超有名人ならGoogleの画像検索で引っかかるかもしれませんが、
そうでもない（失礼ですね、すみません汗）特定の人を知りたい、顔が覚えられない、そんな時にちょっと役立つかもしれないアプリを作ったのでご紹介します。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ヤンスワ顔認証モデル作ってみました！<br>けど、全然当たらない💦<br>（特に木澤さん反応なし😂）<br>もっと学習が必要です…<a href="https://twitter.com/hashtag/swallows?src=hash&amp;ref_src=twsrc%5Etfw">#swallows</a><a href="https://twitter.com/hashtag/%E9%95%B7%E5%B2%A1%E7%A7%80%E6%A8%B9?src=hash&amp;ref_src=twsrc%5Etfw">#長岡秀樹</a><a href="https://twitter.com/hashtag/%E5%86%85%E5%B1%B1%E5%A3%AE%E7%9C%9F?src=hash&amp;ref_src=twsrc%5Etfw">#内山壮真</a><a href="https://twitter.com/hashtag/%E4%B8%B8%E5%B1%B1%E5%92%8C%E9%83%81?src=hash&amp;ref_src=twsrc%5Etfw">#丸山和郁</a><a href="https://twitter.com/hashtag/%E6%9C%A8%E6%BE%A4%E5%B0%9A%E6%96%87?src=hash&amp;ref_src=twsrc%5Etfw">#木澤尚文</a><a href="https://twitter.com/hashtag/%E6%BF%B1%E7%94%B0%E5%A4%AA%E8%B2%B4?src=hash&amp;ref_src=twsrc%5Etfw">#濱田太貴</a><a href="https://twitter.com/hashtag/%E5%B1%B1%E5%B4%8E%E6%99%83%E5%A4%A7%E6%9C%97?src=hash&amp;ref_src=twsrc%5Etfw">#山崎晃大朗</a><a href="https://twitter.com/hashtag/1%E4%BA%BA%E3%83%A4%E3%83%B3%E3%82%B0%E3%81%98%E3%82%83%E3%81%AA%E3%81%84?src=hash&amp;ref_src=twsrc%5Etfw">#1人ヤングじゃない</a><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/TeachableMachine?src=hash&amp;ref_src=twsrc%5Etfw">#TeachableMachine</a> <a href="https://t.co/zZ9rhoYlB0">pic.twitter.com/zZ9rhoYlB0</a></p>&mdash; hosaka (@Rhosaka21) <a href="https://twitter.com/Rhosaka21/status/1572343800558944256?ref_src=twsrc%5Etfw">September 20, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 母のためのヤンスワ検索アプリ
私と母親は数年前からプロ野球のヤクルトスワローズのファンです。
しかし母は名前を覚えるのが苦手で、中継を見ていてもよく「〇〇番は何て選手？」などと聞かれます。
その都度答えますが、私がいない時でも楽しめるようになんかいい方法ないかなーと思っていたら、
おもしろそうなものがありました！
今回は今注目の、ヤクルトスワローズ期待の若手たち、ヤングスワローズ、略してヤンスワ！
のお顔を認識すると名前を教えてくれるアプリ作りに挑戦しました！

# 1. 使用したい画像を用意する
現地観戦に行っていいカメラで写真を撮るタイプのファンではないので、今回は画像検索の力を借りました。
そしてやり方はまるまるこちらを参照しました。
>https://qiita.com/ka0ru19/items/64bfee2c7e904b9524d2

これによりダウンロードした画像をアップロードして学習させていきます。

# 2. Teachable Machineでモデルを作成し、Webアプリへ
「Teachable Machine」で検索するとやり方を教えてくれるページはいくつかあったので、モデル作成の方法はここでは割愛します。
今回はスマートフォンで使えるようにしたかったので、Javascriptではなく（2022年9月現在iPhoneでは動かず）、p5.jsのスニペットとやらをコピーして、[CodePen](https://codepen.io/)のHTMLの部分に貼り付けてアプリ化しました。

# 3. 使いやすいようにカメラの設定を変更
プログラミング知識ゼロのため、この部分に苦戦しました。
通常、端末がなんであれ、内側（自分側）のカメラに設定されているのですが、
``facingMode: { exact: "environment" }``
という設定をしてあげると、外側のカメラが動くようになるそうです。

実際のコード
```ruby:変更前
video = createCapture(VIDEO);
```
```ruby:変更後
 video = createCapture
    ({audio: false, video:{facingMode: { exact: "environment" }}});
```

次に、背面カメラが使えるようになったものの、画像が反転してしまうという問題が発生しました。
`video`と`flippedVideo`をきちんと設定すればうまくできるのでしょうが、私は色々変えてみたものの、反転させないようにすることができませんでした。。。
時間ある時に再チャレンジしようと思います。

# 4. 作ったモデルを共有する
CodePenのURLを共有すれば誰でも使えるようになります。
今回はGoogleChromeの機能を使ってQRコードも作りました。
一応載せておきます、一応、、
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2792410/a77d3d9c-6d04-be71-5105-40e1f7e935ba.jpeg" width=30%>


# 5. おわりに
いざ、使ってみよう！と、選手の顔写真にかざしてみましたが、、、
判定率はいまひとつ、というかかなり外してる（涙）
Teachable Machineの現状の精度では顔の識別まではできないのかもしれません。
母を喜ばせることができず残念、
しかし、機械学習モデルなので、勉強させ続ければいつかは正解するかも！
ということで、こちらも時間がある時に再挑戦します。

そして本当の本当は劇団四季の俳優さんたちを教えてくれるものを作りたかったのですが、画像データが少なく学習が十分にできないこと、そもそも私がそんなに名前を知らないことから断念しました。
公式で作ってくれたら喜ぶ人結構いそうな気がしますが。

以上、身近なちょっとしたことに使えるおもしろそうな技術を紹介しました。
これからもいろいろなものづくりにチャレンジしていきたいです。
読んでいただきありがとうございました。