LoginSignup
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@tami(Yasutake Mio)

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

Last updated at Posted at 2019-03-01

はじめに

WebIDEのソースをGitHubで管理することができるそうです。ABAP出身の筆者にとってGitHubはなじみがないものでしたが、以下の動画を参考に設定してみました。
SAP webIDE with git | Fiori training on WebIDE and XML | UI5 tutorial
この記事に書ききれなかった複数人での開発の手順や、バージョンが衝突したときの対応についても説明されていますので興味のある方は見てみてください。

※WebIDEの設定方法についてはこちら

WebIDEでGitHubを使うと何がいいのか

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

GitHubを使った開発の流れ

Aさん、Bさんの2人が一つのアプリを開発する場合を考えます。まずAさんがWebIDEのプロジェクトと、GitHubのリポジトリを作成します。その後の流れは以下のようになります。
①Aさん：作成したアプリケーションをリモートのGitリポジトリに登録する(push)
image.png

②Bさん：リモートリポジトリからソースを取得(pull)
③Bさん：ソースを修正し、コミット
④Bさん：修正したソースをリモートリポジトリに書き戻す(push)
image.png

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

GitHubとWebIDEをつなげる手順

※前提としてGitHubのアカウントを登録する必要があります

  1. WebIDEの設定でGitのユーザ情報を登録する
  2. WebIDEでプロジェクトを登録する
  3. プロジェクトをローカルリポジトリに保存する
  4. GitHubにリポジトリを登録する
  5. プロジェクトをリモートリポジトリに送信する

1. WebIDEの設定でGitのユーザ情報を登録する

setting.png GitHubに登録したメールアドレスとユーザ名を入力し、保存します。 setting2.png

2. WebIDEでプロジェクトを登録する

サンプルなので適当に、Master Detailのテンプレートから作成します。以下のフォルダ、ファイルが登録されます。
image.png

3. プロジェクトをローカルリポジトリに保存する

プロジェクトフォルダの上で右クリックし、Git>Initialize Local Repositoryを選択します。
image.png

初期化が終わると右上にメッセージが表示されます。
image.png
右端にある"Git Pane"ボタンをクリックするとGitの操作画面が出てきます。（"Git Pane"ボタンは以下の画面で反転している菱形のボタン）
image.png
コメントを入れて"Commit"ボタンを押すと履歴が作られます。
image.png
履歴は"History"ボタン（時計マーク）で見ることができます。
image.png

4. GitHubにリポジトリを登録する

GitHubにログインしてリポジトリを登録します。
create a repository.png
Repository name, Descriptionを入力してリポジトリを作成します。
image.png

Clone or Downloadボタンを押して出てくるURLは次のステップで使います。
image.png

5. プロジェクトをリモートリポジトリに送信する

プロジェクトフォルダの上で右クリックし、Git>Set Remoteを選択します。
image.png

4.で表示したGitリポジトリのURLを貼り付けて"OK"を押します。
image.png

リモートリポジトリで行われた変更がFetch（取得）されます。リモートリポジトリに上げる前に、リモートの変更をローカルに取り込んで整合が取れた状態にする必要があります。"OK"を押して次に進みます。
image.png
赤枠で囲った部分で"↑2"となっているのがローカルで行った変更が2つあるということを表しています。"↓1"はリモートで行った変更が1つあることを表しています。"Fetch" + "Rebase"、または"Push"ボタンでリモートの変更を取り込むことができます。
fetch.png
"Fetch"を押します。
image.png
"Rebase"を押します。これでリモートのソースとローカルのソースがマージされます。
image.png
ようやくリモートリポジトリに上げる準備が整いました。Push>origin/masterをクリックします。
image.png

またはプロジェクトフォルダを右クリック>Git>Pushでも可能です。
image.png

Gitのユーザ名、パスワードを聞かれるので入力します。
image.png

プロジェクトフォルダがリモートリポジトリにアップロードされました。
image.png

リモートリポジトリからプロジェクトをコピーする方法

新しいメンバーが加わったとき、以下の手順でそのメンバーのWebIDEにプロジェクトを取り込むことができます。
Git>Clone Repository
image.png

リポジトリのURLを入力します。
image.png
プロジェクトがコピーされました。
image.png

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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?