初心者の私でもできた！Teachable Machineを使ったAIアプリ開発の基本

Teachable Machineを使えば、手軽にAIアプリを開発することができます。

本記事では、Teachable Machineで作ったAIモデルを活用し、ウェブアプリを開発する基本的な流れについて分かりやすく解説します。

AI初心者は、まずはこちらを→AIの基礎をゼロから学べる！初心者向けスタートガイド

Teachable Machineとは？
必要な準備
AIモデルをエクスポートする方法
HTML、JavaScript、CSSとは？全てがわかる簡単解説
ウェブアプリを開発する手順
開発したウェブアプリをインターネット上に公開
最後に

Teachable Machineとは？

Teachable MachineはGoogleが提供する初心者向けのAIモデル作成ツールです。

直感的な操作で画像、音声、ポーズ認識のモデルを作成できます。

先日、Teachable Machineを利用して、犬と猫を判定するAIモデルを作る手順を説明しました。

詳しくは→AI初心者でも簡単！Teachable Machineを使って犬と猫を判定する方法

必要な準備

ウェブアプリを作成するために以下のものを用意します。

(1)Teachable Machineでエクスポートしたモデルファイル

metadata.json
model.json
weights.bin

(2)HTML/JavaScript/CSS

ウェブアプリを構成するための基本的な技術。

(3)TensorFlow.js

AIモデルをウェブ上で動かすためのライブラリ。

AIモデルをエクスポートする方法

Teachable Machineでモデルを完成させたら、「モデルをエクスポート」ボタンをクリックします。

「TensorFlow.js」を選択し、モデルをダウンロードします。

ダウンロードしたフォルダには以下の3つのファイルが含まれています。

HTML、JavaScript、CSSとは？全てがわかる簡単解説

ウェブアプリを作るときに必要な3つの要素について、わかりやすく解説します。

これを知っていると、ウェブアプリの仕組みを構築する基本が理解できます。

また、今回のAIアプリ用に開発したコードも閲覧可能ですので、参考までにご覧いただければと思います。

HTML（Webページの骨組み）

何をする？
Webページの「骨組み」を作ります。例えるなら、家の設計図や骨組みのようなものです。

例
ページの見出し、文章、画像、リンクなど「ここに何があるか」を決めることができます。

<h1>こんにちは</h1>
<p>これは説明文です。</p>

今回のAIアプリ用に開発したHTMLはこちら→犬猫判定アプリHTMLコード

JavaScript（Webページの動き）

何をする？
Webページに「動き」や「頭脳」を与えます。例えるなら、家の電気やエレベーター、リモコンのような存在です。

例
ボタンをクリックしたら文字が変わる、カウントダウンが始まる、データを送信するなど「動き」を仕込むことができます。

document.querySelector('button').addEventListener('click', function() {
    alert('ボタンがクリックされました！');
});

今回のAIアプリ用に開発したJavaScriptはこちら→犬猫判定アプリJavaScript

CSS（Webページの見た目）

何をする？
Webページの「見た目」をデザインします。例えるなら、家の壁紙や色、装飾を決めるものです。

例
文字の色、大きさ、配置、背景色など「見た目」をきれいに整えることができます。

h1 {
    color: blue;
    font-size: 24px;
}

今回のAIアプリ用に開発したCSSはこちら→犬猫判定アプリCSS

ウェブアプリを開発する手順

(1)ファイルを用意

以下のファイルを用意します。ファイルは1つのフォルダにまとめておくと分かりやすいです。

my_web_app
　　├── index.html               // メインのHTMLファイル
　　├── app.js                   // アプリの動作を記述するJavaScript
　　├── style.css　　　　　　　  // デザイン用CSS
　　├── tm-my-image-model.zip　　// Teachable Machineのモデルファイル
　　         ├── model.json
　　         ├── metadata.json
　　         ├── weights.bin

(2) HTML、 JavaScript、CSSのコードを記述

まずは、テキストドキュメントの状態で、コードを記述します。

コードを記述した後に、ファイル名と拡張子を変更します。JavaScriptとCSSも同じ手順で作成します。

CSSがなくてもアプリを動かすことが可能ですが、CSSのコードを記述することで、アプリ全体の見た目が整い、ユーザーが結果を確認しやすくなります。また、自由に変更して自分だけのデザインを楽しむことも可能です。

開発したウェブアプリをインターネット上に公開

今回は、無料版のGitHubを使ってインターネット上に公開していきます。

GitHubアカウントを作成

GitHub公式サイトにアクセスします。

無料アカウントを作成します。

視覚パズル、もしくは、音声の質問に回答して、ロボットでないことを証明します。

GitHubリポジトリを作成

リポジトリとは、データやファイルを管理・保存する場所のことです。

GitHubにサインインします。

右上の「+」ボタンをクリックし、「新しいリポジトリ」を選択します。

リポジトリ名（例えば my-ai-webapp）を入力し、公共を選択します。

他の項目はデフォルトのままでOKです。

「リポジトリの作成」ボタンをクリックすれば、完了です。

ファイルをアップロード

作成したリポジトリのページで、「既存のファイルをアップロードします」をクリックします。

上記の「ウェブアプリを開発する手順」で用意したファイルをドラックしてリポジトリに追加します。

my_web_app
　　├── index.html
　　├── app.js
　　├── style.css
　　├── tm-my-image-model.zip
　　　　├── model.json
　　　　├── metadata.json
　　　　├── weights.bin

赤色マーカーのファイルを全てドラックしてリポジトリに追加します。

「model.json」については、リポジトリの追加は不要です。

以下のとおり、リポジトリに追加できましたら、「変更のコミット」ボタンをクリックします。

インターネット上に公開

右上の「設定」を開きます。

左メニューの「ページ」を開き、GitHubページで「メイン」と「/(root)」を選択した後に、「セーブ」ボタンをクリックします。

ページが有効化されると、インターネット上に公開されたURLが表示されます。

公開されたアプリを確認

公開URLを開き、開発したウェブアプリが正しく動作するか確認します。

「サイトを見る」ボタンをクリックします。

このように、開発したウェブアプリが表示されます。

開発したウェブアプリが正しく動作するか確認します。

この犬猫判定アプリは、「ファイルの選択」ボタンをクリックし、犬の画像、もしくは、猫の画像を選択すると判定結果が表示されるAIアプリです。

犬猫判定アプリの実際の操作イメージは、下記動画をご覧ください。

初めてAIアプリを開発しました。犬の画像、もしくは、猫の画像を選択して、AIが犬か猫かを判定する簡単なウェブアプリになります。下記URLより操作可能です。精度や表示速度などまだまだ課題だらけではありますが、これからもAIアプリ開発の実践を通して精進して参ります。https://t.co/pCioCtgQne pic.twitter.com/coGFlKnxVc
— 愛鳥晴喜｜AIと副業で未来設計 (@shiawase_aichou) January 21, 2025