Spending.jp クローンサイトの立ち上げ手順 (OpenSpending 対応版) #GitHub

( この記事は、先日書いたSpending.jp クローンサイトの立ち上げ手順の改訂版で、OpenSpending というサイトに登録したデータを取り込む場合の手順書となります。
既に横浜版の Spending.jp は OpenSpending 対応のソースコードに切り替わっており、前述の記事の手順は古くなっておりますので、お気をつけください。)

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

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

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

派生版として、2013年3月14日現在、千葉県千葉市、宮城県仙台市、福岡県福岡市、愛知県北名古屋市、宮城県南三陸町の地域でもクローンサイトが立ち上がっております。
http://spending.jp/#clones に最新の状況を更新していきます。

このエントリでは、あなたの希望する地域で spending.jp のクローンを立ち上げる方法を記述しています。コマンドラインでの操作ができ、HTMLとJavaScriptの多少の知識さえあれば、どなたでも作成できます。特にサーバを用意する必要もありません。

Windows 版をお使いの方は、仙台市版を立ち上げた森川さんが、わかりやすいマニュアルを作成してくれていますので、そちらの手順も御覧ください。
Windows PC での「Spending.jp クローンサイトの立ち上げ手順 (OpenSpending 対応版)」実行マニュアル

0. OpenSpending への予算データの登録と Publish

まず、OpenSpendingへの予算データの登録方法の記事に従い、OpenSpending のサイトにデータを登録してください。（Make Public で公開しておくのを忘れずに！)

データセット作成時の Identifier を使いますので、控えておいてください。以下記事では、Identifier を yokohama_budget としています。また、データ表示の対象は 2012 年です。
あなたの作ったデータに応じて、適宜読み替えてください。
インポートデータは、上記記事のテンプレートをそのまま使ったものとしています。

1. プロジェクトのfork

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

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

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

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

% git clone git@github.com:{ACCOUNT_NAME}/{ACCOUNT_NAME}.github.io.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.

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

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

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

やりましたね！

2.Jekyll のセットアップ

しかし、このままでは横浜版が立ち上がっているだけになってしまいますので、カスタマイズをしていかなくてはいけません。その為に Jekyll をインストールします。
この手順は、ローカル環境で動作確認をしながらカスタマイズをしたい方のための手順です。ローカル環境で確認をしなくても良い方、セットアップが難しい方はステップ3に進んでください。

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.io/_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 のコードなども入っているので書き換えてください
js/setting.js	税金の控除額の設定と、アイコンファイルや色設定のファイルです。
contact.html	Contact
about.html	Where Does My Money Go? について
sources.html	データソースについて
team.html	チーム
icons/*.svg	表示用アイコンのSVGファイルです。足りない場合ここに作成してください。
_includes/sig.markdown	シグネチャーファイルです

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

特に重要なのは js/setting.js ですが、以下のようになっています。

js/setting.js

var Taxes = Taxes || {};

Taxes.baseKoujo = 330000; // 住民税基礎控除
Taxes.huyoKoujo = 330000; // 一人分の扶養控除
Taxes.taxRate = 0.06; // 住民税率

var OpenSpending = OpenSpending || {};

OpenSpending.identifier = 'yokohama_budget';
OpenSpending.year = '2012';

OpenSpending.Styles = OpenSpending.Styles || {};

OpenSpending.Styles.Cofog = {

  /* yokohama cofog */
  '1': { icon: 'icons/helping-others.svg', color: '#C75746', bcolor: '#935B3B' },
  '1-1': { icon: 'icons/helping-others.svg', color: '#C75746', bcolor: '#935B3B' },
  '2': { icon: 'icons/schools.svg', color: '#C75746', bcolor: '#0AB971' },
  '2-1': { icon: 'icons/pre-school.svg', color: '#C75746', bcolor: '#0AB971' },
  …(省略)…
};

 
OpenSpending.identifier と OpenSpending.year には、手順0で入力したデータセットの identifier と表示したい年をセットしてください。

うまく表示されない場合、index.html の中のドリルダウン項目の設定が問題な場合があります。
drilldowns: ['Category', 'Subcategory'],
という行を見つけ、全て小文字に変更してみてください。
drilldowns: ['category', 'subcategory'],

OpenSpending.Styles.Cofog の中身は、

'1': { icon: 'icons/helping-others.svg', color: '#C75746', bcolor: '#935B3B' },

のようになっていますが、
最初の '1' の部分が Category_id または Subcategory_id、次がアイコンファイルの指定、color が一日あたり使途のアイコン色、bcolor が使途別予算額で表示するアイコン色なので、適宜変更してください。

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

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

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

4. CNAME の変更

確認が終わったら、独自ドメインで動作するように変更してみましょう。DNSに以下のCNAMEエントリーを追加します。

CNAME {SUBDOMAIN} {ACCOUNT_NAME}.github.io.

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

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

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

spending.jp のサブドメインを割り当てたい方は、CNAMEに好きなドメイン名（*.spending.jp）を入力することで有効になります。（現在はどのサブドメインでも、githubを差すようになっております。）

いかがでしたでしょうか。何かわからないことやサポートが必要であれば、http://spending.jp/contact.html にあるフォーラムにお問い合わせください。
また、あなたの街のサイトが出来上がったら是非お知らせください。リンクを貼らせて頂きます。

Spending.jp クローンサイトの立ち上げ手順 (OpenSpending 対応版)

0. OpenSpending への予算データの登録と Publish

1. プロジェクトのfork

2.Jekyll のセットアップ

3.カスタマイズ

4. CNAME の変更

関連記事