Zenn
🤩

【プロトアウト体験会】機械学習ができるWebアプリを作ってみよう

2024/02/13に公開
機械学習
codepen
webアプリケーション
Teachable Machine
tech

0. 事前準備

0.1 体験会で作るもの

機械学習ができるWebアプリケーションを作ります。

0.2 体験会が始まる前に各自用意するもの

  • カメラ付きのPCの準備(PC内蔵のものでOK)
  • Googleアカウントの準備
  • CodePenアカウント作成&ログイン(Googleアカウントでログインできます)
  • Teachable Machineにアクセス

※Googleアカウントは、個人のアカウントを使用しましょう。社用アカウントではうまくいかないことがあります。

0.3 体験会の心構え

  • できたらコメント欄に「b」と書く👍
  • できなかったら声を出すorコメント欄に「sos」と書き込んで主張（質問大歓迎🙆‍♀️画面共有で見せてください）
  • 細かいことは気にしない！動けばOK👌
  • 全員で最後までたどり着こう！
  • 余裕があったらXに #protoout をつけてポスト

1. ここから体験会（19:30スタート）

1.1 講師自己紹介（19:40）

Webアプリケーションで作ってみました！このリンクを開いてみてください。
https://codepen.io/blttsxag-the-solid/pen/MWxPLVg

1.2 Webアプリケーションに挑戦しよう（19:45）

1.2.1 Webアプリケーションとは

インターネットを介して、Webブラウザ（Google Chrome、Safari等）上で動作するアプリケーションのことです。
例) X（旧Twitter）、YouTube等
≠スマホアプリ・・・スマホにインストールして使うアプリケーション
X（旧Twitter）、YouTube等はスマホアプリ版もありますね。

1.2.2 CodePenで自己紹介Webアプリケーションを作ろう

さきほどの講師自己紹介のWebアプリケーションを開いてください。
これはCodePenというWebアプリケーションで作っています。CodePenは、「ペン」と呼ばれるパレット上でコーディングをしながら表示結果を確認できるツールです。

Webアプリケーションの画面表示には、HTML、CSS、JavaScriptというプログラミング言語を使います。
HTML・・・Webページの見た目を作ります
CSS・・・Webページの見た目を装飾します
JavaScript・・・Webページに動きをつけます

1.2.3 自己紹介ページを作ってみよう

  • ① 右上「Log In」からログインする（右上がニコちゃんマークになっていたらログイン済み）

  • ② 講師自己紹介ページを開いて右下「Fork」を押下、「Fork」することであなたの「ペン」として編集できるようになります
  • ③ あなたの自己紹介ページを作りましょう！編集したら「Save」で保存を忘れずに
    HTMLの白い文字を変更すると画面表示が変わります。
sample.html
<p>
    ちーろってぃです。<br />
    今日はよろしくお願いします！
  </p>
  <p class="info">
    仕事はセキュリティエンジニアをしています。
    <br />
    休日は「もくまっち」というスマホアプリの開発をしています。 <br />
    実は…<span id="comingout">アラビア語が読めるんです！</span>
  </p>

画像を変更するときはsrc="[ここのURLを変更します]"。""（ダブルクォーテーション）は消さないように！
Xのプロフィール画像などインターネット上の画像の上で右クリック→画像のアドレスをコピーで画像のURLを取得できます。

sample.html
<img height=200 width=200 src="https://pbs.twimg.com/profile_images/1647878586416893952/0CdiwJYC_400x400.jpg">

CSSのbackground-colorやcolorを変更すると背景や文字の色を変更できます。

sample.css
body {
  background-color: rgb(255, 190, 203);
  text-align: center;
}

h1 {
  color: black;
}

1.3 機械学習に挑戦しよう（20:00）

一旦Webアプリケーションのことは忘れて機械学習をやってみましょう！

1.3.1 機械学習とは

機械学習とは、コンピューターに大量のデータを読み込ませ、データ内に潜むパターンを学習させることで、未知のデータを判断するためのルールを獲得することを可能にするデータ解析技術です。

1.3.2 Teachable Machineを使ってみよう

Teachable Machineとは、Google謹製の機械学習の独自モデルが作成できるWebアプリケーションです。こちらのリンクから開いてください。
https://teachablemachine.withgoogle.com/

  • ①右上の「使ってみる」から
  • ②今回は「画像プロジェクト」を選択
  • ③「標準の画像モデル」を選択

この状態になっていたらOK

1.3.3 独自の機械学習モデルを作ってみよう

グー・チョキ・パーを判定する機械学習モデルを作りましょう！
※機械学習モデルを作るためにパソコンのカメラを使うので、ここからはカメラオフにしましょう！

  • ①「Class2」の下の「クラスを追加」を押して「Class3」を作る
  • ②Class1〜3の名前をそれぞれ「グー」「チョキ」「パー」に変える
    えんぴつマークを押すと名前が編集できます。
  • ③「グー」の「ウェブカメラ」を押してカメラを開く(「カメラの使用」を許可するか聞かれたら「許可する」を押してください)
  • ④「長押しして録画」を押しながらグーの画像を100枚以上撮影する
    ※いろいろな角度のグーを撮影しましょう
    ※背景に何も映らないようにする方が精度が上がります
  • ⑤チョキとパーの画像も同様に「ウェブカメラ」を押してカメラを開き、それぞれ100枚以上撮影する
  • ⑥「モデルをトレーニングする」を押して待つ
  • ⑦「プレビュー」で確認！

うまくいかない時は画像を増やしてみたり、背景や角度を変えて再作成してみましょう。

1.4 機械学習ができるWebアプリケーションに挑戦しよう（20:15）

完成したモデルを組み込んだWebアプリを作ってみましょう！

  • ①「モデルをエクスポートする」を押す
  • ②「モデルをアップロード」を押して待つ
  • ③アップロードができたらURLが表示されるので、それをコピーする
    ※ページを閉じると学習データは消えてしまいますが、ドライブにプロジェクトを保存しておくと学習データを保存することができます(Googleログインが必要です)
  • ④機械学習アプリ ページを開いて右下「Fork」を押下
  • ⑤「JS」の作成したモデルのURLを貼り付けるを消して、先ほどTeacchable MachineでコピーしたモデルのURLを貼り付ける
sample.html
// 作成したモデルのURL
let imageModelURL = '[作成したモデルのURLを貼り付ける]';

↓以下のように変更

sample.html
// 作成したモデルのURL
let imageModelURL =  'https://teachablemachine.withgoogle.com/models/〜〜';
  • ⑥「Save」で保存！手の形に合わせて文字が変わったらOK

☆こちらのサイトでリンクを貼り付けてQRコードを生成すればスマホでも使えます！

1.5 チャレンジタイム（ミニハッカソン）（20:30）


機械学習×WebアプリケーションでオリジナルのWebアプリを作ろう！
Teachable Machineでオリジナルのモデルを作り、CodePen上のURLを変更してみましょう。

☆例えば☆

  • ピーマンとパプリカを判別するアプリ
  • 人がいるかどうかを判定するアプリ

プログラミングに慣れている人は、先ほど作ったじゃんけんアプリをコンピュータと対決するアプリに改造してもOK！
ヒント：この記事を参考に「JS」のコードを修正してみてください
余裕がある方はHTMLやCSSを調べてWebアプリをデコレーションしてみてください♪
ヒント：HTMLクイックリファレンス

完成したWebアプリ(CodePen)のURLをコメント欄に貼ってください。
Xをやっている人は #protoout でURLをポスト！

Discussion