Eclipse EGit の使い方(1/2)

Eclipse から Git 操作を行う、EGit の使い方についてまとめてみました。

この記事は 2014/3/25 にリリースされた EGit 3.3.1 を使い、Ubuntu もしくは Windows で操作しています。(たぶん Mac でも大丈夫です)

リポジトリを破壊したり、ファイルが多くあると遅くなっていたりしていたお騒がせな EGit でしたが、現在の所、通常の操作では問題なくなったように思います。

目次

  1. 導入
  2. ローカルリポジトリの作成
  3. ファイル操作
  4. リモートリポジトリに接続
  5. ローカルブランチの作成
  6. リベースインタラクティブ
  7. ブランチからのマージ1
  8. ブランチからのマージ2
  9. コンフリクトの解消
  10. リベース
  11. コミットコメント修正
  12. コミットリセット
  13. リバートコミット

このページでは、1〜6までを記載しています。(続きは力尽きたので次回…

導入

EGit は Eclipse 用の Git プラグインです。

JavaEE 版の Eclipse Kepler であれば、初期状態でバージョン 3.2 が導入されていますが、不具合の修正も多数ありますので、以下のアップデートサイトを登録し 3.3.1 の最新版をいれたほうが良いでしょう。

EGit – Download

To install via one of the update site URLs listed below, copy and paste it into the “Help > Install new software” dialog.

EGit can be installed in the following ways:

Main Update Site: http://download.eclipse.org/egit/updates (Recommended)

ヘルプ->新規ソフトウェアのインストールに、アップデートサイトを登録し、Eclipse Git Team Provider と JGit を導入します。

egit-install01

なお、EGit は Java の Git 実装である JGit を使って動きますので、別途 Git のコマンドラインツールなどを入れる必要はないです。

導入が完了すると、以下のビューが使えるようになります。

egit-install02

Git Repositories からリポジトリを操作するので出しておくと便利でしょう。

ローカルリポジトリの作成

新規プロジェクトを作成し、そのモジュールを Git のローカルリポジトリで管理するまでの手順です。既存のプロジェクトでも 2. 以降の手順で Git 管理下におくことができます。

1. Eclipse のプロジェクトを作成します。

egit-init01

2. プロジェクトを右クリックし、Team からプロジェクトの共有を選択します。

egit-init02

3. Git を選択します。

egit-init03

4. Use or create repositoru in parent folder of project にチェックを入れ、Create Repository をクリックします。

# Creation of reoisitories  in parent folder the Eclipse workspace は非推奨。ワークスペース上に Git のファイルがあると Eclipse が遅くなるのでということのようです。(が、特に問題無さそうなので自分はこちらを使っています)

egit-init04

5. ワークスペースと同じフォルダに .git リポジトリが作成されるので、完了をクリックします。

egit-init05

6. プロジェクト右クリックから、Team -> Commit をクリックします。

egit-init06

7. コミットダイアログが表示されます。 が、コミットの必要がない Eclipse の設定ファイルなどがあるので、いったんキャンセルします。

egit-init07

9. Eclipse 標準のフィルターだと隠しファイルが見えないため、見えるようにビューを一度カスタマイズします。

egit-init08

10. フィルターから .* リソースのチェックを外します。

egit-init09

11. 隠しファイルが見えるようになったので、コミットが不要なファイルを右クリックし、Team -> Ignore を指定し、Git の管理下から外します。(.gitignore が編集されます)

egit-init10

egit-init11

12. 管理するファイルが決まったので、再び Team -> Commit を選択します。

egit-init12

13. コミットダイアログで、コミット(インデックス)するファイルにチェックをつけ、コミットボタンを押下します。ヒストリービューからコミットの履歴を見ることができます。

egit-init13

egit-init14

ファイル操作

コミット後に修正を行ったファイルには > 印がつきます。

egit-edit01

コミット(HEAD)に戻したい(上書きしたい)時は、ファイル右クリック->置換->HEAD Revision を選択します。

egit-edit02

HEAD と比較したい場合は、比較-> HEAD Revision を選択します。(このへんの操作は Subclipse などと同様です)

egit-edit03

egit-edit04

ファイルの追加や削除は、Eclipse の右クリックの操作から行なってください。(OS からファイル操作をすると Git のインデックスがおかしなことになります)

ファイルの移動もドラッグアンドドロップを使うことで、Git が追従してきます。

egit-edit05

egit-edit06

リモートリポジトリへの接続

作成したローカルリポジトリを、リモートリポジトリに接続します。(ここでは Bitbucket のプライベートリポジトリに接続します)

1. ベアリポジトリを作成します。(Bitbucket 上に egit-test を作成しました)

b01

2. Git Repository ビューから、ローカルリポジトリの Remotes 指定し、Create Remote を押下します。

egit-remote01

3. Remote name を origin とし、Configure fetch を指定して OK ボタンを押下します。

egit-remote02

5. リモートリポジトリに 1. で作成したベアリポジトリを指定すると、Remotes が作成されます。

egit-remote03

egit-remote04

6. master ブランチをリモートと同期するために、ローカルブランチの master を選択し、Configure Branch を押下します。

egit-remote05

7. Remote に origin を、Upstream Branch を refs/heads/master とし、リモートリポジトリを追跡ブランチとして指定すると、Remote Traking が作成されます。

egit-remote06

egit-remote07

8. プロジェクトを右クリックし、Team -> Push to Upstream を押下し、リモートリポジトリにローカルリポジトリをプッシュします。

egit-remote08

b02

ローカルブランチの作成

Git の利点の一つは、ローカルブランチを手軽に作成でき、自分のタイミングで好きなようにコミット操作ができることです。それはドラクエのセーブに似ています。保存域は3箇所と言わず無限に(←真面目さがなくなってきた…

EGit でのローカルブランチの作成操作は次のようになります。

1. プロジェクト右クリックから Team -> Swicth To -> New Branch を選択します。

egit-branch01

2. Brach name を指定します。(ここでは devel ブランチにしました) master からブランチを作成したので、ヒストリーをみると、devel、master、origin/master の位置が一致しているのが分かります。

egit-branch02

egit-branch03

3. ワーキングディレクトリがdevel ローカルブランチにスイッチしたので、好きなように(恥ずかしい)コミットを入れながら、作業をしていきます。

egit-branch04

コミットを改変する場合

ふと次の日見た devel のコミットは、やっぱりあんまりだったので、コミットを改変して正しいものにするなどの手順です(?)。(rebase -i)

1. ヒストリーから親にするコミットを右クリックし、Rebase Interactive を押下します。プロジェクトのマーカーが Rebase Interactive に変わります。

egit-rebasei01

egit-rebasei02

2. Git Interractive Rebase ビューを開き、編集したいコミットに対してそれぞれの操作を指定して Start を押下します。(ここでは、2つのコミットを SQUASH 指定し、コミットをひとつにまとめています)

egit-rebasei03

3. 本コミットのメッセージを指定し、OK ボタンを押下すると、コミットが指定通りに改変されます。

egit-rebasei04

egit-rebasei05

というわけで次回は、できあがった devel を master にマージしてリモートリポジトリにプッシュする「ブランチからのマージ1」から書きます。

続く…

Ubuntu 13.04 リリース!

半年に一度のお楽しみ、Unbutu の 13.04 がリリースされました。 😀

日本語 Remix を待ちきれずに、早速愛機 ThinkPad T420s にインストールしてみました。 もともと Ubuntu 12.10 がのっていた機械ですが、アップグレードせずに、クリーンインストールしております。

インストールプロセスでは特に困ったこともなく、いつも通りそのままブートされ、無線LAN などやトラックポインタなどのデバイスもそのまま使えるようになりました。

ubuntu1304-01

利用を開始して最初に気がついたのが、Super(Win) + S のワークスペーススイッチャーが効かないこと。

どうやらデフォルトで仮想デスクトップが無効になったようです。システム設定->外観から「ワークスペースを有効にする」にチェックをつけてあげます。

ubuntu1304-02

とりゃ。でてきよった。 🙂

ubuntu1304-03

ワークスペース切り替え Win + S と Alt + Tab のタスクスイッチャーの切り替えはいつもながらかなり強力です。 🙂

ちなみに、このようなショートカットは Super(Win) キー長押しで知ることができます。(これは前のバージョンからの機能)

ubuntu1304-04

便利すなぁ。

デフォルトインストールから追加したのは、次の開発系と flash などのサードパーティー製品です。

sudo apt-get install build-essential
sudo apt-get install ubuntu-restricted-extras
sudo apt-get install openjdk-7-jdk

最近は、Oracle のではなく OpenJDK7 を利用中。 Eclipse や JVM 系開発用。

で、その Eclipse でちょっと困ったのが、Internal Browser が使えなかったこと。

ubuntu1304-05

この画面は既に設定済みなので、Use Internal web Browser(内部ブラウザを使う)が有効になっていますが、デフォルトインストール直後は非活性でした。

この事象、いつもだったか、 Ubuntu を設定しているうちにそのうち入って動いていたのか、いままで気にしたことがなかったのですが、理由は Eclipse の SWT が webkit の 1系を要求するためで、入ってないと enable にできません。 13.04 のデフォルト webkit は 3系でした。

てなわけで、1 系をインストールすれば使えるようになります。

sudo apt-get install libwebkitgtk-1.0-0

これにより、いつも使っている Eclipse Mylyn Doc textile 編集でプレビューができるようになりました。(下のプレビュータグがでてきます)

ubuntu1304-06

さて、WebKit 関係ありませんが、先日購入しました WireframeSketcher もうまく動作しました。

SWT Spy 恐るべしの図(既存の SWT 画面を吸い取ってスケッチ化できるっ)

ubuntu1304-07

やはり Linux はソフトウェアをつくる環境として便利で、ほとんど何もしなくても好みの動きをしてくれるのが良いところです。

インターネットの場合、開発時の接続先のサーバも Linux であることが多いので、ワークステーションとの親和性の高さもポイントですね。 🙂

OS の群雄割拠を見るような自分の机。 Linux 勢優勢。

20130425_215355

てなわけで、奥のディスプレイはこの部屋に新星のように現れた Windows 8。 ようやく入れましたぞ!

(次のブログは Windows 8 ネタという前フリらしい)

WireframeSketcher でワイヤーフレームドキュメント作成

以前、サイトを眺めてすごいなぁと思っていたものの、有料($99)だったため試さなかった、WireframeSketcher を本日購入してみました。

用意された部品や操作系を元に、アプリケーション開発時のワイヤーフレームやモックアップなどのドキュメント作成を支援するソフトウェアです。 SI の世界だと、エクセル方眼紙でやっちゃうような、外設の画面設計書をつくるの、で通じるでしょうか(笑)

WireframeSketcher

WireframeSketcher is a wireframing tool that helps designers, developers and product managers quickly create wireframes, mockups and prototypes for desktop, web and mobile applications. It’s a desktop app and a plug-in for any Eclipse IDE.

デザイナー、開発者、プロダクトマネージャさん向け。

Eclipse GEF/EMF ベースでつくられており、Windows、Mac、Linux 対応。ダウンロードしすぐ実行できるオールインワンのスタンドアローン版の他、Eclipse プラグイン版も用意されています。

130422-0007

下のような、描くのも変更するのも大変そうなイラストが、

wp_tree_f

次のテキスト入力だけで作成できてしまう。。

wp-content
-plugins
--otenki
---otenki.php
-themes
--[v] twentyeleven
--[v] twentytwelve

なんてことだ...

このことだけで、なんでもっと早く試さなかったのだろうと後悔です。。15日のお試し期間中の 1 日目で購入してしまいました。

以下、これまたどう考えても描くの面倒だろうJK、と言われそうな一覧表とフォームの組み合わせも、

130422-0019

こんな感じのテキストでサクッとつくることができます。

130422-0020

あっという間。。 🙂

試しに、このサイト hiromasa.another のモックアップを作成してみました。

130422-0011

出力を手書き風味にできるのがポイントで、(お客さんなどに)まだデザインとかはイメージですよ、というようなことを表現できるとのことです。

ちなみに Screen のプロパティーを Sketch から Clear に設定することで、びしっとすることもできます。

130422-0002

びし。まっすぐ。

130422-0010

WireframeSketcher の操作はパレットビューより部品を選択し、ぺたぺた貼り付け、それぞれの個別属性を指定していく感じです。

部品は PC 用、モバイル、Android、iOS、Web フォームなどなど沢山。 これらは一般的な .svg 形式で、フォーマットに従えば自分で描いた絵も部品に取り込むことができるようです。

130422-0021

ブログのコメントフォームを描いてみたの図。

130422-0022

ドローアプリとしての操作感は、利用開始当初、レイヤー機能がないため若干厳しい部分あるかなと思いましたが、アウトラインビューなどからのZオーダ設定、グルーピング系と、そのグループへの突入(?)、またプロパティーからの位置ロック操作をうまく使えば、問題なく描くことができると感じました。

130422-0023

画面上、オブジェクトの単一選択と矩形選択の切り替えの UI がぱっと分かりませんが、(Fn + ) F3/F4 でそれぞれに切り替わります。クリック to ドラッグの範囲選択において、カーソル位置のオブジェクトを引っ張りたくないケースでは F4 を押すといいと思います。

さて、WireframeSketcher の良いところのひとつは保存形式に XML のテキスト形式が用いられていることで、さらに画像となる .svg ベクターデータと、骨組みとなる .screen データは完全に分離されています。

このため、骨組みの .screen の変更履歴をみると、どの部分が修正されたかが分かります。

130422-0016

スクリーンショットは新旧ファイル差分を出した図。–File Three が増えてその下のアイテムの y 座標が増えたことが分かります。

このように、WireframeSketcher はテキストファイルベースのデータ形式を採っているため、ローカルヒストリーの利用や Subversion、Git などバージョン管理との統合も得意です。

Eclipse マーケットから EGit や Subclipse などを追加することで Git や SVN が使えるようになるハズです。(スタンドアローン版 は Eclipse Juno ベース。自分は Eclipse Juno for JavaEE に WireframeSketcher をプラグインの形で入れました)

さて、ぼくは普段からドキュメントの作成に Eclipse Mylyn の .textile サポートを使っていましたので、今回ワイヤーフレーム作成に WireframeSketche という心強い見方が統合されたことになります。

ワイヤーフレームはもちろん、ちょっと億劫だなと思っていた図形の描画もできるようになってとても嬉しいです。 🙂

130422-0018

ブログ”徹底解析”シリーズを Eclipse で書いているの図。

日本に一人しかいないんじゃないかと思うくらいの Eclipse の利用法ですが、ソースコード見ながら記事を書くことが多いので、この使い方はすごく便利です。(ちなみに 300ページの原稿に耐えてます)

上記スクリーンショット下部は、PlantUML。これもテキストベース図形描画 & Eclipse プラグインあり。 UML を描くツールですが、これがまた色々な用途に使えるのです。

PlantUML についてはプログラマーズ雑記帳さんが非常に参考になります。(とても助かりました!)

PlantUML の使い方 | プログラマーズ雑記帳

テキストから UML を生成する PlantUML についての解説記事を書いてみました。

PlantUML の Eclipse プラグインについては、そのうちまた。 🙂