codespace の迅速な作成と再開を容易にする

リンクを追加して、codespace を作成するための選択肢が事前に構成されたページにユーザーが直接移動できるようにすることができます。 または、[codespace の再開] ページにリンクすることもできます。

この記事で

概要

codespace 作成ページへのリンクを提供することで、ユーザーがリポジトリの作業を codespace で簡単に行えるようにすることができます。 これを行う場所の 1 つが、リポジトリの README ファイル内です。 たとえば、[GitHub Codespaces で開く] バッジへのリンクを追加できます。

README ページの [GitHub Codespaces で開く] バッジのスクリーンショット。

codespace 作成ページへのリンクには、ユーザーが適切な codespace を作成するのに役立つ特定の構成オプションを含めることができます。 リンクを使用するユーザーは、codespace を作成する前に、必要に応じてさまざまなオプションを選ぶことができます。 使用できるオプションについては、「リポジトリの codespace を作成する」をご覧ください。

または、[codespace の再開] ページにリンクすることもできます。これにより、ユーザーは最近使った codespace を簡単に開くことができます。

リポジトリの codespace 作成ページへのリンクの作成

これらの URL を使用して、リポジトリの codespace 作成ページにリンクできます。 大文字で書かれたテキストを置き換えてください。

  • リポジトリの既定のブランチの codespace を作成する: https://codespaces.new/OWNER/REPO-NAME
  • リポジトリの特定のブランチの codespace を作成する: https://codespaces.new/OWNER/REPO-NAME/tree/BRANCH-NAME
  • pull request のトピック ブランチに対してコードスペースを作成する: https://codespaces.new/OWNER/REPO-NAME/pull/PR-SHA

その他のオプションの構成

[ディープ リンクを共有する] オプションを使用して、codespace の他のオプションを構成し、カスタム URL を作成してから、[GitHub Codespaces で開く] バッジの Markdown または HTML スニペットをコピーできます。

  1. GitHub で、リポジトリのメイン ページに移動します。

  2. リポジトリの既定のブランチ以外のブランチのリンクを作成する場合は、リポジトリ名の下で、現在のブランチの名前のラベルが付いたボタンをクリックします。 ドロップダウン メニューで、リンクを作成するブランチを選びます。

    さまざまなブランチが一覧表示されているブランチのドロップダウン メニューのスクリーンショット。 ブランチ アイコンと [trunk] というラベルが付いたドロップダウン メニューがオレンジ色の枠線で囲まれています。

  3.        **<svg version="1.1" width="16" height="16" viewBox="0 0 16 16" class="octicon octicon-code" aria-label="code" role="img"><path d="m11.28 3.22 4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L13.94 8l-3.72-3.72a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215Zm-6.56 0a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L2.06 8l3.72 3.72a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L.47 8.53a.75.75 0 0 1 0-1.06Z"></path></svg> [Code]** ボタンをクリックしてから、**[Codespaces]** タブをクリックします。

  4. [codespace の構成の共有] ウィンドウを開くには、[codespaces] タブの右上にある を選び、[ディープ リンクの共有] をクリックします。

    [Codespaces] タブのオプション ドロップダウンのスクリーンショット。[ディープ リンクの共有] オプションがオレンジ色の枠線で強調表示されています。

  5. 必要に応じて、すばやく最近使った codespace を再開するか新しいものを作成できるページにユーザーが移動できるようにするには、 [クイック スタート] を選びます。 詳しくは、「codespace を再開するためのリンクの作成」をご覧ください。

  6. 必要に応じて、開発コンテナーの構成を指定するには、 [構成ファイル] を選び、ドロップダウン メニューを使用して構成を選びます。 構成を指定しない場合は、リポジトリの既定の構成が使用されます。 詳しくは、「開発コンテナーの概要」をご覧ください。

  7. [スニペット] の下で、作成した URL をコピーするか、[GitHub Codespaces で開く] バッジを含む Markdown または HTML スニペットをコピーできます。 URL またはスニペットをコピーするには、 [URL] 、 [HTML] 、 [Markdown] のいずれかのタブを選び、 をクリックします。

    [codespace 構成の共有] ウィンドウのスクリーンショット。 "新しい codespace" の URL の横に、重なった 2 つの四角形のアイコンがオレンジ色の枠線で囲まれています。

URL で指定したリポジトリ、ブランチ、その他のオプションに一致する最新の codespace を再開するためのページへのリンクを作成できます。

この記事の前のセクションに示した URL のような ?quickstart=1 の URL に codespaces.new を追加します。 これにより、[codespace の再開] ページを表示する URL が生成されます。

たとえば、https://codespaces.new/octo-org/octo-repo?quickstart=1 という URL により、octo-org/octo-repo リポジトリの既定ブランチの最新 codespace を再開できるページが開きます。

[この codespace を再開する] ボタンと [新しく作成する] ボタンが表示されている [codespace の再開] ページのスクリーンショット。

メモ

* codespaces.new の URL にクエリ文字列が既に含まれている場合は、クエリ文字列の末尾に &quickstart=1 を追加します。

  • この種類の URL は、GitHub Codespaces の既定のエディターとして設定されていない場合でも、常に VS Code Web クライアントで codespace を開きます。

一致する codespace が見つからない場合、ページは [codespace の作成] というタイトルになり、一致するパラメーターを持つ新しい codespace を作成するためのボタンが表示されます。

この種類の URL は、数回クリックするだけで codespace を作成するか codespace を再開する方法をユーザーに提供できるため、たとえばリポジトリの README で役立ちます。

[GitHub Codespaces で開く] バッジの作成

ヒント

「Share a deep link」オプションを使用すると、「Open in GitHub Codespaces」バッジとカスタムURLを含むMarkdownまたはHTMLのスニペットを作成できます。 詳しくは、「その他のオプションの構成」をご覧ください。

  1. 前のセクションで説明したように、codespace 作成ページまたは [codespace の再開] ページの URL を取得します。

  2. たとえば、リポジトリの README.md ファイルに次の Markdown を追加します。

    Markdown
    [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](URL)

    次に例を示します。

    [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/github/docs)

    Markdown の例は次のようにレンダリングされます。

           [
       ![GitHub Codespaces で開きます。](https://github.com/codespaces/badge.svg)](https://codespaces.new/github/docs) <!-- markdownlint-disable-line GHD033 -->