私はCodexの最初の題材として、ブラウザで開ける小さなWebページを選びました。この記事ではNode.jsのダウンロード、Codex CLIのインストール、CrazyRouterの設定、HTMLファイルの作成を順番に説明します。
1. Node.jsをダウンロードしてインストールする
私はNode.js公式ダウンロードページを開き、LTS → Windows → Windows Installer(.msi)を選びます。Windowsの「設定 → システム → バージョン情報」でシステムの種類を確認し、x64またはARM64を選択します。
ダウンロードフォルダーでMSIファイルを開き、Next、ライセンスへの同意と進めます。既定の構成にnpmとAdd to PATHが含まれることを確認し、Install、完了後にFinishを押します。
古いターミナルを閉じ、スタートメニューから新しいPowerShellを開きます。PSプロンプトを含めずコードだけをコピーし、1行ずつEnterで実行します。既にNode.jsがある場合は次の確認から進めます。
node --version
npm.cmd --version
2. Codex CLIをインストールする
npm.cmd install -g @openai/codex@latest
codex.cmd --version
インストールが終わってプロンプトが戻ったら、バージョンを確認します。画像より新しい番号でも問題ありません。
3. CrazyRouterとの接続を設定する
私は自分のCrazyRouterアカウントで、ここで設定するgpt-5.6-solへのアクセスを確認します。
CrazyRouterの管理画面で自分のAPI Keyを作成します。サイトのログインパスワードとAPI Keyは別物です。Keyを記事やスクリーンショットに載せないでください。
$codexKeySecure = Read-Host 'CrazyRouter API Keyを貼り付けてEnter' -AsSecureString
$codexKeyPointer = [Runtime.InteropServices.Marshal]::SecureStringToBSTR($codexKeySecure)
try {
$codexKeyPlain = [Runtime.InteropServices.Marshal]::PtrToStringBSTR($codexKeyPointer)
if ([string]::IsNullOrWhiteSpace($codexKeyPlain)) { throw 'Keyが入力されていません' }
[Environment]::SetEnvironmentVariable('OPENAI_API_KEY', $codexKeyPlain.Trim(), 'User')
[Environment]::SetEnvironmentVariable('OPENAI_BASE_URL', 'https://cn.crazyrouter.com/v1', 'User')
$env:OPENAI_API_KEY = $codexKeyPlain.Trim()
$env:OPENAI_BASE_URL = 'https://cn.crazyrouter.com/v1'
} finally {
[Runtime.InteropServices.Marshal]::ZeroFreeBSTR($codexKeyPointer)
$codexKeyPlain = $null
}
入力中に文字が表示されなくても正常です。値が空でないことだけを確認します。
[bool]$env:OPENAI_API_KEY
$env:OPENAI_BASE_URL
Trueは「値がある」という意味で、Keyの有効性や残高を証明しません。Key本体を出力するコマンドは実行しないでください。
4. config.tomlをバックアップして編集する
$codexConfigDir = if ($env:CODEX_HOME) { $env:CODEX_HOME } else { Join-Path $env:USERPROFILE '.codex' }
New-Item -ItemType Directory -Path $codexConfigDir -Force | Out-Null
$codexConfigFile = Join-Path $codexConfigDir 'config.toml'
if (Test-Path -LiteralPath $codexConfigFile) { Copy-Item -LiteralPath $codexConfigFile -Destination ($codexConfigFile + '.bak.' + (Get-Date -Format 'yyyyMMdd-HHmmss')) }
notepad.exe $codexConfigFile
既存の同名フィールドがあれば書き換え、重複させないでください。
model = "gpt-5.6-sol"
model_provider = "crazyrouter"
[model_providers.crazyrouter]
name = "Crazyrouter"
base_url = "https://cn.crazyrouter.com/v1"
env_key = "OPENAI_API_KEY"
wire_api = "responses"
env_keyは変数名であり、Keyの文字列ではありません。modelとmodel_providerはトップレベルに置きます。保存後、ファイル名がconfig.toml.txtになっていないかエクスプローラーで確認します。
5. 接続テストとディレクトリの信頼
新しいPowerShellを開き、練習専用のディレクトリを作成します。
New-Item -ItemType Directory -Path "$env:USERPROFILE\CodexProjects\hello-codex" -Force
Set-Location "$env:USERPROFILE\CodexProjects\hello-codex"
Get-Location
codex.cmd --sandbox workspace-write --ask-for-approval on-request
信頼するか聞かれたら、表示されたパスがhello-codexであることを確認してから選択します。実際の検証では、新しいディレクトリが未信頼でread-only sandboxに阻止され、最初の書き込みが失敗しました。ディレクトリを信頼し、制限付きWindows sandboxの設定を完了してから成功しました。
まず、ファイル操作を含まない短い入力を送ります。
CODEX_CONNECTION_OKだけを返してください。
ファイルを読まず、変更せず、コマンドも実行しないでください。
これで確認できるのは、今回のprovider・Key・model・gatewayの組み合わせでリクエストが通ったことです。CLIのバージョン表示だけでは確認できません。
6. HTMLを作成してブラウザで確認する
Codexの入力欄に、次の指示をまとめて貼り付けます。
現在の練習ディレクトリにindex.htmlを実際に作成してください。チャットにコードを表示するだけにしないでください。
タイトルを「我的第一个 Codex 网页」、本文を「你好,Codex」にしてください。
「点击打招呼」ボタンを追加し、クリックしたら「按钮可以正常工作」と表示してください。
CSSとJavaScriptは同じHTMLファイルに含め、外部画像・フォント・フレームワーク・CDN・パッケージは使わないでください。
作成または変更するのはindex.htmlだけにしてください。書き込み権限がなければ、作成したと主張せずに説明してください。
/quitでCodexを終了し、PowerShellから確認します。
Test-Path .\index.html
Start-Process .\index.html
私は保存されたindex.htmlをブラウザで開き、ボタンを押しました。「你好,Codex」が表示され、クリック後には「按钮可以正常工作」になりました。セッションの最後には元のコンテキストが不足しているというメッセージもありましたが、保存されたページは開けて、ボタンも動きました。
7. エラーを層ごとに切り分ける
| 現象 | 最初に確認すること | 最初にしないこと |
|---|---|---|
nodeが見つからない |
Node.js、Path、新しいPowerShell | modelを変更する |
.ps1がブロックされる |
.cmdを使う |
実行ポリシーを全面解除する |
| 401 | Keyの発行元、期限、URL | ログインパスワードを入れる |
| 403 | アカウントとmodelの権限、全文エラー | 数字だけで原因を決める |
| 404 / model not found | Base URL、model ID、/v1
|
Node.jsを再インストールする |
| 応答するが書き込めない | trust、sandbox、現在のパス | すべての操作を許可する |
False |
Get-Locationと拡張子 |
チャットの完了文だけを信じる |






