baserCMS テーマの github 公開と Gradle による Sass ビルド

baserCMS テーマコンテスト受賞作品の「Cafe Debut」と「basercart」テーマのソースコードを github に公開しました。 🙂

h1romas4/basercart

basercart

h1romas4/cafedebut

cafedebut

普通に baserCMS に導入してみたい方は、baserマーケットから .zip をダウンロードしていただければと思います。「Cafe Debut」は先日 baserCMS 3.0.4 に対応され、プラグイン同梱機能や、新しいコーディングスタンダードに対応した新板になっています。(調整していただきまして、どうもありがとうございました!)

今回公開した github のソースコードは、テーマの修正や開発用を想定したものです。

basercart のソースツリーには開発時に用いた sass ファイルと、gradle によるビルド定義を加えています。( .sass ファイルウォッチから .css への自動コンパイルができるように準備しています)

本テーマの製作時は grunt で sass のコンパイルを行っていたのですが、nodejs や Ruby の環境を導入したり、それらのバージョンを開発メンバー間で合わせたりするのが大変と感じましたので、github 公開版ではビルダーを Gradle に変更しました。

Gradle はウェブ制作の方にはあまり馴染みがないかとは思いますが、最近の Java 界隈で良く採用されているビルドツールです。ここでは、grunt と同じようなタスクランナーとして考えてもらって良いと思います。

Gradle が依存するのは Java の環境だけですので、Windows、Mac、Linux ともにほとんど準備なしに(Java が入ってなければ入れるだけ、nodejs や Ruby、各周辺ツールの導入なしに)動作させられ、いつでもポータブルに同一の結果が得られるのが、grunt から変更したポイントになります。

github に公開されているソースには Gradle から生成できる gradlew と呼ばれる Gradle 自体の環境を自動で準備するラッパープログラムもコミットされています。なので事前に Gradle を導入することすら不要です。

というわけで、github から git clone するか .zip をダウンロードしていただいた後、./gradlew watch するだけで .sass のウォッチ・ビルドが開始できます。(初回起動時のみ、環境をオートでつくるため時間が少々かかります)

cd basercart
./gradlew watch
#Windows の場合は、gradlew.bat watch

簡単あるね。 🙂

build.gradle では、次のプラグインを使わせて頂いています。

A SASS / Compass plugin for Gradle は、JRuby を用いて gem の取得や処理を行い、Sass / Compass のコンパイルを行います。この動きにより、ビルドを行う PC には事前に Ruby の導入が不要になる仕掛けになっています。

その他にも同様な動きで Java に含まれる JavaScript の実装(Rhino)を用い、CoffeeScript をコンパイルするプラグインもあるようです。(TypeScript も同じ実装、早くでないかなぁ。Nashorn だと面白そう :))

Gradle Watch Plugin は Java の NIO を用いて、各 OS のファイル監視 API からの通知を元に変更時のタスクが定義できます。(ちなみに、A SASS / Compass plugin だけでも watch はできそうでした)

Gradle の build.gradle 定義は、Groovy が持つ AST 変換や各種シンタックスシュガーなどの効果で、非常に簡潔にかくことができます。 これに慣れてしまうと、JS の (function() { }) とか .pipe(“”) などがずいぶん冗長に見えてしまいますね。 😛

というわけで、ウェブ制作にも Gradle いかがでしょうか。配布先に環境をつくらなくてよいのは、大きなメリットのように思います。

ちなみに、あんまり関係ないですが Groovy 版 Ruby on Rails の新板である Grails 2.3 からは同梱される Asset Pipeline Plugin により sass、less、coffeescript が標準サポートされるようです。ごくり。

ぐる。

Eclipse EGit の使い方(2/2)

前回に続き、EGit の使い方です。

目次

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

このページでは、7〜13までを記載しています。

ブランチからのマージ1

develp ローカルブランチのコミットを origin/master に接続している master ブランチにマージしてプッシュする操作です。この操作では、devel に行ったコミット操作が master に統合されます。

develp ローカルブランチは次のようになっています。

egit-rebasei05

1. master ブランチにスイッチします。

egit-margea01

2. プロジェクト右クリックから、Team -> Marge を選択します。

egit-margea02

3. devel ブランチを指定し Merge ボタンを押下すると、master ブランチに devel ブランチのコミットがマージされます。devel と master でコンフリクトがなく、Fast forward option で、If a fast-foward, only update the branch pointer を選択しているため、master のおしりに devel のコミットが結合されます。

egit-margea03

egit-margea04

4. リモートリポジトリにプッシュされていないコミットがあると↑印で分かります。 Team -> Push to Upstream でプッシュします。( devel ブランチで行った rebase -i で修正したコミットはプッシュされていないのが分かります)

egit-margea05

egit-margea07

egit-margea08

b03

5. 不要になったローカルブランチは、Git Repository View から右クリック Delete Branch で削除できます。

egit-margea09

ブランチからのマージ2

