はじめに
KDDI Engineer & Designer Advent Calendar 2023 で、1日目の記事を担当します @youtoy です。
会社での仕事は、カレンダータイトルにある Engineer / Designer のどちらでもないのですが、「社内の担務によらず、アドベントカレンダーの記事を書いていきましょう！（＋ 仕事絡みの話でなくても OK）」という話があったので、カレンダーに登録させていただきました。
どんな内容の記事を書こうか悩んだのですが、他の方とかぶらなそうだと思う方向性にしてみました。
具体的には、自分がプライベートで取り組んでいる技術系の活動（技術コミュニティ活動やモノ作り系の活動）の中で試作し、展示イベントに出展した「AI・機械学習を活用した体験型コンテンツ」の話です。
今回の記事に出てくる 3つのトピック
ここから話の詳細に入っていく前に、今回の記事のトピックを箇条書きでざっくり紹介してみます。主に以下の 3つです。
- AI・機械学習と別の技術とを組み合わせて試作した体験型コンテンツの実例
- 自作した体験型コンテンツを様々な人に体験してもらった話
- ブラウザで動く AI・機械学習
この他に、「AI・機械学習と組み合わせて使った技術の話」も加えたかったのですが、記事が長くなりすぎそうだったので、メインは上の 3つに絞りました。
これら 3つの内容を、順番に説明していきます。
体験型コンテンツ（Webアプリ）の実例
まず、この記事のメインの話題となる「AI・機械学習を活用した体験型コンテンツ」が、具体的にどのようなものかを紹介します。
■実例 1） 光学迷彩/透明マント的なエフェクトを体験できる Webアプリ
以下の動画で示したものは、技術的な部分は『Googleさんが提供している AI・機械学習系のライブラリ「MediaPipe（の JavaScript版）」と、描画系ライブラリの「p5.js」』を組み合わせて試作したものです。
この Webアプリは、Webカメラの映像を表示するようになっており、そして、Webカメラの前で両手をかざしてから手・指を動かして使います。
そうすると以下のように、両手の親指・人差し指を結んだ矩形領域に「光学迷彩/透明マント的なエフェクト」をかける体験ができます。
【少し寄り道】： この内容に関して Qiitaさんのイベントで LT登壇
ちょうど今回の記事の公開日の夜に、オンラインで開催される以下の Qiita さんのイベントで LT をすることになっています。そして、LT で話す話題は上記のアプリに関するものです。
そういった関連性もあり、そのイベントの URL を紹介させてください
➡ https://increments.connpass.com/event/300470/
【※ 追記】 登壇を終え、資料を Speaker Deck で公開しました🔗
公式の X のポストでも LT の話を紹介いただきました（※ ポスト内の URL が違っているようで、正しくは上記の URL です）
■実例 2） 音でロボットトイを動かす Webアプリ
実例 1つ目はカメラを使ったものでしたが、2つ目はマイクを使ったものです。
以下は、技術的な部分は『Googleさんが提供している AI・機械学習系の仕組み・ライブラリの「Teachable Machine」と、ロボットトイの「toio」』を組み合わせて作っている Webアプリです。
試作段階では、以下の動画で示したような実装でした。
この段階では、100均で買ってきた「卓上ベル・ハンドベル・タンバリン」のそれぞれの音を区別できるかや、卓上ベルを連打した時とゆっくり鳴らした時の音を区別できるかを試していました（※ それぞれの異なる音に、ロボットトイの異なる動き方を紐付けています）。
※ 🔈音ありの動画です
その後に試作したものは、音とロボットトイを使うという構成は同じですが、専用のマットを組み合わせるなどして 最初のものと異なる動きをさせる仕様にしました。
次の試作でも、異なる音に対してそれぞれロボットトイの異なる動きが紐付いているのですが、一方が他方を追跡する動きなどを取り入れてみました（※ 以下の動画の中の、始まりから 20秒くらいまでの部分が該当）。
※ 🔈音ありの動画です
体験型コンテンツ（Webアプリ）を体験してもらった話
上で紹介した 3つは、それぞれ以下のモノ作り系のイベントに展示して、イベントに来たたくさんの方に体験いただけました。
- 展示先
- 光学迷彩/透明マントのアプリ： 「NT東京2023」
- 音を使ったアプリ バージョン1： 「Tsukuba Mini Maker Faire 2020」
- 音を使ったアプリ バージョン2： 「Maker Faire Tokyo 2020」
そして、それらのイベントの中で子どもから大人まで、幅広い年代の方に体験してもらい楽しんでもらえました。音を使ったアプリのほうは、特に親子連れ・家族連れなどで来場していたお子さんに人気がありました。
どのアプリも、ぱっと見で「何をすれば良いか／何が起こるか」が分かりやすいので、小さなお子さんから大人の方まで、説明不要で楽しんでいただけるようになっています。
※ 少なくとも、前に試している人やデモしている人の様子を見れば、説明を受けなくても、自分が何をすれば良いか／それによって何が起こるかをすぐに理解してもらえていました
以下は、それぞれのイベントの展示ブースで、実際に来場者の方に体験していただいている時の様子です。
■ 光学迷彩/透明マントのアプリ
■ 音を使ったアプリ バージョン1
■ 音を使ったアプリ バージョン2
利用した技術の話
ここからは利用した技術の話、その中でも AI・機械学習に関わる部分の説明を書いていきます。
ブラウザで動く AI・機械学習： MediaPipe JavaScript版
1つ目で実例で使っていた AI・機械学習系の技術は、Googleさん提供の「MediaPipe」の JavaScript版です。
「MediaPipe」自体は以下の公式ページで書かれているように、モバイル向け・ブラウザ向け・PC向け・エッジデバイス向けなどといった、様々な環境向けに使えるものが提供されています（自分はその中の JavaScript版を好んで使っています）。
その JavaScript版でできることが複数あり、上で示した「人の手を対象にしたキーポイントの検出」もあれば、「人の顔や体を対象にしたもの」や「物体検出ができるもの」などがあります。
そして、画像以外にも音やテキストを対象にした仕組みもあります。
仕組みの話について、以下で公式のサンプル一覧に出ているものを掲載してみます。
公式のサンプル一覧で「See demo」と書かれたボタンを押すと、すぐに体験できるものが多くあるので、試しにいくつか気になるものを体験してみると楽しいです（また、この後で手順を補足しますが、デモのソースコードを見ることもできます）。
画像を対象にしたもの
テキスト・音を対象にしたもの
デモ・サンプルのたどり方の補足
デモ・サンプルのたどり方について、少し補足します。
例えば、手のキーポイント検出が行える Hand Landmark の場合、以下の「See demo」のボタンを押すと、その次のページで実際に体験ができます。
↓このように、Webカメラの映像が表示され、そこにうつした手の指先や関節の部分などがリアルタイムに検出されるのを確認できます。
そして、その画面の左上にある「Code examples」の「Web」を選ぶと、CodePen のページが開き、その CodePen のページでコードのサンプル（HTML・CSS・JavaScript）を見ることもできます。
CodePen のページでコードが表示される部分は、↓このような感じです。
MediaPipe関連で良く自分が使うもの
MediaPipe で扱える様々な内容に関して、個人的には「カメラを使うもので、人の手・顔・姿勢を対象としたもの」をよく使っています。
その理由は、今回紹介したような体験型のインタラクション系のコンテンツを作るのに使いやすいためです。
MediaPipe の JavaScript版は、ブラウザ上で手軽に動かすことができ、そして精度や処理速度がビックリするほど良い感じなので、その点も便利です。
ブラウザで動く AI・機械学習： Teachable Machine
2つ目・3つ目の実例で使っていた AI・機械学習系の技術は、Googleさん提供の「Teachable Machine」です。
「Teachable Machine とは？」という話は、公式ページにも書いてありますが「誰でも短時間で簡単に機械学習モデルを作成できる、ウェブベースのツール」です。
機械学習モデルの作成
Teachable Machine を使うと、ブラウザで開いた公式ページ上で、画像・音を対象にした機械学習モデルの作成ができます。
作成可能なモデルは決まっており、いわゆる「分類（classification）」です。入力として画像・音・ポーズ（姿勢推定関連）の 3種類を扱えます。
学習用のデータとなる画像や音は、ファイルを用意して学習させる方法もありますが、PC についているカメラ・マイクで入力する方法も使えます。そのため、非常に簡単に機械学習モデルを作ることができます。
使い方の手順は、「Teachable Machine 使い方」といったキーワードで検索すると、画像付きで手順をのせてるページがたくさん見つかると思いますので、ここでは詳細は省略します。
仕組みに関する補足
また、以下の公式FAQ に書かれているように、転移学習が用いられています。そのため、大量のデータを学習させなくても、プロトタイプで使うには良い感じの精度が出せます（※ 簡単な分類タスクであれば、かなりの精度での画像分類などが行えます）。
そして、作成した機械学習モデルを使った推論の処理は、Teachable Machine のサイト上でそのまま試せるため、手軽に結果の確認ができて便利です。
モデルのエクスポートについて
さらに、作成した機械学習モデルをプログラムで使いたい場合は、モデルのエクスポートも可能です。以下の公式FAQ に書かれているように、TensorFlow／TensorFlow Lite／TensorFlow.js 形式など、複数のプログラミング言語・環境（PC向けモバイル向け・エッジデバイス向け）で使えるモデルを選択してエクスポートできます。
Teachable Machine を使うと、機械学習モデルを Webサイト上で簡単に作成でき、そして作成したモデルはエクスポートして Teachable Machine のサイト外で利用できるので、上で紹介した 3種類の分類系のタスクを組み込んだものを色々な環境で試作するのに、非常に便利です。
なお、モデルをエクスポートする際には、そのエクスポートしたモデルを使うためのサンプルコードが提示されます。
AI・機械学習と組み合わせて使った技術・デバイス
上で説明したAI・機械学習の仕組みは、試作したコンテンツの入出力部分の、入力で使うものでした。
体験型のコンテンツを作るには、入力だけでなく、入力に応じて何らかの出力を返す部分も用意する必要があります。
上で紹介した 2つの事例では、その出力の部分を作るのに、それぞれ「p5.js を用いた描画」「toio を用いた物体の動き」を使いました。
これら「p5.js・toio」についての技術的な話もいろいろ書きたいことがあるのですが、それらを書いていくと記事が長くなりすぎるため、ここでは簡単な記載にとどめます（「公式ページへのリンク」や「自分が過去に書いた記事を検索した結果のリンク」、「簡易な説明」のみ掲載）。
- AI・機械学習と組み合わせて使った技術・デバイス
- p5.js
- 🔗 公式ページ
- 🔗 自分が過去に書いた記事の検索結果
- 【簡単な説明】Canvas API などのブラウザで扱える描画系の仕組みを簡単に使えるようにしてくれる描画ライブラリ。2D・3Dの描画が可能。組み合わせて使える関連ライブラリも豊富
- toio
- 🔗 公式ページ
- 🔗 自分が過去に書いた記事の検索結果
- 【簡単な説明】専用コントローラー・カートリッジなどと組み合わせて様々な学び・遊びの用途に使えたり、ビジュアルプログラミング・テキストプログラミングとも組み合わせられるロボットトイ。専用マットを使うことで、「マット上の絶対位置座標の取得」「座標指定での移動」など便利な制御を利用可能
- p5.js
おわりに
この記事では、「AI・機械学習を活用した体験型コンテンツ（Webアプリ）」を作るのに使った「AI・機械学習関連の技術」の話や、試作したものを展示イベントで体験してもらった話を書きました。
この記事で紹介した MediaPipe・Teachable Machine はとても便利です。
これらを使ったおかげで、AIや機械学習の専門家ではない自分でも、画像や音を対象にした検出・分類の仕組みを、自作の体験型コンテンツに組み込むことができました。
また今後も、面白そうな技術を見つけて組み合わせたり、体験型コンテンツに仕立てて使ってもらったりと、技術を使った楽しい活動を継続していけたらと思っています！