View on GitHub

AIエージェントでWebサイトをつくろう

Codex CLIでWebサイトを作成する

Codex CLIのインストールが完了したら、実際にWebサイトを作っていきましょう。

Codexに依頼する

Codex CLIに対する入力と、ターミナル上で入力するコマンドを区別するため、今後、Codex CLIに対する入力にはuser>を先頭に付けて記述します。

user> ここにCodexへのメッセージ、プロンプトが入ります。

注: 上の user> は資料上の記法です。実際のCodex CLIには user> を付ける必要はありません。

では、早速CodexにHTMLファイルを作ってもらいましょう。

user> このリポジトリは、GitHub Pagesで公開する自分のWebサイトです。index.htmlを新規作成し、シンプルなHTMLを用意してください。

Codex HTML

HTMLページを確認する

作成したHTMLページの内容を確認してみましょう。 まずはじめに、新しいターミナルの画面を作成します。

ターミナルの右上の「＋」を押します。

codespace-bash

bashと表示されて新しい画面になったことを確認します。ここで以下のpythonコマンドを入力します。

bash-new

ターミナルで以下のコマンドを入力してください。

python3 -m http.server 5500

HTTP

ブラウザーで開く をクリックすると、現状のHTMLファイルが確認できます。 もしくはターミナル上のhttp://0.0.0.0:5500/を、Macであれば⌘+クリック、WindowsであればCtrl+クリックで開くことができます。

このPythonコマンドでは簡易なWebサーバーを立ち上げ、今いるフォルダーの中身をHTTPで配信しています。 停止するには、サーバーを起動しているターミナルで Ctrl + C を押してください。

【トラブルシュート】

Codex CLIとターミナルの切り替え

Codex CLIに自然言語で依頼をする場所と、ターミナルでコマンドを入力する場所は異なります。

npmやnodeと表示されることがあるタブがCodex CLI（対話用）で、bashと書かれているタブが通常のターミナル（コマンド実行用）です。 user>と先頭に書かれている文書/指示はCodex CLIに入力し、それ以外のコマンドはターミナル上で入力・実行します。

Codex NPM Codex CLIが開かれている状態

HTMLファイルをGitHubへ送る

作成した index.html をGitHubへ送ります。 Gitでは「変更を記録する」作業をコミット、GitHubへ送る作業をプッシュと呼びます。

本講義では、細かいGitコマンドはCodex CLIに任せます。 Codex CLIのタブに戻り、次のように依頼してください。

user> 変更を確認してpushしてください

Codex git add

Pushにはネットワークアクセスが必要なため、Codexが許可を求めてきています。 1. Yes, proceedを選択し、Pushしましょう。

Codex commit push

これで、変更の確認、コミット、GitHubへのpushまで完了です。 GitHubでリポジトリのページを開き、index.html が表示されていれば成功です。

ポイント Codex CLIは 「ユーザーの意図 → 具体的なGitコマンド」 を橋渡ししてくれます。 今日の講義では、Git操作は基本的に 変更を確認してpushしてください と頼めばOKです。

Codexの裏側では、だいたい次の3段階の操作が行われています。

  1. add: どの変更を記録するか選ぶ
  2. commit: 変更を記録する
  3. push: 記録した変更をGitHubへ送る

この3つの名前だけ覚えておくと、あとでGitを学ぶときに理解しやすくなります。

参考：手動でGit操作を行う場合

Codexに頼らず自分で行う場合は、通常のターミナルで次の流れを実行します。

git status
git add .
git commit -m "Add initial site"
git push -u origin main
  • git status は変更内容の確認です。
  • git add . は現在のフォルダー以下の変更をまとめて記録候補にします。
  • git commit -m "..." は変更を記録します。
  • git push -u origin main はGitHubへ送信します。

今すぐ全部覚える必要はありません。今日の作業では、Codex CLIに任せて進めましょう。

VSCodeのGUIを使ったGit操作

VSCode（GitHub Codespaces上で動いているエディター）は開発のための様々な便利を備えています。 VSCode上のボタンを操作することでも、git add, git commit, git pushは簡単にできます。

Add

左側の虫眼鏡の下にある、丸が繋がっているようなアイコンを押すと、このような表示になります。 もしコードに変更が加えられている場合、Changesの下に、変更済みのファイルが一覧で出てきます。

Changesの右にある+ボタンを押すと、変更があったファイルを全てaddすることができます。

add-vs

Commit

Addすると、Staged ChangesにAddしたファイルが追加されているのが確認できます。 ステージに追加されたファイルをコミットするには、コメント（どんな変更をしたか）が必要なので、 Changesの下にある入力欄にコメントを入力します。

入力したら、✅Commitを押して、コミット完了です。

commit-vs

Push

コミットまでできれば、あとは簡単です。 Sync Changesを押せば、リモートのGitHubリポジトリに変更を同期できます。

push-vs

前へ → 開発環境の準備 次へ → GitHub Pages へデプロイ 目次へ → ホーム