はじめに
以前も試して記事を書いているビジュアルプログラミングでスマホアプリ開発を行う話です。具体的には「App Inventor 」を使った話になります。
過去に試した内容は、以下の App Inventor に関する記事検索（ユーザー指定あり）の結果からご覧いただけます。
●「app inventor user:youtoy」の検索結果 - Qiita
https://qiita.com/search?q=app%20inventor%20user%3Ayoutoy&sort=created
今回の内容
今回の内容は、App Inventor の話の中でも「Teachable Machine」による画像分類を扱うという話です。
とりあえず、App Inventor で Teachable Machine用の拡張機能を読みこむところまで進めてみます。
余談になりますが、Teachable Machine に関しても、過去に記事を複数書いています。
（あと工学社さんから Teachable Machine の本を出版していたりもします）
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
上記を使った事例について検索すると、以下のページの中でも上記を使った画像分類のやり方の動画が掲載されています。
●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/
今回、これを試していきます。
実際に試して行く
ここから実際に試していきます。
Teachable Machine で機械学習モデルを作る
まずは、Teachable Machine で画像分類を行うことができる機械学習モデルを作成します。
作成方法は、Web検索でたくさん見つかると思うので、ここでは手順の説明は省略します。
Teachable Machine で作成した機械学習モデルは、ローカルにファイルをダウンロードして使うことができますが、今回の場合はクラウドにアップロードして使うやり方で進める必要があります。
App Inventor で進める内容
Teachable Machine の機械学習モデルの準備ができたら、App Inventor での開発を進めていきます。
App Inventor の開発画面へ移動し、新規のプロジェクトを開きます（※プロジェクト名は適当に決めて OK です）。
拡張機能の読み込み1（URL の入力欄表示まで）
そして、デザイナーの画面左のメニューで、一番下にある「拡張」の中のインポート用の項目を選びます。
そうすると、以下の画面が出てきます。
URL というボタンを押すと、以下のような表示に変わります。
あとは、ここで拡張機能の 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
具体的には以下の部分です。
この部分に掲載されている以下の URL を、先ほどの拡張機能の読み込み部分で指定します。
【読み込み用に指定する URL】
https://mit-cml.github.io/extensions/data/extensions/edu.mit.appinventor.ai.teachablemachine.aix
セットした状態は以下で、あとは Importボタンを押します。
拡張機能の読み込み2
拡張機能の読み込み先URL に、URL を入力した状態が以下です。
URL を入力できたら、Importボタンを押します。
そうすると、左のメニューの一番下に「TeachableMachine」という項目が出てくるので、それを右へと持っていきます。
上記を行った後、デザイナーの画面の右のほうを見ると、初期状態で設定されているパラメータを確認できます。
拡張機能で使えるブロック
ブロックプログラミング用の画面に切り替えて、どんなブロックがあるかを見てみます。
以下 2つの画像で示したものが、現状で使えるブロックのようです。
ひとまず、拡張機能の読み込みができたことは確認できました。
別途、Teachable Machine を使った画像分類を試していければと思います。
【追記】続きの記事を書きました
その後、続きの記事を書きました！
●App Inventor の拡張機能を使ってスマホアプリで Teachable Machine の画像プロジェクト（画像分類）を扱う【その2】 - Qiita
https://qiita.com/youtoy/items/6e57c29c1a77a96cb3f2