WEEK 06
AI 機能を足して「俺のアプリ」を他と違う状態にする週 (後半)
OpenAI / Claude API を呼んで「例文生成」「添削」を載せる
所要時間
Day 1: 45分 / 週合計: 約5時間
ツール
Lovable Pro + Supabase + OpenAI または Anthropic API
費用
約3800円 + API 月数百円
とにおのひとこと
ここで「他と違う」が決まる週。 Week 5 までは「自作したフラッシュカード」、Week 6 で「AI 連携したフラッシュカード」。 商売の種としても、自慢としても、世界が変わる。 API キーを扱う初めての週、ここだけ少しドキドキするけど大したことない。
なぜ今週これをやるのか
AI を「使う側」から「組み込む側」になる週。 ChatGPT を毎日使うのと、自分のアプリに ChatGPT を組み込むのは、別の能力。 後者ができると「俺のアプリにAI 入ってる」と言える、これが付加価値の本体。 そして月 300円の API 料金で世界が変わる。
始める前に必要なもの
- Week 1-5 完了 (英単語アプリが動いてる、Supabase 接続済み、認証つき)
- OpenAI または Anthropic にアカウントを作る準備 (メアド + クレジットカード、月数百円分の課金)
今週初めて出てくる言葉
分からない言葉が出てきたら、ここに戻って確認していい。 全部覚えなくていい、使ってるうちに自然に身につく。
API (エーピーアイ)
別のサービス (OpenAI 等) を、自分のアプリから呼ぶ仕組み。 「電話番号」みたいなもの、ダイヤルすれば AI が答える。
API キー
API を呼ぶための「通行証」。 自分のアカウントから呼んでることを証明する。 長い文字列。 漏らさない。
プロンプト (API 用)
API に AI を呼ぶときに渡す指示文。 Lovable のプロンプトと同じ概念だが、こっちは「アプリの中で AI に投げる」プロンプト。
トークン
AI が文字を数える単位。 「お願いします」は約 4トークン。 トークンが多いほど料金が上がる、でも個人は気にしなくて OK。
レート制限
「1分間に何回まで呼べる」の制限。 個人で 1日 100回叩いても普通は超えない。
今週の卒業条件
Week 5 のアプリに AI 機能を 1個追加。 例:「単語入れたら AI が例文 3本を自動生成して登録」「自分の英作文を AI が添削」。
日々の進め方
各ステップに「なぜ」「やり方」「こうなれば成功」「詰まったら」がある。 焦らない、1日 1ステップでも OK。
Day 1
45分
API キーを取る (OpenAI または Anthropic)
1
どっちを使うか選ぶ
なぜ
OpenAI (ChatGPT 提供) と Anthropic (Claude 提供) どっちでも教材は動く。 好みで選ぶ。
やり方
OpenAI:
- 情報が多い、サンプルコードもネットに大量
- 「GPT-4」が定番
Anthropic (Claude):
- 日本語の文章が綺麗
- 「Claude Sonnet」「Claude Opus」が選べる
初めてなら OpenAI でいい、迷ったら OpenAI。
こうなれば成功
どっちか決めた。
2
platform.openai.com (または console.anthropic.com) でアカウント作成
なぜ
API を使うには別のアカウントが必要。 ChatGPT のアカウントと同じメアドで OK、でも別の登録が必要。
やり方
OpenAI: platform.openai.com、Sign up、メアドとパスワード。 ChatGPT で使ってる Google アカウントで OK。
Anthropic: console.anthropic.com、Sign up、同じく。
こうなれば成功
Dashboard が開いた状態。
3
クレジットカードを登録、$5 課金
なぜ
API は使った分だけ課金。 最初に $5 (約750円) 入れておけば、個人用なら数ヶ月持つ。
やり方
OpenAI: Settings → Billing → Add payment method → カード登録 → $5 add credits。
月 200円超えない使用量なら $5 が約 6ヶ月持つ。
こうなれば成功
クレジット残高が $5 になってる。
詰まったら
クレカ怖い: 必須。 でも上限を設定できる、「月 $10 までしか使えない」と設定すれば暴走しない。 Settings → Limits で。
4
API キー作成
なぜ
これがアプリと OpenAI を繋ぐ「鍵」。 自分のアカウントから呼んでることを証明する。
やり方
OpenAI: Dashboard → API keys → Create new secret key → 名前 (例:「lovable-flashcard」) → Create。 表示されるキー (sk- で始まる長い文字列) を必ずコピー、メモる。 これは 1回しか表示されない、消えたら作り直し。
こうなれば成功
API キーが手元のメモにある。
詰まったら
キーを失くした: もう一度 Create new secret key で新しいの作る。 古いのは Revoke (無効化) しておく。
成果物: API キー 1個
Day 2-3
計 2時間
「例文生成」機能を追加
1
「例文生成」プロンプト
なぜ
単語追加するときに、AI が例文を 3本自動で書いてくれる。 これがあると「単語と例文と訳」が一気に集まる、勉強効率が爆上がり。
やり方
Lovable に貼るプロンプト:
「単語追加するときに、OpenAI API で例文 3本を自動生成して一緒に Supabase に保存して。
OpenAI API キーはこれ: [貼る]
例文は中学生レベルの英語、各文に日本語訳もつけて、簡潔に」
こうなれば成功
Lovable がコードを更新、API キーを Lovable の Secrets に保存する画面が出るのでそこに入れる。 (API キーは直接コード貼らない、Lovable の Secrets 機能を使う)。
詰まったら
Lovable がキーをどこに入れるか言ってこない: 「OpenAI API キーは Lovable Secrets に保存する形にして」と再プロンプト。
2
動かす、例文出る、感動する
なぜ
自分が入れた単語に対して AI が例文作る、これが「市販アプリと並んだ」瞬間。
やり方
新しい単語「procrastinate」を追加してみる。 AI が例文を 3本作る、日本語訳付き、Supabase に保存される。
こうなれば成功
単語 + 例文 3本 + 訳が DB にある。
3
カードに例文を表示する UI 修正
なぜ
例文があってもカードに表示されないと意味ない。
やり方
「カードの裏側に、日本語訳と例文 3本を並べて表示」とプロンプト。
こうなれば成功
カードめくったら、訳 + 例文 3本が見える。
成果物: AI 例文つき単語アプリ
Day 4-5
計 1.5時間
「英作文添削」ページを追加
1
添削ページのプロンプト
なぜ
自分が書いた英文を AI が「より自然な英語」に直してくれる。 これは Anki にない、Duolingo にもない、「俺のアプリ」の差別化。
やり方
プロンプト:
「新しいページ /writing を作って。
- 英文を書く欄 (textarea)
- 提出ボタン
- 提出すると OpenAI API に投げて、「より自然な英語版」と「文法ミス指摘」を 2セクションに分けて表示
- 結果は Supabase に保存 (writing_records テーブル)」
こうなれば成功
ページが追加されてる。
2
実際に自分が書いた英文を 1つ突っ込む
なぜ
使うと意味が出る。
やり方
今日「今日疲れた」を英訳した英文を貼る、提出。 例:「I am very tired today, because work is hard」。 AI が「Today was exhausting because work was tough」と直す + ミス指摘。
こうなれば成功
添削が返ってくる、保存される。
成果物: 英作文添削機能
Day 6-7
計 30分
完成版を晒す
1
スクショ 3枚
なぜ
X や note に晒すには絵が要る。
やり方
画面: 単語カード / AI 例文 / 添削結果。 これ 3枚。
こうなれば成功
スクショが手元にある。
2
誰かに使ってもらう
なぜ
自分以外の人に触ってもらうと「動かない」が見つかる、これが財産。
やり方
家族・友達・X の知り合いに URL 送る、「触ってみて」。
こうなれば成功
1人以上に触ってもらった。
3
note 記事ドラフト
なぜ
Week 7 で公開する原稿を Week 6 のうちに準備。
やり方
タイトル案:「中年・非IT が 6週間で AI 英語学習アプリを作った全記録」。 Week 1-6 で何やったか、失敗 3件、成功 1件、画面スクショ 3枚。 これ Week 7 の公開ネタ。
こうなれば成功
note にドラフト保存 (まだ公開しない)。
成果物: スクショ 3枚 + note ドラフト
つまずきポイント (先回り Q&A)
詰まったらここを読む。 答えがなければ Discord か X で聞いていい。
Q. API キーって怖い
A. 怖い、で合ってる。 漏れたら他人に使われて課金される。 GitHub に貼らない、Discord に貼らない、Lovable の Secrets 機能に入れる、これだけ守る。
Q. 例文の精度が悪い
A. プロンプトを「中学生レベル」「日常会話で」「短く」など制約つけて指示する。 Week 7 でプロンプト調整の深掘りをする。
Q. 料金が不安
A. 個人で 1日 100回叩いても月 200円超えない。 OpenAI Settings → Limits で「月 $10 まで」と上限設定。 アプリを世に公開して 1000人使うとかになったら別、Week 6 では問題ゼロ。
Q. OpenAI と Anthropic、後から変えられる?
A. 変えられる。 Lovable に「API を OpenAI から Anthropic に変えて、key はこれ」と頼むだけ。
Q. これって商品にできる?
A. できる。 でも Week 6 で考えない。 まず「自分が毎日使える状態」になってから商品化を考える。 焦らない、商品化はあとから来る。
Q. OpenAI のモデル選択 (GPT-4 / GPT-3.5) で迷う
A. 迷ったら GPT-4o-mini。 安くて精度十分。 例文生成や添削で 1リクエスト 0.01円程度。
Q. AI が遅い
A. モデルを軽いやつ (mini 系) に変える。 「OpenAI GPT-4o-mini を使うように変えて」とプロンプト。 速度 3倍、料金 1/5。
Q. Lovable の Secrets ってどこにある?
A. Lovable プロジェクト → Settings → Secrets。 ここに API キーを入れると、コード内では `process.env.OPENAI_API_KEY` みたいに呼ばれる、自分でコード書かないけど概念だけ。
卒業チェック
自作の AI 連携英語学習アプリが手元にある、自分も使ってる、X / note で晒した。
週末のとにお
Week 6 終わった人、本気で「俺、アプリ作れる人なんじゃね?」って思っていい。 Week 7 で晒すフェーズ、Week 8 で次の道を選ぶ。 ゴールが見えてきた。
次の週に向けて
Week 7 は「公開週」。 X / note / LINE で正面から晒す、反応取る、恥かく。 これやらないと意味ない。