夏休み自由研究｜アプリの作り方

アプリが自由研究に向いている理由

自由研究は「観察 → 仮説 → 実験 → まとめ」の流れが大切です。アプリ制作も同じ流れで進められます。

・「生活の不便を解決する」など、テーマが立てやすい
・完成したアプリのURLを、そのまま提出物にできる
・コードより「何を作って、なぜ作ったか」が評価の中心になる

テーマの決め方

3ステップで決めよう

毎日「面倒だな」と思うことを1つ書く
「アプリにしたら楽になる？」と考える
10文字以内のタイトルを決める

低学年向け

九九ドリル
好きな色カウンター
今日の気分メモ

中高学年向け

おこづかいメモ
読書記録
勉強タイマー
オリジナルクイズ

作り方（8ステップ）

上から順番に進めてください。

テーマ（研究テーマ）を決める

毎日「面倒だな」と思うことを1つ書き出します。
「アプリにしたら楽になる？」と考えて、10文字以内のタイトルを決めます。

おこづかいメモ読書記録勉強タイマー九九ドリルペットの世話チェック

うまくいかないとき：最初はシンプルな1機能（ボタン1つで記録するなど）から始めるとうまくいきます。

ジサップにログインする

アプリを作って保存・公開するには、ログインが必要です。
保護者の方と一緒にアカウントを作るか、ログインしてください。

ログイン・新規登録

うまくいかないとき：ログインしなくても開発スタジオで試すことはできますが、公開するときはログインが必要です。

AIへの指示文をコピーする

下のボタンで指示文をコピーします。
「【ここに作りたいアプリ名を入れる】」の部分だけ、Step 1で決めた名前（例：おこづかいメモ）に書き換えます。

AIへの指示文（ジサップ専用）

あなたはジサップ（Jisapp）向けの優秀なフロントエンドエンジニアです。
「【ここに作りたいアプリ名を入れる】」を作りたいです。

【最初の返答のルール（重要）】
・この最初の返答では、HTMLコードは絶対に出力しないでください。
・「データの保存機能は必要ですか？（次回開いても残したいデータがあるか）」について、はい/いいえで答えやすい形で質問してください。
・ユーザーが答えるまで、コードは書かないでください。

【コードを書くときのルール（ユーザーが答えた後に適用）】
ユーザーが質問に答えたあと、以下のジサップ専用ルールを厳守して、1つの index.html にすべてを含めたコードを出力してください。

【完全なHTML1枚（シングルファイル）で完結】
CSSもJavaScriptもファイル分割せず、すべて1つの「index.html」ファイルの中に丸ごと埋め込んでください。

【CDN・外部CSSフレームワークは一切使用禁止（重要）】
Tailwind CSSやBootstrapなどのCDN（外部読み込み）は、環境制限によりデザインが反映されない・エラーになるため絶対に使用しないでください。
デザインはすべて「生のCSS（Vanilla CSS）」で記述し、CSS変数（:root）などを活用して、初心者向けに明るく爽やかで洗練されたモダンなUI（ライトモード）を実装してください。

【データ保存（必要な場合のみ）】
・ユーザーが「保存機能が必要」と答えた場合のみ、window.Zisup.saveData / loadData を使用してください。
  ・保存: await window.Zisup.saveData('識別名', データ)
  ・読込: await window.Zisup.loadData('識別名')
  ※ async/await で読み込み完了を待ってから画面を表示してください。
・保存が不要と答えた場合は、localStorage も Zisup API も使わないでください。

【外部API連携（必要な場合）】
・天気・為替・公開APIなど外部データが必要な場合:
  1. まず通常の fetch(url) を試してください（API側がCORS対応している場合）。
  2. CORSエラーになる場合は window.Zisup.fetch(url, { method, headers, body }) を使ってください。
     例: const res = await window.Zisup.fetch('https://api.example.com/data');
          const data = res.body;
  ※ URLは https のみ。APIキーをコードに書く場合、閲覧者に見える可能性があるため、公開APIキー等のみ使用してください。

