ローディング中

加古川ゴミ分別アプリを作成し公開しました。

この度、加古川ゴミ分別アプリを作成しました。

加古川市オープンデータカタログサイトにゴミ分別アプリのデータが公開されているのを知り、せっかくなら何か遊んでみようと思い作成してみました。
今回は加古川市のオープンデータの事や、加古川ゴミ分別アプリの概要を解説していきます。

加古川市オープンデータカタログサイト

FireShot Capture 65 加古川市オープンデータカタログサイト https www opendata kakogawa jp

2017年9月11日よりオープンした、加古川市のオープンデータカタログサイト。
様々なデータが加古川市より提供されています。
一部データは加古川市オープンデータAPIにてAPIでの公開もされており、オープンデータを気軽に利用することができます。

今回使用したごみ分別百科のデータはAPIが公開されていなかったため、csvファイルをダウンロードして使用しました。

加古川市ゴミ分別アプリについて

今回加古川市ゴミ分別アプリを作成するにあたって以下のアプリを参考にしました。

作ってから思ったのですが、もうあるんですよね。
でも作ってしまったから仕方がない。
そのため、いくつか本家にはない機能を搭載しました。

仕様

  • ひらがな、カタカナ、ローマ字検索対応
  • 文字の拡大/縮小に対応
  • 中国語(繁体字/簡体字対応)

使った技術

今回加古川市ゴミ分別アプリに使用したのは下記の通り

加古川市オープンデータの編集

加古川市オープンデータのCSVをVue.jsに取り込む前に下記の2つの処理を行いました。

  1. ローマ字変換
  2. CSVをJSONに変換

1.ローマ字変換

FireShot Capture 67 ヘボン式変換君 ヘボン式ローマ字自動変換サービスです パスポートのローマ字表記ルールに対 http hebonshiki henkan info

ヘボン式変換君を使用しアイスノン→aisunonという風に変換しました。
そうすることで、ローマ字入力にも対応しました。

2.CSVをJSONに変換

FireShot Capture 66 CSV to JSON CSVJSON https www csvjson com csv2json

加古川市オープンデータカタログのCSVをJSONに変換するため、CSVJSONを使用。
簡単に一瞬でCSVをJSONファイルに変更してくれます。

検索機能の実装

加古川市ゴミ分別アプリの要、検索機能ですが、Vue.jsを使えばとても簡単に実装することができます。
検索機能の実装は特別なことは全くしてません。
Vue.jsのチュートリアルにある事をそのまま使用しています。


グリッドコンポーネント の例

文字サイズの拡大/縮小

文字サイズの拡大/縮小の実装もとても簡単です。

@clickでfontSizeが呼ばれるように指定してあげます。

daraでデフォルトのfontsizeを指定した後、watch内でfontSizeの動作を書いていきます。
document.querySelector("body").style.fontSize =${v * 2}pxと書いている通り、クリックするたびに2pxづつ増減するようになっています。
今回bodyに指定していますが、他のclassに指定してもいいでしょう。

modal

スマホ表示時にはゴミの種類をクリックするとモーダルウインドウが表示されるようになっています。
今回一番時間がかかったのは、このmodalの実装でした。
jsonファイルを読み込み、検索した結果に合わせてモーダルウインドウの中身を変更する必要がありました。
チュートリアルなどのモーダルの実装方法ではうまく行かなかった事やなるべくシンプルに実装したかったこともあり、TABのスタイルやアニメーションを変更することで実装しました。
その際に参考にしたのが下記のcodepen

See the Pen Vue.js Tabs by Eric Gruby (@ericgruby) on CodePen.

復数のモーダルを実装する場合や、動的にモーダルさせる要素が変更される場合は、上記のロジックをそのまま使うのが一番シンプルなのではないでしょうか。

翻訳

Google 翻訳を使ってもあれなので、一つ一つ翻訳しました。
間違いがあれば教えて下さい。

netlifyで簡単公開

スクリーンショット 2018 08 09 午後2 13 50

最近流行りのnetlifyを使ってみました。
pushするだけでbuildでき、dist以下のファイルを自動で公開までしてくれるとても便利なホスティングサービス。
しかも無料だなんて裏があるとしか思えない、最高の仕様です。

SSLにも対応できるため、ちょっと公開してみたいなんて時にはぴったりではないでしょうか。
当然独自ドメインを設定することも可能です。

加古川市オープンデータカタログを使って遊んでみよう

加古川ゴミ分別アプリの概要をご紹介いたしました。
特別難しい事をしなくても、1日もあればSPAが作成できてしまうのが、Vue.js、オープンデータの魅力。
アイデア次第で色々と便利な事ができるのではないでしょうか。
加古川市以外にも多くの場所でオープンデータが公開されているため、是非活用してみてはいかがでしょうか。

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.