ChatGPTを利用して、メモのwebアプリを作成～公開まで行う3日目です。
1.ChatGPTに昨日の続きを聞く
最初に、chatGPTに下記の文章で2日目の続きを聞いてみました。
「Day 3の手順」も説明してchatGPTの返答
OK！最後の仕上げです。
Day 3：「GitHubにアップしてNetlifyで公開」 を超初心者向けにわかりやすく説明します。
【Day 3】GitHubにアップ → Netlifyで公開する
① GitHubアカウント作成 & リポジトリ準備
- GitHub にアクセスして無料アカウントを作成
- ログイン後、右上の「＋」→「New repository」をクリック
- 以下のように入力：
- Repository name：memo-app
- Public（公開）を選ぶ
- Initialize this repository with a README → チェックを外す（重要）
- Create repository をクリック
② GitHubにファイルをアップロードする
- 作成したリポジトリの画面で「Add file」→「Upload files」をクリック
- 「memo-app」フォルダ内の3つのファイルをドラッグ＆ドロップ
- index.html
- style.css
- script.js
- ページ下部の「Commit changes」をクリック
これでGitHubにファイルがアップされました。
③ NetlifyでWeb公開する
- Netlify にアクセスしてアカウント作成
- GitHubアカウントでログインすれば簡単です
- ログイン後、「Add new site」→「Import an existing project」をクリック
- 「GitHub」を選択し、GitHubアカウントと連携
- さっき作った「memo-app」リポジトリを選ぶ
- 設定はそのままでOK → 「Deploy Site」をクリック
④ 公開URLを確認
- 数秒〜1分で「Your site is live!」と表示されます
- https://〜〜.netlify.app/ というURLが発行されます
- このURLをクリックすれば、世界中どこからでもあなたのメモ帳アプリが見られます！
⑤ 自分のスマホや友達にURLをシェア
- スマホでURLにアクセス → ちゃんと動作するかチェック
- 問題がなければアプリ公開 完了！
Day 3 進捗チェックポイント
✅ GitHubにコードをアップロードした
✅ NetlifyでWeb公開できた（URL発行された）
✅ スマホやPCで動作確認して問題なかった
【まとめ】
これで3日間で 「シンプルなメモ帳Webアプリを作って公開する」 というゴール達成です！
この流れを覚えれば、次はTODOリストアプリや簡単なWebページも作れます。
続けて「デザインをもっと良くする方法」や「機能追加のアイディア（削除・一覧表示など）」もご案内できますよ！
→ 次に何をやりたいですか？
2.Day3の作業を行う
①GitHubアカウント作成 & リポジトリ準備
1.GitHub にアクセスして無料アカウントを作成
GitHubのSignUpからアカウントを作成し、ログインします。
2.ログイン後、右上の「＋」→「New repository」をクリック
3.以下のように入力：
Repository name：memo-app
Public（公開）を選ぶ
Initialize this repository with a README → チェックを外す（重要）
Create repository をクリック
4.Create repository をクリック
② GitHubにファイルをアップロードする
1.作成したリポジトリの画面で「Add file」→「Upload files」をクリック
Add fileが見当たらず、代わりにGet started by creating a new file or uploading an existing file.があったため
uploadingをクリック
なんか大丈夫そう
2.「memo-app」フォルダ内の3つのファイルをドラッグ＆ドロップ
- index.html
- style.css
- script.js
3.ページ下部の「Commit changes」をクリック
ちゃんとアップロードできてそう
③NetlifyでWeb公開する
1.Netlify にアクセスしてアカウント作成
GitHubアカウントでログインして進めます。
2.ログイン後、「Add new site」→「Import an existing project」をクリック
3.「GitHub」を選択し、GitHubアカウントと連携
あ、2, 3は、セットアップの時ぽちぽちして完了してました。
4.さっき作った「memo-app」リポジトリを選ぶ
5.設定はそのままでOK → 「Deploy Site」をクリック
Production deploysの下の項目をクリックして
Open production deployを押したら
アプリが開けた！
なんかよくわからないけど、最初のセットアップで全部終わってたのかも…
④公開URLを確認
シンプルメモ帳をクリックするとほかの端末でも表示できた。
⑤自分のスマホや友達にURLをシェア
スマホでURLにアクセス して、 ちゃんと動作した。
問題がなかったので、これでアプリ公開 完了！
3.3日でメモ帳webアプリを作った感想
結構役に立たないアプリを生み出してしまったけど、ChatGPTでwebアプリを作って公開までできた！
ChatGPTが続きを求めてる…
【まとめ】
これで3日間で 「シンプルなメモ帳Webアプリを作って公開する」 というゴール達成です！
この流れを覚えれば、次はTODOリストアプリや簡単なWebページも作れます。
続けて「デザインをもっと良くする方法」や「機能追加のアイディア（削除・一覧表示など）」もご案内できますよ！
→ 次に何をやりたいですか？
次は、TODOリスト作ろうかな～
コメント