愛媛県松山市 買いにいこうやキャンペーンの検索ページを作成しました

愛媛県松山市買いにいこうやキャンペーンプログラミング
愛媛県松山市買いにいこうやキャンペーン
スポンサーリンク
スポンサーリンク

作成したページ

https://gdtypk.com/matsuyama.html
CSSがよく分からず、スマホだと見づらく感じるかもしれません・・。
PC版のChrome,FireFox,Safariで動作確認しました。

スポンサーリンク

なぜ作成したか

以下の理由から作成しました。

  • 公式が配布している店舗リストがPDFで検索しづらいこと
  • ざっくりしたエリアしか掲載されていないこと
スポンサーリンク

愛媛県松山市買いにいこうやキャンペーンについて

コロナ禍の飲食店への営業時間短縮要請や外出自粛などで影響を受けた市内の飲食店や宿泊施設、小売、サービスなど、幅広い業種の事業者を支援するため、「買いにいこうや!キャンペーン」を開始します。
消費を松山市独自で喚起し、本市経済を活性化させます。

引用元はこちら
特設サイト

食品だけでなく、家電なども対象となっており、私もこれを期に何か購入しようと思っています。

どう作成したか

キャンペーン期間が2ヶ月程度なので、泥臭く手動の部分が多いです😅

対象店舗一覧のPDFを公式サイトからダウンロード

ご利用者の方 | 松山市プレミアム商品券買いにいこうや!キャンペーン

PDFをエクセルに変換する

【無料】PDFをExcelに変換 - Adobe 公式 | Adobe Acrobat(日本)
PDF Excel 変換:アドビ公式オンラインツールで、今すぐPDFをExcel (XLSX, XLS) ファイルに変換。PDFをドラッグ&ドロップするだけで変換できます。

エクセルをスプレッドシートにコピペ

GASを使いたかったので、スプレッドシートにコピペする必要があります。

不要な行の削除

GASで以下のプログラムを用意し、不要行を削除しました。

matsuyama/removeRow.js at main · goda-kazuki/matsuyama
Contribute to goda-kazuki/matsuyama development by creating an account on GitHub.

住所と町域の作成

Geocoding APIを使用し、店舗名から住所を取得しています。

全行に対して、処理しているだけの何でもないプログラムですが、
店舗名だけでは検索に引っかからないものがあったので、地名を事前に入れました。

matsuyama/geocoder.js at main · goda-kazuki/matsuyama
Contribute to goda-kazuki/matsuyama development by creating an account on GitHub.

csv出力

住所と町域が反映されたシートをcsvで出力します。

csvをjsonに変換

CSVのままだと、javaScriptで扱いにくいので、以下のサイトで変換しました。
https://www.site24x7.com/ja/tools/csv-to-json.html

HTMLとjavaScriptで表示

jsonをjavaScriptから読み込み、1行ずつテーブルに追加していきます。
https://github.com/goda-kazuki/matsuyama/blob/main/matsuyama.html

bootstrapとCSSが分からんすぎて見た目に関しては途中で諦めました・・。

おわりに

パソコンでないとちょっと見づらいですが、検索できるようになって私は満足しています。

仕事でCSS書くことは無いけど、bootstrapは使えるようにしとかないとなー思いました・・。

コメント

タイトルとURLをコピーしました