M もっちパパの記録
AI・学習支援

【実践編】紙のテストをAI学習アプリにして家族限定公開するまでの全手順

エンジニアじゃなくてもできた。GoogleドライブのスキャンからAIでのアプリ作成、Cloudflareを使った家族限定公開まで、実際にやった手順をすべて公開します。

目次

この記事は、こちらの体験談の「技術的な裏側」をまとめたものです。

→ 地理が苦手な長女のために、パパがAIで専用学習アプリを作った話

きっかけは、苦手な単元をくり返し間違える娘を見て「市販の問題集はどれも”うちの子のつまずき”にはぴったり合っていないな」と感じたことでした。だったら、娘の間違えた問題だけを集めた専用アプリを作ればいい。エンジニアではない私でも、AIと一緒なら形にできるかもしれない——そんな軽い気持ちで始めた記録です。

「自分でも作ってみたい」という方のために、実際にやった手順をすべて公開します。

この記事でできるようになること

  • 紙のテスト・解答用紙をデジタルデータに変換する
  • AIにアプリのプログラムを作ってもらう
  • 作ったアプリをスマホ・PCからアクセスできる状態にする
  • 家族だけがログインできるセキュリティをかける
  • 問題を追加したら自動で最新版が公開される仕組みを作る

難しそうに見えますが、各ステップでやることは明確です。プログラムを自分で書く必要はありません。

登場するツール

ツール名役割費用
Googleドライブ紙のテストをスキャン・PDF化無料
Claude（AI）アプリのプログラムを作成月約3,000円（Pro版）
GitHubアプリの設計図を保管する場所無料
Cloudflare Pagesアプリをインターネット上で動かす無料
Cloudflare Access家族以外が入れないよう鍵をかける無料

Claudeの月額以外はすべて無料で揃います。

STEP 1：紙のテストをPDFにスキャンする

まず、手元の紙の問題用紙と解答用紙をデジタル化します。

使うもの： スマホ＋Googleドライブアプリ（無料）

  1. スマホでGoogleドライブアプリを開く
  2. 右下の「＋」ボタンをタップ
  3. 「スキャン」を選択
  4. 問題用紙と解答用紙をそれぞれ撮影
  5. PDFとして保存

コツ： 照明が当たって文字がはっきり映るように撮影すると、後のAIによる読み取りの精度が上がります。斜めにならないよう、真上から撮るのがポイントです。

STEP 2：AIにアプリを作ってもらう

スキャンしたPDFを手元に置いて、AI（Claude）を開きます。

Claudeへの指示の例：

「この画像は中学1年生の地理の定期考査の問題と解答用紙です。間違えた問題を練習できる4択の学習アプリをHTMLで1ファイルで作ってください。問題は10問ごとに出題し、正誤の記録はブラウザに保存されるようにしてください」

Claudeは数秒で、動くプログラムのコードを書いてくれます。初めて画面の中で自分のアプリが動いたときは、正直「これ、本当に自分で作ったの？」と笑ってしまいました。

追加でお願いできること：

  • 「答えを自分で入力するモードも追加して」→ タイピングモード
  • 「原因と結果を考える問題も作って」→ なぜ？モード
  • 「スカイブルーとゴールドのデザインにして」→ 見た目の調整

AIとの会話形式でどんどん機能を追加・修正できます。「こんなふうにしたい」を言葉で伝えるだけです。

完成したコードは、index.html というファイル名でパソコンに保存しておいてください。

STEP 3：GitHubにアプリを保存する

「GitHub（ギットハブ）」は、アプリの設計図を保管・管理する場所です。言うなれば、家の大事な書類をまとめてしまっておく「金庫」のようなもの。ここに入れておけば、なくす心配がありません。ここに保存することで、後の自動公開の仕組みが動きます。

GitHubアカウントを作る

  1. github.com でアカウント作成（無料）
  2. 新しい「リポジトリ（保管場所）」を作成
  3. 名前は my-learning-app など何でもOK
  4. 「Private（非公開）」を必ず選ぶ

アプリをGitHubに保存する

