GitHub Codespaces
GitHub Codespacesは、長期プロジェクトであれ、プルリクエストのレビューのような短期的なタスクであれ、あらゆるアクティビティに対応するクラウドベースの開発環境を提供します。これらの環境はVisual Studio Codeまたはブラウザベースのエディターから利用できます。
環境
環境は、GitHub Codespacesの「バックエンド」側です。ソフトウェア開発に関連するすべての計算処理 (コンパイル、デバッグ、復元など) が行われる場所です。新しいプロジェクトでの作業、新しいタスクの開始、またはPRのレビューが必要な場合は、クラウドホスト型の環境を起動するだけで、GitHub Codespacesがその環境を正しく構成します。ソースコード、ランタイム、コンパイラ、デバッガー、エディター、カスタムDotfile構成、関連するエディター拡張機能など、プロジェクトでの作業に必要なすべてを自動的に構成します。
カスタマイズ
GitHub Codespacesはプロジェクトごとに完全にカスタマイズ可能です。これは、VS Codeの開発コンテナー開発と同様に、プロジェクトのリポジトリにdevcontainer.jsonファイルを含めることで実現されます。
カスタマイズの例:
- 使用するLinuxベースのオペレーティングシステムを設定します。
- さまざまなツール、ランタイム、フレームワークを自動的にインストールします。
- 一般的に使用されるポートを転送します。
- 環境変数を設定します。
- エディター設定を構成し、推奨される拡張機能をインストールします。
コードスペース固有のdevcontainer.json設定については、Codespacesの構成ドキュメントを参照してください。
ユーザーごとのDotfile構成
Dotfileは、ファイル名がドット (.) で始まるファイルです。通常、アプリケーションの構成情報が含まれており、ターミナル、エディター、ソース管理、その他さまざまなツールの動作を制御できます。.bashrc、.gitignore、.editorconfigは、開発者が一般的に使用するDotfileの例です。
コードスペースの作成時に、Dotfileを含むGitHubリポジトリ、ファイルのターゲット場所、およびインストールコマンドを指定できます。
コードスペースにDotfile構成を追加する方法を学ぶには、Codespacesのパーソナライズドキュメントを参照してください。
はじめに
GitHub Codespacesのクライアント両方について、はじめにのトピックがあります。これらにより、GitHub Codespacesへのサインイン、最初のコードスペースの作成、およびお好みのクライアントでの接続を迅速に行うことができます。
- VS CodeでのCodespaces - GitHub Codespaces拡張機能を使用して、環境に接続し作業します。
- ブラウザでのCodespaces - ブラウザベースのエディターを介してコードスペースに接続します。
拡張機能作成者
VS Code拡張機能APIは、リモート実行のほとんどの実装の詳細を隠蔽しているため、多くの拡張機能はGitHub Codespaces環境で変更なしで動作します。ただし、すべての機能が期待どおりに動作することを確認するために、コードスペースで拡張機能をテストすることをお勧めします。詳細については、リモート開発とGitHub Codespacesのサポートに関する記事を参照してください。
ブラウザベースのエディター
ブラウザで完結する、無料の軽量なVisual Studio Codeエクスペリエンスも利用できます。Webベースのエディターでは、GitHubのリポジトリを安全かつ迅速に閲覧し、軽量なコード変更を行うことができます。エディターで任意のリポジトリ、フォーク、プルリクエストを開くことができ、検索やシンタックスハイライトなど、VS Codeの多くの機能を備えています。コードを実行またはデバッグしたい場合は、クラウドホスト型環境またはVS Codeデスクトップに切り替えることができます。
このブラウザベースのエディターにアクセスするには、github.comの自分のリポジトリにアクセスし、. (ピリオドキー) を押すか、リポジトリのURLをgithub.comをgithub.devに置き換えてgithub.dev/org/repoに変更します。
制限事項: ブラウザをシークレットモードで実行している場合や、広告ブロッカーを有効にしている場合、Webベースのエディターを使用できないことがあります。
注: このエディターは現在テクニカルプレビュー版です。今すぐ試して、https://github.co/browser-editor-feedbackでフィードバックを提供できます。
既知の制限と対応
Codespaces、特にWeb上のVS Codeを使用する際、留意すべきいくつかの制限があります。これらの制限の一部には、一貫した開発エクスペリエンスを提供するための回避策や対応策が用意されています。
いくつかの問題 (特にキーボードショートカット、またはデスクトップ向けに回避策が示されているもの) については、CodespaceをプログレッシブWebアプリケーション (PWA) としてインストールして使用できます。
| 問題 | 理由 | 回避策 |
|---|---|---|
| FirefoxではCtrl+Shift+Pでコマンドパレットが起動しません。 | FirefoxではCtrl+Shift+Pが予約されています。 | F1を使用してコマンドパレットを起動します。 |
| (デバッグ用の) 特定のデフォルトのキーボードショートカットがWebでは異なります。 | ブラウザがそれらのキーボードショートカットに対してすでにアクションを登録している可能性があるため、Web版VS Codeのデフォルトを調整しています。 | 調整されたデフォルトを使用してください。デバッグアクションの上にツールチップとして表示されます。
|
| デバッグのためのF11は、WebまたはデスクトップのmacOSでは動作しません。 | これは既知の、ブラウザ固有ではない制限です。詳細については、issue #5102を参照してください。 | macOSでF11によるデスクトップ表示を無効にします。
|
| WebではCtrl+Nによる新規ファイル作成は動作しません。 | Ctrl+Nは代わりに新しいウィンドウを開きます。 | デスクトップではCtrl+Nによる新規ファイル作成は動作します。 |
| WebではCtrl+Wによるエディター閉じは動作しません。 | ブラウザではCtrl+Wは現在のタブを閉じます。 | デスクトップではCtrl+Wは動作します。 |
| Ctrl+Shift+Bはブラウザでお気に入りバーを切り替えません。 | Codespacesがこれをオーバーライドし、コマンドパレットの「ビルド」メニューにリダイレクトします。 | 現在、回避策はありません。 |
| VS CodeからCodespaceへのファイルのドラッグアンドドロップ (およびその逆) は動作しません。 | 詳細については、issue #115535を参照してください。 | いくつかのオプションがあります。
|
| WebではAngularアプリのデバッグはサポートされていません。 | セキュリティ上の理由から、ブラウザで実行されているコードは、デバッグモードで別のブラウザインスタンスを起動できません。 | いくつかのオプションがあります。
|
| 拡張子のないファイルをブラウザからダウンロードすると、自動的に「.txt」が追加されます。 | これはChromeとEdgeの動作です。 | 詳細と将来の潜在的な解決策については、issue #118436を参照してください。 |
| リモート (Codespacesを含む) からファイルをダウンロードすると、実行可能ビットなどの属性が削除されます。 | 詳細と将来の潜在的な解決策については、issue #112099を参照してください。 | 現在、回避策はありません。 |
Codespaceから特定のフォルダーをダウンロードしようとすると、「Your_codespace_name はシステムファイルが含まれているため、このフォルダーを開けません」というプロンプトが表示されることがあります。 |
ユーザーエージェントは、機密ディレクトリに対する制限のレベルを自由に課すことができます。詳細については、この仕様とChromiumのブロックリストを参照してください。 | 仕様およびブロックリスト以外の追加の回避策はありません。 |
WebでCodespaceから転送されたポートにアクセスするために、手動でhttps://:forwarded_portにアクセスしても動作しません。 |
これは、Codespacesがポート転送を処理し、Web用の正しいURLを生成する方法に基づいています。 | ポート転送通知からリンクをクリックしてアプリを開くか、ポートビューの地球アイコンをクリックしてください。どちらも正しく生成されたリンクを提供します。詳細については、Codespacesのドキュメントを参照してください。 |
一部の拡張機能はWebで異なる動作をします。
| 拡張機能 | 問題 / 理由 | 回避策 |
|---|---|---|
| ブラウザのショートカットと重複するキーボードショートカットを持つ拡張機能。たとえば、更新にCtrl+Rを使用するGit Graph。 | キーボードショートカットが既存のブラウザショートカットと重複する場合があります。たとえば、SafariではCtrl+Rがウィンドウを更新します。 | キーボードショートカットを最大限に活用するには、WebベースではなくデスクトップベースのCodespaceを使用できます。ブラウザによって動作が異なる場合もあります (ChromeではGit Graphを更新できます)。 |
| 言語パック。たとえば、Visual Studio Code用の日本語言語パック。 | 言語パック拡張機能は、現在WebベースのCodespacesではサポートされていません。 | デスクトップベースのCodespaceを使用して、言語パックを使用し、表示言語を構成できます。 |
| Bracket Pair Colorizer 2 | 簡単に修正できないインストール場所の依存関係があるため、ブラウザでは動作しません。 | Bracket Pair Colorizerを使用します。 |
| Debugger for Firefoxなどのブラウザデバッガー。 | UI/デスクトップ拡張ホストを必要とする拡張機能は、ブラウザでは読み込まれません。 | これらの拡張機能は、ローカルのVS Code (Codespacesに接続されていない) で使用できます。または、アプリがCodespaceから実行されている間は、Chrome DevToolsのような代替手段を使用して要素を検査し、ブレークポイントを設定できます。 |
| ブラウザを開くための拡張機能。たとえば、open in browser。 | UI/デスクトップ拡張ホストを必要とする拡張機能は、ブラウザでは読み込まれません。 | 可能な場合は、Live Serverのような代替拡張機能を使用してください。 |
| Project Manager | Project Managerはカスタムのprojects.jsonファイルの同期に依存しますが、これは現在サポートされていません。 |
これらのオプションではカスタムファイルの同期が不要なため、デスクトップCodespacesまたはローカルVS Codeで拡張機能を使用してプロジェクトを保存および管理できます。 |
| Protractor Test RunnerやBrowser Previewなど、Chromeに依存する拡張機能。 | CodespaceにはChromeは含まれていません。 | 代替のエクスペリエンスを探すか、ローカルのVS Code (Codespacesに接続されていない) でプロジェクトにこれらの拡張機能を使用できます。 |
| Flutter (およびFlutter開発全般) | Flutterワークフローのいくつかの側面は、DockerコンテナとCodespacesの性質上、制限されています。
|
Flutter開発にはローカルのVS Codeを使用できます。 |
| LaTeX Workshop | この拡張機能は、LaTeXオーサリングを支援するために3種類の機能を提供します: 1) 一般的なコマンドを表示する一連のビュー、2) PDFプレビューア、3) スニペットやIntelliSenseなどの言語機能。この拡張機能はかなり機能が豊富ですが、いくつかのWebまたはセキュリティ上の制限があります。 | 以下の回避策は、ビューおよびプレビューア機能領域の制限に対処します。
|
| Git Graph | Codespacesでは、一部のGit Graph Webビュー機能が制限される場合があります。たとえば、コミットからのファイルとGit Graph Webビューを切り替えると、Webビューが空白になることがあります。 | VS Codeデスクトップ内でGit Graphを完全に利用できます。 |
| その他のリモート開発拡張機能 (WSL、開発コンテナー、Remote - SSH) は、Codespaceにはインストールできません。 | Codespaceはすでにリモートコンテキストです。 | 別のリモートコンテキスト (WSLやリモートSSHコンピュータなど) で実行したい場合は、VS Codeデスクトップ (Codespaceに接続されていない) を開き、他のリモート拡張機能のいずれかを起動してください。カスタムの開発コンテナを使用したい場合は、Codespacesと開発コンテナの両方で同じ.devcontainerを使用できます。 |
| My_Favorite_Extension が動作せず、上記にリストされていません。 | リモートコンテキストで機能が期待どおりに動作しない原因となる、いくつかの他の問題があります。 | 場合によっては、別のコマンドを使用して問題を回避できますが、拡張機能の変更が必要な場合もあります。リモート拡張機能のヒントで、一般的なリモートの問題とそれらを解決するためのヒントを確認してください。 |
よくある質問
なぜ拡張機能がブラウザにインストールできないのか
ごく一部の拡張機能には、組み込みの前提条件があるか、デスクトップで実行する必要があります。例えば、拡張機能がデスクトップ上のVS Codeインストールからファイルにアクセスする場合や、デスクトップ環境で実行する必要がある実行ファイルに依存する場合などです。このような拡張機能をブラウザにインストールしようとすると、拡張機能が利用できない旨が通知されます。
注意: このような拡張機能は、デスクトップで実行されているVS CodeからCodespaceに接続している場合でも使用できます。
VS Codeがクリップボードを読み取ることを許可するにはどうすればよいですか？
特定の場合、VS Codeはクリップボードから読み取るときにアクセス許可を求めることがあります。ブラウザの設定 (「サイトのアクセス許可」で検索) またはアドレスバーの右側にあるこのオプションを探すことで、クリップボードへのアクセスを許可できるはずです。
VS Codeにクリップボードへのアクセスを許可すると、操作を再試行できます。
VS Codeが常に新しいタブとウィンドウを開くことを許可するにはどうすればよいですか？
ブラウザは、セキュリティ上の予防措置として、VS Codeが新しいタブやウィンドウを開くのをブロックすることがあります。この場合、VS Codeはブロック動作を検出し、ユーザーに明示的にプロンプトを表示します。ただし、ブラウザのナビゲーションバーのコンテキストメニューからサイト設定を開き、**ポップアップウィンドウ**を許可することで、VS Codeが常に新しいウィンドウやタブを開くことを許可できます。
ブラウザでVS Codeがローカルファイルやフォルダにアクセスすることを許可するにはどうすればよいですか？
ブラウザからVS Codeでローカルファイルやフォルダを開くには、ブラウザがFile System Access APIをサポートしている必要があります。現在、Microsoft EdgeとGoogle Chromeの両方がこのレベルのサポートを提供しています。ブラウザでVS Codeを使用する際にローカルファイルやフォルダにアクセスしたい場合は、これらのいずれかのブラウザに切り替えることをご検討ください。
質問またはフィードバック
ご質問がある場合は、GitHub Codespacesのトラブルシューティングガイドを参照してください。フィードバックを提供したい場合は、GitHub Codespacesのディスカッションで問題を提起できます。