【SAPUI5】GitHubとWebIDEをつなげる方法

##はじめに
WebIDEのソースをGitHubで管理することができるそうです。ABAP出身の筆者にとってGitHubはなじみがないものでしたが、以下の動画を参考に設定してみました。
[SAP webIDE with git | Fiori training on WebIDE and XML | UI5 tutorial](https://www.youtube.com/watch?v=dxcNcSputaE&index=2&list=PLcxqFaocb9WJZiAhjoR4SOzUn7t6CAmfY)
この記事に書ききれなかった複数人での開発の手順や、バージョンが衝突したときの対応についても説明されていますので興味のある方は見てみてください。

※WebIDEの設定方法については[こちら](https://qiita.com/tami/items/05014dd40577cc92ccca)

##WebIDEでGitHubを使うと何がいいのか
一番のメリットは、複数人で開発する際にバージョン管理ができることだと思います。学習用に使っているWebIDEは自分専用ですが、実際のプロジェクトでは複数の人が同じアプリケーションに手を入れることもあります。GitHubを使うと誰が、いつ、どんな変更をしたかというのが一元的に管理され、かつ誤った上書き等も防ぐことができます。

##GitHubを使った開発の流れ
Aさん、Bさんの2人が一つのアプリを開発する場合を考えます。まずAさんがWebIDEのプロジェクトと、GitHubのリポジトリを作成します。その後の流れは以下のようになります。
①Aさん：作成したアプリケーションをリモートのGitリポジトリに登録する(push)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/53505ac8-d113-a097-5fea-ed01de42cae1.png)

②Bさん：リモートリポジトリからソースを取得(pull)
③Bさん：ソースを修正し、コミット
④Bさん：修正したソースをリモートリポジトリに書き戻す(push)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/992ced59-6f43-5116-101b-c0d8f4c72668.png)

次回Aさんがソースを修正する際は、必ずリモートリポジトリからpullしてから修正するようにします。

##GitHubとWebIDEをつなげる手順
※前提としてGitHubのアカウントを登録する必要があります
1. WebIDEの設定でGitのユーザ情報を登録する
2. WebIDEでプロジェクトを登録する
3. プロジェクトをローカルリポジトリに保存する
4. GitHubにリポジトリを登録する
5. プロジェクトをリモートリポジトリに送信する

###1. WebIDEの設定でGitのユーザ情報を登録する
<img width="282" alt="setting.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/f5af52a0-a374-3703-926a-fdd37d0dff42.png">
GitHubに登録したメールアドレスとユーザ名を入力し、保存します。
<img width="917" alt="setting2.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/12029644-55ab-ee84-63c1-e838ce5f78f2.png">

###2. WebIDEでプロジェクトを登録する
サンプルなので適当に、Master Detailのテンプレートから作成します。以下のフォルダ、ファイルが登録されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/9b042048-9198-52f7-858e-f5fa791d34e0.png)

###3. プロジェクトをローカルリポジトリに保存する
プロジェクトフォルダの上で右クリックし、Git>Initialize Local Repositoryを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/dca57add-a088-380b-4f42-79fcb0a2a611.png)

初期化が終わると右上にメッセージが表示されます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/7b3084e7-2e56-c985-5ce5-53e3848f08b9.png)
右端にある"Git Pane"ボタンをクリックするとGitの操作画面が出てきます。（"Git Pane"ボタンは以下の画面で反転している菱形のボタン）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/f7fb26ce-7e31-3cc8-ae11-793c77b8fce7.png)
コメントを入れて"Commit"ボタンを押すと履歴が作られます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/61497975-2316-6a24-8c47-72b981db4e79.png)
履歴は"History"ボタン（時計マーク）で見ることができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/690bcef1-883d-e80f-bd89-93a6f7c630ce.png)

###4. GitHubにリポジトリを登録する
GitHubにログインしてリポジトリを登録します。
<img width="946" alt="create a repository.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/f4b8758c-5de9-2ce9-418f-af9ed58f4496.png">
Repository name, Descriptionを入力してリポジトリを作成します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/db508555-b2e3-3095-7483-30cfd073461a.png)

Clone or Downloadボタンを押して出てくるURLは次のステップで使います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/ef19e9a7-8581-d07c-50f8-451c875b87eb.png)

###5. プロジェクトをリモートリポジトリに送信する
プロジェクトフォルダの上で右クリックし、Git>Set Remoteを選択します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/e71bcd36-7daa-30e7-8846-76933ac1c467.png)

4.で表示したGitリポジトリのURLを貼り付けて"OK"を押します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/ba13513d-c6fa-3909-aebb-b8f36a67ce7a.png)

リモートリポジトリで行われた変更がFetch（取得）されます。リモートリポジトリに上げる前に、リモートの変更をローカルに取り込んで整合が取れた状態にする必要があります。"OK"を押して次に進みます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/fc22bc56-229d-b21e-f7cf-e57961783d28.png)
赤枠で囲った部分で"↑2"となっているのがローカルで行った変更が2つあるということを表しています。"↓1"はリモートで行った変更が1つあることを表しています。"Fetch" + "Rebase"、または"Push"ボタンでリモートの変更を取り込むことができます。
<img width="326" alt="fetch.png" src="https://qiita-image-store.s3.amazonaws.com/0/276021/c773c208-84dc-fdae-1e34-2a510438650e.png">
"Fetch"を押します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/b99871e6-4cae-6444-07e6-149f1a17c3db.png)
"Rebase"を押します。これでリモートのソースとローカルのソースがマージされます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/0c9ba47f-fde8-c433-76c9-adaf23d7525f.png)
ようやくリモートリポジトリに上げる準備が整いました。Push>origin/masterをクリックします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/70e6d1b5-4ae2-a1f3-201a-4ddbd7b3810a.png)

またはプロジェクトフォルダを右クリック>Git>Pushでも可能です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/48074c40-bed3-c681-b53f-4663478fbdd0.png)

Gitのユーザ名、パスワードを聞かれるので入力します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/09488450-16df-ce85-e938-f7b0e101077f.png)

プロジェクトフォルダがリモートリポジトリにアップロードされました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/8365c9e6-f82b-0f74-613f-08241fc63659.png)

##リモートリポジトリからプロジェクトをコピーする方法
新しいメンバーが加わったとき、以下の手順でそのメンバーのWebIDEにプロジェクトを取り込むことができます。
Git>Clone Repository
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/27d9ccc7-c5dd-ca0e-0dbf-87f9f36b8470.png)

リポジトリのURLを入力します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/f22d0f61-6a0a-df7a-3bdb-99dfd20b575c.png)
プロジェクトがコピーされました。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/276021/b55af7cd-2ac0-8789-02cf-8174590faaff.png)

冒頭でも書きましたが、複数人で開発するときは毎回リモートリポジトリからpullしてから修正するようにします。