Vibeコーディングの紹介
おはようございます。しゅうへいです。この番組では、1年後のあなたが楽になるヒントを、里内海の島から毎日有効にお届けしております。
はい、ということで今日はですね、確実にあなたの1年後が良くなる、そんなスキルをご紹介したいと思います。その名もですね、Vibeコーディング。
僕は、Vibeコーディングに挫折している側の人間なんですが、なんとですね、昨日ね、エンジニアのけいすけさんと、あとね、今頑張っているこんさんが、
ちょっとこうズーム開いてね、教えてくれたんですよ。画面使って。そしたらね、サクッとね、30分もかかんないぐらいで、いわゆるデプロイ。
要するにその公式サイトとかLPとかってありますけど、そのウェブサイトを本当にウェブ上に公開することができて、
しかもそれは自分のだけが見れるんじゃなくて、他の方も、いわゆる80億人がアクセスできるインターネットを使えばね、そんなサイトができたんですよ。
いや、すごい。で、もちろんね、僕もIKEAさんとほぼ同時期に、いわゆるVibeコーディングを知って、Windowsサーフも、とりあえずインストールはしてたんだけど、
なんかね、なかなかできなかったんだよね。できなかったんだけど、こういうふうにして、こうしたらいいんだっていうことが、すごいこんさんとけいすけさんに教えてもらってわかったんですよ。
もう画面見ながら、エンジニアのけいすけさんが教えてくれるっていう。マジね、めっちゃ早かった。で、多分これね、なんでつまづいたりとか、アレルギーというか、
嫌だなって思ってしまうかっていうのが、なんとなくわかったので、僕はどちらかというと、すぐにできてなかった側の人間だから、
IKEAさんがね、ずっとVibeコーディング、Vibeコーディング、ずっとうるせえと思ってる方は、ぜひ今日聞いてください。
ちょっと違った角度から見れると思う。先にお伝えしておくと、僕とけいすけさんが、僕は生徒役でけいすけさんがエンジニアだから先生役で、
教えてくれる実演、画面マジで使って、全部画面共有しながらやり方をみんなで見ながら学ぶっていうやつを、6月24日火曜日、来週の火曜日のお昼の12時から無料セミナーやりますので、
とにかく今日放送聞いて、気になった方はそこ来てください。これ100枠限定なんで多分埋まったと思う。もう70枠、1日で多分70人ぐらい入ったので、多分埋まったと思います。
初期設定の課題
ちょっと増枠はすると思うんですが、タイミングによっては売り切れてると思うので、必ず空いてるときはサクッと無料チケット取ってください。無料だから。最悪出てこなくていいですよ、当日。
アーカイブ一応配信はしますけど、メルマガとかで配信するので、多分リアルタイムで参加するのが面白いと思う。お昼で難しいという方もいるかもしれないけど、10分、15分でもよかったら見てみてください。
Zoom、スマホからのも参加できますので、6月24日です。チケットつけときたいと思います。
昨日、結局何をしたかというと、初期設定でつまずく人が多いし、初期設定何してるか分かんないっていう人が多いんだと思うんですよね。
僕も別にエンジニアとかでもないし、そんな経験もないし、ただ一応ブログはHTMLでブログを書いてたり、CSS分かるっていうか、意味というか、この存在意味みたいなものはなんとなく分かってるつもりではあるんですけど、全然いじれないですね。
そういう立場からすると、たぶんこれからバイブコーディングとか始める人にとってかなり近い位置だと思うんですよ。
IKEAさん特殊だから、あの人はもうほっといて大丈夫です。ほっといていいです。
周回遅れのしゅーちゃんとかってね、いじってくれてますけど、全然僕にとっては周回遅れぐらいがちょうどいいんで、すいません。
何の話だったっけ。昨日ね、けんすけさんにパパパッと聞いたらね、即答で帰ってくるんですよ。
けんすけさんすごいとこは、理系というか工学系というかエンジニアなんだけども、一応文系よりの感覚を持ってる。
分からないがちゃんと分かってくれるっていうところがあるので、安心して聞けるんですよ。
コンさんとかめちゃくちゃ詰められてるけどね。めっちゃおもろいなと思いながら。
で、いろいろ昨日聞いたんだけど、要するにWindsurfとか、あとは何、いろいろ出てくるんだよ。
GitHubとかさ、あとクラウドコードとか、コーデックスだったっけ。いろいろあるんですけど、
まずViveコーディングって何かっていうと、要するにコードをAIになんとなく書いてもらう。
自然言語、いわゆる日本語で、ここのデザインがかわいくないからかわいくしてとか、そんな感じで指示ができるんですよ。
だからViveコーディングって書いてるけど、コーディング別にしてるわけじゃないんだよね。
いわゆる雰囲気コーディングだからね。ゆるふわコーディングって感じ。ゆるふわプログラミングみたいな感じです。
やってることとしたら、ほんとざっくり言うとLINEのチャットに何かを書いて、
そしたらAI機械が頑張ってくれて、サイト作ってくれるみたいな感じです。
できるものが本当にたくさんあるので、いわゆるウェブサイト。
それは公式ページとか、あとLP、ランニングページとかも作れるだろうし、
あと診断ページとか、何かをポチポチって診断して採点できるとか、
あとツール系で言うとDiscordのBotとか、
あと自分が使いたい自分の音声をすぐ即座にテキストに変えて、
しかも自分がちゃんと習兵とかっていうのは漢字の習兵とかじゃなくて、
ひらがなの習兵で出るとか、そういうことをちゃんと自分用にできるとか、
いろいろやりをいくらでもあるんですよね。
だからなんていうのかな、本当に何でもできる。スマホみたいなもんだよね。
スマホって別に電話のためじゃないじゃん。
LINEもできるし、ネットフリも見れるし、インスタでも見れるし、
ライブ配信もできるし、お金も払えるし、カメラも撮れるし、動画も撮れるし、
ツールだからすごい万能のツールなんですよ。
サバイバルナイフみたいな感じ、何でもできちゃうみたいな。
だからViveコーディングで大事なのって、
まず1個目的決めて何を作ろうかなっていう。それでできた。
公式サイトでもいいし、自分のまとめサイトとか。
僕の中では今、自分の過去のボイシーのおすすめ回をまとめたページとか作っても面白いかなと思うんですよね。
あとプレミアムリスナーの動線とかも作っても面白いかもしれない。
そんな感じで今までだったらわざわざLPとかサイト発注しないといけなかったけど、
自分で作れるぐらいのノリでいいと思いますっていうのが1個。
その作り始めるまでの準備っていうところに結構みんなつばんづくと思います。
これ隣に誰かいたらめっちゃ楽なんだけど、エンジニアとかね。
だけど自分一人でやるって言ったら難しい。
何が難しいって何をやってるか分かんないから難しいんですよ。
合ってるか合ってないか分かんないから。
AIを使ったコーディング
AIはこうしたらこうしたらできますよって言うけど、それが合ってるのかどうか分かんないこっちがね。
っていうのがあります。
大きく初期設定でつまづくポイントとしては、僕の場合MacBook使ったのでMac全体で話をするんですが、
TerminalっていうMacBookの中に入っている、いわゆるエンジニアが使うようなアプリみたいなのがあるんですよ。
Terminal。覚えてください。Terminalってアプリがある。
これはそこに指定されたコードを打ち込むと裏で動いてくれるんですよね。いろんなこと。
どんなことをしてくれるかというと、例えば昨日やったのはクラウドコードっていうのがあります。
これはクラウドっていうAIが出しているサービスでコーディングのためのAIなんですけど、
それをそいつがTerminalを使える許可を出すらしいんですよね。
あともちろんWindsurfを使うので、僕の場合は昨日の場合は、
Windsurfの中でクラウドコードが動いてほしいわけですよ。
でもそれも結局Terminalに許可を出してないとできないんだって。
よく分かんない。目が良くなる手術みたいな名前。ICLみたいな名前です。
CILか忘れたけど、そういうのがあるんだって。
そこが多分つまづくと思う。何やってるのかよく分かんない。
Terminalを使う理由も分かんないし、ホームブリューとかそんなのあるんでしょう。
でもそれはAIとか、例えばエンジニアさんが近くにいるんだったら、
結局何をやってるのかって聞けばいいと思うんですよ。
これをすることでどんなことが得られるのかっていう。
やっとかないといけない理由とかなんとなく分かればいいし、最後分かんなくても大丈夫。
でも知りたいじゃん、そういうの。
分かんないことが進んでて、ワッとなるよりかは分かっておいた方がいいね。
今何してるかと。そういう初期設定みたいなものが終わると、
もう要するにWindowsサーフ上にクラウドコードを呼び出して、
AIを活用したウェブサイト作成
そこに自然言語で公式サイトを作ってくださいみたいな感じで打ち込めるんですよ。
ただこれ池原さんも言ってるけど、それだけだと変なサイトができちゃうので、
先にChatGPTなりGPTなりGeminiなり他のAIとかで、
なんとなく自分の情報を与えて、
習平のインスタとXとボイシーとフリーランス学校、
これ全部リンクが揃ったリットリンクみたいなサイトを作りたいんです。
そのためのサイトの構成とかクラウドコードに出すための指示を作ってくださいって言って、
あとデザインは例えばフローティングとか動いたりとか、
いわゆるちょっとおしゃれなLPにしてくださいとかサイトにしてください。
ボタンはキラッと光るようなボタンにしてくださいとかって、
全部自分が好きなやつをAIに作ってもらってそこに自分が足してもいいし、
1回できたやつに変えていくっていうのもいいんだけど。
なのでそれババババってやるとガーってできてくるので、
クラウドコードが自分のローカル、
自分のパソコンのデスクトップとかそういうところのファイルを、
フォルダを勝手に作って、そういうの指示出すんですけど、
そこの中にどんどんどんどん作っていくんですね。
いろんないわゆるインデックス、HTMLみたいな要素の基本構造みたいなのを作っていって、
今度はデザインどうやって見えるかって言ったらCSSみたいな構造が出て、
僕もこれよく分かってないです。
でも多分そんな感じ。
なんとなくこういうことしてるんだなっていうのは分かれば大丈夫で、
サイトに反映させたいと思ったら指定のフォルダとかに画像を追加しておいて、
そこから読み込ませたらいいし、たまに読み込まない場合があるんで、
昨日のけいすけさんに教えてもらったのは、
もうパワー晴らしてたらいいと。
とにかくできるんだからやれみたいな、責任持ってやりなさいみたいなことをやっていって、
バーセルっていうサービスがあって、これ何かというと、
ローカル環境に1回できたサイトを本当にインターネット環境にデプロイ、
要するにサイトが見れるような状態にするっていうものがあるんですけど、
このバーセルっていうものを勝手に連携してくれるんですよ。
だから要するにこれすごいなと思ったら、
ウィンドサーフの中でカタカタやっていけば、
ウィンドサーフからターミナルに指示が行き、
ターミナルがまた多分クラウドコードとか連携したり、
GitHubと連携したり、バーセルと連携したりとかしながら、
勝手にやってくれるんですよ。
僕が何かいちいちこの指示が出たから、
じゃあバーセルのほうに行ってこれをしてとか、
GitHubにこれをしてって基本必要ない。
もちろん最初の会員登録とか、
それをいわゆる繋げるみたいなものはいるんだけど、
それだけさえ終わってれば、
簡単って言うとあれだけど、
あとは自分がどれだけこだわりたいかとか、
エラーとの戦いであるということが、
なんとなく昨日の1時間ぐらいで分かって、
フリコの公式サイトとかもバーって作ったんで、
今日リンクフリコの公式サイト仮ですけど、
文字とかまだ雑だけどできてるので、
よかったら見てみてください。
ちゃんとメルマガも登録できるようになってますよ。
キラッてボタン光ります。
文章とかまだまだちょっと下手っていうか、
適当にできたやつ入れたので、
本当そこだけこだわったり、
デザイン変えたら十分見れるものになるし、
写真とかフリコのセミナーの写真とか、
ポンポンポンポン入れ始めたら、
もう本当に十分見れるサイトになるな、
という感覚がありましたね。
挫折を乗り越えるサポート
なんだけどこれやっぱね、
一人じゃ絶対挫折するから、
本当隣で誰かいてくれると一番いいと思います。
昨日はZoomでやったけどね。
そういったほぼそれに近い環境のものを、
6月24日にやりますので、
よかったら見てみてください。
ただね、基本的な設定のところはね、
なんか画面共有してると、
セキュリティ的なもので映ってダメなものもあるので、
そこをね、一応すっ飛ばしてやります最初から。
もう一つ初期設定ができた状態からどうなるか、
というのを見せますので、
ただ初期設定わかんないじゃないですか。
そこも一応今ね、
昨日その初期設定をやって、
ちょっとセキュリティ的に映ってはいけないものを、
モザイクとか処理しながら、
みんなも僕とけいすけさんの会話とか、
こんさんの会話をなんとなく聞きながら進められる、
というものを作っているので、
今コタパパが編集してくれてますので、
それもセットでね、
セミナー出た後に送りますので、
それでね、
あ、じゃあこんなできるんだったら、
初期設定ちょっと頑張ってやってみるか、
みたいな感じで使えると思います。
だからぜひ、僕もバイブコーディング挫折してるし、
逃げてました。
だから大丈夫、あなたも大丈夫ですよ。
どうですか。
池早と違うでしょ。
僕は優しいでしょ。
池早を悪みたい。
2週遅れのね、
週間遅れのしゅーちゃんね、
煽ってきてますけど、
全然聞いてないですね。
全然聞いてないです。
僕はもう慣れてるんで。
というような話でございました。
ぜひ無料チケット見てください。
もしちょっと枠が増積って
まだなってなかったら、
ちょっとタイミング待ってもらったら
大丈夫です。
あとね、
フリーランスがこのね、
セミナーの先行案内とか登録しておくと、
そこからの方が早い時があるので、
その先行案内のリンクも無料なので、
セミナーがある時だけ連絡が来るので、
無料セミナー含めてね。
あとディスコードも入っておくと早いと思います。
はい、なのでこの際、
よかったらフリーランス学校ぜひ入って
一緒にやっていきましょう。
フリーランス学校に今ディスコードはね、
書き込むとトークンがもらえるっていうね、
そんなシステムが入ってますので、
面白いですよ。
はい、ということで、
今日も聞いていただいてありがとうございました。
この後も心地いい時間お過ごしください。
バイバイ。
