# GitHub との連携

{% hint style="info" %}
ここでは、Public 指定されたリポジトリを対象として解説を進めます。Private 指定のリポジトリに接続する場合には、対応する Monaca プランに加入する必要があります。詳細は、 [料金プラン ](https://ja.monaca.io/pricing.html)をご確認ください。
{% endhint %}

## セットアップ

この項目では、Monaca アカウントと GitHub アカウントをリンクする方法を解説します。

1\. [GitHubアカウント連携](https://monaca.mobi/ja/vcs) ページへ移動します。

2\. `連携する`ボタンをクリックします。GitHub にログインする必要があります。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzNfdPkSkyT48uGB3L%2Fimage.png?alt=media\&token=687e34e3-80c1-41c8-8647-a728deb19b45)

3\. \[ Authorize application ] ページでは、Monaca と GitHub の連携に必要となる認証手続きを行います。`Authorize application` ( アプリケーションの認証 ) をクリックます。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzNnQ60o4ol6zVMvCt%2Fimage.png?alt=media\&token=b88a1206-bd11-4a72-99de-2facb1ee5f61)

4\. ここまでの手順で、Monaca アカウントと GitHub アカウントの連携が完了しました。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzNqKwXRhNT89waIs7%2Fimage.png?alt=media\&token=59697524-dcd5-4cc2-b5fb-dacee35583f5)

{% hint style="danger" %}
1 つの GitHub アカウントに対して、1 つの Monaca アカウントのみ、連携を行えます。「 一対多数 」の設定はできません。設定した場合、エラーになります。
{% endhint %}

## Monaca プロジェクトを新しい GitHub リポジトリに接続する

### ステップ 1: 新しい空のリポジトリを作成する

GitHub アカウントに移動し、新しい空のリポジトリを作成します（Readme ファイルなし）。

### ステップ 2: リポジトリと Monaca プロジェクトの接続

連携完了後、次に、リポジトリとプロジェクトを接続させるため、Monaca クラウド IDE 側で行う設定があります。なお、ここでは、Monaca と GitHub 間の連携が完了していることを前提に解説します。

次の手順に従い、設定を行います。

1\. Monaca Dashboard から、リポジトリに接続するプロジェクトを開きます。

2\. Monaca クラウド IDE のメニューから、\*\*`プロジェクト → バージョン管理設定`\*\*を選択します。

3\. `GitHub` を選択します。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzOOMlFd4gDacwgwoN%2Fimage.png?alt=media\&token=e8f38692-5a34-4e4e-9de6-bf94c2a8b7f3)

4\. リモートの空のリポジトリを選択します。 次に、`設定する`ボタンをクリックして設定を保存します。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzOU29bMDP-9IdHWbq%2Fimage.png?alt=media\&token=463f82cf-d8da-4cdd-90bb-91ca09977cb7)

{% hint style="info" %}
設定後に別のリポジトリに変更することはできませんのでご注意ください。
{% endhint %}

5\. GitHub 上の新規のリポジトリにプロジェクトがアップロードされます。デフォルトでは、作業ブランチは master として設定されます。別の作業ブランチに切り替える場合は、 **`プロジェクト → バージョン管理設定`** へ移動します。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzOpdZAjQN52fRZc9w%2Fimage.png?alt=media\&token=df816144-59a9-48ab-8b05-1d5d0fe14d82)

## プロジェクトを GitHub リポジトリから Monaca にインポートする

Monaca と GitHub の連携後、GitHub リポジトリ―に置かれているプロジェクトを、Monaca クラウド IDE にインポートすることもできます。

1\. ダッシュボード上で、`インポート`を選択します。

2\. \[ プロジェクトのインポート ] ダイアログが表示されます。必要な情報の入力後、`GitHubのリポジトリからインポート` を選択します。次に、対象のリポジトリを選択して、`インポート`ボタンをクリックします。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzP0zJdb7kwGZEQ4eC%2Fimage.png?alt=media\&token=1f4a39ed-2d2d-4bd4-ada5-f21fa6966406)

3\. インポートの完了後、ダッシュボード上で対象のプロジェクトが表示されていることを確認します。デフォルトでは、master ブランチのコンテンツがインポート対象となります。ブランチは、 \*\*`プロジェクト → VCS バージョン管理設定`\*\*で切り替えることができます。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzP9vCdgbCODTPJT9N%2Fimage.png?alt=media\&token=4fe8436a-6daa-4e2b-a20d-6c5c430495a1)

## リモートリポジトリを使用した作業

リポジトリとプロジェクト間の接続完了後は、チームメンバーと同じプロジェクトで作業を開始し、Monaca クラウド IDE から最新のアップデートと同期させることができます。

Monaca クラウド IDE では、ユーザーフレンドリーなバージョン管理用のインターフェイスを提供しています。このインターフェイスを使用すれば、Git のコマンドの詳細を意識せずに、基本的な操作を一通り行うことができます。

### ブランチの切り替え ( Git コマンドの checkout )

複数のブランチを使用したプロジェクトで、ブランチの切り替えを行う場合は、次の手順に従います。

