MonacaクラウドとGitHub連携方法

MonacaクラウドとGitHubがついに連携しました。多数のご要望を頂いていた機能だけに、従来の開発にGitHubをご利用いただいている方には簡単に使いこなせると思いますが、GitHubアカウントでのMonacaへのシングルサインオンや、クローン、コミットやプッシュなど、MonacaクラウドIDE上のプロジェクトをGit管理ができるようになりましたので、画面を見ながら説明します。

1．MonacaとGitHubの連携設定

Monacaダッシュボード画面からアカウント情報を選択すると「GitHub連携」メニューが追加されています。こちらを押下し、GitHub連携設定に進んでください。

このような、GitHubアカウント連携の設定画面に遷移しますので、「連携する」ボタンを押下してください。

すると、GitHubログイン画面へ遷移します。

ログインしたGitHubアカウントにMonacaとの連携を許可しましょう。

「Authorize applicatioin（Monacaアプリケーションを承認する）」ボタンを押下して、MonacaとGitHub連携初期設定が完了します。
※なお、先に個別アカウントにのみ承認をしてしまって、あとからOrganizationに対して承認を行いたい場合は、一度MonacaとのGitHub連携を解除し、再度連携設定を最初から行い、本画面にてOrganizationからMonacaを承認する必要がありますのでご注意ください。

2．Monacaプロジェクトとリポジトリの紐づけ

次に、Monacaプロジェクトソースを連携しているGitHubアカウントへアップロードしましょう。もし連携したGitHubアカウント上に空のリポジトリが存在しない場合は、新規リポジトリを作成するようメッセージが表示されます。

「空のリポジトリを作成する」ボタンを押下してください。

すると、下記のような新規リポジトリを作成画面を遷移します。
なおプライベートリポジトリをご利用いただく場合は、有料となります。

空のリポジトリが作成できました。

さて、MonacaのプロジェクトIDEに戻ってください。
再度バージョン管理メニューから管理項目を選択すると、空のリポジトリが存在する場合はリポジトリ名称選択・通知などに使うメールアドレス選択が求められます。Organization(組織やチーム用リポジトリの場合は、コミット名の入力が追加されます。

入力が終わったら「設定する」ボタンを押下してください。

全てのコードがGitHubへアップロードされるまで、少し間があります。すべてのコードがアップロードされ、Monacaとの紐づけが完了すると、下記の画面が表示されます。

このように、GitHub上にもソースコードが管理されていることが確認できるでしょう。

3．コミット＆プッシュ

それではコードを修正してリポジトリへのコミットを試してみましょう。バージョン管理メニューからコミットを選択してください。修正されたファイルの一覧が表示されますので、コミットしたいファイルを選択し、「コミット」ボタンを押下してください。

正常にコミットが完了したらこのような画面が表示されます。

ソースコードの修正差分をご覧いただきたい場合は、バージョン管理メニューからコードのコミット履歴を選択してください。リモート上のコミット履歴も閲覧できます。

開発を進めコミットされたコードを、リモートのGitHubにあるリポジトリにプッシュするには、上部メニューからプッシュを選択してください。

このようにしてGitHub連携をおこない、MonacaIDE上にて開発しているコードを管理することが出来るようになりました。

4．GitHubアカウントを使ったログイン

ひとたびMonacaとGitHubの連携設定ができましたら、MonacaのIDとパスワードを入力することなくログインすることができるようになります。
なお、ご利用のブラウザでGitHubへログインしていない状態だと、GitHubのログイン画面へ遷移します。

5．GitHubからのソースコードインポート

プロジェクト新規作成時に、GitHubリポジトリからMonacaプロジェクトのソースコードをインポートすることが出来るようになりました。チームで開発する場合は、OrganizationとしてGitHubにて設定したアカウントと紐づけを行っておくと、インポートをしたいリポジトリ選択欄にOrganizationのリポジトリも掲載されます。
なお、Organizationのリポジトリをご利用いただく場合、Monacaパーソナルプランからご利用いただくことができます。