妻のひと言から、AIでBTSの情報サイトを作って公開するまで
メンバーの複数選択、スマホに残る古い表示、自動更新。妻の「こんなのがあったら」を形にするまでの試行錯誤。前の記事では、ChatGPTの中を5つに分けて、ブログ作りを整理した話を書きました。
今回は、その中の④「AI制作物」で実際に作ったものを紹介します。
最初に作ったのは、
「BTS NEWS HUB」
というWebサイトです。
きっかけは、妻のひと言でした。
妻はBTSが好きで、メンバーごとのニュースや情報を見られるサイトがあったら便利そうだという話になりました。
そこで、
「それ、AIで作れるんじゃない？」
と思ったのが始まりです。
僕自身は、Webサイトを作った経験がほぼありません。
HTMLもよく分からない。
GitHubもほぼ初めて。
でも、とりあえずChatGPTに、
「BTSのニュースをメンバーごとに見られるサイトを作りたい」
とお願いしてみました。
すると、AIがコードを作ってくれました。
開いてみると、
ちゃんとBTSっぽい画面が出てきました。
JIN、SUGA、J-HOPE、RM、JIMIN、V、JUNG KOOK。
メンバーの名前が並び、選べるようになっている。
最初に見たときは、
「え、もうそれっぽい」
という感じでした。
ここまではかなり簡単でした。
でも、本当に大変だったのはここからです。
最初に困ったのは、
ボタンを押しても思った通りに動かないこと。
たとえばJIMINを選んだのに、JIMINの記事だけではなく「ALL」の記事まで一緒に表示される。
さらに、
「JIMINとJINを同時に選びたい」
と思っても、最初は1人しか選べませんでした。
そこでChatGPTに、
「複数のメンバーを選べるようにして」
「JIMINを選んだときはALLを表示しないで」
と頼みました。
すると、そのたびに新しいコードを作ってくれます。
僕自身はコードの意味をほとんど理解していません。
でも、
やりたいことを日本語で伝える
これだけで少しずつサイトが変わっていきました。
これがかなり面白かったです。
ただ、次の壁がありました。
自分のスマホでは直っているのに、他のスマホでは古いまま。
これにはかなりハマりました。
「直したはずなのに、なぜ？」
という状態です。
原因のひとつは、スマホやブラウザに古いデータが残っていることでした。
サイト自体は新しくなっていても、見る側では前の状態が表示されることがある。
こんなことも、初心者の僕は知りませんでした。
さらに、
「ニュースを毎回手で更新するのは面倒だから、自動で取得したい」
と思い始めました。
そこで、またChatGPTに相談。
自動更新の仕組みを入れようとしたのですが、ここでもうまくいかないことが続きました。
必要なファイルが出てこなかったり、
同じ名前のファイルがあってエラーになったり、
GitHubにアップしたけれど、どれを差し替えればいいのか分からなくなったり。
正直、
「AIに頼めば全部一発で完成する」
という感じではありませんでした。
むしろ、
作る
↓
動かない
↓
ChatGPTに聞く
↓
直す
↓
また別のところが気になる
これを何度も繰り返しました。
でも、不思議と嫌にはなりませんでした。
なぜなら、自分ではコードを書けなくても、
「ここがおかしい」
と言えば、次に進めるからです。
昔なら、
「プログラミングを勉強してから作ろう」
となっていたと思います。
でも今は逆でした。
作りながら、分からないことをその都度AIに聞く。
この順番でも進められる。
そして最終的には、GitHubを使ってWeb上に公開するところまでできました。
実際に作ったサイトはこちらです。
BTS NEWS HUB
BTS NEWS HUBを開く
URLを送れば、スマホからでも見てもらえます。
数日前までGitHubが何なのかもよく分かっていなかった自分が、
妻のひと言をきっかけに、
BTSのWebサイトを作って、
スマホで見られるようにして、
人に送れるところまで来た。
これはかなり大きな体験でした。
もちろん、まだ完成ではありません。
ニュース取得の方法も改善したいし、
もっと見やすくしたい。
検索機能もつけたい。
デザインももっと良くしたい。
でも今は、
「完成してから公開する」より、「まず出して、そこから直す」
くらいでいいのかなと思っています。
今回いちばん感じたのは、
AIがすごいのは、コードを書いてくれることだけではないということです。
分からないことが出たときに、その場で質問できる。
エラーが出たら、
「この画面になったけど、どうすればいい？」
と聞ける。
つまり、
先生とプログラマーがずっと横にいるような感覚。
初心者にとっては、これがかなり大きいです。
そして今回のBTS NEWS HUBは、このブログ内の「AI制作物」としても掲載していく予定です。
このブログでは、こんな感じで、
身近な「こんなのあったらいいな」をAIで実際に形にしていく
ということを続けていこうと思います。
今回のBTS NEWS HUBは、その最初のひとつです。
完成品というより、
僕にとっては
「AIを使えば、本当にゼロから形にできる」
と初めて実感した作品になりました。