リモート/Devcontainerモードの設定

この章で学べること

SSH接続したリモートサーバーでPlannotatorを使用する
VS Code devcontainerでPlannotatorを設定してアクセスする
WSL（Windows Subsystem for Linux）環境でPlannotatorを使用する
ポートフォワーディングを設定して、ローカルブラウザからリモート環境のPlannotatorにアクセスする

現在の課題

リモートサーバー、devcontainer、またはWSL環境でClaude CodeやOpenCodeを使用しているとき、AIがプランを生成したりコードレビューが必要になると、Plannotatorはリモート環境でブラウザを開こうとします。しかし、そこにはGUI環境がないか、あるいはローカルブラウザでレビュー画面を確認したいという状況があります。

こんなときに使う

リモート/Devcontainerモードが必要な典型的なシナリオ：

シナリオ	説明
SSH接続	SSHでリモート開発サーバーに接続している
Devcontainer	VS Codeでdevcontainerを使って開発している
WSL	WindowsでWSLを使ってLinux開発をしている
クラウド環境	コードがクラウド上のコンテナや仮想マシンで実行されている

コアコンセプト

リモート環境でPlannotatorを使用するには、2つの問題を解決する必要があります：

ポートの固定：リモート環境ではランダムポートを自動選択できません。ポートフォワーディングの設定が必要なためです
ブラウザアクセス：リモート環境にはGUI環境がないため、ローカルマシンのブラウザからアクセスする必要があります

PlannotatorはPLANNOTATOR_REMOTE環境変数を検出すると、自動的に「リモートモード」に切り替わります：

ランダムポートではなく固定ポート（デフォルト19432）を使用
ブラウザの自動起動をスキップ
ターミナルにURLを出力し、ローカルブラウザで手動アクセスできるようにする

🎒 始める前の準備

前提条件

このチュートリアルを始める前に、以下を確認してください：

クイックスタートを完了している
Claude CodeプラグインまたはOpenCodeプラグインのインストールと設定が完了している
SSHまたはdevcontainerの基本的な設定概念を理解している

ステップバイステップ

ステップ1：リモートモードの環境変数を理解する

Plannotatorのリモートモードは3つの環境変数に依存しています：

環境変数	説明	デフォルト値
`PLANNOTATOR_REMOTE`	リモートモードを有効化	未設定（ローカルモード）
`PLANNOTATOR_PORT`	固定ポート番号	ランダム（ローカル）/ 19432（リモート）
`PLANNOTATOR_BROWSER`	カスタムブラウザパス	システムデフォルトブラウザ

なぜ必要か

PLANNOTATOR_REMOTEはPlannotatorに現在がリモート環境であることを伝え、ブラウザを開こうとしないようにします
PLANNOTATOR_PORTは固定ポートを設定し、ポートフォワーディングの設定を容易にします
PLANNOTATOR_BROWSER（オプション）はローカルマシンで使用するブラウザパスを指定します

ステップ2：SSHリモートサーバーでの設定

SSHポートフォワーディングの設定

SSH設定ファイル~/.ssh/configを編集します：

bash

Host your-server
    HostName your-server.com
    User your-username
    LocalForward 9999 localhost:9999

期待される結果：

LocalForward 9999 localhost:9999という行が追加されている
これにより、ローカルの9999ポートへのトラフィックがリモートサーバーの9999ポートに転送されます

リモートサーバーで環境変数を設定

リモートサーバーに接続後、ターミナルで環境変数を設定します：

bash

export PLANNOTATOR_REMOTE=1
export PLANNOTATOR_PORT=9999

なぜ必要か

PLANNOTATOR_REMOTE=1でリモートモードを有効化
PLANNOTATOR_PORT=9999で固定ポート9999を使用（SSH設定のポート番号と一致させる）

設定の永続化

毎回接続するたびに環境変数を手動設定するのが面倒な場合は、シェル設定ファイル（~/.bashrcまたは~/.zshrc）に追加できます：

bash

echo 'export PLANNOTATOR_REMOTE=1' >> ~/.bashrc
echo 'export PLANNOTATOR_PORT=9999' >> ~/.bashrc
source ~/.bashrc

Plannotatorを使用する

これで、リモートサーバー上でClaude CodeやOpenCodeを通常通り使用できます。AIがプランを生成したりコードレビューが必要になると：

bash

# リモートサーバーのターミナルに以下のような情報が出力されます：
[Plannotator] Server running at http://localhost:9999
[Plannotator] Access from your local machine: http://localhost:9999

期待される結果：

ターミナルにPlannotatorのURLが表示される
リモート環境ではブラウザが開かない（正常な動作）

ローカルブラウザでアクセス

ローカルマシンのブラウザで以下を開きます：

http://localhost:9999

期待される結果：

