📸 全15枚 注釈付きスクリーンショット集

ブラウザで公式サイト（code.visualstudio.com/download）を開く

① Windowsユーザーは青い「Windows」ボタン、② Macユーザーは中央の「Mac」ボタンをクリックしてインストーラをダウンロードします。

ブラウザのダウンロードフォルダにインストーラ（Macは .zip、Windowsは .exe）が保存されます。

お使いのOSと異なるボタンを押さないよう注意してください（MacでApple Silicon搭載機ならUniversalまたはApple Silicon版）。

VS Code に Claude Code 拡張機能をインストールした状態

エディタ上部またはサイドバーの「Spark（火花）」アイコンをクリックして Claude Code パネルを開きます。

VS Codeの右側にClaude Codeの対話パネルが開きます。

アイコンが見当たらない場合は、コマンドパレット（Cmd+Shift+P / Ctrl+Shift+P）で「Claude: Open」を検索してください。

VS Code の左サイドバーで「拡張機能」（Ctrl+Shift+X / Cmd+Shift+X）を開き、「Claude Code」で検索

① 発行元が「Anthropic」公式であることを確認し、②「インストール（Install）」ボタンをクリックします。

インストールが完了すると、左サイドバーにClaudeアイコンが追加されます。

同名の非公式拡張機能に注意してください。発行元が「Anthropic」であることを必ず確認してください。

VS Code で Claude Code パネルを開いた状態

下部のプロンプト入力欄に指示を入力し、Enterキーで送信します。

Claude Code からの応答がチャット形式でリアルタイムに表示されます。

文字入力できない場合は、一度Claude Codeパネルをクリックしてフォーカスを当ててください。

VS Code で作業フォルダ（x_article_workspace）を開いた状態

① 左側でファイル構成を確認しながら、② 右側のClaude Codeパネルで作業の指示や対話を行います。

ファイルツリーと会話が同一ウィンドウ内で連携して操作できます。

パネルの幅は境界線をドラッグして好みのサイズに調整できます。

Claude Code がファイル作成・変更の提案を行ったとき

① 緑色でハイライトされた変更差分を確認し、② 右側パネルで「Accept / Yes（許可）」をクリックまたはキー入力します。

ファイルに変更が適用・保存されます。

意図しない変更の場合は「Reject / No」を選択して修正理由をClaudeに伝えてください。

ブラウザで developer.x.com にアクセスし、ログインした状態

画面右上の「コンソールへ」または「Developer Console」をクリックして設定画面に進みます。

X Developer Console（開発者コンソール）のダッシュボードが表示されます。

ログインできない場合は、まず通常のアカウントで x.com にログインしてから再度アクセスしてください。

X Developer Portal（console.x.com）にログインした直後の画面

① 右上の「クレジットを購入する」ボタンをクリックし、API利用のためのプリペイド残高を購入画面の金額・条件を確認し、必要な分だけ購入します。

合計残高に対象金額が反映され、APIの呼び出しが可能になります。

残高が 0 の状態でスクリプトを実行すると「402 Payment Required」エラーで即時停止します。必ず事前にチャージしてください。

コンソール画面左上のハンバーガーメニュー（三本線）または左サイドバーを展開

① キーの発行や設定を行う場合は「アプリ」をクリックします。② 残高や支払い履歴を確認したい場合は「クレジット」をクリックします。

「アプリ」をクリックすると、作成済みアプリ一覧画面が開きます。

メニューが隠れている場合は、左上の三本線アイコン（≡）をクリックして開いてください。

左メニューから「アプリ」を選択した画面

① アプリがまだない場合は、右上の「＋ アプリを作成」をクリックします。② 既存アプリがある場合、プランが「Pay Per Use（従量課金）」になっていることを確認します。

「＋ アプリを作成」をクリックすると、アプリ作成のポップアップが表示されます。

プランが「Free」になっていると記事投稿エンドポイントが利用できません。Pay Per Use に移行してください。

アプリ一覧画面で「＋ アプリを作成」をクリックした状態

①「アプリケーション名」に任意の名前を入力します。②「プロジェクトアクセス」の環境を「Production」に変更してから、右下の「作成」をクリックします。

APIキーやトークンが表示される完了画面、またはアプリ詳細画面に遷移します。

エラー表示に従って名前と設定項目を確認してください。

作成したアプリの詳細画面を開いた状態

① 右上の「設定（歯車マーク）」をクリックしてユーザー認証設定に進みます。② APIキーやトークンを再確認したい場合は「Keys & Tokens」タブをクリックします。

ユーザー認証（OAuth 2.0 / 1.0a）の設定画面が表示されます。

「設定」ボタンが見当たらない場合は、画面を下にスクロールして「User authentication settings」の「Set up」を探してください。

ユーザー認証設定（User authentication settings）の編集画面

①「コールバックURI / リダイレクトURL」に「http://localhost:8080/callback」を入力します（※https ではなく http であることに注意）。②「ウェブサイトURL」にご自身のXプロフィールURLを入力し、右下の「変更を保存する」をクリックします。

設定が保存され、OAuth 2.0 の Client ID と Client Secret が画面に表示されます。

「App permissions」は必ず【Read and write（読み取りと書き込み）】を選択してください。「Read」のみだと記事下書きが投稿できません。

認証設定を保存した直後、または「Keys & Tokens」の OAuth 2.0 欄

「OAuth 2.0 キー」に表示される①「クライアントID」と②「クライアントシークレット」をコピーして安全に控えます。※シークレットは二度と表示されません！

控えたキーを使って、自分のPC端末のターミナルで npx -y @xdevplatform/xurl auth oauth2 --app xapi を実行します。

もしシークレットを紛失した場合は、右側の「再生成（Regenerate）」ボタンを押せば新しく発行できます。

配布ZIPを展開し、VS Code の「フォルダを開く」で x_article_workspace を開いた状態

① 左上のフォルダ名が「x_article_workspace」になっていることを確認し、② ファイル一覧から「はじめに.md」をクリックして、③ 右側に本文を表示させます。

フォルダ内のスキルやスクリプト一覧が左側に並び、ファイルの中身が右側に開きます。

上部に「制限モード」のバナーが出た場合は、自分が入手元と内容を確認した配布物に限り「信頼する」を選択してください（判断できなければ配布元に確認）。※この画面はファイルを開けた段階の画面例であり、まだAIやスクリプトは動かしていません。またターミナルやClaude対話欄はこの画面には写っていません。色やレイアウトはお使いのOS・テーマによって異なる場合があります。