水曜日, 6月 11, 2025
- Advertisment -
ホームニューステックニュース#意識低いAICodingチュートリアル #01 インターネット老人会のサイトを作ろう #初心者向け
テックニュース

#意識低いAICodingチュートリアル #01 インターネット老人会のサイトを作ろう [GitHub Copilot Agent mode 版] #初心者向け

インモビ運営局
By インモビ運営局
0
0



#意識低いAICodingチュートリアル #01 インターネット老人会のサイトを作ろう [GitHub Copilot Agent mode 版] #初心者向け

皆さまこんにちは、ちょまどです。
GitHub Copilot の Agent モードを使った、AI coding 入門のチュートリアルを書いていこうと思います。

その連載名は「 5 分で試す！意識低い AI coding チュートリアル 」でいきます。

最初はちゃんとしたやつ（業務改善 chat bot 作成！とか）書いていこうと思っていたのですが、
意識高い系は私がなかなか筆が乗らなかったので、
やっぱり意識低めに書いていきます。

この「 意識低い AI coding チュートリアル 」シリーズは、
AI を使って 業務や人生に全く役に立たないもの を作っていくことで、
Vibe coding, AI coding なるものを「実際に触って体験」していくシリーズにします。

本当に役に立たないもの を作っていきます。

この記事の目標

第一回目の今回は、最初なので、
VS Code で GitHub Copilot の Agent モード を使い、
静的ペラいちサイト（HTML＋CSS）を “丸投げ生成” する
ことをゴールとします。

手順

  1. とりあえず叩き台を作ってもらう
  2. それの改善をしてもらう（サンプルプロンプトあり）

今回はふざけたやつを作るけど、
実業務でも「 とりあえず叩き台を作って、それを改善していくことで完成形に近づけていく 」という手順は同じなので、
それをやっていきます。

今日つくるものと完成イメージ

個人的に大好きな「90-00 年代の古の web サイト」を作ってみます。

image.png

インターネット老人会ホームページ.gif

( 懐かしさを感じない令和の若者 は ポートフォリオサイトでもなんでも何か別のやる気の出るものを代わりに作ってみてください。(Copilot に出す指示 (自然言語) を変えるだけなので, 以下の手順はあまり変わりません))

インターネット老人会の仲間たち は
こんなかんじのを一緒に作っていきましょう！

  • index.html：90-00年代を感じる、古の個人サイト
  • 所要時間：5 分（ダウンロード等を除く）

拡張機能 GitHub Copilot Chat を入れておく

VS Code にこれ入れておいてください。

そして GitHub アカウントでサインインして云々など、「使える状態」にしておきます。（そのやり方は省略します）（需要があったら別記事で書きます）

余談：Peer programmer

image.png

余談ですが、この ” GitHub Copilot - Your AI peer programmer ” という見出し、個人的には胸熱です。

私が 2024 年春に産休に入ったころは、GitHub Copilot は、まだ「コード補完ツール」としての側面が強く、「 Copilot (副操縦士) 」というメッセージを今よりも強く打ち出していたように記憶しています。
あくまでメインパイロットはあなたです。Copilot は、隣に座ってあなたをサポートしてくれる副操縦士です、みたいな。

それが今は「 AI Peer Programmer 」というメッセージを強く打ち出していますね。ピアプログラマー。

英単語 peer は「(年齢・地位・能力などが)同等の者、同僚」とか「仲間」とかいう意味がありますから、
Copilot (AI) が、「あなたと一緒に働く仲間」 という立ち位置になっていっているんだなあ、と、先月（１年以上ぶりに）育休から復帰して時代の流れを感じました。

まあ今は Copilot くんに pull request のレビューや issue とかもアサインしてぶん投げ（丸投げ） られる時代だもんなあ

拡張機能 Live Preview

image.png

また、作っている web ページのレンダリングを即時確認したいので
VS Code の拡張機能「Live Preview」も入れます

とりあえず適当な空っぽのフォルダを作って
それを VS Code で開きます。

私は「website」というフォルダを作りました

mkdir website && cd website
code .

(code . は VS Code でカレントディレクトリを開くコマンドです)

(もちろん GUI 派の方は フォルダ右クリック→「VS Code で開く」 でも同じです)

GitHub Copilot Chat

右上にある Copilot のロゴをクリックします　
　
image.png

すると、GitHub Copilot Chat の画面が開きます。

image.png

Agent mode に切り替え

デフォルトでは「Ask」モードになっているので、
プルダウンから「Agent」モードに切り替えます。

image.png

image.png

まずは叩き台を生成してみる

今回は「とりあえず使ってみて生成してみる」なので、
プロンプトの良し悪しとか関係無く、
とりあえず ふわふわに指示してみます。

たとえば

２０００年台のオタクの間で流行っていた感じの、
古き良き web サイトを生成してください。

だけ書いてみます。（本当はもっと詳細に指示した方がいいんですけど、とりあえず今回は Copilot くんの察しパワーを見てみます）

これをチャットビューのテキストボックスに入れて送信してみます。
すると、Copilot くんがモリモリ作成していってくれます

image.png
　

叩き台のプレビューを見てみる

