【ITニュース解説】# お金はない、でもやりたい！ブラウザだけで作ったAI記憶テストWebアプリ

システムエンジニアを目指す人々にとって、新しい技術、特に人工知能（AI）に触れることは大きな魅力だろう。しかし、AI開発と聞くと、高度な専門知識や高額な開発環境が必要だと感じるかもしれない。今回紹介する記事は、その常識を打ち破り、「お金はない、でもやりたい！」という熱意のもと、ブラウザだけでAI記憶テストWebアプリを開発した事例だ。この事例は、費用をかけずにAIを取り入れたシステムを開発できる可能性を示し、システムエンジニアの卵たちに大きなヒントを与えてくれる。

このプロジェクトの背景には、シニアケアの現場における具体的なニーズがあった。記事の筆者は、社内でシニアケア関連の新規事業を進める中で、シニア世代の「記憶」に関する課題に着目した。例えば、新しい機器の説明を一度聞いただけでは覚えにくいといった状況がある。そこで、AIを活用した記憶テストを開発し、楽しみながら記憶力を維持・向上させることを目指した。しかし、新規事業であるため、開発にかけられる予算は限られていた。

予算が限られる中でAIを活用したWebアプリを開発するという難題に対し、筆者は非常にスマートなアプローチを取った。それは、「Teachable Machine」と「HTML/CSS/JavaScript」という、いずれも無料で利用できる技術やツールを組み合わせる方法だ。これにより、高額な開発費用をかけることなく、アイデアを迅速に形にすることに成功した。この事例は、プログラミング初心者でもAI開発に挑戦できる道筋を示している。

まず、AIの中核を担うのがGoogleが提供する「Teachable Machine」だ。これは、機械学習モデルを簡単に作成できるノーコード・ローコードツールである。ノーコードはプログラミングコードを書かずに、ローコードは最小限のコードでシステム開発ができることを指す。Teachable Machineを使えば、画像、音声、ポーズなどのデータをアップロードするだけで、AIが自動的に学習し、そのデータを認識するモデルを生成してくれる。AIの専門知識がない初心者でも、直感的な操作でAIモデルを作成できる点が最大の魅力だ。この記事の記憶テストでは、ユーザーが答えた画像が「正しい答え」なのか「間違った答え」なのかをAIが判定するために、このTeachable Machineで学習させたモデルが活用された。AIに正しい絵の画像と間違った絵の画像をそれぞれ学習させることで、記憶テストの採点役を担わせたのだ。

次に、Webアプリの骨格と動きを作り出すために使用されたのが、「HTML」「CSS」「JavaScript」である。これらはWeb開発の三大要素と呼ばれ、WebページやWebアプリケーションを構成する上で不可欠な技術だ。HTMLはWebページの構造を定義し、CSSはWebページの見た目をデザインする役割を持つ。JavaScriptは、Webページに動きやインタラクティブな要素を追加するプログラミング言語で、ユーザーの操作に応じて画面を動的に更新したり、外部サービスと連携したりする。この記憶テストWebアプリでは、HTMLでテスト画面の構成を作り、CSSで見た目を整えた。JavaScriptがテストの進行ロジック、すなわち問題の表示、ユーザーの回答受付、時間の計測、そしてTeachable Machineで作成したAIモデルを呼び出して判定結果を受け取る部分を担っている。Teachable Machineで作成したAIモデルは、Webアプリケーションから簡単に利用できる形式でエクスポートできるため、JavaScriptから呼び出すことで、ブラウザ上でAIの判定機能を利用することが可能になる。これにより、ユーザーがWebブラウザを開くだけでAIを使った記憶テストが利用できる仕組みが完成した。高額なサーバーや複雑なAI環境を構築することなく、ブラウザ上で全ての処理が完結するため、開発コストと手間を大幅に削減できたのだ。

具体的にアプリの動作を見てみよう。ユーザーがテストを開始すると、JavaScriptによってランダムに選ばれた画像がHTML上に表示される。ユーザーはその画像を見て回答し、JavaScriptを通じてTeachable MachineのAIモデルに送られ、AIが回答を判定する。AIからの判定結果がJavaScriptに戻され、それが正解か不正解か、あるいは記憶度合いに応じて、ユーザーにフィードバックとして表示される。この一連のプロセスが全てブラウザ内で処理されるため、非常に軽快に動作するWebアプリが実現した。

この開発事例は、システムエンジニアを目指す人々にとって多くの学びがある。第一に、アイデアがあれば、必ずしも莫大な予算がなくても開発は可能であるという点だ。無料のツールやオープンソースの技術を組み合わせることで、PoC（概念実証）つまり「このアイデアは実現可能か」を検証するための試作品を、非常に低コストで迅速に作成できることを示している。第二に、AIという最先端技術が、もはや一部の専門家だけのものではないという事実だ。Teachable Machineのようなノーコード・ローコードツールが登場したことで、プログラミング経験が浅い初心者でも、AIモデルの作成や活用に挑戦できるようになった。そして第三に、基本的なWeb技術であるHTML/CSS/JavaScriptの重要性だ。優れたAIモデルも、それをユーザーに届けるインターフェースがなければ活用できない。ブラウザという最も身近なプラットフォームで、ユーザーが直感的に操作できるWebアプリを作るためには、これらの基本技術が不可欠である。

この記事の事例は、「お金はない、でもやりたい！」という情熱と、無料のツールや技術を組み合わせる工夫によって、AIを活用したWebアプリを開発できることを証明している。既存の制約にとらわれず、アイデアと技術を組み合わせて新しい価値を生み出すことにぜひ挑戦してほしい。