GitHub Codespaces 用のテンプレートリポジトリを設定する

はじめに

テンプレートリポジトリを設定することで、ユーザーが GitHub Codespaces でフレームワーク、ライブラリ、またはその他のプロジェクトを開始するのを手助けできます。ユーザーは、クラウドベースの開発環境でテンプレートファイルの操作をすぐに開始でき、リポジトリの複製や、ツールなどの依存関係のインストールについて気にする必要がありません。一部の構成で、重要なファイルが既に編集用に開かれ、VS Code Web エディター内のプレビューブラウザータブでアプリケーションが既に実行されている codespace でユーザーを設定できるようになります。

テンプレートリポジトリへの読み取りアクセス権があればだれでも、GitHub のリポジトリのページから codespace を作成できます。既存のリポジトリをテンプレートに変換でき、ユーザーがテンプレートリポジトリから codespace を作成できるように設定を変更する必要はありません。リポジトリをテンプレートに変換する方法について詳しくは、「テンプレートリポジトリを作成する」をご覧ください。

https://github.com/codespaces/new?template_repository=OWNER/TEMPLATE-REPO の形式でリンクを提供して、ユーザーをテンプレートの [新しい codespace の作成] ページに直接誘導できます。

[基本 React Web サイト] という名称のテンプレートレポジトリの [新しい codespace の作成] ページのスクリーンショット。[このテンプレートを使用する] ボタンがあります。

たとえば、フレームワークの使用を開始するためのチュートリアル内で、このリンクを提供できます。リンク内の OWNER/TEMPLATE-REPO をお使いのテンプレートリポジトリの名前 (例: monalisa/octo-template) に置き換えます。

他のユーザーがテンプレートから codespace を作成すると、テンプレートリポジトリの内容がユーザーの codespace に複製されます。ユーザーの準備ができたら、GitHub 上で、その個人アカウントに属する新しいリポジトリに作業内容を公開できるようになります。 codespace の使用料金は、それを作成したユーザーに課金されます。詳しくは、「テンプレートから codespace を作成する」を参照してください。

テンプレートについて説明する

テンプレートリポジトリ用の README がない場合は作成して、テンプレートの目的と使用開始方法について説明します。詳しくは、「READMEについて」を参照してください。

テンプレートの簡単な説明は、https://github.com/codespaces/new?template_repository=OWNER/TEMPLATE-REPO リンクをクリックしたユーザーに示される [新しい codespace の作成] ページに表示されます。この説明は、リポジトリの作成時に設定できる [説明] フィールドから取得されます。この説明はいつでも編集できます。リポジトリのページに移動し、ページの右側にある [情報] セクションの横にあるをクリックします。

スターターファイルを追加する

ユーザーがライブラリ、フレームワーク、またはその他のテクノロジをすぐに使い始めることができるように、通常は、定型コードを含むスターターファイルがテンプレートリポジトリに用意されています。

含めるファイルの種類に関するガイダンスについては、次のように、GitHub Codespaces の公式 GitHub テンプレートに含まれるスターターファイルを確認できます。

github.com/codespaces の [Codespaces] ページに移動します。 1. テンプレートの完全な一覧を表示するには、[クイックスタートテンプレートの探索] で [すべて表示] をクリックします。
テンプレート用のファイルが含まれるテンプレートリポジトリを表示するには、テンプレートの名前をクリックします。

開発コンテナーを構成する

開発コンテナー構成ファイルをテンプレートリポジトリに追加して、GitHub Codespaces でテンプレートを使うユーザーの開発環境をカスタマイズできます。 Visual Studio Code で定義済みの構成設定の一覧から選ぶか、独自の devcontainer.json ファイルを記述してカスタム構成を作成できます。構成ファイルを追加しない場合は、既定のコンテナーイメージが使用されます。詳細については、「開発コンテナーの概要」および「開発コンテナー構成のリポジトリへの追加」を参照してください。

注: ユーザーがテンプレートリポジトリで [このテンプレートを使用] ボタンから codespace を作成する場合、構成を選ぶことはできません。 codespace は、リポジトリのルートにある .devcontainer/devcontainer.json または .devcontainer.json で定義されている既定の構成に基づいて構築されます。

テンプレートを使ってユーザーに最適なエクスペリエンスを提供するには、ツールとカスタマイズを使って開発コンテナーを構成する必要があります。たとえば、devcontainer.json ファイル内で、次のようにします。

openFiles プロパティを使って、テンプレートから codespace を作成するときに VS Code Web クライアントで自動的に開くファイルの一覧を定義できます。
テンプレートに Web アプリケーションのファイルを含めると、アプリケーションが、ユーザーの codespace で自動的に実行されるようにできます。これを行うには、postAttachCommand プロパティを使って、VS Code Web クライアントが codespace に接続するとすぐにローカルサーバーでアプリケーションを起動するスクリプトを実行し、ポートの onAutoForward プロパティを openPreview に設定して、VS Code Web クライアントに埋め込まれたシンプルなブラウザー内に、そのポートで実行されているアプリケーションを表示します。

React テンプレートの次の構成設定によって、ユーザーのエディターで app.js ファイルが開き、npm start (package.json ファイルで定義) を実行してローカルサーバーを起動し、codespace のプレビューブラウザータブにポート 3000 を転送します。

{
    "postAttachCommand": {
      "server": "npm start"
    },

    "portsAttributes": {
      "3000": {
        "label": "Application",
        "onAutoForward": "openPreview"
      }
    },

    "customizations": {
      "codespaces": {
        "openFiles": ["src/App.js"]
      }
    }
}

詳しくは、「リポジトリの codespace にあるファイルを自動的に開く」と、開発コンテナーの Web サイトの開発コンテナーの仕様をご覧ください。

GitHub Codespaces 用のテンプレート リポジトリを設定する

この記事の内容

はじめに

テンプレートについて説明する

スターター ファイルを追加する

開発コンテナーを構成する

GitHub Codespaces 用のテンプレートリポジトリを設定する

スターターファイルを追加する