会社の休憩中にスマホだけで、ソースコードを一切見ずに、日本語で話しかけるだけで本格占いアプリを作った話
【実話】会社の休憩中にスマホだけで、ソースコードを一切見ずに、日本語で話しかけるだけで本格占いアプリを作った話
by geminipro先生
はじめに：これを読んでほしい人
プログラミングは全くわからない
でもアプリを作ってみたい
スマホしか持っていない（またはPCを自由に使えない）
お金はかけたくない
この記事はそんな人に向けて書いています。
実際に私がやったことはこれだけです。
スマホのClaude（AI）に日本語で話しかけ続けただけ。 ソースコードは一行も読んでいない。 会社の休憩時間にこっそりやった。 費用はゼロ円。
その結果、本格占いアプリ「Fate Layer」 が完成しました。
👉 Webアプリ版はこちら（無料）
👉 Android APKダウンロード（無料）
アプリ概要
Fate Layer（フェイトレイヤー） は、AIが四柱推命・九星気学・数秘術・星座占い・姓名判断を統合して本格的な鑑定文を生成する占いWebアプリ＆Androidアプリです。
主な特徴はこちらです。
5種類の占術（今日・今週・今月・今年・総合鑑定）
姓名判断（天格・地格・人格・外格・総格を自動計算）
5言語対応（日本語・英語・中国語・韓国語・フランス語）
完全無料のGroq APIを使用（クレジットカード不要）
PWA対応（スマホにインストールして使える）
Androidネイティブアプリ版あり（APKをダウンロードしてインストール）
夜空の背景アニメーション（Canvas描画）
使ったのはスマホとClaudeだけ。コードは一切書いていません。
目次
1. きっかけと開発環境
2. 開発の流れ（Claudeとのやり取り）
3. 詰まったポイントと解決策
4. アプリの仕様詳細
5. Groq APIキーの取得方法
6. Webアプリとして公開する方法
7. Androidアプリ（APK）としてインストールする方法
まとめ・制作過程の完全版はBrainで
1. きっかけと開発環境
note「geminipro先生」では、AIツールを使って実際に何ができるかを検証・紹介しています。
今回のチャレンジのルールはこうです。
スマホのみ（PCは原則使わない）
日本語だけでClaudeに指示する
ソースコードは一切読まない・書かない
会社の休憩時間にこっそり進める
費用ゼロ
このルールのもとで、どこまでのアプリが作れるか試してみました。
必要なものはこれだけです。
スマホ（AndroidでもiPhoneでも可）
Claudeのアカウント（無料プランでも可）
GitHubアカウント（無料）
Cloudflare Pagesアカウント（無料）
Groq APIキー（無料・クレジットカード不要）
プログラミングの知識は一切不要。スマホだけで全部できます。
2. 開発の流れ（Claudeとのやり取り）
ステップ1：アプリの骨格を作る
最初にClaudeに「占いWebアプリを作って」と伝えるだけで、HTMLファイル一式が生成されました。最初から夜空のアニメーション背景、フォーム、結果表示エリアが揃っていて驚きました。
ステップ2：占術ロジックの実装
「姓名判断機能を追加して」とお願いすると、漢字の画数テーブルを内蔵した計算ロジックが自動生成されました。天格・地格・人格・外格・総格の5つを自動計算して占い結果に反映します。
ステップ3：多言語対応
「5言語に対応して」と伝えると、I18Nオブジェクトが追加され、すべてのテキストが言語切替に対応しました。
ステップ4：PWA対応
「スマホにインストールできるようにして」という一言でmanifest.jsonとService Workerが追加されました。アイコンのデザインも何度かやり取りして、回転する星型紋章（シジル）のデザインに落ち着きました。
ステップ5：APIキー問題との格闘
ここが一番の山場でした。GeminiやOpenAIなど様々なAPIを試しましたが、日本のアカウントでは無料枠の制限や設定の複雑さで次々と断念。最終的にGroqが完全無料・クレジットカード不要・高速で安定して動くことがわかりました。
ステップ6：Androidネイティブアプリ化
CapacitorというツールをPCで使って、WebアプリをそのままAndroidのAPKファイルに変換しました。これでスマホにネイティブアプリとしてインストールできるようになりました。
3. 詰まったポイントと解決策
問題1：様々なAPIが使えなかった
原因： GeminiはAPIの無料枠が日本では制限されているケースあり。OpenAIは有料。
解決策： Groqに切り替え。完全無料でLlama・Gemmaなどの高性能モデルが使える。
問題2：PWAのキャッシュが更新されない
原因： Service WorkerがHTMLをキャッシュして古いコードを返し続けていた。
解決策： sw.jsをネットワーク優先（cache: 'no-store'）に変更。
問題3：プロバイダーボタンが画面からはみ出した
原因： flex-wrap: nowrap のままボタンを追加したため。
解決策： flex-wrap: wrap に変更して2行に折り返すようにした。
4. アプリの仕様詳細
占術の種類
種類 内容 総合鑑定 四柱推命・九星気学・数秘術・星座・姓名判断を統合 今日の運勢 恋愛・仕事・健康・金運の当日の流れ 今週の運勢 週の前半・後半の流れ、チャンス日・注意日 今月の運勢 月全体の大きな流れ、重要な転機 今年の運勢 年間を通じた大きな流れと指針
姓名判断の計算式
格 計算方法 天格 姓の総画数 地格 名の総画数 人格 姓の末字＋名の頭文字の画数 外格 天格＋地格－人格 総格 姓名の総画数
使用AIモデル
プロバイダー モデル 料金 Groq llama-3.3-70b他4モデル自動切替 完全無料
5. Groq APIキーの取得方法
console.groq.com をブラウザで開く
「Sign Up」→ Googleアカウントで登録
右上メニュー「API Keys」→「Create API Key」
表示されたキー（gsk_で始まる）をすぐコピー
※キーは作成直後しか全文表示されません。必ずその場でコピーしてください。クレジットカード不要・完全無料です。
6. Webアプリとして公開する方法
GitHubリポジトリの準備
github.com でアカウント作成
「New repository」→ リポジトリ名を入力
index.html・manifest.json・sw.js・icon-192.png・icon-512.png をアップロード
「Commit changes」をクリック
Cloudflare Pagesの設定
dash.cloudflare.com を開く
「Workers & Pages」→「Create application」→「Pages」→「Connect to Git」
GitHubと連携してリポジトリを選択
「Save and Deploy」をクリック
以降はGitHubにファイルをアップロードするだけで自動デプロイされます。
PWAとしてインストールする方法（Android）
ChromeでデプロイされたURLを開く
右上「⋮」→「アプリをインストール」
ホーム画面にアイコンが追加される
7. Androidアプリ（APK）としてインストールする方法
下記のリンクから app-debug.apk をダウンロードしてスマホにインストールできます。
インストール手順
上記リンクからAPKをダウンロード
ファイルマネージャーでAPKをタップ
「提供元不明のアプリ」の許可を求められたら「許可」
「インストール」をタップ
※Google Playストア経由ではないため、インストール時に警告が出ますが問題ありません。
8. まとめ
Claudeとの会話だけで、以下がすべて実現できました。
本格的な占いロジック（5種類の占術＋姓名判断）
5言語対応
完全無料のGroq API対応
夜空のアニメーション背景
PWA対応（スマホインストール可）
Cloudflare Pagesで無料公開
Androidネイティブアプリ（APK）化
プログラミング知識がなくても、Claudeに話しかけるだけでここまでできる時代になっています。
制作過程の完全版・ソースコードはBrainで販売中！
この記事ではアプリの概要と使い方を紹介しましたが、「自分でも同じようなアプリを作りたい」 という方向けに、Claudeとの全やり取り・ソースコード・APK化の完全手順をまとめたコンテンツをBrainで販売しています。
Claudeとの実際のやり取りをすべて収録
完成版ソースコード（index.html・manifest.json・sw.js）
AndroidアプリのAPK化完全手順
詰まったポイントと解決策の詳細
💰 価格
980円（公開後5日間限定の早期購入価格） → 1,980円（5日後以降の通常価格）
今すぐ購入すると1,000円お得です！