目次
0. はじめに
どんな手順で作ったかを知りたい方は、“手順”までスキップしてください。
「ChatGPTでアプリ制作って本当にできるの？」
最近そんな記事や動画をよく見かけますが、実際に自分でもAIを使ってWEBアプリを作ってみました。
しかも、自分はプログラミング未経験。
- ターミナルって何？
- コマンドってどこに入力するの？
- GitHubって何？
というレベルからスタートしました。
それでも、ChatGPTに一つずつ教えてもらいながら進めた結果、最終的には全国のポケふたを地図上で見られるWEBアプリ「ポケふたマップ」を自分用で作れました。
1．ChatGPTを使って作った「ポケふたマップ」とは？
今回作ったのは、全国のポケふたを地図上で確認できる非公式・自分用WEBアプリです。
主な機能はこちら。
- 全国470件以上のポケふた表示
- Googleマップ連携
- 訪問済みチェック
- 訪問日保存
- コンプリート率表示
- ポケふた画像表示
- スマホ対応
訪問済みにするとピンの色が変わり、ブラウザを閉じてもデータが残るようになっています。
ポケふたがどんなデザインなのかもわかるようにしています。
2．ChatGPTでのアプリ制作は“会話形式”で進む
今回はChatGPTでのWEBアプリ制作を進めました。知らない言葉・画面ばかりでしたが、画面をスクショするなど疑問を率直にＡＩに伝えることで解決できました。
「エラーが出た」
「スマホで表示できない」
「地図が消えた」
と伝えると、その状況に合わせてコード修正や原因を教えてくれます。
3．Vercelを使ってWEBアプリ公開
完成したアプリは「Vercel」というサービスを使い自分で使えるようにしました。
Vercelは、作ったWEBアプリをインターネット上へ公開できるサービスです。
これによって、自分のPCだけではなく、
- iPhone
- Android
- 他の人のスマホ
からもURLを開くだけで利用できるようになりました。
4．ChatGPTでアプリ制作して感じたこと
コードは全く理解していませんが、ＡＩが全部やってくれるので、
- やりたいことを言葉にする
- エラーをそのまま見せる
- 一つずつ修正する
これを繰り返すだけで、本当にWEBアプリが完成しました。
ツーリング中にポケふたを巡ることもあるので使いたいと思います。
手順
① まずは“作りたいもの”を言語化する
最初にやるべきことは、「どんなアプリを作りたいか」をできるだけ具体的に整理することです。
自分の場合は、
- 全国のポケふたを地図で見たい
- 行った場所を保存したい
- スマホでも使いたい
- シンプルなデザインが良い という感じでChatGPTへ伝えました。
この段階では、技術的なことを知らなくても大丈夫です。
「こんな機能が欲しい」というイメージだけでも十分進められます。
② ChatGPTに“初心者であること”を伝える
これはかなり重要でした。
自分は最初に、
「超初心者です」
「ターミナルも分かりません」
と伝えました。
するとChatGPT側も、
- どこをクリックするか
- どこに入力するか
- 次に何をするか
まで細かく説明してくれるようになります。
初心者ほど、遠慮せず「分からない」と伝えるのがおすすめです。
③ エラーは“そのまま貼る”
アプリ制作では、ほぼ確実にエラーが出ます。
実際、自分もかなり出ました。
でも大事なのは、「エラーを自分で解読しようとしないこと」です。
ChatGPTに、
- エラー文
- スクリーンショット
- 今の画面
をそのまま見せれば、原因をかなり高い精度で教えてくれます。
これは本当に助かりました。
④ まずは“小さく動くもの”を作る
最初から完璧を目指さない方が進みやすいです。
自分も最初は、
- 地図表示
- ピン3個 だけでした。
そこから少しずつ、
- 全国データ
- 訪問保存
- 写真表示
- コンプリート率
を追加していきました。
AIを使う場合も、「小さく作って改善」がかなり重要だと感じました。
⑤ 最後は公開してみる
今回は「Vercel」というサービスを使ってWEB公開しました。
これによって、
- PC
- iPhone
- 他の人のスマホ
からもアクセスできるようになりました。
＼ 最新情報をチェック ／