Plannotatorのレビュー画面が正常に表示される
ローカル環境と同様にプランレビューやコードレビューができる

チェックポイント ✅：

[ ] SSHポートフォワーディングが設定されてい��
[ ] 環境変数が設定されている
[ ] リモートサーバーのターミナルにURLが出力される
[ ] ローカルブラウザでレビュー画面にアクセスできる

ステップ3：VS Code Devcontainerでの設定

devcontainerの設定

.devcontainer/devcontainer.jsonファイルを編集します：

json

{
  "name": "Your Devcontainer",
  "image": "mcr.microsoft.com/devcontainers/base:ubuntu",

  "containerEnv": {
    "PLANNOTATOR_REMOTE": "1",
    "PLANNOTATOR_PORT": "9999"
  },

  "forwardPorts": [9999]
}

なぜ必要か

containerEnvでコンテナ内の環境変数を設定
forwardPortsでVS Codeにコンテナポートをローカルに自動転送するよう指示

devcontainerを再ビルドして起動

VS Codeのコマンドパレットを開く（Ctrl+Shift+PまたはCmd+Shift+P）
Dev Containers: Rebuild Containerと入力して実行
コンテナの再ビルドが完了するまで待つ

期待される結果：

VS Codeの右下にポートフォワーディングのステータスが表示される（通常は小さなアイコン）
クリックすると「Port 9999」が転送されていることが確認できる

Plannotatorを使用する

devcontainer内でClaude CodeやOpenCodeを通常通り使用します。AIがプランを生成すると：

bash

# コンテナ内のターミナル出力：
[Plannotator] Server running at http://localhost:9999

期待される結果：

ターミナルにPlannotatorのURLが表示される
コンテナ内ではブラウザが開かない（正常な動作）

ローカルブラウザでアクセス

ローカルマシンのブラウザで以下を開きます：

http://localhost:9999

期待される結果：

Plannotatorのレビュー画面が正常に表示される

チェックポイント ✅：

[ ] devcontainer設定に環境変数とポートフォワーディングが追加されている
[ ] コンテナが再ビルドされている
[ ] VS Codeでポートが転送されていることが表示される
[ ] ローカルブラウザでレビュー画面にアクセスできる

ステップ4：WSL環境での設��

WSL環境の設定はSSH接続と似ていますが、ポートフォワーディングを手動で設定する必要はありません。WSLは自動的にlocalhostトラフィックをWindowsシステムに転送します。

環境変数を設定

WSLターミナルで環境変数を設定します：

bash

export PLANNOTATOR_REMOTE=1
export PLANNOTATOR_PORT=9999

設定の永続化

WSLのシェル設定ファイル（~/.bashrcまたは~/.zshrc）に追加できます：

bash

echo 'export PLANNOTATOR_REMOTE=1' >> ~/.bashrc
echo 'export PLANNOTATOR_PORT=9999' >> ~/.bashrc
source ~/.bashrc

Plannotatorを使用する

WSL内でClaude CodeやOpenCodeを通常通り使用します：

bash

# WSLターミナル出力：
[Plannotator] Server running at http://localhost:9999

期待される結果：

ターミナルにPlannotatorのURLが表示される
WSL内ではブラウザが開かない（正常な動作）

Windowsブラウザでアクセス

Windowsのブラウザで以下を開きます：

http://localhost:9999

期待される結果：

Plannotatorのレビュー画面が正常に表示される

チェックポイント ✅：

[ ] 環境変数が設定されている
[ ] WSLターミナルにURLが出力される
[ ] WindowsブラウザでレビューUIにアクセスできる

よくあるトラブル

ポートが使用中

以下のようなエラーが表示された場合：

Error: bind: EADDRINUSE: address already in use :::9999

解決方法：

ポート番号を変更する：

bash

export PLANNOTATOR_PORT=10000  # 使用されていないポートに変更

または、9999ポートを使用しているプロセスを停止する：
bash
```
lsof -ti:9999 | xargs kill -9
```

SSHポートフォワーディングが機能しない

ローカルブラウザでPlannotatorにアクセスできない場合：

チェックリスト：

[ ] SSH設定ファイルのLocalForwardのポート番号がPLANNOTATOR_PORTと一致している
[ ] SSHを切断して再接続している
[ ] ファイアウォールがポートフォワーディングをブロックしていない

Devcontainerのポートフォワーディングが機能しない

VS Codeが自動的にポートを転送しない場合：

解決方法：

.devcontainer/devcontainer.jsonのforwardPorts設定を確認
手動でポートを転送する：
- VS Codeのコマンドパレットを開く
- Forward a Portを実行
- ポート番号9999を入力

WSLでアクセスできない

WindowsブラウザからWSL内のPlannotatorにアクセスできない場合：

解決方法：

環境変数が正しく設定されているか確認
localhostの代わりに0.0.0.0を試す（WSLのバージョンとネットワーク設定による）
Windowsファイアウォールの設定を確認