develp ローカルブランチのコミットを origin/master に接続している master ブランチにSquash マージしてプッシュする操作です。この操作では、devel ブランチに行ったコミット全てをひとつにまとめて master にコミットできます。

1. Team -> Swicth To -> New Branch から devel2 ローカルブランチを作成します。

egit-margeb01

2. devel2 で作業を行い、(恥ずかしい)コミットをいれます。

egit-margeb02

3. Team -> Swich To -> master から master ブランチに切り替えます。

egit-margea03

4. Team -> Merge を選択します。

egit-margeb03

5. devel2 ブランチを選択し、Merge options で Squash を選択し、Merge ボタンを押下すると、ソースコードがマージされます。(コミットはされません)

egit-margeb04

egit-margeb05

egit-margeb06

6. マージされたソースを master ブランチにコミットすると、devel2 の修正が新しいコミットとして作成できます。なお、Commit Changes ダイアログでは Commit and Push を押下すると、コミット後自動的にリモートブランチにプッシュが行えます。

egit-margeb07

egit-margeb08

b04

コンフリクトの解消

マージやプル操作などで、ソースに衝突が発生した場合は、次の手順でマージを行います。

master からブランチした devel3 ローカルブランチで作業中に、起点とした master に別な修正がかかりコンフリクトした例です。

egit-confrict01

master にスイッチして devel3 をマージしたところ衝突が起きました。該当のモジュールに赤印がつき、プロジェクトのマーカーに Conficts がつきます。

egit-confrict02

egit-confrict03

1. 衝突したモジュールを右クリックし、Maege Tool を選択します。

egit-confrict04

2. Select a Merge Mode で Use HEAD を選択します。

egit-confrict05

3. Merge Tool でソースコードのマージを解消します。

egit-confrict06

4. マージして赤くなっているモジュールを右クリックから、Team -> Add to Index を選択し、インデックスに戻してあげると、プロジェクトのマーカーが Merged に変わります。

egit-confrict07

egit-confrict08

5. コミットを行います。(マージコミットが作成されます)

egit-confrict09

egit-confrict10

b05

リベース

ローカルブランチで作業中に、ブランチの起点となったコミットを動かし、なるべくマージ(コミット)しないようにリベースする手順です。

master からブランチしたローカルブランチの devel4 をリベースし、最新の master を起点に追従します。

1. devel4 で作業中の master にリベースしたいタイミングで、Team -> Rebase を選択します。

egit-rebase01

2. master ブランチを選択し、Rebase を押下します。

egit-rebase02

3. rebase 時に不運にもソースコードにコンフリクトが起きた場合は、Start Merge Tool to resolve conflicts を選択し OK ボタンを押下します。

egit-rebase03

4. コンフリクトを解消するとマージ印がつきます。プロジェクトのマーカーは Rebase interractive になっており、まだ rebase 操作中であることが分かります。

egit-rebase04

5. Team -> Rebase -> Continue Rebase を選択し、全ての衝突を解消すると、リベースが完了します。

egit-rebase05

egit-rebase06

コミットコメント修正

コミットした直前のコミットコメントは修正できます。

egit-amend01

1. モジュールに修正をかけない状態で、再びコミットを行おうとすると、No files to commit ダイアログが表示されるので、はいを押下します。

egit-amend02

2. コミットダイアログが表示されるので、コミットコメントを修正し、Commit を押下すると直前のコミットコメントが修正されます。

egit-amend03

egit-amend04

コミットリセット

プッシュ前であれば、コミットを取り消す(HEADを移動させる)ことができます。

egit-reset01

1. ヒストリービューからいらないコミットの前(HEADにしたい)のコミットにカーソルを合わせて、Reset -> Mixed を選択すると、そこまでのコミットがなかったことになります。(Mixed を選択した場合、ワーキングディレクトリのファイルの内容はそのままになります。ファイルの内容も抹消したい場合は Hard を選択します)

egit-reset02

egit-reset03

egit-reset04

リバートコミット

プッシュしてしまったコミットを取り消すには、打ち消しのコミットを入れてプッシュします。

機能G追加のコミットが不要でしたが、リモートリポジトリにプッシュしてしまったので取り消します。

b06

egit-revert01

1. ヒストリービューから、取り消したいコミットを右クリックして Revert Commit を選択すると、取り消しとなるリバートコミットが行われます。

egit-revert02

egit-revert03

3. リバーとコミットをプッシュします。

egit-revert04

b07

以上、Egit の操作系の紹介でした。(実はプルを書き忘れていたりしますがそのうちなおしておきます…)

EGit ではその他にも、stash とかタグうちとか、ブランチ同士の比較なども同じような操作でできますので試してがってん。3.3.1 にて自分がやりそうな操作はひと通りできるようになっているようです。(3.4 も後少しで Eclipse Luna とともにリリースされるハズです)

気になっているのが JGit のコマンドラインインターフェースがあるような雰囲気なのですが、どうやって使うんでしょうか。

…てなわけで、オチがないので滝にうたれてきます。

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」から書きます。

続く…