マルチプロジェクト、いつやるの？

こんなことがやりたくなった時にマルチプロジェクトしたほうがいいかも、という例をいくつか紹介します。

はじめてのマルチプロジェクト

ここからは実際にマルチプロジェクトを構築するための手順を紹介します。

ここではシンプルな例として、Asakusa Gradle Plugin のドキュメントページで公開しているサンプルアプリケーションに対して、これを以下の3つのプロジェクトに分解してマルチプロジェクトを構築してみます。

• dmdl-proj : DMDLプロジェクト

  • DMDLのみを持つプロジェクト

• app-proj : アプリケーションプロジェクト

  • Asakusa DSLのみを持つプロジェクト。 dmdl-proj で作成したデータモデルクラスを利用する。

• test-proj : テストプロジェクト

  • テストのみを持つプロジェクト。 app-proj で作成したバッチアプリケーションを参照する。

イメージは以下のようになります。

# 今回用の作業ディレクトリ
mkdir -p $HOME/advent2013/
cd $HOME/advent2013/

# サンプルアプリケーションプロジェクトを取得して展開 (バージョン 0.5.3)
wget http://www.asakusafw.com/download/gradle-plugin/asakusa-example-project-0.5.3.tar.gz
tar xf asakusa-example-project-*.tar.gz
cd asakusa-example-project

# Asakusaのインストールとサンプルアプリのフルビルド
./gradlew installAsakusafw
./gradlew build

# 成功したら、一旦cleanしておく
./gradlew clean

cd $HOME/advent2013/

# DMDLプロジェクトを作成
cp -r asakusa-example-project dmdl-proj
rm -fr dmdl-proj/src/main/java/com
rm -fr dmdl-proj/src/test/java/com
rm -fr dmdl-proj/src/test/resources/com

