【コード読めません】"自分理解Gems"と一緒に、家族専用アプリを作ってみた

「こんなアプリがあったら日々の校務や授業準備が楽になるのに…」

そう思いつつも、プログラミングの壁に阻まれて諦めた経験はありませんか？

どうも、なぎ太です！普段は中学校で理科を教えながら、授業DXや生成AIの活用について発信しています。

何度かこのnoteでもお話をしてきていますが、生成AIを「専属のエンジニア兼パートナー」として手元に置くことで、プログラミング初心者でも自分専用のアプリをサクっと開発できる時代になっています。

今回は、私が最強のブレーンであるGeminiと一緒に、自分専用アプリを爆速開発したプロセスを大公開します！

🧪 STEP1：「自分理解Gems」を作成

いきなりAIに「アプリ作って！」と頼んでも、自分の思考スタイルや学校現場の文脈に合わないアイデアが返ってくることがあります。

そこでまずは、Geminiのカスタマイズ機能（Gems）を使い、「私の指導方針、業務スタイル、理科教員としての軸」を完璧に理解した専用アシスタント（Gems）を構築しました。

構成するためのカスタマイズ指示は、ブレーンのGemini（私の分身。頼りになる右腕）に全部作ってもらいます。

簡単な分身の作り方↓

カスタム指示の内容です。
ユーザーのプロファイルを自分好みにするといいかなと思います。

ちなみに、プロファイルにある「溝口大和」とは、『宇宙兄弟』のFFS理論診断での私のタイプです。詳しくはこちらへ

# あなたの役割
あなたは、ユーザー（なぎ太先生：徹底した論理的思考と高いシステム構築力を持つ理科教諭/開発者）の専属「フルスタック・アプリ開発アドバイザー（CTO）」です。
Webブラウザ版およびスマホアプリ（クロスプラットフォーム/PWAなど）の開発において、アイデアのブラッシュアップからアーキテクチャ設計、コード生成、改善のループまでを一貫してサポートします。

# ユーザー（なぎ太先生）のプロファイルと対話ルール
・【思考特性】：溝口大和的な高い凝縮性とロジック（再現性・自動化・構造化を最重視）＋柔軟なアイデア発想。
・【開発スタンス】：「自分が去っても回る仕組み」「現場の不便をハックするシステム」を好む。
・【対話スタイル】：前置きや無駄な挨拶は一切不要。結論から述べ、構造化されたデータ（箇条書き・コードブロック・表）で回答すること。

# 絶対ルール：開発前の「ヒアリング（質問）」機能
ユーザーから「こんなアプリを作りたい」「新しいアプリのアイデア」という投げかけがあった場合、**いきなりコードを書き始めてはいけません。**
より良いプロダクトにするため、コード作成に入る前に必ず以下の【開発前チェック質問】をユーザーに投げかけ、要件を極限まで具体化してください。

【開発前チェック質問項目（2〜3問ずつ段階的に質問すること）】
1. **ペルソナと課題：** 誰が・どんな場面で使い・何のストレスを解消するのか？
2. **形態（Web vs スマホ）：** ブラウザ特有の機能（PCの大画面・キーボード操作）が必要か、スマホ特有の機能（カメラ・通知・オフライン操作・PWA）が必要か？
3. **データ構造・技術選定：** バックエンド（GAS, Firebase, Supabase等）の指定や、データ保持の期間はあるか？
4. **MVP（最小限の完成品）：** 最初に作る「絶対に削れない最小限の機能（Ver 1.0）」は何か？

# ループ設計（PDCA開発サイクル）の組み込み
アプリ開発は以下の【4ステップのループ】で進行させてください。会話の節目で「次はどのステップに進みますか？」とガイドしてください。

┌────────────────────────────────────────┐
│  1. 企画・深掘り（質問による要件のブラッシュアップ）  │
└──────────────────┬─────────────────────┘
                   │
┌──────────────────▼─────────────────────┐
│  2. 設計（画面構成・DB設計・UI/UXレイアウト）         │
└──────────────────┬─────────────────────┘
                   │
┌──────────────────▼─────────────────────┐
│  3. 実装（コード生成・Web/スマホ両対応のレスポンシブ） │
└──────────────────┬─────────────────────┘
                   │
┌──────────────────▼─────────────────────┐
│  4. 検証・改善（リファクタリング・追加機能のループ）  │
└──────────────────┴─────────────────────┘

# 出力ルール
・コードを提示する際は、ブラウザ版（Web）とスマホ版（モバイル表示）の視点（レスポンシブデザインや操作感の違い）を必ず考慮してください。
・「もっと良いアイデア」があれば、実装の前に1つだけ提案として差し込んでください。

もし、利用してみたい人いたら、どうぞ！フリー配布しますね。
なぎ太という癖強ユーザー好みになっているので、お試しに使ってみて、よさそうなら、自分好みに改造してみて下さい。

コメント頂ければ、やり方のアドバイスもします！

この「自分理解Gems」があるおかげで、前提の説明を毎回しなくても、私の意図を100%汲んだ提案をしてくれるようになります。

💡 STEP2：Gemsと壁打ちしながらアプリ企画・開発

構築した「自分理解Gems」に対し、現場のリアルな悩みや「こういうツールが欲しい」というアイデアを投げかけていきます。

例えば

私：「家族で共有できるお買い物メモ」というスマホのアプリを作りたいんだけど、アイデアある？

🚀 STEP3：プロトタイプアプリの公開

対話を重ねて形になってきたアプリがこちらです！

1.プロトタイプアプリの概要

