ゴールデンウィークに旬のゴールドキウイで画面もゴールドにする

## ゴールドキウイが旬で美味しい
５月の**ゴールデンウィーク**の時期は、ニュージーランド産の**ゴールドキウイが非常に美味しい**時期となります。


<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/6a59cd9d-4f92-2d50-58e5-52fed42298a2.jpeg' width = 50%>

私は小売業に従事しており、特に配属は農産、野菜・果実を販売する部門だったこともあり、毎年この時期にはキウイフルーツやマンゴーなど輸入果実を売り込むイメージが強いです。

数日前**GWアドベントカレンダー**なるものの存在を知り、せっかくなので**ゴールドを絡めて何か作れないか**と考えました。

https://gw-advent.9wick.com/calendars/2022/122

> 投稿したアドベントカレンダーはこちら

## 画面もゴールドにして３倍豪華

**ゴールデンウィーク**に**ゴールドキウイ**ということで、さらに**画面もゴールド**にすれば、豪華感が３倍になるのではないかと考え、実行してみました。以下の動画をご覧ください。

https://twitter.com/shuyin02/status/1523038581702692864

webカメラにゴールドキウイが映ると、画面がゴールドになります。
せっかくなので、グリーンキウイが映ったら、画面がグリーンになるようにもしてみました。

## 実行環境
* macOS Big Sur version 11.6.5
* Google Chrome

ブラウザ固有のものは特に使っていないので、再現性は高いと思います。
### ライブラリ・ツール
* [Teachablemachine](https://teachablemachine.withgoogle.com/)
* [ml5.js](https://ml5js.org/)

### デバイス
* ニュージーランド産　サンゴールドキウイ（大玉） 2個
* ニュージーランド産　グリーンキウイ 2個

https://www.zespri.com/ja-JP/product

## 画像認識の過程
<img src = 'https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2100048/d9c86db9-cf73-fe3b-d1dc-6a35ba3cf0aa.png' width = 70%>

それぞれのキウイより片方を学習データ用、もう一方をテストデータ用として、学習と検証を実施しています。
実際の使用場面でも手に持った状態で判定することを想定して、あえて手に持ったままの画像を学習データに用いています。
どちらのキウイも映っていない状態は、適当にwebカメラで部屋を撮影しました。

**正解率、適合率、再現率、全て100%です。**

:::note
厳密な機械学習ではないので、ネタとして捉えてください。
:::

## サンプルコード
冒頭にも書いた[こちら](https://gw-advent.9wick.com/calendars/2022/122)のページに関して、HTMLとJavaScriptをGoogle Chromeの検証ツールで編集しています。

```html 122.html
  </footer>
  <video id="webcam" width="320" height="240" muted autoplay playsinline></video>
　　　　<!--コード末尾footerとbodyの間にビデオ画面を挿入-->
</body>
```
```javascript app.js
//app.jsの末尾に以下のコードを挿入

// ml5.jsライブラリの挿入
(script = document.createElement('script')).src = 'https://unpkg.com/ml5@latest/dist/ml5.min.js'
document.getElementsByTagName('head')[0].appendChild(script)

console.log('success_1');//チェック用
(async function colorChange() {
    const imageModelURL = 'https://teachablemachine.withgoogle.com/models/OZcdfxibS/';
    const gold = `linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%)`;
    const green = `linear-gradient(45deg, #00FF00 0%, #CCFF00 45%, #33CC66 70%, #66CC33 85%, #00CC00 90% 100%)`;
    const body = document.querySelector('article');
    const nav = document.querySelector('nav');
   
  // カメラからの映像ストリーム取得
  const stream = await navigator.mediaDevices.getUserMedia({
    audio: false,
    video: true,
  });
  console.log('success_2');//チェック用
  // 「id="webcam"」となっているパーツ（videoタグ）を取得
  const video = document.getElementById('webcam');
  // videoにカメラ映像ストリームをセット
  video.srcObject = stream;
  console.log('success_3');//チェック用
  // Googleのサーバーにアップロードした自作モデルを読み込み
  classifier = ml5.imageClassifier(imageModelURL + 'model.json', video, () => {
     console.log('モデルの読み込みが完了しました');
  }); 
  // 繰り返し処理
  function loop() {
    // 推論を実行し、エラーがあればerrに、結果をresultsに格納して、
    // 推論が完了次第 { } の中身を実行
    console.log('success_4');//チェック用
    classifier.classify(async (err, results) => {
      if (results[0].label === 'gold'){
        document.body.style.background = gold;
        body.style.background = gold;
        nav.style.background = gold;      
      } else if (results[0].label === 'green'){
        document.body.style.background = green;
        body.style.background = green;
        nav.style.background = green;        
      } else{
        document.body.style.background = '#d0d0d1';
        body.style.background = '#FFFFFF';
        nav.style.background = '#FFFFFF';
      }
      // 推論終了1秒後に自分の関数を実行（ループになる）
      setTimeout(loop, 1000);
    });
  }
  loop();
})();

```
:::note
詳細なHTML, JavaScriptの編集方法は、本記事末尾の参考記事を参照ください。
:::

## 最後に

なんの役にも立たないであろう。
　


## 参考記事
* ゴールドの配色、カレンダーの色付けについて

https://qiita.com/n0bisuke/items/71809f777ac6dbf9be95

* デベロッパーツールでの編集。今回はOverridesを使用しています。

https://sologaku.com/webbrowser/chrome-javascript-execution/


## 参考：制作過程

[CodePen](https://codepen.io/)でワンクッション入れてから実際のwebページを編集していますので、途中過程で使用したpenも共有します。

<p class="codepen" data-height="300" data-default-tab="js,result" data-slug-hash="dydGvwe" data-user="watanabe-tsubasa" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/watanabe-tsubasa/pen/dydGvwe">
  kiwi</a> by watanabe-tsubasa (<a href="https://codepen.io/watanabe-tsubasa">@watanabe-tsubasa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>