MonacaのCloud IDEにGit連携機能が追加されました。これまでGitHub連携機能はありましたが、企業ではGitHubではなく自社のGitサーバを使っているケースが多いとのことで、Git対応のご要望をたくさん頂いていました。今回リリースされたGit連携機能は、GitHubに限らず、独自のGitサーバ(ただしインターネットからアクセスできる必要があります)とも連携できるようになります。
Bitbucketで試す
MonacaのドキュメントではGitHubを例としてあげていますので、この記事ではBitbucketを使ってみます。BitbucketはGitHub同様にGitリポジトリをホスティングするサービスで、プライベートリポジトリを無料で作ることができます。
まずはBitbucketに登録し、リポジトリを一つ作成します。

新しいCloud IDEに切り替える
Monacaでプロジェクトを作成したら、新しいCloud IDEに切り替える必要があります。Cloud IDEの右上にある[New IDE]を選択し、[新しいIDEへ]ボタンをクリックします。

新しいCloud IDEに切り替わったら、[バージョン管理]メニューの[設定]を開きます。

表示されるダイアログで[Git]を選択します。

初回選択時には「SSH鍵がありません」と表示されます。その場合はユーザアカウント設定画面に移動します。

SSH鍵を生成する
SSH鍵の生成は簡単です。SSHキー管理画面にて、[SSHキー生成]ボタンを押します。

そうすると以下のように公開鍵が表示されます。公開鍵はMonacaアカウント一件に対して一つになります。そのため、もう一度クリックすると別の公開鍵が生成されてしまい、過去に生成した公開鍵が無効になってしまうので注意してください。
この公開鍵をコピーしておきます。

Bitbucketでユーザーの[設定]>[SSH鍵]>[鍵を追加]と選択して以下の「SSH鍵を追加」画面を開き、Key欄に公開鍵をペーストして登録します。
※ リポジトリの[設定]>[Access keys]>[鍵を追加]ではないので、注意してください。

登録されました。

リポジトリを登録する
BitbucketのリポジトリURLは、 git@bitbucket.org:ユーザー名/リポジトリ名.git
という形式になります。(例えば、git@bitbucket.org:user/repo.git
など)
MonacaのGit連携設定画面で、「リポジトリURL」に上記のURLを指定します。

連携が完了すると以下のようなダイアログが表示されます。

連携完了時に、その時点のソースコードが初期コミットとして登録されます。Bitbucketのリポジトリが更新されているのが分かるはずです。

基本的な使い方
連携が完了したら、コードを編集して、ある程度まとまった段階で[バージョン管理]メニューの[コミット]を選択します。

そしてコミット対象のファイルを選択し、メッセージ(変更内容のサマリーなど)を入力します。入力したらコミットボタンを押して完了です。

コミットが終わるとダイアログが表示されます。

そして何回かコミットしたら、リポジトリに反映するために[バージョン管理]メニューの[プッシュ]を選択します。これまでにコミットした内容がBitbucketのリポジトリに反映されます。

Bitbucketのコミット画面で履歴を確認してみてください。

適切な運用
前述の例では、masterブランチを直接変更しています。これは運用上あまりお勧めできません。通常の開発ではブランチを作成して、そこに対してコミットを繰り返します。そしてプルリクエストを作成してmasterブランチに変更を反映します。
Bitbucketのブランチ画面で[ブランチの作成]ボタンをクリックして、新しいブランチを登録します。

そうするとMonacaのCloud IDE上で対象ブランチを切り替えられるようになります。これは[バージョン管理]メニューの[設定]で変更できます。

ブランチのドロップダウンに新しく作成したブランチ(今回は new_feature)が追加されています。

ブランチを切り替えるとダイアログが表示されます。

後は前述の使い方と同じです。Monacaから変更内容をプッシュしたら、Bitbucket側でプルリクエストを作成します。

変更内容を確認し、マージすれば master ブランチに変更が反映されます。

Git連携によって、複数人での開発もスムーズに管理できるようになります。ブランチを切って開発すれば誤った上書きをしてしまったり、他のメンバーの修正が突然紛れ込んでしまったりすることもありません。新しいGit連携機能を、ぜひ活用してみてください。