スマホとGoogleアカウントだけでTodoアプリを作って公開する

1. 本日のゴール

新規のアカウント登録や外部アプリのインストールを一切行わず、Googleアカウントのみを使って、スマホのブラウザ上でTodoアプリのコードを生成します。

さらに、そのコードをインターネット上に公開し、URLを発行して実際に動かすところまでを目指します。

今回のゴールは次のとおりです。

• スマホだけで作業する
• Googleアカウントだけを使う
• GeminiでTodoアプリのコードを生成する
• CodePen上でアプリを動かす
• URLを発行してインターネット上に公開する

---

2. タイムスケジュール（全30分）

時間	ステップ	主な作業内容
00:00 - 00:05	Step 1: 準備	スマホのブラウザでCodePenを開き、Googleアカウントでログインする
00:05 - 00:15	Step 2: AIでコード作成	Geminiを使い、スマホ1枚で動くTodoアプリのコード（HTML / CSS / JavaScript一体型）を出力させる
00:15 - 00:25	Step 3: CodePenへの配置	CodePenの「HTML」エディタにコードを貼り付け、プレビューで動作を確認する
00:25 - 00:30	Step 4: リリース（公開）	発行されたURLを保存・共有し、他のスマホやブラウザからアクセスして完了

---

3. 当日のハンズオン手順

Step 1: CodePenへログインする

今回は、スマホのブラウザからCodePenを使用します。

手順

1. スマホのブラウザ（Safari / Chrome）で CodePen にアクセスします。

2. 「Sign Up」 または 「Login」 をタップします。

3. 「Sign in with Google」 またはGoogleアイコンを選択します。

4. 使用するGoogleアカウントを選択して、ログインを完了させます。

これで、スマホからCodePenを使う準備は完了です。

---

Step 2: GeminiでTodoアプリのコードを作成する

次に、Geminiを使ってTodoアプリのコードを生成します。

手順

1. ブラウザの別タブ、またはGeminiアプリでGeminiを開きます。

2. Geminiに、Todoアプリを作るための指示を送ります。

例えば、次のようなプロンプトを使用します。

スマホだけで動く、シンプルでおしゃれなTodoアプリのコードを書いてください。

HTML、CSS、JavaScriptをすべて1つのファイル（HTMLコード）の中にまとめて、
そのままコピーして使える状態で出力してください。

1. GeminiがTodoアプリのコードを生成するまで待ちます。

2. 出力されたコードの 「コピー」 ボタンを押します。

---

Step 3: CodePenにコードを貼り付けて動かす

Geminiが作成したコードを、CodePenに貼り付けます。

手順

1. CodePenの画面に戻ります。

2. 画面右上、またはメニュー内にある 「Create」→「Pen」 をタップします。

3. 新しいPenの編集画面を開きます。

4. 画面内に次のような入力欄が表示されます。

• HTML
• CSS
• JS

1. 今回はGeminiに、HTML・CSS・JavaScriptをすべて1つにまとめたコードを生成してもらっているため、「HTML」欄だけを使用します。

2. 「HTML」と書かれた入力エリアをタップします。

3. エディタ内を長押しして、Geminiからコピーしたコードをすべて貼り付けます。

CSS欄やJS欄は空のままで構いません。

1. CodePenのプレビュー画面を確認します。

画面の下部やプレビュー領域に、自分のTodoアプリが表示されれば成功です。

実際に、

• タスクを入力する
• 追加ボタンを押す
• タスクが一覧に表示される
• 完了や削除ができる

といった操作を試してみましょう。

---

Step 4: インターネット上に公開する

最後に、自分で作ったTodoアプリをインターネット上に公開します。

手順

1. CodePenの編集画面上部で、プロジェクトに分かりやすい名前を付けます。

例：

MyTodoApp

1. Penを保存します。

2. ブラウザのアドレスバーに表示されているURLをコピーします。

3. コピーしたURLを、LINEやメール、メモなどに貼り付けます。

4. 別のスマホやブラウザからURLを開いてみます。

Todoアプリが表示されれば完成です。

---

4. 完成

これで、

Googleアカウント + Gemini + CodePen + スマホ

だけを使って、Todoアプリを作ることができました。

さらに、作ったアプリにはURLが発行されているため、インターネット経由で他の人にも見てもらうことができます。

今回行った流れを整理すると、次のようになります。

Geminiにアプリを作ってもらう
        ↓
コードをコピーする
        ↓
CodePenに貼り付ける
        ↓
動作確認する
        ↓
URLを発行する
        ↓
インターネット上に公開する

---

5. このハンズオンで体験できること

今回のハンズオンでは、プログラミング経験がほとんどなくても、次のような開発の流れを体験できます。

• AIにプログラムを書いてもらう
• HTML / CSS / JavaScriptでWebアプリを動かす
• ブラウザ上でコードを編集する
• 自分で作ったアプリを動かす
• URLを使って他の人に共有する
• Webアプリをインターネット上に公開する

---

6. プログラミングができなくてもアプリは作れる

今回、一番体験してほしいのは、

「自分にもアプリが作れた」

という感覚です。

最初からHTMLやJavaScriptを完璧に覚える必要はありません。

まずはAIにコードを書いてもらい、それを実際に動かしてみる。

そのうえで、

「この部分は何をしているんだろう？」

と少しずつコードを読んでいけば十分です。

AIを使うことで、プログラミング学習は、

勉強してから作る

だけではなく、

まず作る
↓
動かす
↓
気になったところを学ぶ

という進め方もできるようになりました。

スマホとGoogleアカウントさえあれば、Webアプリ開発の最初の一歩を踏み出すことができます。