1
Help us understand the problem. What are the problem?

posted at

updated at

Organization

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

ゴールドキウイが旬で美味しい

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

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

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

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

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

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

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

実行環境

  • macOS Big Sur version 11.6.5
  • Google Chrome

ブラウザ固有のものは特に使っていないので、再現性は高いと思います。

ライブラリ・ツール

デバイス

  • ニュージーランド産 サンゴールドキウイ(大玉) 2個
  • ニュージーランド産 グリーンキウイ 2個

画像認識の過程

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

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

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

サンプルコード

冒頭にも書いたこちらのページに関して、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();
})();

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

最後に

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

参考記事

  • ゴールドの配色、カレンダーの色付けについて

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

参考:制作過程

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

See the Pen kiwi by watanabe-tsubasa (@watanabe-tsubasa) on CodePen.

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
1
Help us understand the problem. What are the problem?