00:07
今日も一日、ありがとうございました。
この放送はWeb3にハマった建築設計者が仮想通貨やトークン、メタバースなどのWeb3の話と
ドキドキ建築の話、最近はAIの話をちょっとする放送です。よろしくお願いします。
Windsurfの紹介
今日はAIの話なんですけども、Windsurfがすごすぎるというお話をしたいと思います。
WindsurfというAIツールを触ってみて、すごいと思ったので、そのお話をしたいと思います。
Windsurfというのは、何をしてくれるAIなのかというと、
簡単に言うとコードを書いてくれる、プログラミングコードを書いてくれるAIになります。
こういうことをしたいからコードを書いてとか、実行してみたいな、実行するのは自分ですけど、
コードを書いてっていう感じで実行すると、それをするためのコードを書いてくれる。
最近これは池早さんも触っていて、たぶん池早さん周りの人はどんどんどんどん触り始めてる感じになってると思うんですけども、
その流れを受けて、ACLというAIのコミュニティがあるんですけども、その中、私も入ってるんですけど、
その中で昨日セミナーがありました。
そのセミナーの講師は学士さんという方と向井さんという方で、学士さんが先生、向井さんが質問役みたいな、
そんな感じの2人の掛け合いでセミナーが昨日行われたんですけども、
それはWindsurfとGitHubですね。
これを使っていろんなことやっていこうぜみたいなセミナーでした。
ウェブサイトの作成プロセス
この内容を受けて、自分で今日触ってみて、これすげえなと思ったので、その内容をお話ししようかなと思います。
先ほど言ったようにWindsurfというのはコード生成AIなので、こういうのをやりたいと言ったらその通りのコードを生成してくれると。
僕がやったのはウェブサイトですね。ウェブサイトを作るというのをやってみました。
これは僕も詳しくはわからないんですけども、
HTML形式でウェブサイトの骨格となるコードを作って、あとはCSSというコードでウェブサイト全体のデザインを決めて、
あとはJavaScriptというコードもあって、そこでウェブサイトの機能みたいなのを決めるみたいな、
そんな感じですね。その3つのコードを書いて、3つのファイル、3つのファイルの3つのコードを書いて、
1つのウェブサイトが出来上がるみたいなそんな感じで、
これはウェブサイトの基本の構成みたいならしいんですけども、
その基本構成に則った手法的なウェブサイトを作るみたいな、そういうのをやりました。
やり方としては、私はCloudを使ったんですけども、こういうウェブサイトを作りたいので、
そのウェブサイトをWindsurfに投げるためのプロンプトを作っていたと言ったんですね。
そうすると、Windsurfに投げるためのプロンプト、具体的にはこういうデザインでこういう内容が載っていて、
私の場合、ちょっと建築サイトのリンク集みたいなのを作りたかったので、
建築サイトのリンク集で、そのリンクはこういう感じで、レイアウトはこんな感じで、
こういう落ち着いたなんちゃらのテイストでみたいな、そんな条件文ですかね。
なんていうんですかね、このウェブサイト業界では要件定義とか言うらしいんですけども、
その要件定義文章をCloudがまず書いてくれます。
このCloudで私はやったんですけども、Chat GPTでも当然同じ感じができます。
そうやって流ったらしい、こういう条件でみたいな要件文が出来上がったら、
それをWindsurfというAIコーディングに投げます。
そうするともうそこからはWindsurf自体がこの人はこういうことを、こういうウェブサイトが作りたいんだっていうのを読み取って、
そこからじゃあHTMLはこういうコードを書こう、CSSはこういうコードを書こう、
Javascriptはこういうコードを書こうって3つちゃんと自動的にファイルを生成してくれて、
3つのコードをバーッと書いてくれるんですよね。
当然こっちが指定したサイトへのリンクというのもちゃんと貼ってくれて、それで出来上がると。
もうちょっと言うと、ここはもうちょっと練れるかなと思うんですけども、
何も指定しない場合はサイトへのリンクのバナーみたいな画像があるじゃないですか。
画像を叩くとそのリンクに飛ぶみたいな画像。
その画像もちゃんとシンプルではあるんですけども、画像を作って、
これはSVGという線とか丸とか面とかの組み合わせで作る画像があるんですけども、
その画像を組み合わせてそれなりのものを作ってくれました。
その画像を持ってそのリンクのバナーとしているみたいな。
これまでこっちが指定していなくてもやってくれたわけなんですよね。
WindsurfができるのはそのHTMLファイルを作るところまで。
HTMLファイルができたらそれがプレビューできるので、
こういうサイトになるんだなっていうサイトデザインのプレビューまでがWindsurfができること。
Windsurf自体でできることになります。
ここまででもいいんですけども、
ウェブサイト作ったら当然一般人でも見れるように公開したいじゃないですか。
今のままだと先ほどの3つのファイルですね。
HTMLファイルとCSSファイルとJavaScriptファイル。
この3つのファイルを持ってないとそのサイトは見れないわけですよね。
だからこのファイルを持っている今でいうと自分自身しか見れません。
例えば他の人に見せようと思ったらその3つのファイルを送って、
3つのファイルをその他の人にダウンロードしてもらって、
自分のパソコンに置いてもらって開くってしないとそのサイトは見れないわけなんですよね。
っていう感じのまずはローカル環境にそのサイトっていうのはあるわけです。
そこから一般公開するためにはどうすればいいのかっていうと、
GitHubでの公開
これいろんなやり方があるらしいんですけども、そんな詳しくないんですけども、
一つはGitHub上で公開するっていうのがあるみたいです。
GitHubって何なのかっていうと私もよく分かってないんですけど、
昨日ちゃんと聞いたばっかりなので分かってないんですけども、
おそらく自分が作ったコンテンツをアップロードできるようなプラットフォームだと認識しています。
ウェブサイト作ったらウェブサイトをちゃんとアップロードできる。
公開することができる。
プログラミングのコードを作ったらそのプログラミングのコードを公開してアップロードして公開できる。
他の人が見れる。そんなプラットフォームがGitHubなのかなというふうに認識しています。
そのプラットフォームに私が作ったやつをアップロードすることができれば、
私が作ったやつ、ウェブサイトを一般の人が普通にURLを叩くような感じで見ることができるっていうわけなんですけども、
そこまでちょっとやってみたいなということで今日やってみました。
このGitHubでアップロードする方法っていうのは、
昨日の学士さんと向井さんのセミナーの動画がありますので、
それはACLというコミュニティに行けば見れますので、
そこで見て学んで、ちょっと止めて、この操作どうやってるのかなみたいな、
止めて動かして止めてみたいな感じで一個一個ステップをやっていけば、
それどおりやっていけば公開までたどり着くことができました。
というのが今日の一連の流れになります。
まとめるとWindsurfというツールを使って、
もう本当にこういうのを作ってっていう指示だけでウェブサイトを作ることができました。
昨日のセミナーの内容に従ってGitHubで公開するというプロセスを踏むことで、
私でもGitHubでそのウェブサイトを公開することができました。
という感じで、もう全然私はプログラミングほとんどわかりませんし、
Pythonがちょっと触れるぐらいなんですけどもほぼわかりませんし、
HTMLとかJavaScriptとかもちんぷんかんぷんですし、
ましてGitHubなんかも雲の上の存在だと思っていたんですけども、
なんかやってみればできるなっていうのを感じました。
と同時にWindsurfっていうAIがコーディングしてくれるツールっていうのの可能性をめちゃめちゃ感じましたね。
池早さんなんかはDiscordのボットを作っていたりしますし、
他の方、Ninja DAO関係の人では、
Xのスペースですね、音声配信の音声データをダウンロードする機能っていうのを作ってらっしゃいました。
Windsurfを使って、全然エンジニアではない方が。
そんな感じでエンジニアじゃない人でもこういったエンジニア、
昔のエンジニアじゃないと作れなかったツールっていうのがどんどんでき始めている、
未来が来ているなと、もう来たなというのを肌でまじまじと感じました。
ということで今日はWindsurfというAIツールがすごいというお話をさせていただきました。
そうですね、ちょっと一個自分のAIスキルがまた上がったような気がするので、ちょっと嬉しい限りです。
ということで今日はおしまいにしたいと思います。またね。バイバイ。
