2022年9月追記：AI利用体験アプリはMonaca Educationのスタンダードプランに収録されました。
本記事は2020年に試作版を公開した当初の内容となり、メンテナンスされていませんのでご注意下さい。

最新のアプリや学習用のサンプルデータはMonaca Educationの生徒向けサポートページにて引き続き、無料で入手できます。

---

MonacaでAI利用体験アプリ試作版2020v1

アシアル情報教育研究所の岡本です

　今年の初め頃に社内のメンバーにお願いしてAIサンプルアプリを作って貰ったのですが、岡本が勉強したり教材用にカスタマイズする時間が中々取れずに蔵入りにしておりました。秋も別の教材作成でAIを学ぶ時間が取れなさそうなため、とりあえずアプリを先に公開することにしました。

　Tensorflow.jsというライブラリを使ってモデルの利用や作成を行えるアプリです。

利用と作成でアプリは2本立てに分かれています。

「AI利用体験アプリ」には学習済みのモデルが搭載されているため、プロジェクトをインポートすればすぐに「利用体験」を行えます。「AI作成体験アプリ」はブラウザ上からMNIST(手書き数字の画像ファイル群)をアップロードすることで、モデルの「作成体験」を行えます。こちらのアプリも授業で使う場合は、事前に画像データをダウンロード＆展開しておいて下さい。

なお、MNISTの本家データは１時間の授業で使うにはちょっと大きいので、量を減らしております。これにより、「AI体験」の授業をMonaca上だけで60分前後で行うことが可能です。

Monaca用AI教材サンプルアプリ(2020試作版)の構成

• MonacaでAI利用体験アプリ2020v1
• MonacaでAI作成体験アプリ2020v1
• MNIST画像(のjpeg版のサブセット)

ダイレクトインポート用プロジェクト

MonacaでAI利用体験アプリ2020v1をインポート
MonacaでAI作成体験アプリ2020v1をインポート

MNIST画像(のjpeg版のサブセット)

test60(モデル検証用)
training600(モデル作成用・軽い)
training6000(モデル作成用・ちょっと重い)

利用方法

パソコンのブラウザ上で動かすことを想定しております、iPadのsafariなどでは上手く動かないかもしれません。また、デバッガーアプリ上で動かす場合もモデルのファイルをCORS対応済みのクラウドストレージか何かに置かないと動作しない可能性があります。

MonacaでAI利用体験アプリ2020v1

　Tensorflow.jsを利用して写真を判定して0～9の数字と、どれくらい一致するかを数値で教えてくれるアプリです。

アプリ内に判定用のモデルを持っています。モデルは「training6000」の画像群を元に作られています。モデルを自分で作成することも可能で、その場合には後述する「モデルを作成するアプリ」を利用します。

使い方

　手書き文字を用意してアプリにアップロードしてみましょう。お試し用にtest60(モデル検証用)の画像を使うのがおすすめです。このサンプルアプリは黒背景に白抜き文字を前提として作られています。自身で画像を用意する場合は、背景色を黒にして白抜きの数字を用意するか、プログラムを1行編集して背景色が白い画像を読み取るように修正してください。

テスト画像のダウンロード

test60(モデル検証用)
授業の進行上、zipファイルを解凍するのが難しい場合は、以下のサンプル画像を利用して下さい（右クリックして名前をつけて保存）。

注意事項

• モデルのファイルを読み込む関係でデバッガーでは動かないかもしれません。
• 何処かのタイミングで文字を手書きする機能を付けたいと考えています。

MonacaでAI作成体験アプリ2020v1

　Tensorflow.jsを利用して写真をもとにモデルを作成するアプリです。

　Tensorflow.jsをブラウザやアプリ内で動作させるため、サーバーに写真を送らずローカルで処理できます。モデルを作成するときには大量の画像をTensorflow.jsの命令に渡す必要があります。実はブラウザには複数ファイルを一括アップロードする機能があり、このアプリではそのような処理も行っております。また、モデルを生成が成功したらモデルのデータをダウンロードできるようになっています。
　ローカルで処理できるメリットは外部のサービスを利用せずMonacaだけで授業が完結することです。また、写真を外部に送らないためセキュリティやプライバシーの面でも安心です。
　デメリットはブラウザ側で動作させる場合、大量の画像や大きな画像を元に処理しようとするとメモリ量などに制限があって上手く動かないことです。MNIST(手書き数字)を元にした数字判定モデルの作成ぐらいなら大丈夫ですが、凝ったことをする場合はブラウザ上では厳しいかもしれません。

使い方

　サンプルの画像をアップロードしてモデルを作成してみましょう。「training600」なら、低スペックなPCでもたぶん処理できると思います。スペックに余裕があればファイル数が10倍の「training6000」でも数分で処理できるかもしれません。

①画像をアップロード

下記のようにフォルダを指定します。

②画像で学習

画像のアップロードが完了したら「学習の開始」を押下します。

学習が完了したらalertで通知が来ます。

③モデルをダウンロード

複数ファイルダウンロードに関する警告が出る場合がありますが、モデルは複数ファイル必要なので許可をお願いします。

ダウンロードされるファイルは以下の二つです。

• mnist-model.weights.bin
• mnist-model.json

授業展開の草案

手書き文字の判定を行ってみよう

　自分で描いた手書きの数字を「MonacaでAI利用体験アプリ」に渡し、どれくらいの精度で判定できるかを確認してみましょう。背景色にはご注意ください。

モデルを作成してみよう

　「MonacaでAI作成体験アプリ」で「training600」の画像群を元にモデルを作成してみましょう。また、作成したモデルを「MonacaでAI利用体験アプリ」に組み込んで、判定精度がどれくらい変わるか確認してみましょう。特定の数字のフォルダを削除してから試すのもよいかもしれません。