Spending.jp クローンサイトの立ち上げ手順（古いです） #GitHub

注：この手順は OpenSpending.org を使わないバージョンの立ち上げ手順です。どうしても OpenSpending を使いたく無い場合はこちらの手順でも立ち上げができますが、最新の手順に従うことをお勧めいたします。
新手順→Spending.jp クローンサイトの立ち上げ手順 (OpenSpending 対応版)

＝＝＝＝＝＝＝＝元記事（若干改定してあります）＝＝＝＝＝＝＝＝＝＝
Spending.jp とは、Open Knowledge Foundation がオープンソースソフトウェアとして公開しているWhere Does My Money Go? という予算の可視化サイトを日本語にローカライズし、横浜の予算データを投入して作成したサイトです。
2012年6月に開催された、GLOCOMオープンデータ活用ハッカソンで生まれました。(Hack For Japan のレポート)

あなたの年収を入力することで、もし横浜に住んでいた場合、一日にどれだけの金額がどの分野に使われるかを視覚的に見れるようになっています。

(Spending.jp スクリーンショット)

派生版として、千葉市の予算データを可視化したchiba.spending.jp も立ち上がっています。

このエントリでは、あなたの希望する地域で spending.jp のクローンを立ち上げる方法を記述しています。

1. プロジェクトのfork

まず、github で新たなアカウントを作成してください。
Create Organization から、新しい組織を作っても良いと思います。
作成したアカウント名を、以下{ACCOUNT_NAME}と表現します。

作成したら、https://github.com/orezeni/orezeni.github.com のプロジェクトを、自分のアカウントへForkします。Fork をすることで、そのプロジェクトを自分の環境にコピーすることができます。

Fork 後、Settings メニューより、リポジトリ名を{ACCOUNT_NAME}.github.com へ変更しておきます。(警告が出ますが大丈夫)

リポジトリの準備ができたので、clone します

% git clone git@github.com:{ACCOUNT_NAME}/{ACCOUNT_NAME}.github.com.git
Cloning into '{ACCOUNT_NAME}.github.com'...
remote: Counting objects: 895, done.
remote: Compressing objects: 100% (366/366), done.
remote: Total 895 (delta 500), reused 880 (delta 486)
Receiving objects: 100% (895/895), 1.02 MiB | 368 KiB/s, done.
Resolving deltas: 100% (500/500), done.

この記事の手順は OpenSpending 非対応用の手順ですが、最新のソースコードはOpenSpending対応版になってしまっていますので、not-openspending タグの内容で master ブランチを強制的に上書きします。

% git checkout -b tmp # 作業用のブランチに移動
% git branch -d master #ローカルのマスターブランチを削除
% git branch -b master not-openspending # not-openspending タグの内容で master ブランチを作成
% git push -f origin master # 強制的にリモートの master ブランチを上書き

とりあえず CNAME ファイルを一旦削除して、サーバに push します。

% cd {ACCOUNT_NAME}.github.com
% rm -f CNAME
% git commit -m "removed CNAME"
% git push origin master

数分立つと、http://{ACCOUNT_NAME}.github.com/ で、新しくサイトが立ち上がっているはずです。

やりましたね！

2.Jekyll のセットアップ

しかし、このままでは横浜版が立ち上がっているだけになってしまいますので、カスタマイズをしていかなくてはいけません。その為に Jekyll をインストールします。

Spending.jp では Ruby 1.9.3-p194 を使っていますので、rbenv や rvm を使ってインストールしてください。以下では rbenv を使って、1.9.3-p194 がインストールされている状態から始めています。

