【本文】
はじめに：4日で奇跡は起きた
HTMLなんて触ったこともなかった私が、たった4日でGoogleログイン付きのWebアプリを公開しました。
しかも、パソコンは使っていません。スマホとタブレットだけです。
開発の相棒は Gemini (Advanced) と Claude (無料版)。
「AIを使えば、知識ゼロでもここまでできる！」「だからみんなもアイデアを形にしてほしい」
そんな思いで、開発の裏側と、作ったアプリについて共有します。
- なぜ作ったのか？（開発の動機）
きっかけは、私自身の受験勉強時代の苦い経験でした。
分からない問題をAIに聞いても、「もっともらしい嘘（ハルシネーション）」をつかれたり、解説が自分には難しすぎたりして、モヤモヤすることがよくありました。
「問題の解き方や、理解のしやすさは人によって違う」
なのに、情報社会の今でも、自分にぴったりの「教え方」にはなかなか出会えません。
「AIの答えだけじゃなく、人間同士が自分に合った解き方を共有できる場所が欲しい」
そう思い、既存のサービスに不満を感じていた私は、自分で夢を叶えることにしました。 - こだわりの機能：AI×学習の融合
ただの掲示板ではありません。スマホで勉強する学生のために、AI技術をフル活用しています。
- Googleログイン機能: Firebase Authenticationを使用。
- デザイン: AIに「いい感じの配色にして」と丸投げしたら、本当に見やすいデザインになりました。
- 文字装飾: 重要な部分の色変えやサイズ変更も直感的に操作可能。
最大の武器：カメラOCR機能
勉強中に参考書やノートを書き写すのは大変なので、「カメラで撮るだけでテキスト化できる機能」を実装しました。
GeminiのAPIを使って、画像から文字（数式含む）を抽出しています。
実際のコードのイメージはこんな感じです（※記事用に抜粋）。
// 📸 カメラ/画像アップロードの処理
const fileInput = document.getElementById('image-input');
fileInput.addEventListener('change', async (e) => {
const file = e.target.files[0];
if (!file) return;
// 画像をBase64に変換してAIに投げる準備
const base64Image = await convertToBase64(file);
// 🤖 Gemini APIに画像を送って文字起こしを依頼
const prompt = "この画像の文字を読み取ってテキストにしてください。数式はLaTeX形式で。";
try {
const text = await callGeminiAPI(base64Image, prompt); // API呼び出し関数
// 抽出したテキストを投稿フォームに自動入力
document.getElementById('post-content').value += text;
alert("文字の抽出に成功しました！");
} catch (error) {
console.error("AIの限界です...", error);
alert("文字起こしに失敗しました。");
}
});
これのおかげで、アナログな勉強ノートを一瞬でデジタル化して共有できるようになりました。
3. 「AI開発」のリアルな苦労（1000行の壁）
「AIに頼めば一瞬で終わる」と思っていましたが、現実は甘くありませんでした。
コードが長くなり、1000行を超えたあたりからAIの挙動がおかしくなり始めました。
- 出力の限界: コードの続きを書いてくれず、途中で切れる。
- バグの無限ループ: 「直しました」と言われてコードを貼ると、今度はボタンが消える。それを直すと、また最初のバグが復活する…。
解決策: GeminiがおかしくなったらClaudeに投げる、という「AIのセカンドオピニオン」戦法でなんとか乗り切りました。
- 最大の難関：Firebase Hosting（英語）との戦い
Web公開のためにGoogleの「Firebase」を使いましたが、管理画面が全部英語で絶望しました。PCもないので翻訳拡張機能も使いにくい…。
そこで編み出したのが、「画像認識ハック」です。
タブレットでFirebaseの管理画面を開く。
スマホでその画面を写真を撮る。
AIに画像をアップロードして「デプロイしたいんだけど、この画面のどこを押せばいい？」と聞く。
これを繰り返すだけで、英語が読めなくても迷わず設定が完了しました。近代のAI技術（マルチモーダル）の凄さを肌で感じた瞬間でした。 - さいごに
HTMLもサーバーも知らなかった私が、AIとスマホだけでここまで作れました。
これを見ているエンジニアの皆さん、あるいは以前の私と同じような初心者の方、ぜひAIを活用して自分のアイデアを形にしてみてください。
お願い：大人の皆さんへ
このサイトは、勉強で困っている学生たちが「自分に合った解き方」に出会えるように作りました。
もし周りに受験生や学生さんがいたら、「こんな便利なサイトがあるよ」と教えてあげていただけると嬉しいです。
皆さんの拡散が、誰かの成績アップや、勉強の悩み解決に繋がります。
最後まで読んでいただきありがとうございました！
https://skyseed-7ea9c.web.app
↑完成したサイト