柏原市ごみ分別アプリ [ version: 4.3 ]

データ編集について

このファイルでは、アプリのデータ編集方法を説明します。
旧バージョンでは、ソースデータを JSON 形式で用意する必要がありましたが、データ編集の難易度が高く運用しにくかったので、新バージョンでは CSV ファイルを読み込むように改良しました。
また、IE 対応を廃止したことで jQuery も必要なくなり、全体的な計量化もできました。
とはいえ、"script.js" と "style.css" にはコメントが大量に含まれいるので、公開時にはコメントを削除してくれる圧縮ツールでのスリム化を利用をおすすめします。
アプリの見た目は、ほぼすべて "/style.css" で制御していますので、カスタマイズする場合はスタイルシートを解読してください。
分別区分の変更には、"script.js" とデータファイル("/data/area.csv", "/data/schedules/***.csv")の修正が必要です。
不明な点がある場合は、アプリ内ヘルプページのお問い合わせフォーム(https://logoform.jp/f/BtYos)からお問い合わせください。

サーバーにファイルを設置する

このアプリは、クライアント側の javascript のみで動作します。
このため、Webサーバーに必要なファイル群を置くだけで準備は完了です。
あとは IE 以外のブラウザで "index.html" にアクセスしてください。

データファイルの解説

このアプリは、"/data/" 内の CSV ファイルを読み取ってコンテンツを表示します。
CSV ファイルの編集は Excel で行うことができます。Excel で編集後、保存形式を "CSV UTF-8 (カンマ区切り)" で保存して下さい。
ファイル名や表の構造(列の順序や数)は変更しないでください。これらを変更する場合は、"script.js" の修正が必要です。
データのカスタマイズには、同梱のデータ作成用 Excel ファイルを利用すると簡単です。

/data/catalog.csv

分別一覧ページのデータです。
"かな" には、"品名" の読み仮名をひらがなで入力してください。
"キーワード" には、"品名" と "かな" 以外で、検索時にヒットさせたい文字列を入力してください。ひらがな/カタカナの区別は不要です。
"分別区分" の文字列は、"script.js" の app.sortKey() 関数の引数になる点に注意してください。
アプリ表示時のデータの並び順は CSV ファイルの並び順を反映します。

/data/area.csv

地区ごとの収集スケジュールを指定するデータです。
"地区ID" は重複しない数値を入力してください。この数値はブラウザの LocalStrage 機能により保存され、地区を自動的に選択するために使用されます。
3列目以降の列名は分別区分と対応するよう必要に応じて修正してください。また、列の値は、収集スケジュールのファイル名("/data/schedules/" に置かれたファイル名)を入力してください。

/data/schedules/***.csv

収集スケジュールのデータです。
"/data/area.csv" のデータとファイル名が対応するようにしてください。

/data/place.csv

拠点収集の地点データです。
アプリ表示時のデータの並び順は CSV ファイルの並び順を反映します。必要な場合は CSV データ作成時に並べ替えを行ってください。

更新履歴

version 公開時期 更新内容
4.3 2022.12.13
  • 分別詳細表示時に、説明文の改行箇所("\r\n"、"\n")を"<br>"タグに変換するよう変更。
4.2 2022.08.17
  • 分別一覧で、分別区分(可燃、不燃など)でも検索できる機能を追加。
  • 未対応ブラウザで開いた際にメッセージを表示する機能を追加。
4.1 2022.08.01
  • Excel以外で保存したCVSファイルを正常に読み込めないバグを修正。
4.0 2022.07.xx
  • アプリを公開。