前回は5374アプリを作る最初の作業として、5374アプリに必要なデータの用意と、用意するときに楽をする一例を紹介しました。
今回が多分最後だと思いますが、いよいよデータを公開して5374アプリとして動作するようにします。（だいぶ息切れしてきた（汗）
各回の目次
- 準備編
- 作る前に確認すること: 既出かの確認作業, 著作権等
- 作るために準備するもの
- 作成作業編（２回に分けます
- 5374アプリの設置場所の用意（GitHubの組織アカウントの作成, リポジトリの準備）
- Googleスプレットシートでデータの入力と整形
- 公開編
- GitHubに配置
- 一般公開
- トラブルシューティング
GitHubへ公開
作成したCSVファイルをGitHubへ登録します。GitHubは現時点でファイルのアップロードに対応しています。
Upload files to your repositories
アップロードしたいファイルを、dataフォルダのページにある、Upload files ボタンを押すことで、アップロード画面になります。または、dataフォルダのページにドラッグアンドドロップするだけでもアップロードできるようになります。（なおこの方法は2016/02/19 に追加された新機能だそうです。)
方法を写真付きで解説してみます。
まずは、アップロードしたいファイル（今回は description.csv）をdataフォルダ内にドラッグアンドドロップします。そうするとこういった形でドラッグしていることがわかるUIに変わります。そのままドロップします。
ファイルのアップロードが終わると、こういったページに切り替わります。
ファイルのアップロード画面の下に 「Commit changes」 という項目があります。こちらに幾つか情報を入力します。
今回は最初のフォームの入力箇所のみに、更新した内容を簡単に書いています。例えば、「2016年度の更新」 や 「燃えるごみの**地区の曜日の修正」 と言った形です。具体的に書くと更新内容がわかりやすくなります。
Commit Changes ボタンをクリックするとアップロード処理が始まり。
処理が終わるとプロジェクトのトップページに戻ります。今回はdataフォルダにアップロードしたのですが、先ほどアップロード時に入力した更新内容が書かれていますね。
これでアップロードが出来ました。
サイトを確認する
ファイルのアップロードを終えたら、GitHub pagesで割り当てられているURLを確認してみましょう。
最初にアクセスすると、地区を選択するフォームが現れます。
適当に地区を選択すると、選択した地区のゴミ情報が時系列で表示されます。
これで、アプリとして機能するようになりました。
これで、5374アプリは公開され、TwitterやFaceBook等で公に広めることが出来ます。5374.jp にはコミュニティに参加、興味のある方が集まるFacebookグループがあります。こちらで作成したことアナウンスしても良いと思います。
トラブルシューティング
一通りの作業をしていて、自分も遭遇したよくあるトラブルを上げておきます。
サイトにデータをアップロードしたが更新されない
データをアップロードしたけど更新されない場合は以下が考えられます。
- CSVファイルの作成方法が誤っている
- 決められた列の並びになっていない
- 記入方法を間違えている
- ファイル名が違う
大抵CSVファイルの記入方法が誤っている事が多いです。その場合はすべてのデータで試すのではなく、行を1つにして確認しつつ作業すると間違いに気が付きやすいです。
ブラウザのキャッシュ機能で更新されない時があります。ブラウザではキャッシュを消去した上で再読込する機能が備わっています。大抵はキーボードショートカットで Ctrl+F5 を押すことで更新されるはずです。
またGitHub pagesはファイルをアップロードした後にすぐに更新されるわけではなく少し時間が必要になります。ブラウザのキャッシュ消去を試してもダメな場合は、数分おいてから再読み込みを行うと表示できます。
サブドメイン割当について
5734.jpのサブドメイン割当の作業についても書き留めておきます。
5374.jpのサイトで見れる各地域の5374アプリに ***.5374.jp の形のURLがあります。これはCode for Kanazawa(以下CfK)がお持ちの5374.jpというドメインを使ったサブドメインの割当を頂いているようです。
https://GitHub.com/codeforkanazawa-org/5374/blob/master/LOCALIZE.md#サブドメイン割り当てについて
CfKにメールで問い合わせることで、地域用のサブドメインの割当をしていただけます。その際には希望のサブドメインを伝えておくと意向が伝わりやすいと思います。地元の富士市版には fuji.5374.jp を割り当てていただきました。
サブドメインをGitHub pagesと紐付けることは、作業としては簡単です。
Using a custom domain with GitHub Pages - User Documentation
まず CNAME というテキストファイルを作成します。その中にCfKより割当いただいたドメインを書きます。例えば富士市版の5374アプリのCNAMEファイルはこうなっています。
https://GitHub.com/fuji-5374/fuji-5374.GitHub.io/blob/master/CNAME
このファイルはプロジェクトサイトのトップにあります。GitHubへアップロードする場合は CNAME ファイルを作成してデータのアップロードと同じ作業をすればよいです。
CNAMEファイルが正しく設定されているのを確認するときは、GitHub側でプロジェクトサイトトップに有る Setting をクリックしてプロジェクトの設定画面を開きます。GitHub Pages の項目に、CNAMEファイルに書いた通りのドメインが設定されていれば問題ありません。
ただ、CNAMEファイルを作成したからといってすぐに利用できるわけではなく、サブドメインの割当は少し時間がかかる場合がありますので気長に待ちましょう。（割当は多分人力で行われているかと思いますので）
またサブドメイン割当と設定をし終えると、GitHub Pagesが提供しているURLへアクセスしても割り当てられたサブドメインへ自動的にリダイレクトされます。
おまけ
GitHub(git)のcommit(コミット)について
GitHubで良くcommitという単語を見ると思います。日本語でコミットといいますが、gitの用語で変更を履歴として登録するという意味です。コミットを何度も行うことで、gitのソースコードの履歴を作っていきます。
実は今回作業したファイルのアップロードは、ファイルを追加/更新するコミットを行っている事になります。同じファイルをアップロードすると上書きするイメージになるのですが、上書き前の情報は履歴として保持されます。
例えば富士市の5374アプリの更新履歴は、プロジェクトのサイトのトップページから [数字] commits の部分をクリックしてアクセスします。
先ほど更新した内容も確認できますね。
独自のカスタマイズについて
各地の5374アプリ（サイト）や、富士市版でも、アプリ内に独自のカスタマイズが行われています。方法としてはあまりアナウンスがされていませんが、HTMLやCSSが理解できる方ならアプリ内のソースを変更することで、追加の情報や外観の変更も可能です。
富士市版でも他の地域の5374アプリを参考にしながらカスタマイズしています。例えば、赤で囲った部分はカスタマイズしています。
ゴミの具体的な仕分け情報や、関係連絡先なども掲載しています。
アプリ内の「5374.jpについて」のHTMLの構造をそのままコピーして、情報を追加しています。
こういったカスタマイズは、GitHub上で確認しながら作成するのは少し面倒（変更の反映が少しだけ遅いこともあり）なので、ローカルでWEBサーバーを用意するか、VPS, クラウドサービス等で開発環境を用意したうえで作業することがおすすめです。
まとめ
今回は、ゴミ情報を収集整形して用意したCSVファイルをGitHubにアップロード(コミット)を行い、データの更新をしてサイトの確認を行いました。さらにデータの更新をしたけどうまく確認できない場合のトラブルシューティング方法も述べてみました。
今回までで、5374アプリの作り方のおおよその流れは説明できたかと思います。このアプリはデータを所定の方法で用意することができればどなたでも作製、公開することが可能です。
GitHub pagesの方法は少し特殊でエンジニア向けのサービスを利用していることもあるので、他の方法も取ることができると思います。実態としてはHTMLとCSSとjavascriptで構成されたWEBサイト/WEBアプリと同じなので、得意な方法で作成するのも良いと思います。
また、お近くの地域でシビックハックに興味のある方と一緒に勉強会をひらきつつ、みなさんでアプリを用意することもできると思います。静岡ではCODE for SHIZUOKAやOpen Data しずおかと言ったコミュニティがあるそうです。
静岡界隈でもオープンデータのコミュニティ等拝見していますが、自分もこういった界隈に参加できると良いなと考えています。ご興味ある方も、ぜひともこういったコミュニティでお会いできると嬉しい限りです :)
今後について
今後の富士市版5374アプリは、来年度(平成28年度)のゴミ情報の取り込みを行います。フルタイムでメンテナンスできる状況ではないので年度のはじめに間に合うかはわかりませんが、ゆるく見守っていただければと思います。
お知らせ
5374アプリ 静岡県富士市版は、現在私個人で作成, 運用しているプロジェクトです。興味のある方がいらっしゃいましたら一緒にやりませんか？
具体的に今困っている/足りないことは以下のとおりです。
- 入力しているごみ情報の正確性
- モバイル向けに電話番号や住所への対応
ごみ情報の正確さが一番大事なのですが、作成した人が見ているだけだと間違えに気がつかないので、どなたかに確認してもらいたいです。
連絡先は個々のコメント, Twitter@hrs_sano645 でお願い致します。お待ちしております！