おはやいございます！
とうとうワールドカップ開幕しますね。こういってはあれですが初戦のカタールエクアドル戦は今大会でもずば抜けて注目度が低い試合ではないでしょうか。実質明日のイングランドイラン戦から僕のワールドカップは始まります。（記事を書き終わるころには遠い過去の話になってそう）
そこで！先日習った機械学習のアウトプットの一環としてGoogleのTeachable Machineを使い応援してるチームのユニフォームを着ているときだけ応援歌が流れるアプリ（アンリ君）を作りたいと思った。
完成品（未アンリ君）
See the Pen Arsenal FC Logo Animation by Southeecric (@Southeecric) on CodePen.
本当はアーセナルのユニフォームを着ていると応援歌が流れるようにしたかった。
またワールドカップも開幕したので各チームのユニフォームと応援歌でも作ってみたかった。
1.Teachable Machineにユニフォームを取り込んでいく！
まずTeachable Machineに別々のユニフォームの写真を取り込んでいく！
思っていたほど家にあるユニフォームがなかったのでクリケットのユニフォームも使って行く。
今回はTeachable Machineの画像プロジェクトを使う。
画像プロジェクトとは複数枚の画像をクラス別で取り込んでいきAIに学習させるものである。その後、AIはカメラに映し出されたものを学習したモデルをもとにどのクラスのものが移っているかを判断する。
実際に作ってみたが写真を撮る時間や学習する時間はとても短くほんとにこんな単時間でオリジナルのモデルができるのかと疑うくらいであった。
アップロードが完了するとURLが発行されて使えるようになる。やっぱりグーグル先生はすごい。
2.ブラウザ上で使えるようにしたい！
次に先ほど発行されたURLをml5のモデルに埋め込むことでブラウザ上でユニフォーム識別AIを使えるようにする。元のテンプレートの中のモデルURLの部分に先ほど作成したURLを入れるだけで完了！簡単！
// 作成したモデルのURL
const imageModelURL = 'TeachableMachineのモデルURL';
// メインの関数（ここでは定義しているだけでボタンクリックされたら実行）
async function start() {
// カメラからの映像ストリーム取得
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: true,
});
// 「id="webcam"」となっているパーツ（videoタグ）を取得
const video = document.getElementById('webcam');
// videoにカメラ映像ストリームをセット
video.srcObject = stream;
// Googleのサーバーにアップロードした自作モデルを読み込みにいきます
const classifier = ml5.imageClassifier(imageModelURL + 'model.json', video, () => {
// 読み込みが完了次第ここが実行されます
console.log('モデルの読み込みが完了しました');
});
// 繰り返し処理
function loop() {
// 推論を実行し、エラーがあればerrに、結果をresultsに格納して、
// 推論が完了次第 { } の中身を実行します
classifier.classify(async (err, results) => {
// 結果のresultsは配列ですが、先頭に中身があれば以下の処理を実行します
if (results[0]) {
console.log(results[0].label); // コンソール表示
}
// 推論終了1秒後に自分の関数を実行（ループになる）
setTimeout(loop, 1000);
});
}
// 最初の繰り返し処理を実行
loop();
}
Teachable Machineとml5を使えばこんな簡単に画像識別アプリが作れる。判定するところまでは終わったのでここからはページの装飾をしていく。
3.応援歌が流れるようにしたい
ここでまた権利の都合上応援歌が使えなかったので歓声で代替したいと思った。
クリックすると音が鳴るボタンの作り方このサイトを参考にしたがうまくなることはなかった。
4.応援してるチームのロゴを背景にしたい
音を出す方法で詰まってしまったのでいったん次に進みたい。
イチからアーセナルのロゴを作って背景に設定するのは方法も思いつかないくらい難しいことだとは思うので、すでにあるやつから借りてくることにした。
今回はこの人が作った自チームのロゴを使わせていただき完成させることにした。
振り返ってみて
自分ができるところまでで一区切りつこうと思ったが、Netlifyで実装してみようと思ったら権利の都合上使えないことが分かった。確かに他人のを使わせてもらったのでそこをしっかりこまめに確認するべきであった。
やりたいことは思いつくのだがそれを作り上げる技術が全くない。だが諦めずに取り組むことでいつか作りたいものを作れるようになりたい。