VibeCordingによるWebサイト制作
今日も一日、ありがとうございました。
この放送はAIとWeb3で建築を変える一級建築士のフミが、
建築やAIの話と時々Web3の話をする放送です。
よろしくお願いします。
今日は、VibeCordingで建築と旅に関するWebサイトを作っていますというお話をさせていただきます。
これは昨日も同じテーマでお話ししているので、
それの続きになりますので、
もしよろしければ昨日の放送も合わせて聞いてもらえたらなと思います。
よろしくお願いします。
今日はそのサイトの進捗というか、
結構つまずいているので、そういったつまずきポイントというのをお話ししようと思います。
今流行りのVibeCordingですね、AIを使って、
AIにコードを書かせてWebサイトとか、
そういうサービスを作るというもののお話なので、
これ、VibeCordingを触れていない人にとってはあまりピンとこないお話かなと思うんですけれども、
そのあたりはご容赦いただけたらなと思います。
まず、僕がどういうWebサイトを作ろうとしているのかという説明をさせていただきます。
機能としては、まずマップ上にいろんな有名建築の所在地がマップ上に散ればめられているんですよね。
その散ればめられたやつを何個か、例えば5個とか、これとこれとこれと5個を選択して、
まず1つ目の機能としては、それでポチッと押すと、
その5個をめぐるルートが出てくるんですよね。
そのルートが出てきて、ルートの距離が出てきて、所要時間が出てきて、
あとはそれにかかる費用というのが出てくるので、
こうやって一周すると、何時間で、移動だけの時間ですけど当然、
何キロで何時間でいくらみたいなのが出てくるという、そういうサイトを作りました。
当然建築の所在地なので、立っているピンとかには写真が埋め込まれたりしているし、
マップでポチポチすることもできますし、
一方で別の画面では写真を見てポチポチすることもできると。
それで選んだやつでポチッと押せば、そのルートが出てくる、そういった機能があります。
次の2つ目の機能としては、選んだ建物というのは、当然建物の特徴があるんですけども、
そういった特徴と、あとは建物の所在地、例えばアメリカとかフランスとか中国とか、
いろいろな所在地があるんですけども、
あとはそれらの組み合わせ、5個あったら5個の建築の特徴と所在地というのがあるんですけども、
それらの組み合わせによって気候分です。
気候分、旅行に行ってA地点に行ってこういう体験をして、
B地点に行ってそのBという建築はこうだからこういう素晴らしさに触れて、
C地点に行ってこういうのを体験してみたいな感じの旅行期というか旅行分というのを生成できるように、
2つ目の機能としてしています。
これによって普通にこういうルートで回るんだ、
このルートで回ると3万キロかみたいな、もうちょっと地球一周できるじゃんみたいな、
そういったので1万ドルもかかるなみたいな、そんなのを知りながら、
次の機能としてその気候分ですね。
気候分を読むことによって少しでも旅行した気分になれる。
そんなことを狙いながらこのウェブサイトを作っています。
機能の実装と成長の実感
この機能ですね、機能の時点では1つ目の機能ですね、ルートを書いて、
それでお金とか距離とか時間というのを出してくれるというところまで行ったんですけども、
途中でちょっと壊れてしまいまして、これバイブコーディングあるあるなんですけども、
AIに壊されるっていうね、そういった壊れる現象が起きて、
そこまで行かなかったぐらいで終わりました。
今日なんですけども、今日も結構な時間、3時間ぐらいやりましたね。
3時間ぐらいで結構な無駄な時間を過ごした感はあるんですけども、
3時間かけて一通り文章を作るところの手前ぐらいまで、一歩手前ぐらいまで行けました。
ルートを出すっていうところはもう機能の引き続きで解決できて、
あとはそのUIの部分ですね、例えばトップページに写真を挿入したりとか、
あとフォントとか色遣いっていうのをちょっと整えたりっていうのをして、
その次に2つ目の機能で文章、機構文を作らせるっていう、そういった機能をやらせました。
この機構文を作らせるところにはもう一つちょっとハードルというか、
もう一歩踏み込んだ技術というかがあって、
それは当たり前のことなんですけども、当然ピックアップする地点って毎回違うじゃないですか。
毎回というかユーザーによって違うじゃないですか。
今は現時点で作品の数っていうのは50個あるので、
50個から選ぶ組み合わせってほぼ無限大なんですよね。
そんな中で無限大の組み合わせの中で組み合わされた、例えば5個だとしたら、
5個の建築作品の先ほど言った建築の概要とか所在地からそこから文章を作るっていうのは、
もうあらかじめ用意しておいた文章の生成ロジックでは無理なんですよね。
そこで登場するのが生成AIで、生成AIならこの選ばれた5個のキーワードを組み合わせて文章を作ってくださいっていうのは結構楽な仕事なので、
AIの得意分野かなというふうに思っています。
要は選んだ後、裏でAIを動かすっていう機能を実装する。
これが一つのハードルポイントになっています。
ここに手こずって、実際今日の時点でまだ終わらなかったんですけども、
ちょっと手こずったっていうのが今日の段階になります。
頭で考えるだけだったら、そうやってピックアップしたものをAIで、
そのピックアップしたやつを組み合わせてプロンプトを作って文章を書いてってAIに指示するだけなので、
それを入れるっていうのは頭の中では簡単なんですけど、
いろんなところでバグが起こって、こういうところ、
AIを呼び出すところで接続のエラーが出ましたとか、いろんなところでエラーが出まくって、
一つ一つ潰していってもなかなか潰れなくて、そんなことを繰り返して今日3時間経ってましたね。
ただやっぱり前回も話したように、すごい成長欲求が満たされるんですよね。
要はもう一個一個形になっていくので、先ほど言ったようにマップとかルートが出るっていう機能を実装したプレビューで見てみたら、
本当に実装できてるとか、ここの色とか色使いとかフォントとかを変えたいなと思ったら本当に変わっていい感じになったとか、
一個一個が本当にしかも手軽に素早くアウトプットが見れて達成感を手軽に見ることができるっていうのが
バイブコーディングの成長欲求を満たしてくれるポイントの大きな一つだなというふうに感じながらやってきたので、
その3時間というのはあんまり苦じゃなくて、あっという間に3時間経っちゃいましたみたいな。
3時間経っても正直あんまり進んでませんみたいな、そんな感じでしたね。
というのが今日の進捗になります。
今日もう一個進んだというか自分のレベルが上がったポイントとしては、
バーセルというサイトを皆さん使っていて存在は分かったんですけども、
ウェブサイトの開発
それを実際にサインインして簡易登録して使ったというのが一つレベルアップポイントかなと思っています。
これバーセルって何なのかというと、要は何だろうな、公開する場所ですね。
自分が作った今ウェブサイトを作っているんですけども、そのウェブサイトを公開する場所の一つがバーセルです。
前回はスラックのBotを作ったんですよね。
スラックのBotを作る時もこのBotを公開する、自分のパソコンの中に置いておくんじゃなくて公開するという行為をしました。
その時はRailwayというサービスを使いました。
この2つ何が違うのかというと、圧倒的な違いが専門用語で言うとフロントエンドとバックエンドの違い。
フロントエンド用の公開サイトなのか、バックエンド用の公開サイトなのかという違いがあるようです。
あまりよく分かってないですけど。
要はDiscord Botとかは表に見えないですね。
Bot自身は見えなくて、Botが裏で動いていて、
そこからテキストとかスラックに書き込むテキストとかが表で見えているという。
なのでBotを稼働させるというのは裏なんですよね、表ではないんですよね。
そういう意味ではBotとかはバックエンドの動きなので、
そういったバックエンドの動きに適した公開サービスサイトに置いておくのが適切だと言われています。
一方でウェブサイトとかは、人が見ると見たりクリックしたり、クリックしたら次に進んだりとか、
そういった人が実際に触れて操作するようなところ、これはフロントエンドと呼ばれるんですけども、
これはフロントエンドを置いておくのに適したサイト、サービスで扱うのがいいということで、
レイルウェイはバックエンド、今日新しくマスターしたバーセルはフロントエンド用の公開サイトだと言われています。
そんな違いをおぼろげに知りながら、今日バーセルというのを使って、
実際バーセルに公開すること自体はできたんですけども、
やっぱりそこでもAIが使えない、裏で機構文を書かせるAIがなかなかうまく動かなくて、
今動かずにちょっと時間切れがきちゃったので、今動かないまま今日は断念しているというようなことになります。
と言いつつ、まだまだ実装したい機能はいっぱいあって、それを今一個ずつ潰しているところになりますので、
バーセルもできたので、環境面ではできたかな、あとはAIと対話しながら実装していって、
AIと機能の実装
バグが出たらバグ直して、また実装して、一個ずつ進んでいくみたいなプロセスになるのかなと思っています。
直近で実装したいポイントとしては、そのAIに機構文を書かせるということなんですけども、
その次としては時間とか料金の計算をもうちょっと正しくさせたいなと思っています。
今は時間と料金の計算をどうやってさせるのかというと、全部距離なんですよね。
1キロ何時間かかる、何分かかるみたいな、1キロ進むのにいくらかかるみたいな、そういった計算式で、
距離は地図上から距離計算して割と正確な距離が出るんですけども、
そこからお金とか時間というのは本当に掛け算で、係数をかけるしかでやっていないので、
そこはまた例えば電車だったらちゃんと乗り換え案内みたいなのを検索させて、
それで電車で出すとか飛行機だったらJALとかそういったところの航空の時間から持ってきて、
お金もそういうところから持ってきて出すとか、そういったことまで踏み込んでやっていきたいなというふうに思っています。
そこでちょっと問題になるのが、機構文を出すときもAI使ってるって言いましたけども、
多分お金とか距離、お金とか時間を出すのもAIの仕事になるのかなと思います。
そこでそのAIの使用量というのがかかるんですよね。
そこがどのちょっと天秤かなと思っていて、
要はそういう機能をリッチに盛り盛りにすればするほどAIを使う場面というのが増えてくるので、
そのAI使用量がすごい多くなってくるので、
その機能を盛り盛りにしてでも自分の負担が大きい、
AIの使用量が大きいものにするのか、
使用量を抑えた上で機能を限定して捨ててやっていくのかというのは今後の悩みどころかなというふうに思っています。
ということで今日はバイブコーディングで建築と旅に関するウェブサイトを作っているというお話を、
その進捗をお話しさせていただきました。
ということで今日もお疲れ様でした。またね。バイバイ。