# アプリケーションプロジェクトを作成
cp -r asakusa-example-project app-proj
rm -fr app-proj/src/main/dmdl/*
rm -fr app-proj/src/test/java/com
rm -fr app-proj/src/test/resources/com

# テストプロジェクトを作成
cp -r asakusa-example-project test-proj
rm -fr test-proj/src/main/dmdl/*
rm -fr test-proj/src/main/java/com

cd $HOME/advent2013/

# 親プロジェクトディレクトリを作成
mkdir master

# サンプルアプリケーションからGradle Wrapperだけを持ってくる
cp -r asakusa-example-project/gradle* master

# settings.gradleの作成
echo 'includeFlat "dmdl-proj", "app-proj", "test-proj"' > master/settings.gradle

includeFlat "dmdl-proj", "app-proj", "test-proj"

cd $HOME/advent2013/dmdl-proj

# マーカーファイルの作成
mkdir -p src/main/resources/META-INF/asakusa
touch src/main/resources/META-INF/asakusa/fragment

# ビルド
./gradlew build

dependencies {
    ...

    // DMDLプロジェクトを参照
    compile project(':dmdl-proj')
}

cd $HOME/advent2013/app-proj

# ビルド
./gradlew build

dependencies {
    ...

    // アプリケーションプロジェクトを参照
    compile project(':app-proj')
}

cd $HOME/advent2013/test-proj

# ビルド
./gradlew build

cd $HOME/advent2013/master

# ビルド
./gradlew clean build

project(':app-proj') {
    afterEvaluate {
        dependencies {
            compile project(':dmdl-proj')
        }
    }
}

project(':test-proj') {
    afterEvaluate {
        dependencies {
            testCompile project(':app-proj')
        }
    }
}

まとめ

ということでマルチプロジェクトについて紹介しました。

マルチプロジェクトはうまく使うと全体の見通しがよくなり、重複コードの排除や効率のよい作業分担が可能になるなどメリットが多いと思うので、ぜひ検討してみてください。

マルチプロジェクトの定義方法は、一度やり方がわかってしまえば簡単だと思います。 マーカーファイル を利用するところはAsakusa Framework固有の機能なので、これを忘れてはまらないように気をつけてください。

コメント機能をつける

Tinkerer では内部ではコメント管理の機能を持っていないため、外部のコメント管理用サービスを利用してコメントを扱います。

Tinkererのドキュメントでは、 Disqus を利用してコメント機能をつける方法と、 Facebook Comments を利用した方法が紹介されています。

まず Disqus を試してみたのですが、コメントを投稿してから反映されるのがかなり遅かったり、コメントを削除してもカウンターのほうでユーザー名入りの履歴が残ってしまったりといろいろ微妙な感じでした。

Facebook Comments のほうは安定しているのですが、匿名ユーザからコメントを受け付けることが出来ません。でもまあこのブログではそれでもいいかな、ということでFacebook Comments を利用することにしました。

52 # Add other Sphinx extensions here
53 extensions = ['tinkerer.ext.blog', 'tinkerer.ext.disqus']

52 # Add other Sphinx extensions here
53 extensions = ['tinkerer.ext.blog', 'tinkerer.ext.fbcomments']

cd <...>/myblog
mkdir _template
vi _template/page.html

{% extends "!page.html" %}

{%- block extrahead %}
    <meta property="fb:app_id" content="$(YOUR_APP_ID)"/>
    {{ super() }}
{% endblock %}

サイドバーを拡張する

デフォルトだとサイドバーが寂しいので、いろいろ増やします。

67 # Add templates to be rendered in sidebar here
68 html_sidebars = {
69     "**": ["recent.html", "categories.html", "tags.html", "searchbox.html"]
70 }

cd <...>/myblog
mkdir _template
vi _template/twitter.html

{#-
    twitter.html
    ~~~~~~~~~~~~

    Show Twitter Widget to Sidebar.

-#}

<div class="widget">
    <h1>Twitter</h1>
    <a class="twitter-timeline" width="250" height="500" href="https://twitter.com/apirakun" data-widget-id="$(YOUR_WIDGET_ID)">@$(YOUR_ID) からのツイート</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

67 # Add templates to be rendered in sidebar here
68 html_sidebars = {
69     "**": ["twitter.html", "recent.html", "categories.html", "tags.html", "searchbox.html"]
70 }

ページを拡張する

ページ本体も少し拡張したいです。ここでは Twitter のツイートボタンを追加します。

まず、テンプレートの拡張ファイルを配置するディレクトリ _template を作成し、そこに page.html を作成します。このあたりはこれまでの手順をやっていれば出来ていると思うので、もしあったらスキップしてください。

cd <...>/myblog
mkdir _template
vi _template/page.html

page.html に ツイートボタン用の定義 [6] を追加します。

{%- block body %}
    {{ timestamp(metadata.date, timestamp_format) }}
    {{ body }}
    <br/>
    <a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-count="none">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    {{ post_meta(metadata) }}
    {{ comments }}
{% endblock %}

ページ本体を拡張する場合は、 {%- block body %} 内に定義を追加します。で、実は最初はもっとシンプルに、以下のように親テンプレートの定義にアペンドする、という定義をやってみたのですが...

{%- block body %}
    {{ super() }}
    追加する定義部分...
{% endblock %}

これだと、コメント機能が有効になっている場合にはコメント欄をクリックしないとツイートボタンが見られない、という状態になってしまいました。そこで少し微妙ですが、親の定義を完全に上書きし、本文の直後にツイートボタンがくるよう設定しました。

(追記)と、書いてみたのですが、どうもまだこのあたりの挙動が思ったとおりいっていない感じですね...。

Google Analyticsを設定する

最後に、Google Analyticsを設定します [7] 。

まず Google Analyticsのサイト [8] にいき、アカウントを作成します。

アカウント作成後にJavaScriptのスクリプトが画面に表示されるので、スクリプト文字列をコピーしておきます。この時の注意点で、 <script> タグの部分に囲まれた文字列が出力されますが、タグ自身はコピーせず、タグの中身だけをコピーしてください。

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34761823-1']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

_static/google_analytics.js というファイルを作成して、これにコピーしたスクリプト文字列を貼り付けて保存します。

cd <...>/myblog
mkdir _static
vi _static/google_analytics.js

次に今までと同様、 _template/page.html を編集します(なければ作ります)。

{% extends "!page.html" %}

{% set script_files = script_files + ["_static/google_analytics.js"] %}

これまでの手順のどれかを実施済みであれば {% extends "!page.html" %} はすでにあるはずなので、 {$ set... の部分だけを追加します。

この状態でビルドしたコンテンツをホストにアップすると、Google Analyticsが有効になります。手元ではリアルタイム検索で数秒で情報が反映されていました。

動作していないと思ったら、JavaScriptがうまく設定できていないか疑ってみてください。コピペミスでJavaScriptエラーなどが出ているかもしれません（私はそれで少しはまりました）。

今後は...

とりあえず基本的なカスタマイズ方法を通してみました。

あとはCSSもカスタマイズしたいなーと思っていますが、その辺りは結構疎いので、はたしてやるかどうか...。

Tinkererとはなに？

簡単に言うと、Sphinxをブログ作成、管理用に特化させたブログツールです。

Sphinxの機能はほぼそのまま使えるようなので、Sphinxに慣れている職人さんたちは、 これでブログを書くといろいろ便利そうなのは推して知るべしだと思います。

Tinkererのインストール

easy_install を使ってtinkererをインストールします。

sudo easy_install tinkerer

これを書いている時点では、version 0.4.1b がインストールされました。

セットアップ

まず tinkerer コマンドを使ってブログ作業用のディレクトリを作成します。

mkdir myblog
cd myblog
tinker --setup

カレントディレクトリにいろいろファイルが作成されます。このうち conf.py を編集してブログタイトルやAuthorなどの初期設定を行います。

 6 # **************************************************************
 7 # TODO: Edit the lines below
 8 # **************************************************************
 9
10 # Change this to the name of your blog
11 project = 'An Artisan\'s Build Act'
12
13 # Change this to the tagline of your blog
14 tagline = u'とあるビルド職人の、チクチク作業した軌跡'
15
16 # Change this to your name
17 author = 'apirakun'
18
19 # Change this to your copyright string
20 copyright = '2012, ' + author
21
22 # Change this to your blog root URL (required for RSS feed)
23 website = 'http://akirakw.github.com'

記事を作る

記事を作成するには、 tinker -p '<ページ名>' です。

tinker -p 'hoge'
New post created as '<...>/myblog/2012/09/12/hoge.rst'

生成されたファイル名が表示されるので、このファイルをを編集します。

vi <...>/myblog/2012/09/12/hoge.rst

編集が終わったら、 tinker -b でビルドします。 Sphinxの make clean html に相当します。

tinker -b

基本はこんな感じですが、この他にもビルド対象とならないドラフトファイルを作成したり、ドラフトと本記事を相互に入れたり戻したり、通常のSphinxのような、日付に紐づかない静的なページを作ったりすることが出来ます。私はこのあたりの機能が気に入っています。

詳しくは公式ドキュメントのこちら [1] を参照。

GitHub Pagesに公開する

作成したページ群をホストします。公式ドキュメントでは BitBucket にホストする方法が紹介されていますが、ここでは GitHub Pages に公開します。

GitHub Pages にホストする場合、アカウントに紐づくページとして公開する方法と、プロジェクトに紐づくページとして公開する方法があります。今回は個人ブログということで、前者のアカウントに紐づくページとして公開します。

アカウントに紐づくページとして公開する場合、一例として以下のような手順を踏みます。

1. GitHubで <アカウント名>.github.com というリポジトリを作成する。
2. 作成したリポジトリを git clone して、直下に .nojekyll ファイルを作成する。
3. Tinkererのビルドで生成した myblog/blog/html ディレクトリ以下のファイル郡を master ブランチに push する

2. の手順が少し注意すべき点で、GitHub Pagesでは Jekyll というコンテンツ管理のシステムがデフォルトで有効になるようで、この Jekyll がアンダースコアを含むディレクトリをうまく処理出来ないため、Sphinxがデフォルトで利用する _static や _template などのディレクトリをうまく扱えないようです。この Jekyll を無効にするために、 .nojekyll を配置する必要があります。

以下、2.と3.の手順例です。

git clone git@github.com:akirakw/akirakw.github.com.git
cd akirakw.github.com
touch .nojekyll
rsync -av <...>/myblog/blog/html/ .
git add .
git commit -m "First commit of blog contents."
git push origin master

これで完了です。最初だけはGitHub Pageの公開反映に数分かかるようです。数分後に http://<アカウント名>.github.com にアクセスすると、ブログページが表示できると思います。

とりあえず今回はブログ公開出来たところまで。 次回はTinkererのカスタマイズ編です。