第3回のAI寄付講座で、スキルセッションがあって、これはすぐやらなきゃ！と思い
初めてのVibe Codingにチャレンジ！

GeminiでVibe Coding

Geminiのいつもの

松尾研のAI寄付講座をPRするページを、HTML＋CSSでつくって。アニメもつけてわかりやすくして

というプロンプトを打って、「ツール」で「Canvas」を選んで、実行すると
こんな感じでコードができるんだそうな↓

で、エラーが出たので、「エラーを直して」っていうと直してくれた

でも、無知すぎて、これが、インターネットの裏の仕組み（）ということしかわからない。

公開するにはどうしたらいいか、聞いてみた

教えてくれます↓

このステップの最後に

まずは自分のPCで index.html として保存し、ブラウザで開いて正しく動くか確認することから始めてみてください。もし特定のサービス（GitHubなど）での具体的な操作手順が知りたい場合は、詳しく解説します！

とあります。でも、自分のPCで index.html として保存　の意味が分からんよね？
で、再度質問↓

右側に表示されているコードを index.html という名前のファイルとして保存する手順を説明します。
もっとも一般的な手順は以下の通りです

1. コードをコピーする
   ・右側のウィンドウ（エディタ部分）の右上にあるコピーアイコンをクリックするか、コードをすべて選択してコピーしてください。
2. テキストエディタを開く:Windowsの場合:
   ・「メモ帳」または「Visual Studio Code」などを開きます。
3. 貼り付けて保存する:
   ・エディタにコピーしたコードを貼り付けます。
   →「ファイル」メニューから「名前を付けて保存」を選びます。
   →ファイル名を index.html に書き換えます（.txt にならないよう注意してください）。
   →保存先（デスクトップなど）を選んで保存します。
4. 動作確認
   ・保存した index.html ファイルをダブルクリックすると、ブラウザが立ち上がり、作成した松尾研のPRページが表示されます。

もし、このファイルをインターネット上で公開する（URLを作る）具体的なサービス手順が必要であれば、教えてくださいね。

つまり、Cntr＋ａで全選択して、Cntr＋Cでコピーして、メモ帳に貼り付け
→名前をつけて保存で、ファイル名を index.html にす
（ここまではわかった！）

で、4.動作確認　として、示されている

・保存した index.html ファイルをダブルクリックすると、ブラウザが立ち上がり、作成した松尾研のPRページが表示されます。

が、できない！たぶん

（.txt にならないよう注意してください）

が原因とみて、どうすれば、.txt にならない　のか聞いてみた

いくつか解決策をくれて、まずは、解決策1：保存時に「すべてのファイル」を選択する（Windows）　を試してみてとのこと

…できるようでできない→一見、index.html で保存できたようにみえるが、「.txt」という拡張子が隠れてしまっていて、本当はindex.html.txt　で保存されている様子

たぶん、めっちゃ初歩的な話：拡張子の変更

ファイル拡張子を表示するように設定を変更して、拡張子を表示したうえで消すという必要があるみたい。じゃあどうやるの？
さらに聞くと、、

1. 「エクスプローラー」を開く

1. キーボードの 「Windowsキー（旗のマーク）」を押しながら「E」 を押してください。
2. これで「エクスプローラー（フォルダの画面）」が開きます。

2. 「ファイル名拡張子」にチェックを入れる

1. 開いた画面の一番上にある 「表示」 をクリックします。
2. 出てきたメニューの一番下にある 「表示」 にマウスを合わせます。
3. その横に新しく出てきたメニューの中から 「ファイル名拡張子」 をクリックします。

3. 名前を書き換える

これで、デスクトップにあるファイルの表示が index.html ではなく、index.html.txt に変わっているはずです。

1. そのファイルを右クリックして、「名前の変更」 を選びます。
2. 語尾の .txt を消して index.html だけにします。
3. 「変更しますか？」と出たら 「はい」 を押します。

できた！

これを開くと、、、

See the Pen Untitled by 大内尚子 (@vekfomsk-the-builder) on CodePen.

AIの最前線を、
すべての人に。

東京大学 松尾研究室がプロデュースする国内最大級のAI学習コミュニティ。 世界水準の技術を、実践的なカリキュラムで習得。

講座一覧を見る 松尾研のビジョン

Features

なぜ、松尾研の講座なのか？

最先端の知見

ディープラーニングの第一人者、松尾豊教授監修。常に最新のAIトレンドを反映した教材を提供します。

超・実践型演習

座学だけでなく、Kaggle形式のコンペや実際のコード実装を通じて、即戦力となるスキルを磨きます。

国内最大のコミュニティ

数千名規模の受講生・修了生との繋がり。Slack等を通じた活発な技術交流が行われています。

Courses

レベルに合わせた多彩な講座

※ 講座によって募集時期・対象者が異なります。

初心者歓迎

GCI

Data Scientist Program

データ分析の基礎から機械学習、統計学までを一気通貫で学び、データサイエンティストへの一歩を踏み出します。

詳細を見る

中級者向け

DL基礎講座

Deep Learning Basic

ディープラーニングのアルゴリズムを数式とコード両面から深く理解し、最新のモデルを実装する力を養います。

詳細を見る

トレンド

LLM講座

Large Language Models

ChatGPTを支える大規模言語モデルの仕組みを学び、独自のLLM構築や応用アプリ開発を目指します。

詳細を見る

10,000+

延べ受講生数

95%

満足度

50+

寄付企業社数

30+

輩出スタートアップ

AIで、世界を加速させる。

次回の開講案内を受け取るには、以下のボタンよりメールマガジンへご登録ください。

登録する

松尾研 AI寄付講座 | 世界を変える、AIの力をその手に

これになります！だいぶ感動👏🏼😮🤣🫶🏼😹
ってことで今日はここまで。次回、もう1回同じことを、違う指示で試してみようと思います😊

追記：↑にあげるのに、3種のやり方をした

①WordPressに「埋め込み」として表示する（CodePenの枠の中に表示される形、CodePenで保存したコードをWordPressの投稿画面に直接貼り付け）
→CodePenの右下にある 「Embed」 ボタンをクリック、「WordPress」タブを選択し、表示されたコードをコピー、WordPressに戻り 「カスタムHTML」ブロック を追加し、そこにコピーしたコードを貼り付け

②WordPressの「固定ページ」に貼り付ける方法
…「松尾研 PRページ」をCodePenのリンクではなく、自分のブログの1ページ（URL）として作る
→WordPressの編集画面で+ ボタンを押し、「カスタムHTML」ブロックを選ぶ。そこに、GeminiのCanvasにあるHTMLコードを最初から最後まで全部貼り付ける（テンプレートの干渉を防ぐため、「テンプレート」内でLPやBlamk Pageを選ぶことも推奨されていたけど自分のところにはなさそうだった、、）

③もっとも簡単な「1枚のWebページ」としての公開法
…当初、Vercel（バーセル、https://vercel.com/import/deploy）がラクだよーって言われて（By Gemini）進めてみたんだけど、ページの仕様が変わったらしく、途中でNetlify Drop（Drop | Netlify）に切り替え、、、というかここ開いたら即アップロードできた

けっこー時間かかったけど、Geminiはどんどん教えてくれるから楽しかった！
少しはAIスキルというか、ITスキル上がったと思う😽楽しみながらがんばろ💪🏼💪🏼💪🏼