教材アイデアをWebアプリに――アプリを作るアプリ「アプリエ」

最近，バイブコーディングと言われる生成AIを活用したプログラミングが広まり，このギジュツドットコムでもバイブコーディングによるWebアプリ教材の投稿が増えてきました。
「アプリエ（AI App Maker）」は，こうしたバイブコーディングによるWebアプリ作成の敷居をさらに下げ，アプリの構想を整理し、ChatGPTやGeminiなどの生成AIに依頼するためのプロンプトを作る「アプリを作るためのアプリ」です。
アプリエ自身が外部AIへ内容を自動送信したり、生成されたコードを自動実行したりすることはありません。作り手が目的と条件を考え、生成AIに依頼し、動作を確かめるための道筋を整えるツールです。

「アプリエ」を開くhttps://gijyutu.com/g-soft/ai_designer/

開発：村松浩幸・荒木誠吾

アイデアを「使えるアプリ」へ近づける三つの機能

アプリエには、次の三つの機能があります。

① アプリを作る
アプリ名、目的、利用者、必要な機能、画面や操作の条件、保存の要否などを入力すると、生成AIへの依頼文を作成します。GIGAスクール端末での利用を想定し、文字の大きさ、タップしやすい操作領域、一般的なブラウザでの動作といった条件も依頼に含められます。生成AIには、HTML・CSS・JavaScriptを原則一つのHTMLファイルにまとめたWebアプリとして出力するよう求めます。
② アプリを動かす
「どの操作で起きるか」「本来はどう動いてほしいか」「すでに何を試したか」を整理し、修正依頼の文章を作ります。不具合をAI任せにせず、症状を言葉にすることが、よりよい改善につながります。
③ アプリを理解する
仕様とコードから要件定義書とアクティビティ図を作成し、処理の流れを確認します。完成したアプリをブラックボックスにしないための機能です。実際の動作、仕様、コード、図を照らし合わせることで、「なぜこのように動くのか」を説明できるようにします。

必要な機能などを設定

生成AIにプロンプトを渡すとアプリのコードが生成

※上記で実際に作成したクイズアプリを試せます
外部ライブラリ、データ保存、外部サービスとの連携を使うアプリでは、別ファイルや外部サービスの設定が必要になる場合があります。また、アクティビティ図の表示にはPlantUMLを用いるため、ネットワーク環境等によっては表示できないことがあります。

まずは先生自身が小さく作る

まずは先生方自身が一つ、小さなアプリを作ってみることをおすすめします。最初は、保存機能や外部サービスへの接続を使わない題材が適しています。例えば、三択クイズ、アイデア発想のルーレット、振り返りチェックリスト、校務の確認・集計補助ツールなどこんなのどうかなと思ったものを形にしてみましょう。

「誰が、どの場面で、何を少し便利にしたいか」を決め、中心となる機能を一つか二つに絞ります。①で構想を整理して試作し、②で不具合や使いにくさを改善し、③で仕組みを確かめる。この経験が、授業で扱う題材、必要な時間、支援の仕方、評価の観点を考える土台になります。
また，完成後には，通常プログラムを開発する際の設計書である要件定義書と，作成されたWebアプリのアルゴリズムを示すアクティビティ図をあわせて1つの文書として表示する機能も実装しています（要件定義書とアクティビティ図を作るプロンプトを生成し，AIに渡す）。これにより，アプリはできたけど，中身がわからないというブラックボックス化を防ぎ，中身理解の一助になるように活用してもらえればと考えています。

要件定義書＋アクティビティ図の例

ユーザーマニュアルはこちら

Gemini Canvasとも補完的に使う

Gemini Canvasは、自然言語からアプリやゲームを素早く生成・修正し、試すことに向いています。一方でアプリエは、目的や条件を整理し、トラブルを言語化し、完成後に仕組みを理解する過程を支えます。

教材のねらいと条件をアプリエで整理し、Gemini Canvasなどで試作する。完成後はアプリエの③で振り返る。このように、アプリエを「考える・直す・理解する」、Gemini Canvasを「素早く作る・試す・編集する」ための道具として使い分けることができます。

生徒が使うときに大切にしたいこと

生徒による活用では、AIに「作らせて終わり」にしないことが重要です。身近な困りごとや学習課題を見いだし、目的を考え、指示し、試し、改善し、仕組みを説明する活動として位置付けます。自然言語で試作を繰り返す「バイブコーディング」も、こうした探究と改善の過程の中で扱います。

その前提として、ビジュアルプログラミング等で、順次処理、分岐、繰り返し、変数、イベント、入出力、試行・修正といった基礎的な考え方を学んでから扱うことをおすすめします。完成物だけでなく、仕様、試作・改善の過程、アプリの仕組みを説明できるかを大切にしましょう。

利用に当たっては、自治体・教育委員会・学校の生成AI利用ガイドライン、情報セキュリティ規程、端末利用のルールを必ず確認してください。利用できるサービスとアカウント、年齢や保護者同意、入力してよい情報、公開範囲、著作権の扱いは、学校の方針に従います。氏名、学籍番号、メールアドレス、パスワード、APIキー等の重要な情報をAIに入力しないことも徹底します。

作ったアプリを活用・共有する

生成AIで作成したHTMLファイルは、まず自分の端末で開いて動作を確認します。ただし、外部ライブラリやデータの読み込み方によっては動かない場合があり、iPadではローカルのHTMLファイルをブラウザで開いて実行することが難しい場合があります。

校内・授業内で手軽に共有するなら、学校で認められたGeminiやCanva等の共有機能を使う方法があります。学級・学校内のWebページで紹介する場合はGoogle Sitesへの掲載、本格的に継続公開する場合はGitHubとGitHub Pagesの活用も選択肢です。いずれも公開前に、内容と動作、安全性、個人情報、著作権、外部サービスの規約、共有範囲を確認してください。

ライセンス・お問い合わせ

アプリエのソースコードおよび付属文書はMIT Licenseで提供されています。利用、複製、改変、公開、配布、商用利用等が可能ですが、複製・配布時には著作権表示と許諾文を残す必要があります。改変版や再配布を行う場合は、必ずライセンス原文を確認してください。

ソースコード：https://github.com/gijyutucom-byte/Aprie
お問い合わせ：https://mura-lab.info/main/contact

免責事項

本アプリの利用、ならびに本アプリを通して作成・共有・公開したアプリ、コード、資料等に起因して生じたいかなる不具合、損害、トラブル、データの消失、第三者との紛争等についても、開発者は一切の責任を負いません。利用者の責任において、学校・自治体の規程、各サービスの利用規約、著作権、個人情報保護および安全性を確認した上でご利用ください。

投稿者：村松浩幸（信州大）