アプリ名：【家族共有】お買い物共有メモアプリ

🛒✨【このアプリのここが便利！】

1. 売り場順に並び替わる！ 「野菜→肉→調味料→日用品」とスーパーの棚の順番でリストが並ぶので、店内を行ったり来たりしなくて済みます。

2. 頼みたいものを家から追加できる！ 買い出しに行っている人に「あ、これも追加！」と入力すると、即座に相手の画面に届きます。

3. 洗剤やトイレットペーパーの「買い忘れ」を防ぐ！ 使った量に合わせて「そろそろ切れる時期」に自動でメモへ追加してくれます。

2.このアプリの動かし方

（note公開用デモ版です。　改造・再配布もちろん自由！）

２パターン用意しました。
１つは【コード】からもう１つは【直接アプリ】を開けます。netlifyに作成し、公開しています。

【コードから】
１．次のコード（下記のドキュメントのサイトに載っているので、開いて下さい。）をコピーします。

２．メモ帳やテキストエディタを開き、コードを貼り付けます。
３．ファイル名を shopping.html （文字コード：UTF-8(BOM付き) ）にして保存します。
４．保存した shopping.html をダブルクリックすると、ブラウザ（ChromeやSafari）が起動し、その場でアプリが動き始めます。

【直接アプリ】

もちろん。ここまでがプロトタイプです。
プロトタイプ作成まで30分もかかってないかな。

例えば、「シンプルでかたいから絵文字入れて！」みたいに。

でも、どこかで妥協しないと、終わりのない終わりになってしまうので、
「これでいいかな！」って思ったら次はスマホのアプリ化です。
スマホのアプリ化は私も初めてなので、順を追って解説していきますね。

アプリにした後に「ここ、直したいな～」っていうのが出てきたら、その都度バージョンアップさせればいいし気軽にやっていきましょう(^▽^)/

3.具体的なスマホアプリとしての運用

ロードマップスタート！！

ステップ1：Firebaseで「家族共有データベース」を作成する

（Gem曰く、所要時間：5分）

1. Firebase Console にアクセスし、プロジェクトを新規作成（無料プラン）。

2. Firestore Database を作成し、ルールをテストモード（全員読み書き可）に設定。

3. ウェブアプリを追加 をクリックし、発行される firebaseConfig（APIキーなどの文字列）をコピーする。

まだあるのか・・・。

その前に、チャッピーから警告が！！

チャッピーに言われるままコードを書き換えます。
二重チェックに今度はClaudeさんに聞いてみよう。

ステップ2：Vercel（またはGitHub Pages）でWeb公開する

（Gem曰く、所要時間：3分）

1. コード内の firebaseConfig 部分に自分のキーを貼り付け、ファイル名を index.html に変更。

2. Vercel または GitHub に index.html をアップロード。

3. 数秒で家族専用の公開URL（例: [https://family-shopping.vercel.app](https://family-shopping.vercel.app)）が発行される。

GitHubはMicrosoft傘下の開発プラットフォームで、公式サイトでは大規模な開発者・組織が利用していることを公開しているそうです。

Vercelは企業向けにも利用されているサービスで、公式のセキュリティ情報では SOC 2 Type 2 の認証を取得しており、ISO 27001などのコンプライアンスにも対応しているそうです。

両方とも、チャッピー情報です。（AIに頼りすぎ）

GitHubで進めてみますね。

その前に、１だな。
１から呪文なんだけど💦

ステップ3：家族のスマホへアプリとしてインストールする
（（Gem曰く、所要時間：1分）

発行されたURLを家族のLINE等で共有し、スマホのブラウザで開きます。

• iPhone (Safari): 画面下の共有ボタン ➔ 「ホーム画面に追加」

• Android (Chrome): 右上メニュー ➔ 「ホーム画面に追加」 または 「アプリをインストール」

ムム？！

なんでー？！　Geminiさん助けて―！！

と、セキュリティを元に戻して直りました。結局30分くらいかかった(;^_^A

☕ まとめ：AIに「作業」を任せ、教員は「本質」に集中する

アプリ開発というとハードルが高く聞こえますが、「自分を理解させたAI」という相棒がいれば、欲しいツールを自分の手で即座に作れる時代になりました。

私自身、コードは読めません。
でも、読めるAIに読んでもらえばいいのです！
そして、今回思ったことは
三者に聞いて作ると、結局手間が増えて時間がかかるってことです。

まー
船頭が多いと山登るって言うしな。

意見を聞きすぎるのもダメなんですね。勉強になりました。やっぱりリーダーは１人にしないと。

さて、今回のアプリ作り。
結局、何時間もかかってしまいましたが、面白かったです。

私の分身との壁打ちなのでGemさんも「あなたならこんな機能好きでしょ？」ってお願いしてなくても、提案してきて、どんどんよくなっていきました。
なので、分身との会話は、話せば話すほど、自分好みのアプリになっていきます！

ぜひ皆さんも、自分だけの「アプリ開発の専属Gem」を作成して、業務改善アプリ作りに挑戦してみてください！

【追記】後日⇒バージョンアップしました。

💬 コメント・スキ・フォローもお待ちしています！

「自分もこんなツールを作ってみた！」「ここが気になった！」など、気軽にコメント欄で教えてくださいね！

💡 なぎ太ってこんな人↓

のんびり先生に紹介してもらいました♪
まだ、noteをよくわかってませんが、本当にわからない始めたばっかの時から色々と教えてくれたやさしくて頼りになる先生です！

また、色々と教えてください(^▽^)/