うまくいかないとき：指示文はジサップ専用のルールが入っているので、そのまま使うのがおすすめです。

AIに送って、質問に答える

ChatGPT、Gemini、Claude など、使えるAIを開きます。
書き換えた指示文をそのまま送信します。
AIが「保存機能は必要ですか？」と質問してきたら、はい/いいえで答えます（このときコードはまだ出ません）。
答えると、ジサップ用のHTMLコードが返ってきます（1〜2分かかることもあります）。

うまくいかないとき：保存機能が不要なアプリ（電卓など）なら「いいえ」と答えると、シンプルなコードになります。

開発スタジオに貼り付ける

ジサップの開発スタジオを開きます。
AIが出したHTMLコードをすべて貼り付けます。
「プレビュー更新」ボタンを押すと、右側（スマホでは下）にアプリが表示されます。

開発スタジオを開く

うまくいかないとき：画面が真っ白なときは、コードの最初に <!DOCTYPE html> があるか確認してください。

動かして、直す

ボタンを押したり、文字を入力して、思い通りに動くか試します。
直したいところがあれば、AIに「ボタンの色を青にして」「文字を大きくして」と追加で頼みます。
新しいコードをもらったら、また貼り付けてプレビューを更新します。

うまくいかないとき：何度か繰り返して直すのも、自由研究の大事な工程です。

公開してURLをもらう

開発スタジオの「公開する」ボタンを押します。
アプリの名前、説明、カテゴリを入力して公開します。
公開が完了すると、アプリ専用のURL（インターネット上のアドレス）が発行されます。

公開する（開発スタジオ）

うまくいかないとき：URLはレポートの「提出物」欄に書きます。メモ帳に控えておきましょう。

自由研究レポートを書く

テーマ・目的・方法・結果・感想をまとめます。
下のテンプレートをコピーして、空欄を埋めてください。
最後に、Step 7で取得したアプリのURLを書いて提出します。

レポートテンプレート

【研究テーマ】
（例：おこづかいを記録するアプリを作った）

【研究の目的】
（例：おこづかいを忘れがちなので、記録できるアプリが欲しかった）

【研究方法】
1. 困っていることを考えた
2. AI（ChatGPT など）にアプリのコードを作ってもらった
3. ジサップというサイトに貼り付けて動かした
4. 使いにくいところを直した

【結果】
（例：ボタンを押すと金額を記録でき、合計が表示される）

【感想】
（例：AIに頼ればアプリが作れることがわかった）

【提出物】
アプリのURL：________________

うまくいかないとき：提出の形式（ノート・Word・Googleドキュメントなど）は、先生の指示に従ってください。

よくある質問

データを別の端末でも使いたい

保存機能付きのアプリで、端末をまたいでデータを残したい場合は、ログインしたうえでマイライブラリに追加してください。追加後は Supabase に保存され、別端末でも同じデータが読み込めます。

プログラミングが初めてでも大丈夫？

大丈夫です。コードはAIが書きます。あなたがやるのは「アイデアを考える」「AIに頼む」「貼り付けて試す」ことです。

パソコンがなくてもできる？

スマホやタブレットだけでもできます。ただし、長いコードのコピー＆貼り付けは、パソコンの方がやりやすい場合があります。

お金はかかる？

ジサップでアプリを作る・公開するのは無料です。AI（ChatGPTなど）は、使うサービスによって無料枠や料金が異なります。

工作の宿題と違う？

紙や材料を使う工作とは違いますが、「自分で考えて、自分で作ったものを提出する」点は同じです。提出形式は先生に確認してください。

人のアプリをコピーしていい？

ダメです。自分で考えたテーマで、AIと一緒に作ったアプリを提出しましょう。

準備ができたら、作り始めよう

Step 3 から順番に進めれば、今日中に提出できる形まで持っていけます。

開発スタジオで作るみんなのアプリを見る

夏休みの自由研究に、自分だけのアプリを提出しよう