開いている (生成された）index.html ファイルの
右上の虫眼鏡マークをクリックして
レンダリングのプレビューを見てみます

image.png

image.png

（ちなみに、私が実行したらこれが生成されたけど、皆さんが自分の手元でやったら別のものができると思います。）

うーーーーーーーーーーーーーん、

わかる、
わかる　が、
なんとなく、 惜しい。

なんというか、
†痛さ† (褒め言葉) というか、パワーが足りない。

ちなみに、
Copilot くんが生成してくれたファイルに関して、
勝手に生成して勝手に上書き保存されることはなく、
ちゃんと毎回こうしてファイルごとに「保持」と「元に戻す（無かったことにする）」を聞いてくれます。

image.png

叩き台をもとに改善のお願いを出す

では、この叩き台サイトについて、改善案を出していきましょう。

とはいえ、私の場合、
「「惜しい」」ことはわかるんだけど、
具体的にどうしたらいいのか言語化が難しかったので、

ついったランドに いる インターネット老人会 の仲間の方々のお知恵をお借りしました。

image.png

image.png

image.png

image.png

皆さまありがとうございます！！

また、これ↓の作者の よんてんごPさん にも
アドバイスをおうかがいしました。

ChatGPT を使って仕様をまとめていく

いただいたアドバイスをまとめて、
改善版の仕様としてまとめていきます。

手動でやってもいいんですけど、 ChatGPT に頼んでみました。

image.png

私の場合は↑だったんですけど、
「チュートリアルの手順」としては、
別にこれをやる必要はないです。
ただたんに GitHub Copilot くんに「ここをこうして欲しい」と頼むだけで大丈夫です。
（私の場合、その具体的な指示が思いつかなかったので、他の人に聞いて、それを ChatGPT にまとめてもらう、という手順が入りましたが）

生成されたプロンプト

修正（改善）するにあたり、
ChatGPT により生成されたプロンプトです。

皆様もこちらを参考にしてみてください。

**System (role=system)**
あなたは 1998～2003 年頃の「個人ホームページ」職人です。
Netscape 4.7 と IE5 で動けば十分という前提で、最新のベストプラクティスやアクセシビリティは *一切* 気にしません。
レガシー感・素人感を最優先にしてください。

**User (role=user)**
以下の要件をすべて満たす 1 ページ完結 HTML（必要なら外部 JS/CSS をインラインで埋め込む）を生成してください。

### レイアウト & 技術
- ページ全体を `` の多重入れ子で構築し、`div` は使わない。
- 背景はタイル画像 `bg_pattern.gif` を敷き詰め。
- 虹色罫線（`
` に `size`, `color`, `noshade`）風のセル・境界。
- 1×1 px 透明 GIF (`secret.gif`) をリンクにして “隠しページ” (secret.html) へ。

### 見出し・フォント- タイトルを画像化し、創英角ポップ体風で「古の個人サイト」。
- 原色（#ff0000, #00ff00, #0000ff など）＋縁取り／影でド派手に。

### ウィジェット1.**来訪者カウンター** (`counter.cgi` を想定)。初期値 200123。
2.**キリ番報告フォーム** → `guest.cgi`。
3.**ゲストブック / 掲示板** へのリンク。
4.**相互リンクの部屋** へのリンク。
5.**足あと帳** へのリンク。

### アニメーション & エフェクト-`` で点滅＋横スクロールする「いらっしゃいませ！！！」。
- 「工事中」「NEW‼️」2 コマ GIF (`under_construction.gif`, `new.gif`) をループ。
- マウスカーソルに追従してキラキラが出る JS（`mousemove` で star div を生成→fade）。

### ネットマナー & ポップアップ- 右クリック (`contextmenu`) をキャンセルし `alert('右クリック禁止！')`。
- 「毒吐きネットマナー」へのリンクを `_blank`。

### コンテンツ置き場- 200×40 の同盟リンクバナーを 3 枚横並び (`alliance1.gif` など)。
- 「○○お題バトン」ページへのリンク。
- 自作萌え絵 `moe.png` をセンター配置。

### その他- セル間に余白 0、インライン CSS は可。
- すべて 1 ファイル内に書き切ること。
- 生成するコードをコメント付きでわかりやすく。

### チェックリスト（プレビュー時に必ず確認）1. タイトルが原色＆ポップ体画像で表示される。
2. カウンターが “200124” 以上で増える。
3. キラキラエフェクトがカーソルに追従する。
4.`` テキストが点滅しながら左右へ流れる。
5. 右クリックでアラートが出る。

**Assistant (role=assistant)**
テーブルレイアウト＋レガシー JavaScript で要件を満たす完全 HTML を出力します。



生成物


インターネット老人会ホームページ.gif
「「「「ホンモノ」」」」では？
やったぜ！

まとめ
どんなにくだらなくてもいいから、
とりあえず何か作ってみましょう！
そして Twitter でアイデアをくださった、たくさんの老人会の方々、誠にありがとうございました！

次回予告
第二回目の記事について。
チュートリアルらしく、次は「git で管理してみよう」にしてみようかと思います。
また、需要があったら そもそもの「#00 GitHub Copilot とは（インストールの仕方も含め）」みたいな入門記事（導入記事）もいいなと思っています。
でももし他に 何か役に立たない作りたいネタ を思いついてしまったら、そっちにしようと思います。(募集しています！)
37
Register as a new user and use Qiita more conveniently
  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
37
Deleted articles cannot be recovered.
Draft of this article would be also deleted.
Are you sure you want to delete this article?





Source link

Views: 0

前の記事
WWDC25 で出てきた Containerization Framework を試す
次の記事
「ソニー新スピーカー、低域強化！CSM2シリーズ登場」
RELATED ARTICLES

返事を書く

あなたのコメントを入力してください。
ここにあなたの名前を入力してください

- Advertisment -

ABOUT US

inmobilexion（インモビ）は、動画・ニュース・サイト紹介を中心に、信頼性の高い情報をわかりやすくお届けする情報プラットフォームです。 「in-mobile」×造語の"〜xion"から生まれたインモビは、厳選・接続・導線など多様な意味を内包しながら、次世代の情報体験を提案します。

Contact us: [email protected]

FOLLOW US

© インモビ by inmobilexion.com