App Inventor の拡張機能を使ってスマホアプリで Teachable Machine の画像プロジェクト（画像分類）を扱う【その1】

## はじめに
以前も試して記事を書いているビジュアルプログラミングでスマホアプリ開発を行う話です。具体的には「[App Inventor](https://appinventor.mit.edu/) 」を使った話になります。


過去に試した内容は、以下の App Inventor に関する記事検索（ユーザー指定あり）の結果からご覧いただけます。

●「app inventor user:youtoy」の検索結果 - Qiita
 https://qiita.com/search?q=app%20inventor%20user%3Ayoutoy&sort=created

### 今回の内容
今回の内容は、App Inventor の話の中でも「[Teachable Machine](https://teachablemachine.withgoogle.com/)」による画像分類を扱うという話です。

とりあえず、App Inventor で Teachable Machine用の拡張機能を読みこむところまで進めてみます。

余談になりますが、Teachable Machine に関しても、過去に記事を複数書いています。
（あと[工学社さんから Teachable Machine の本を出版していたりもします](https://www.amazon.co.jp/dp/4777522059)）

#### App Inventor で Teachable Machine を扱う

現在、App Inventor で Teachable Machine を扱う方法を検索すると、以下の拡張機能を使った事例が出てきます。

●TMIC: App Inventor Extension for the Deployment of Image Classification Models Exported from Teachable Machine - Extensions - MIT App Inventor Community
 https://community.appinventor.mit.edu/t/tmic-app-inventor-extension-for-the-deployment-of-image-classification-models-exported-from-teachable-machine/64411

![2025-02-24_16-40-43.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/6293c9c0-c485-425d-a8ea-4e323d227fd2.jpeg)

上記を使った事例について検索すると、以下のページの中でも上記を使った画像分類のやり方の動画が掲載されています。

●Using your AI Model in an App or Project - Technovation Girls
 https://technovationchallenge.org/courses/beginner-division-curriculum/lessons/using-your-ai-model-in-an-app-or-project/

![2025-02-24_16-40-03.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/99b9490d-ba29-4156-bf18-225046a44ddb.jpeg)

今回、これを試していきます。

## 実際に試して行く
ここから実際に試していきます。

### Teachable Machine で機械学習モデルを作る
まずは、Teachable Machine で画像分類を行うことができる機械学習モデルを作成します。

作成方法は、Web検索でたくさん見つかると思うので、ここでは手順の説明は省略します。

Teachable Machine で作成した機械学習モデルは、ローカルにファイルをダウンロードして使うことができますが、今回の場合はクラウドにアップロードして使うやり方で進める必要があります。




### App Inventor で進める内容

Teachable Machine の機械学習モデルの準備ができたら、App Inventor での開発を進めていきます。

[App Inventor の開発画面](http://ai2.appinventor.mit.edu/)へ移動し、新規のプロジェクトを開きます（※プロジェクト名は適当に決めて OK です）。

#### 拡張機能の読み込み1（URL の入力欄表示まで）
そして、デザイナーの画面左のメニューで、一番下にある「拡張」の中のインポート用の項目を選びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0b0c5c5b-be4e-45a1-bd76-ec681689b17c.png)

そうすると、以下の画面が出てきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/92d27915-465c-42e1-91d4-fc85122e96a9.png)

URL というボタンを押すと、以下のような表示に変わります。

![2025-02-24_16-50-31.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/594867de-b26c-4f25-a5a5-1c3709981c08.jpeg)

あとは、ここで拡張機能の URL の指定などを行います。

#### 読みこむ拡張機能
ここで指定する URL の情報、その拡張機能の情報について少し触れます。

今回使う Teachable Machine用の拡張機能は、以下の公式ページの拡張機能一覧に掲載されています。

●MIT App Inventor Extensions
　https://mit-cml.github.io/extensions/
●mit-cml/appinventor-extensions at extension/teachable-machine
　https://github.com/mit-cml/appinventor-extensions/tree/extension/teachable-machine

具体的には以下の部分です。

![2025-02-24_16-55-56.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/582220fb-a875-4fbd-822a-2bef22681e9c.jpeg)

この部分に掲載されている以下の URL を、先ほどの拡張機能の読み込み部分で指定します。

> 【読み込み用に指定する URL】
> https://mit-cml.github.io/extensions/data/extensions/edu.mit.appinventor.ai.teachablemachine.aix

セットした状態は以下で、あとは Importボタンを押します。

#### 拡張機能の読み込み2

拡張機能の読み込み先URL に、URL を入力した状態が以下です。
URL を入力できたら、Importボタンを押します。

![2025-02-24_16-57-46.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/bec8f657-2812-48b9-afab-4be8a6174acc.jpeg)

そうすると、左のメニューの一番下に「TeachableMachine」という項目が出てくるので、それを右へと持っていきます。

![2025-02-24_16-58-15.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9b72b87c-725a-45bf-b724-45ef00fc630c.jpeg)

上記を行った後、デザイナーの画面の右のほうを見ると、初期状態で設定されているパラメータを確認できます。

![2025-02-24_16-58-51.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a0622e8c-6d02-4cbf-8863-ff49417ea287.jpeg)

#### 拡張機能で使えるブロック

ブロックプログラミング用の画面に切り替えて、どんなブロックがあるかを見てみます。

以下 2つの画像で示したものが、現状で使えるブロックのようです。

![2025-02-24_17-03-54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c076f44c-aa63-47bc-adb7-36239a8963f6.jpeg)

![2025-02-24_17-04-38.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ba675bae-2a9c-44ca-838c-7dbb6f901dfd.jpeg)

ひとまず、拡張機能の読み込みができたことは確認できました。

別途、Teachable Machine を使った画像分類を試していければと思います。

## 【追記】続きの記事を書きました

その後、続きの記事を書きました！


●App Inventor の拡張機能を使ってスマホアプリで Teachable Machine の画像プロジェクト（画像分類）を扱う【その2】 - Qiita
https://qiita.com/youtoy/items/6e57c29c1a77a96cb3f2

https://x.com/youtoy/status/1894027823490478318