ブラウザのみを使ったspending.jpの立ち上げ方まとめ

既存マニュアルと鳥取県版および松阪市版を立ち上げた経験をもとにまとめます。おそらくLinuxやMacベースの開発者以外の方はWindowsでブラウザのみを使ってなんとかしたいのでは。

spending.jpは「1.OpenSpendingのWeb API(JSONベース、クロスサイト許可)」と「2.JavaScript(jqueryベース)のHTMLファイルをGitHub上でホスティング」の組み合わせという動的なWebサーバーを自前で用意する必要ない構成でなりたっており、エディタやブラウザだけでサイト構築ができるようなしくみになっています。

(私事ですが昨年夏のspending data partyではじめ触ったときになるほどと関心しました)

ということでさっそくはじめましょう。


ステップ1.アカウント作り(Google Docs、OpenSpending、GitHub)

Google Docs→https://accounts.google.com/SignUp

OpenSpending→https://openspending.org/login

GitHub→https://github.com/

(※ここは説明割愛します)

ステップ2.Googleドキュメントのスプレッドシートへの予算データ入力・公開

1) スプレッドシートを新しく開く。

2) Excelの雛形をダウンロードする。

3) スプレッドシートの「ファイル>開く」から「アップロード」を選択し、ダウンロードしたExcelをアップロード。

4) スプレッドシートにデータを入力。「OpenSpending用のデータの作り方」を参考に作業しますが、以下2点注意ください。

  1. 自治体予算は「款項目」にわかれており、款のレベルを「大項目ID(category_id)」、項のレベルを「小項目ID(subcategory_id)」に記載します。さらに既存の款項だとわかりにくいとのことで予算データの分類を工夫したりします。款項目の意味や分類例については松阪市CIO補佐森本さん作成の松阪市の予算データ分類を参考にしてください。
  2. 「大項目ID(category_id)」は1からはじまる数字をセットし、「小項目ID(subcategory_id)」はkeyとなるよう一意の文字列をセットします。例えば、「category_id」が1の場合、「subcategory_id」は101、102、103・・・というようにセットします。この場合「小項目ID(subcategory_id)」は「大項目ID(category_id)」とかぶらないようにします。たとえば「subcategory_id」に10がある場合に「category_id」には10がセットされないようにします。そのため、category_idが1の場合、subcategory_idは101、102・・・(款に対する項の数分)、category_idが2の場合、subcategory_idは201、202・・・(款に対する項の数分)といったように値をセットします。

5) 公開方法にしたがってCSV形式でデータ公開します。

ステップ3.OpenSpendingへのデータ登録

OpenSpendingへのデータの登録方法」にしたがって登録します。以下2点は要注意です。

1)「amount:」は「amount」が正しい。measureは日本語だと「計測」。

2)「year」でなく「time」が正しい。dateは日本語だと「日付」。

-------------------------------------------------------------

「Add dimension」で、以下の4つのデータを入力します。

column

type

amount:

measure

year

date

Category

dimension

Subcategory

dimension

-------------------------------------------------------------

ステップ4.GitHubでのプロジェクトのfork

Windows PCでの「Spending.jp クローンサイトの立ち上げ手順 (OpenSpending 対応版)」実行マニュアル」の「1. プロジェクトのfork」のみを実施します。実はコマンドプロンプト等でgitコマンドを実行しなくても、forkして数分たつと「http://{ACCOUNT_NAME}.github.io」でアクセス可能になります。

このとき、「Spending.jp クローンサイトの立ち上げ手順 (OpenSpending 対応版)」の「1. プロジェクトのfork」に記載されているとおり、リポジトリ名を{ACCOUNT_NAME}.github.io({ACCOUNT_NAME}はアカウント名もしくは組織名をあわらします)にすることにご注意ください。そうしないと、「http://{ACCOUNT_NAME}.github.io」でのアクセスができません。(参考:GitHub 上に ページを作成する

また、何分たっても反映されない場合ブラウザのキャッシュクリアなどを実行してみてください

ステップ5.ブラウザのみでGitHub上のファイルの編集

1)js/setting.jsを編集するため、画面上で「Edit」を押下します。

2)「Taxes.taxRate = 0.06; // 住民税率」を都道府県民税だと4%(0.04)、市町村民税だと6%(0.06)に編集します。住民税が1割でさらにそれが4:6に分かれるための措置です。これを見ると、本サイトでは所得税が含まれませんし、住民税のうちの各都道府県や市町村に割り振られた税金のみを対象としていることがわかります。

3)「OpenSpending.identifier」と「OpenSpending.year」を編集します。「OpenSpending.identifier」にはOpenSpendingに登録した識別子、「OpenSpending.year」にはOpenSpendingに登録したyearに修正します。

4)「OpenSpending.Styles.Cofog」部分をOpenSpendingに登録した「category_id」と「subcateogory_id」の値にセットします。アイコンや色も「Category」や「Subcategory」に相当するものに変更します。またカンマの有無でエラーになるケースがありますのでご注意ください(JSON形式に従うこと、そのため最後はカンマなし)。

以下編集箇所です。

5)「Commit Changes」ボタンを押下し、修正を反映します。

6)ほかファイルについても「3.カスタマイズ」を参考に修正します。実はアイコンであるSVGファイルもテキストなのでテキストエディタでコピペして対応することができます(forkした環境にないアイコンはこちらからダウンロードしてファイル作成により空ファイルを作って編集します。githubのWeb機能にはファイルアップロード機能はないようです。)。

7)最後CNAMEを編集して完成です。

以上


※以下参考リンクです。ほとんどこれらの文書のパクリです。

参考1:最も簡単なOpenSpending用のデータの作り方

http://qiita.com/jmblog/items/a804177b1898e6379fe8

参考2:OpenSpendingへの予算データの登録方法

http://qiita.com/niryuu/items/4adb658c627d2e6d48e4

参考3:Windows PCでの「Spending.jp クローンサイトの立ち上げ手順 (OpenSpending 対応版)」実行マニュアル

https://docs.google.com/document/d/19HSh1b4SgT500AIOCRwpVhCmvP5LmC6ZrTEsYYL2VoU/

※本ドキュメントについては、Masanobu Takagi, Facebookページまでご連絡ください。