この章のまとめ

リモート/Devcontainerモードの重要ポイント：

ポイント	説明
環境変数	`PLANNOTATOR_REMOTE=1`でリモートモードを有効化
固定ポート	`PLANNOTATOR_PORT`で固定ポートを設定（デフォルト19432）
ポートフォワーディング	SSH/Devcontainerはポートフォワーディングの設定が必要、WSLは自動転送
手動アクセス	リモートモードではブラウザが自動起動しないため、ローカルブラウザで手動アクセス
永続化	環境変数を設定ファイルに追加して繰り返し設定を回避

次の章の予告

次の章では**環境変数の詳細設定**を学びます。
学べる内容：
利用可能なすべてのPlannotator環境変数
各環境変数の役割とデフォルト値
シナリオに応じた環境変数の組み合わせ方

付録：ソースコード参照

クリックしてソースコードの場所を表示

更新日：2026-01-24

機能	ファイルパス	行番号
リモートセッション検出	`packages/server/remote.ts`	16-29
サーバーポート取得	`packages/server/remote.ts`	34-49
サーバー起動ロジック	`packages/server/index.ts`	91-97
ブラウザ起動ロジック	`packages/server/browser.ts`	45-74
WSL検出	`packages/server/browser.ts`	11-34

主要な定数：

DEFAULT_REMOTE_PORT = 19432：リモートモードのデフォルトポート番号

主要な関数：

isRemoteSession()：リモートセッションで実行されているかを検出
getServerPort()：サーバーポートを取得（リモートは固定ポート、ローカルはランダムポート）
openBrowser(url)：クロスプラットフォームでブラウザを起動

5分でクイックスタート

AIプランとコードのレビュー

チームコラボ+ノート保存

問題が発生したら

リモート/Devcontainerモードの設定

この章で学べること

現在の課題

こんなときに使う

コアコンセプト

🎒 始める前の準備

ステップバイステップ

ステップ1：リモートモードの環境変数を理解する

ステップ2：SSHリモートサーバーでの設定

SSHポートフォワーディングの設定

リモートサーバーで環境変数を設定

Plannotatorを使用する

ローカルブラウザでアクセス

ステップ3：VS Code Devcontainerでの設定

devcontainerの設定

devcontainerを再ビルドして起動

Plannotatorを使用する

ローカルブラウザでアクセス

ステップ4：WSL環境での設��

環境変数を設定

Plannotatorを使用する

Windowsブラウザでアクセス

よくあるトラブル

ポートが使用中

SSHポートフォワーディングが機能しない

Devcontainerのポートフォワーディングが機能しない

WSLでアクセスできない

この章のまとめ

次の章の予告

付録：ソースコード参照

リモート/Devcontainerモードの設定 ​

この章で学べること ​

現在の課題 ​

こんなときに使う ​

コアコンセプト ​

🎒 始める前の準備 ​

ステップバイステップ ​

ステップ1：リモートモードの環境変数を理解する ​

ステップ2：SSHリモートサーバーでの設定 ​

SSHポートフォワーディングの設定 ​

リモートサーバーで環境変数を設定 ​

Plannotatorを使用する ​

ローカルブラウザでアクセス ​

ステップ3：VS Code Devcontainerでの設定 ​

devcontainerの設定 ​

devcontainerを再ビルドして起動 ​

Plannotatorを使用する ​

ローカルブラウザでアクセス ​

ステップ4：WSL環境での設�� ​

環境変数を設定 ​

Plannotatorを使用する ​

Windowsブラウザでアクセス ​

よくあるトラブル ​

ポートが使用中 ​

SSHポートフォワーディングが機能しない ​

Devcontainerのポートフォワーディングが機能しない ​

WSLでアクセスできない ​

この章のまとめ ​

次の章の予告 ​

付録：ソースコード参照 ​

リモート/Devcontainerモードの設定

この章で学べること

現在の課題

こんなときに使う

コアコンセプト

🎒 始める前の準備

ステップバイステップ

ステップ1：リモートモードの環境変数を理解する

ステップ2：SSHリモートサーバーでの設定

SSHポートフォワーディングの設定

リモートサーバーで環境変数を設定

Plannotatorを使用する

ローカルブラウザでアクセス

ステップ3：VS Code Devcontainerでの設定

devcontainerの設定

devcontainerを再ビルドして起動

Plannotatorを使用する

ローカルブラウザでアクセス

ステップ4：WSL環境での設��

環境変数を設定

Plannotatorを使用する

Windowsブラウザでアクセス

よくあるトラブル

ポートが使用中

SSHポートフォワーディングが機能しない

Devcontainerのポートフォワーディングが機能しない

WSLでアクセスできない

この章のまとめ

次の章の予告

付録：ソースコード参照