Asial Blog

Recruit! Asialで一緒に働きませんか?

MonacaクラウドとGitHub連携方法

カテゴリ :
バックエンド(プログラミング)
タグ :
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パーソナルプランからご利用いただくことができます。