1\. Monaca クラウド IDE のメニューから、\*\*`プロジェクト → バージョン管理設定`\*\*を選択します。

2\. 現在の作業ブランチから切り替えたいブランチを選択し、`アップデート`ボタンをクリックします。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzPLc4V9qPucFcLvpN%2Fimage.png?alt=media\&token=4bcc4c6d-7506-4ad1-912d-bb6bf0b60780)

{% hint style="info" %}
現在のブランチで行った変更をコミットせずに、ブランチの切り替えを行う場合、エラーが表示されます。ブランチを切り替える場合には、最初に、作業内容をコミット ( 場合によっては、リモートにプッシュまで ) してください。
{% endhint %}

### リモートリポジトリから最新の内容を取得

Git コマンドでは、リモートリポジトリから最新の情報を取得/ダウンロードする場合、`git pull` ( git プル ) コマンドを使用します。Monaca クラウド IDE では、リモートリポジトリから最新の情報を取得する場合、Monaca クラウド IDE のメニューから、\*\*`プロジェクト → プル`\*\*を選択します。リモートリポジトリ側の内容が更新されている場合、その内容がダウンロードされ、対応するブランチ側に反映されます。

{% hint style="info" %}
IDE 上でプロジェクトを作成した場合、開発者側が自由に作業できるファイルのほとんどは、`www` フォルダー内に置かれています。これ以外にも、IDE 上には表示されないシステム側のファイルもありますが、リモートリポジトリとの同期時には、これらのファイルも一緒にアップロード・ダウンロードされています。
{% endhint %}

### 変更箇所のコミットとリモートリポジトリへの反映

現在作業をしているブランチで行った変更を、リモートリポジトリ側に反映させます。最初に、次の手順に従い、コミットを行い、リモートリポジトリ側へプッシュします ( コミット前に、ファイルを保存する必要があります )。

1. Monaca クラウド IDE のメニューから、\*\*`プロジェクト → コミット`\*\*を選択します。
2. コミットメッセージを入力して、コミット対象のファイルにチェックを入れます。次に、`コミット`ボタンをクリックします。
3. ここまでの手順で、リモートリポジトリに更新を反映させる準備ができました。次に、 \*\*`プロジェクト → プッシュ`\*\*を選択します。コミット後、リモートリポジトリ側が更新されているか確認します。

### リモートリポジトリ側のコミット履歴の表示 ( GitHub 側の履歴ページ )

リモートリポジトリ側 ( GitHub 側 ) のコミット履歴を確認する場合、\*\*`プロジェクト → リモートのコミット履歴`\*\*を選択します。現在作業しているブランチのコミット履歴が表示された、GitHub 側のサイト ( 外部ページ ) にリダイレクトされます。

### ローカルコミットの履歴表示 ( Monaca クラウド IDE 側の履歴ページ )

ローカルコミットとは、Monaca クラウド IDE 上で行ったコミットを指します。 \*\*`プロジェクト → コミット履歴`\*\*を選択すれば、ローカルコミットの履歴を表示できます。各コミットの内容を確認する場合には、コミットメッセージ横の ID をクリックします。

## Monaca アカウントと GitHub アカウントとの連携の解除

1. [GitHubアカウント連携](https://monaca.mobi/ja/vcs) ページへ移動します。
2. `連携を解除する`ボタンをクリックします。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzQ-9OdABw-Wilr2ak%2Fimage.png?alt=media\&token=7f13b039-0604-4b2d-8f1a-e459eb393632)

## GitHub との再度の連携時にエラーが発生した場合

Monaca と GitHub の連携を解除して、再び上記の [セットアップ](#settoappu) に従い、連携を行ったところ、次のようなエラーが表示される場合があります。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzQ7YRophsTvxFjyIC%2Fimage.png?alt=media\&token=4eb76d32-1d11-42e9-94c8-1edee80cde94)

この場合、次の手順に従います。

1\. Monaca クラウド IDE からログアウトします。

2\. [Monaca ログイン](https://monaca.mobi/ja/login) ページに移動して、`Sign In With GitHub`をクリックします。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzQFENJpKQIws2KaoV%2Fimage.png?alt=media\&token=00ccb3d1-cda4-42d3-bcbb-72a8d5ba4119)

3\. GitHub のアカウント情報を入力します。

4\. GitHub の \[ Authorize application ] ページにリダイレクトされます。`Authorize application`ボタンをクリックして、先に進みます。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzQMDonSz7fjS5ha-0%2Fimage.png?alt=media\&token=c657a17a-bc73-4d9b-a9ee-f197680492fb)

5\. ここまでの手順を行えば、Monaca と GitHub が再び連携されています。\[ GitHub アカウント連携 ] ページに移動して、次のような画面が表示されていることを確認します。

![](https://3046938759-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWrOnV1iKerkfShm9O%2F-MgzNNFiGdk4F2TA4Xkt%2F-MgzQQ-z8SpmUUsl2qe9%2Fimage.png?alt=media\&token=d23cd68c-0416-4f6a-b19d-9e2c0a348490)
