[Git]ungitでGitリポジトリ状態をグラフィカル表示[Node]

ungitとは

私はGitを操作するとき、基本的にはコンソールからコマンドを入力していますが、
ブランチ数/マージ回数が多くなってくると、リポジトリがどういう状況なのかを把握するのがちょっと大変になります。
そんなときに便利ではないかと思えるモジュールが、このungitです。

ungitはnode.js上で動作するモジュールで、gitリポジトリ上で実行するとnodeサーバが起動し、
そのリポジトリの状況をブランチで表示することができます。
また、表示だけでなくamendやブランチ/タグの作成も可能になっています。
nodeとgitが使える状態ならば使用できるので、シンプルなリポジトリを作って試してみましょう。

環境構築方法

今回使用した動作環境は以下のとおりです。

• OS : MacOS X 10.7.5
• Node.js : v0.10.8
• npm : 1.2.23
• Git : 1.7.12.4

npmを使用してungitモジュールをグローバルインストールします。

% npm install -g ungit

ungitを試してみる

1.リポジトリの準備

まずはリポジトリを作成し、適当なファイルをコミットします。

% mkdir gitSample && cd gitSample
% git init
% vi index.html //中身は適当でいいです

%　git add index.html
%　git commit -m "release v1.0"
・
・                                                                                                                     

ここでungitコマンドを実行してみましょう。すると、nodeサーバが起動し、urlがコンソールに表示されます。
このアドレスをブラウザで開いてみてください。

% ungit
git                                                                                                                                                 info: App version: 0.1.5
info: socket.io started
Browse to http://localhost:8448/#/repository?path=・・・　←これをブラウザで表示
info: Listening on port 8448
## Ungit started ##
・
・

ブラウザで開くと下記のような、リポジトリの現状が表示されます。

2.ungitからfeatureブランチ作成

ungitの画面からはブランチやタグを作成することができます。新機能を追加するための、
featureブランチをungit画面から作成してみましょう。
ブランチ名の横にある＋ボタンをクリックすると、図のようにブランチ追加することができます。

git branchコマンドで確認してみてください。たしかにブランチが追加されてますね。

% git branch
feature
* master

featureブランチをチェックアウトしてファイルに対して適当な変更を実行して、コミットしてください。

% git checkout feature
Switched to branch 'feature'
% vi index.html  //適当な変更を実行
% git add index.html
% git commit -m "add new feature"

一旦masterに戻り、ファイルに対して何か変更を加えてコミットします。
コミットをしたら、featureブランチをマージします。

% git checkout master
Switched to branch 'master'
% vi index.html //何か変更
% git add index.html
% git commit -m "change title tag"
% git merge feature

ungitでリポジトリ状況をみてみましょう。ブランチの作成からマージまでがグラフィカルに表示されいます。
文字でみるよりわかりやすいですね。

3.amendしてみる

ungit画面からamendすることも可能です。画面上部にあるリンクをクリックするとフォームが開くので、そこでamendすることができます。

適当にメッセージを修正して、画面のCommitボタンをクリックしてください。これでamendが完了します。
amendしたらshowコマンドで確認してみましょう。amendされているのがわかります。

% git show     
・
・                                                                                                                                          

まとめ

今回はGitリポジトリをグラフィカル表示するためのモジュール、ungitを紹介しました。
Gitをコンソールから使うだけでもいいですが、視覚的にわかりやすくみることができると、
いろいろ便利ではないでしょうか。

参考サイトなど

• Github: https://github.com/FredrikNoren/ungit