この記事は、Civic Tech Advent Calendar 2017の13日目の記事となります。
はじめまして。静岡県富士市の5374 ( fuji.5374.jp )を運用している佐野です。
富士市版5374を運用し始めて2年ぐらい経ちました。作成こそ大変ではありましたが、幸いなことにこの2年間はごみカレンダーのルールなどは変わりないため、データの更新のみの作業でなんとか出来ています。
今回は、毎年やっているのに毎回忘れてしまうので、どういう更新作業をしているかと、カスタマイズしたときの方法などを説明してみます。なにせ大体毎年3月頃にしか見ていないので、毎年の自分のためでもあります。
- 説明すること
- データをどうやって効率良く作るか
- オリジナルの5374.jpからカスタマイズした部分
- 説明しないこと
- 5374.jpを始める方法
- 5374.jpの公開する場所（ホスティング先）
データ更新について
毎年のカレンダーですが、上にも書いたとおり毎年３月半ばに公開されるので（自分も使いたい事情もあって）それに合わせて対応したいです。カレンダーが公開される時期は富士市では広報冊子でアナウンスされますし、富士市公式のWEBサイトでも出ます。
特に公式サイトはURLが同じなので、その時期に定期的に見に行けば直ぐに気がつけます。URL固定は大事で、その点は素晴らしいです。
ですが、ごみカレンダー自体は紙のポスターライクなカレンダーか、それの元データから作られているPDFファイルしかありません。よく出すゴミは曜日指定になっていますが、その他のリサイクル系のゴミの曜日はやや特殊です。場合によっては手打ちになってしまいますし、作成当初は物は試しと手打ちしていました。
手打ちから楽をする
テキストデータとして扱えない紙媒体やPDFファイルを見ながらカレンダー情報の手打ちをすることになるので、入力しやすい表計算(Excel/Googleスプレッドシートなど)を用いることになります。
富士市版5374ではネット環境があればいつでも作成できるGoogleスプレッドシートを使っています。以降の解説もGoogleスプレッドシートの方式で説明しています。(Excelでもほぼ同じだと思われます）
またGoogleスプレッドシートはシートファイルでCSVファイルを書き出すことが出来ます。名前が、スプレッドシート自体のタイトルにシート名とついてしまうので、リネームが必要になりますが、Excelよりは多少は楽できます。
幾つかのCSVファイルをすべて手打ちだと過酷な作業なので、手打ちでなくても良いところをできるだけ無くすようにします。
5374の標準機能を使う
5374のゴミカレンダーはいくつかのCSVで構成されています。その中でも area_days.csv をよく編集することになります。（場合によりますがゴミの分別情報である target.csv も結構な行数になるはずです）
ゴミの曜日の指定方法ですが、5374の専用書式があります。詳しくはgithubのドキュメントにて確認できます。
5374/LOCALIZE.md at master · codeforkanazawa-org/5374
富士市の場合、燃えるゴミとプラスチックの資源ごみが毎週あったので専用の書式を使っています。
手打ちする場合はシートから参照させる
5374の専用書式が使えない場合、「不定期な日付」の書式を使います。形式としては、YYYMMDDを半角スペースで区切って一つづつ入れていきます。
5374/LOCALIZE.md at master · codeforkanazawa-org/5374
このセルの位置に手打ちしてもよいのですが、表計算ソフトは1セルに対しての入力はそれほど長い文字列を考慮していなくて入力が面倒なので、予め別のシートを作り、ある程度の規模で1セルごとに入力したうえで、シート間の参照機能で呼び出せると良いです。
Ref:他のシートのデータを参照する - ドキュメント エディタ ヘルプ
例えばこのセルでは参照機能で別のシートのセルを呼び出しています。
このセルに入力した日付一覧はこちらにあります。
上の図だと、view（AD）列のセルを元のarea_daysシートから呼び出しています。
関数を使って自動で生成する
先程の不定期日付を参照機能で作っているとしましたが、それだけでは作れません。セルごとに入力したものをまとめる必要があります。そこで表計算の便利機能の関数機能を使います。
view列ではこのように2つの関数で構成されています。
CONCATENATE関数は 複数の文字列を結合する関数です。一つのセルに入力した日付を5374の不定期日付を複数入れるときに半角スペースで区切る必要がありますが、この関数を使って、セルのアドレス(A1とか)と半角スペースを交互に入れています。
Ref:CONCATENATE - ドキュメント エディタ ヘルプ
TEXT関数は、セルの情報を指定した表示形式に従って文字列にします。日付情報はセルの表示方法で変わるのですが、そのままセルを参照させると日付ではないただの数字が帰ってきます。
Googleスプレッドシート（Excelもほぼ同じらしいです）では日付を管理する時は内部のデータとしては日付ごとに番号を振っているようで、例えば 2017年12月13日と表示されている日付のセルの表示形式を数字にすると 43082 と表示されるはずです。
（日付や時間を扱う関数のドキュメント内に説明がされています→DAY - ドキュメント エディタ ヘルプ）
先程も述べたように不定期日付の書式はYYYYMMDDを守る必要があるため、そのセルをTEXT関数で呼び出します。
このテキスト関数の結果を一つ前で使っているCONCATENATE関数で文字列の結合をして、最終的なview列を作っています。
この他にも、VLOOKUP/HLOOKUP関数のような特定のシートやセルの行列から検索して呼び出してくれる関数も便利です。富士市のゴミカレンダーを生成する際にも使うのですが、*LOOKUP系の説明は大きくなりすぎるので、詳しくはググっていただければと思います。
実はview列の構成をする各日付のセルは別のシートである方法で生成した情報を元にVLOOKUP関数で呼び出しています。富士市のゴミカレンダーの事情で苦労した部分です、説明が大きくなりすぎるので今回は割愛しています。
（作成当初に書いたブログ記事に簡単に説明しています→まったりlog残し - ごみ出しカレンダーサービス 5374アプリ 静岡県富士市バージョンを作ってみました - 作成作業編2 )
Googleスプレッドシートで使える関数一覧はこちらから参照できます。情報をもとに自動的に生成させたいときに使える機能があると思うので、眺めておくと良いと思います。
Ref:Google スプレッドシートの関数リスト - ドキュメント エディタ ヘルプ
オリジナルの5374.jpから変更した部分
富士市版5374では、このページ一つ見れれば富士のゴミ事情がほとんど分かることを目指したく、情報量を増やすためにHTML側も改造をしています。
富士市にはごみカレンダー以外にもゴミ分別ごとの情報がまとまった冊子（その名も便利帳）がありまして、具体例やごみとなるものと分別方法が細かくまとまっています。市民なら一家に一冊あると便利でして、まちづくりセンター（公民館に簡易な市政サービスがまとまった地域拠点）でも配布されています。
便利なのですが、手元にないと見れない事情があったり、PDFでも配布されているのですが文字情報が無いので検索もできません。超個人的に欲しかったので全部手打ちで5374に移植しました。
そのときに5374の表示を壊さないように拡張出来るように試行錯誤してました。他の地域の5374でも同じような例がありますが、あまり解説されていることがなかったようなので、富士市版5374で行ったカスタマイズ方法を紹介します。
HTMLの構造
5374.jpは最近良く見るSPA(Single Page Application シングルページアプリケーション）の形態のようです。基本的にはindex.htmlのみの構成です。
5374/index.html at master · codeforkanazawa-org/5374
実際にHTMLファイルはgithubのソースコードから参照できますが、ブラウザで見た場合はjavascriptでの動的なページ情報の更新（アプリっぽく見せるために）を行うため少し違う場合があります。なので改変元のhtmlファイルのソースコードと比較しておくのがおすすめです。
5374.jpではソースコード上（右側）と実際のブラウザでの状態（左側）に構造上の違いはありませんでした。（写真は富士市版です）
情報を追加する
情報を追加する場所は、ごみカレンダーと次にあるパターン選択のセレクトフォーム（form-controlクラスのselectタグ）の次にあるdivタグで、WEB界隈ではアコーディオンメニュー（クリック,タップすると広がったり隠れたりするメニュー）と呼ばれています。
メニューを具体的に編集する方法ですが、accordionクラスのdivタグとその下に有るタグをすべてコピーします。divタグの閉じる部分がわかりづらいのですが、開発ツールのhtmlの要素からコピーすることも出来ます。
オリジナル（金沢版）の5374をブラウザで開いてGoogle Chromeの開発ツールで Copy>Copy outerHTMLでコピーした結果はこうなります。（構造的に多くなるのでメニュー内コンテンツは割愛）
<div class="accordion" id="accordion3">
<div class="accordion-group-top">
<div class="accordion-heading">
<a class="accordion-toggle-top" data-toggle="collapse" data-parent="#accordion3" href="#collapse3_0">5374.jpについて</a>
</div>
<div id="collapse3_0" class="accordion-body collapse">
<div class="accordion-inner">
<div id="help">
<!--この中にコンテンツが入ってます(割愛) -->
</div>
</div>
</div>
</div>
</div>
</div>
このときに、accordion-toggle-topクラスのaタグの中身がメニューのタイトルです。 Help idのdivタグの中にHTMLでコンテンツを記述することでメニューの中身を改変できます。
このメニューを増やす場合、collapse3_0と書かれている部分の0を順番に変えれば良いです。こんな感じになります。
<div class="accordion" id="accordion3">
<div class="accordion-group-top">
<div class="accordion-heading">
<a class="accordion-toggle-top collapsed" data-toggle="collapse" data-parent="#accordion3" href="#collapse3_0" style="">メニュー0</a>
</div>
<div id="collapse3_0" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
<div id="help">
<!--メニュー0のコンテンツを入れます -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion" id="accordion3">
<div class="accordion-group-top">
<div class="accordion-heading">
<a class="accordion-toggle-top collapsed" data-toggle="collapse" data-parent="#accordion3" href="#collapse3_1" style="">メニュー1</a>
</div>
<div id="collapse3_1" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
<div id="help">
<!--メニュー1のコンテンツを入れます -->
</div>
</div>
</div>
</div>
</div>
</div>
終わりに
富士市版5374のデータ更新とカスタマイズの状況をまとめてみました。
データの作成は最初はとても大変だと思います。私が初めたときは2週間ぐらい夜中にちょっとずつやってたのですが、一度作れば特別なことがない限り（条例が出来たり合併とか？）はそれほどルールに変わりは無いと思います。ので運用はし易いプロジェクトだと思います。
OSS(MPL 2.0) でコンテンツ追加などは自由にできますので、地域色に合わせた5374を作るのも楽しいと思います。
例えばヘッダーの背景にゆるキャラを載せると各地域の雰囲気が出て楽しそうですね。富士市版でも富士市っぽさがを出していけるようにデザイン含めて良くして行ければと思います。
- むすびん『ゆるキャラグランプリ2015』に参戦!! | 富士じかん
- 【随時更新】富士市ゆるキャラ的な皆さんまとめ - いずねこ探偵社 （富士市のゆるキャラってたくさんいる・・・）
作ったデータはオープンデータにもなりますし、シビックテックやりたいという方にも、技術的にもとっつきやすいプロジェクトだと思います。FBグループによるサポートも受けれるので、心配な方もまずはやってみようで始めてほしいです。
Social