{"meta":{"title":"GitHub Codespaces クライアントのトラブルシューティング","intro":"この記事では、GitHub Codespaces に使用するクライアントで発生する可能性がある issue のトラブルシューティング情報を提供します。","product":"Codespaces","breadcrumbs":[{"href":"/ja/codespaces","title":"Codespaces"},{"href":"/ja/codespaces/troubleshooting","title":"トラブルシューティング"},{"href":"/ja/codespaces/troubleshooting/troubleshooting-github-codespaces-clients","title":"Codespaces クライアント"}],"documentType":"article"},"body":"# GitHub Codespaces クライアントのトラブルシューティング\n\nこの記事では、GitHub Codespaces に使用するクライアントで発生する可能性がある issue のトラブルシューティング情報を提供します。\n\n\n\n\n\n## VS Code のトラブルシューティング\n\nVS Code デスクトップ アプリケーションで codespace を開くと、ローカル ワークスペースでの作業と比べていくつかの違いに気付くかもしれませんが、エクスペリエンスは似ているはずです。\n\n問題が発生した場合、[`microsoft/vscode`](https://github.com/microsoft/vscode/issues?q=is%3Aissue+is%3Aopen+codespaces) リポジトリの VS Code エクスペリエンスを使用して、既知の issue を確認し、新しい issue をログすることができます。\n\n### Visual Studio Code Insiders\n\nVisual Studio Code Insiders は、最も頻繁にリリースが行われる VS Code です。 最新の機能とバグ修正がすべて含まれていますが、ビルドが壊れる原因になる新しい問題が含まれる場合もあります。\n\nInsiders ビルドを使用していて正しくない動作に気づいた場合は、Visual Studio Code Stable に切り替えてもう一度やり直してみることをお勧めします。\n\nVisual Studio Code Stable に切り替えるには、Visual Studio Code Insiders アプリケーションを閉じて、Visual Studio Code Stable アプリケーションを開き、codespace をもう一度開きます。\n\nVisual Studio Code Stable で問題が修正されない場合、既知の issue を確認し、必要に応じて、VS Code エクスペリエンスに関する新しい issue を[`microsoft/vscode`](https://github.com/microsoft/vscode/issues?q=is%3Aissue+is%3Aopen+codespaces) リポジトリにログします。\n\n### 簡易ブラウザーのトラブルシューティング\n\ncodespace で Web アプリケーションを開始したら、VS Code に埋め込まれた簡易ブラウザーで実行中のアプリケーションをプレビューできます。 一部のプロジェクトでは、アプリケーションの起動時に、エディターの \\[簡易ブラウザー] タブでアプリケーションが自動的に開きます。 これは、codespace の `devcontainer.json` 構成ファイルで、アプリケーションが実行するポートの `onAutoForward` プロパティが `openPreview` に設定されている場合に発生します。\n\n```json\n\"portsAttributes\": {\n \"3000\": {\n \"label\": \"Application\",\n \"onAutoForward\": \"openPreview\"\n }\n}\n```\n\n\\[簡易ブラウザー] タブが自動的に開かない場合は、簡易ブラウザーを手動で開いてアプリケーションを表示できます。\n\n1. VS Code で、 **\\[ポート]** タブをクリックします。\n2. ポートを右クリックし、 **\\[エディターでプレビュー]** をクリックします。\n\n ![VS Code の \\[ポート\\] タブのポップアップ メニューのスクリーンショット。メニュー エントリ \\[エディターでプレビュー\\] が濃いオレンジ色の枠線で強調されています。](/assets/images/help/codespaces/preview-in-editor-vscode.png)\n\n#### 簡易ブラウザー タブが自動的に開かない\n\n`devcontainer.json` 構成ファイルでポートに `\"onAutoForward\": \"openPreview\"` が指定されていても、アプリケーションの起動時に簡易ブラウザーが自動的に開かない場合は、構成で指定されたポートでアプリケーションが開始されていることを確認します。 目的のポートがビジー状態の場合、アプリケーションは別のポートで起動する可能性があります。\n\n`devcontainer.json` で指定されたポート構成を実装するために、GitHub Codespaces は、codespace の作成時に VS Code の `settings.json` ファイルに構成を書き込みます。 構成が codespace で `settings.json` に正しく書き込まれたことを確認できます。\n\n1. codespace のターミナルで、次のコマンドを入力します。\n\n ```bash copy\n cat ~/.vscode-remote/data/Machine/settings.json\n ```\n\n2. `settings.json` ファイルに、次のような行が含まれていることを確認します。\n\n ```json\n \"remote.portsAttributes\": {\n \"3000\": {\n \"label\": \"Application\",\n \"onAutoForward\": \"openPreview\"\n }\n }\n ```\n\n`settings.json` ファイルにこれらの設定が含まれていない場合は、ドット ファイルが有効になっているかどうか、およびドット ファイル内の構成で `settings.json` ファイルが上書きされているかどうかを確認します。 詳しくは、「[アカウントGitHub Codespaces のカスタマイズ](/ja/codespaces/setting-your-user-preferences/personalizing-github-codespaces-for-your-account#dotfiles)」をご覧ください。\n\n#### アプリケーションが読み込まれない\n\n\\[簡易ブラウザー] タブが開き、実行中のアプリケーションではなくエラー ページ アイコンまたは空白ページが表示されることがあります。 これは、読み込む Web アプリケーションに、サイトのページが埋め込まれるドメインを制限するコンテンツ セキュリティ ポリシー (CSP) が含まれている場合に発生する可能性があります。 詳細については、MDN Web サイトの「[CSP: frame-ancestors](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors)」を参照してください。\n\nアプリケーションの `frame-ancestors` セキュリティ ポリシーをローカルで変更して、簡易ブラウザーにアプリケーションを表示できる場合があります。 または、`frame-ancestors` ポリシーによって問題が発生している場合は、簡易ブラウザーではなく、通常のブラウザー タブで開いてアプリケーションを表示する必要があります。 これを行うには、VS Code の **\\[ポート]** タブをクリックし、ポートを右クリックして、 **\\[ブラウザーで開く]** をクリックします。\n\n
"}