1.9.3-p194 を利用し、必要なライブラリをインストールします。
(bundler のインストールと、bundle install コマンドの実行）

% rbenv local 1.9.3-p194 #rbenv でのRubyバージョン指定
% gem install bundler #bundler をインストール
Fetching: bundler-1.3.0.gem (100%)
Successfully installed bundler-1.3.0
1 gem installed
Installing ri documentation for bundler-1.3.0...
Installing RDoc documentation for bundler-1.3.0...

% bundle install --path vendor/bundler # vendor/bundler に必要な gem をインストール
Fetching gem metadata from https://rubygems.org/........
Fetching gem metadata from https://rubygems.org/..
Resolving dependencies...
Installing RedCloth (4.2.9) with native extensions 
Installing fast-stemmer (1.0.2) with native extensions 
Installing classifier (1.3.3) 
Installing directory_watcher (1.4.1) 
Installing kramdown (0.13.8) 
Installing liquid (2.4.1) 
Installing syntax (1.0.0) 
Installing maruku (0.6.0) 
Installing posix-spawn (0.3.6) with native extensions 
Installing yajl-ruby (1.1.0) with native extensions 
Installing pygments.rb (0.3.7) 
Installing jekyll (0.12.0) 
Installing rdiscount (1.6.8) with native extensions 
Installing redcarpet (2.1.1) with native extensions 
Using bundler (1.2.4)

さて、おもむろに preview 実行をしてみましょう。

% bundle exec rake preview
jekyll --server --auto
Configuration from /Users/hal/Documents/workspace/orezeni.github.com/_config.yml
Auto-regenerating enabled: . -> ./_site
[2013-02-25 17:41:37] regeneration: 1733 files changed
[2013-02-25 17:41:38] INFO  WEBrick 1.3.1
[2013-02-25 17:41:38] INFO  ruby 1.9.3 (2012-04-20) [x86_64-darwin12.2.1]
[2013-02-25 17:41:38] INFO  WEBrick::HTTPServer#start: pid=99942 port=4000

という感じで、4000番ポートでローカルサーバが立ち上がれば成功です。ブラウザからlocalhost:4000で以下のようなページが表示されれば、とりあえず必要なライブラリはインストールできています。

3.カスタマイズ

あとは、各ファイルを更新すればサイトをカスタマイズできます。以下のファイルなどを変更する必要があると思います（他にもあるかも）。ファイルを更新すると、Jekyll が自動的に変更を認識しますので、preview の再起動は要りません。

ファイル名	解説
README.md	README
index.html	トップページ
_layouts/default.html	レイアウトファイル。Google Analytics のコードなども入っているので書き換えてください
aggregate.json	予算データ。一番重要なファイルです。（誰か解説記事を書いてくれると嬉しい）
js/dailybread.js	aggregate.json を表示する部分、日本語への対訳や控除額の設定なども入っています。アイコンの色変更もこのファイルです。
js/cofog.js	aggregate.json で入力されたデータとアイコンファイルの対応付けをしているファイルです。新規にアイコンを追加した場合などにはこちらも修正する必要があります。
contact.html	Contact
about.html	Where Does My Money Go? について
sources.html	データソースについて
team.html	チーム
icons/*.svg	表示用アイコンのSVGファイルです。足りない場合ここに作成してください。
_includes/sig.markdown	シグネチャーファイルです

Jekyll では、HTMLの記述にHAMLという記述言語を使う必要があります。以下のサイトなどを参考にしてください。
日本Hamlの会

修正したらコミットして push すればサーバー側も変更されます。

Rakefile を修正しておくと、bundle exec rake deploy でpushできます。(pushするほうが早い気もする)

% vi Rakefile
(12行目を変更)
12 >.sh "git push -f git@github.com:{YOUR_ACCOUNT}/{YOUR_ACCOUNT}.github.com.git master"

4. CNAME の変更

独自ドメインで動作するように変更してみましょう。DNSに以下のCNAMEエントリーを追加します。

CNAME {SUBDOMAIN} {ACCOUNT_NAME}.github.com.

CNAMEファイルを作成してpushします。

% echo "{SUBDOMAIN}.{DOMAIN_NAME}" > CNAME
% git add CNAME
% git commit -m "changed CNAME"
% git push

これで、数分経つと http://{SUBDOMAIN}.{DOMAIN_NAME}/ でサイトが見れるようになるはずです。

spending.jp のサブドメインを割り当てたい方は、私（hal[あっとまーく]georepublic.co.jp）まで御連絡ください。すぐに設定させていただきます。

5. 注意点

本家の Where Does My Money Go? では、予算データを OpenSpending.org というサイトから取ってくるようになっています。Spending.jp が立ち上がった時のハッカソンでたまたま OpenSpending が落ちていて使えなかった為、ローカルで持つように変更しました。
予算データは頻繁に変わるものでもないのでいまのままでもそれほど問題はありませんが、OpenSpending にデータを投入すると、そちら側でもグラフなどが表示できるようになっているので、その方が良いでしょう。
できれば、この手順ではなく、Spending.jp クローンサイトの立ち上げ手順 (OpenSpending 対応版)をご利用ください。

本家の Where Does My Money Go? の方が機能が多かったりもするので、本家のリポジトリも参考にしてみてください。