パソコンにGitをインストールし、ターミナル（Macの場合）またはコマンドプロンプト（Windowsの場合）で以下を実行します：

cd アプリを保存したフォルダ
git init
git add index.html
git commit -m "初回アップロード"
git remote add origin https://github.com/あなたのユーザー名/my-learning-app.git
git push -u origin main

このステップが一番ハードルに感じるかもしれません。 わからない場合はClaudeに「GitHubにファイルをアップロードする方法を教えて」と聞くと、あなたの環境に合わせて手順を教えてくれます。

STEP 4：Cloudflare Pagesでインターネットに公開する

「Cloudflare Pages（クラウドフレア・ページズ）」は、GitHubに保存したアプリを24時間インターネット上で動かしてくれるサービスです。イメージは、金庫（GitHub）に置いた設計図をもとに、お店を24時間あけておいてくれる「無人の店番さん」。こちらが寝ていても、アプリは動き続けます。無料で使えます。

  1. pages.cloudflare.com でアカウント作成
  2. 「新しいプロジェクトを作成」→「GitHubと接続」
  3. 先ほど作ったリポジトリを選択
  4. 設定はすべてデフォルトのままでOK（ビルドコマンドは空白）
  5. 「保存してデプロイ」をクリック

1〜2分後、あなたのアプリ名.pages.dev というURLでアプリが公開されます。

この仕組みのメリット： 今後、問題を追加して git push するだけで、自動的にアプリが最新版に更新されます。毎回手動でアップロードし直す必要がありません。

STEP 5：家族だけが使えるよう鍵をかける

このままでは、URLを知っていれば誰でもアクセスできてしまいます。ここで扱っているのは、娘がどの問題でつまずいたか、復習のあとがどう残っているか——という、とてもデリケートな学習の記録です。これが外から見られるのは絶対に避けたい。このステップは、機能というより”娘の学びを守る盾”だと思っています。

そこで使うのが「Cloudflare Access（クラウドフレア・アクセス）」です。イメージは、インターネット上に作った「我が家だけの秘密基地」の合言葉。決めた人しか、入口を通れません。特定のメールアドレスを持つ人だけしかアクセスできないようにできるので、わが家では家族のメールアドレスだけを許可しました。これで、世界中に公開されたURLでも、入れるのは家族だけになります。

  1. one.dash.cloudflare.com にアクセス
  2. 「Access」→「Applications」→「Add an application」
  3. 「Self-hosted」を選択
  4. ドメイン欄に あなたのアプリ名.pages.dev を入力
  5. ポリシーで「Emails」を選び、許可したいメールアドレスを入力
  6. 保存して完了

設定後、アプリのURLにアクセスすると、まずメール認証の画面が表示されます。許可したメールアドレスにコードが届き、それを入力するとアプリに入れます。

問題を追加するときの流れ

新しいテストが届いたら：

  1. GoogleドライブでスキャンしてPDF化
  2. ClaudeにPDFを見せて「このテストの問題を追加して」と依頼
  3. Claudeが出してくれた問題のコードをindex.htmlに追記
  4. git add index.html → git commit → git push
  5. 自動でアプリが更新される

慣れてくると、30分ほどで新しい問題を追加してアプリに反映できるようになります。

まとめ：かかった時間と費用

項目時間・費用
初回アプリ作成（AIとの対話）約3〜4時間
GitHub・Cloudflare設定約1時間
毎回の問題追加約30分
月々のランニングコストClaude Pro代のみ（約3,000円）

「自分にはむずかしそう」と感じた方も、各ステップでAIに相談しながら進めれば、1日あれば完成します。

完成したアプリを娘に渡したとき、「これ、私専用なの？」と少し得意げな顔をしたのが忘れられません。市販の問題集にはない、その子だけの一冊。作ってよかったと、心から思えた瞬間でした。

エンジニアじゃない私が実際にやりきれた手順です。ぜひ、あなたのお子さんのためだけの一冊を、作ってみてください。

体験談はこちら：

→ 地理が苦手な長女のために、パパがAIで専用学習アプリを作った話

#AI#Claude#Cloudflare#GitHub#子育て#学習アプリ