AppSheetとImport.ioを使ってnocodeで府中地元応援商品券が使える場所を地図上で調べるアプリを作った。
概要
府中市でも10000円で14000円分価値がある府中市の地元応援商品券なるモノができました。
専用のサイトもできています。 https://premium-gift.jp/fuchu
ただ、個人的に使いづらい。どこで使えるのか知りたいけど、探しづらい。ただ、code書くのは面倒なので、nocodeツールつかってお手軽に検索できるアプリを作りました。
データの抜き出しはimport.io。データのアプリ化はAppSheetを使用しました。いずれも無料枠の範囲で使いました。
import.ioはクセがあるけど、わかれば簡単です。また、Appsheetは、今回のユースケースまんまがあったので、データ読み込むだけどアプリ化。拍子抜けなぐらい簡単。
今回のような地図情報のマッピングと検索など、Appsheetが想定している使い方を把握し、合致した業務があればかなりよい。
個人的に使うために作ったので特に公開はしていませんが、手順を見つつ試していただければと。
できたもの
背景
府中市で使うとお得な地元商品券ふちゅチケ。どこの店舗で使えるか検索出来るようになっています。
ただ、個人的にどうも使いづらい。
個人的に知りたいのは、近くの店舗で使えるかなのですが、検索結果で表示されるのは住所と店名。
場所の情報を知りづらい。
Webアプリで書くのもだるいなと思っていましたが、AppSheetが使えそうな気配。
AppSheetをみていると、住所を元にしたGeogodingを 1000件までやってくれるとのこと。ちょうどnocode開発にも興味あるので、AppSheetを使って、位置情報をマッピングしたアプリを作りました。
データは、Import.ioを使ってクロールして取得しました
利用ツール
手順
サイトの確認
今回データ元の地元応援商品券ふちゅチケの紹介です。
構成はシンプルです。一覧（店舗）を表示し、一覧に表示された店舗をクリックすると詳細が表示されるというものです。
データ用意
クロールの戦略
地元応援商品券ふちゅチケからデータを取得します。クローラーを自作する事もできますが、今回はnocodeなので、Import.ioというサービスを使います。
クローラーは、一覧ページから詳細ページへアクセスして情報を取得するのが王道です。しかし、上記サイトでは一覧ページに十分な情報が掲載されています。
よって、今回は一覧ページから情報を取得する戦略ですすめます。
Import.ioで取得
一覧ページの 1ページ目の URLは https://premium-gift.jp/fuchu/use_store?events=page&id=1 です。このページから情報を取得します。
Import.ioが自動的にページを解析してくれます。今回は、このまま使います。
登録する列名を修正します
保存します。
このままだと、1ページ目からしか情報を取得できません。よって、クロールするページを連番で作成します。
まずは、1ページ目をEditから登録します。
id=1の 1の所をダブルクリックすると以下のように数字の連番を登録できるようになります。
連番を入力します。
Run Inputsを押してクロールします。
クロール終了後、ダウンロードすると所望のデータを入手できます。
google spreadsheetに登録する
google spreadsheetで新規作成し、インポートします。
Import.ioで入手したデータ（CSV）をインポートします。
適当な名前をつけて保存します。
AppSheetで地図検索アプリを作る
ふちゅチケデータを指定する
Start for freeを押します。
Make a new appを押します。
Start with own dataを押します。
App nameと categoryを適当に選んで、Choose your dataを押します。
先ほど作った spreadsheetを選択します。
既に、もうそれっぽいのができています！
ちょっと修正する
UXからボトムタブの名前を編集できます。今回は、「詳細」という名前に変更しました。
詳細の表示をカード形式にする。addressがページ上部に表示されるようになりました。
最後に、右上のsaveを忘れずに。
使う
個人で使うならdeployする必要ないです。AppSheetを使うために登録したgoogle のアカウントに下記のメールが届いていると思います。
Install fuchu_premium をクリックすると使えます。
所感
カラム名をいい感じにしておくと、AppSheet側でいい感じに推測してアプリを作ってくれると聞いていたのですが、ほんとでした。
addressやらcategoryやらの名前にしておくだけで、mapのページやcategory毎にグルーピングしてくれます。
なお、カスタムできるか色々見ていて、ラベル名とか表示するカラムを増やすというところでは結構うまくできます。
テーブル1つですむようなデータを表示するアプリであれば、ほんとクリックポチポチするだけで作れます。
これはすごい。
テーブルが複数に跨ぐような所になると、 Glide もそうでしたが 難しいです。
この手のツールでよく言われることですが、そのツールが想定している範囲で使えばかなり強力です。
データに合わせるというよりは、AppSheeetでできることが、手持ちのデータにたまたま合致したら、導入してみるというのがあっています。
今回は、地図でデータを表示するというのはAppSheeetで想定している使い方だったので簡単でした。
その他
検索例で使った 麺やもろ。
月1でお世話になっているラーメン店です。
府中に立ち寄った際はぜひお試しを。
Discussion