お遍路のアプリ作ってみた（PWA）

四国霊場をまわっている途中、こんなアプリがあったらいいなぁ。と思ったので作ってみました。

この記事で得られる情報

・アプリを簡単に自作できること
・PWA
・データ保存と利用の考え方

プロセス

要件定義
・ストアアプリをインストールしたくない
・現地利用でのレスポンス向上
・独自情報を保存したい（Googleドライブ）
・デバイス依存を無くしたい
・極力シンプル

ってことで、PWAで実装しました。
利用したサービスはGlide AppsとGoogleスプレッドシートです。
写真も登録したい場合はGoogleドライブを利用すると簡単にできます。

元データは父親のノート

まずはGoogleスプレッドシートにデータを登録します。
メインの情報は、四国八十八箇所の公式HPやWikipediaを参考に作成し、父親が記したトイレや駐車場についての独自情報をトッピングしていきます。
ちなみに父は8周目。
これをアプリで利用、アップデートしていきたいと思います。

データベース作成

回数などの記録したいフィールドと、寺号や山号などの基本データを登録しました。
また、Glide AppsはGoogleMapを標準としていないので、リンクをクリックするとGoogleMapが開くようにするための仕組みを次のように作りました。
まず、緯度経度のフィールドを作り、別のセルにGoogleマップを開くための関数を作成します。

・寺の場所をGoogleMapで開く

=HYPERLINK("https://maps.google.co.jp/maps?q="&{T2})

・次の寺までの道順

=HYPERLINK("https://www.google.com/maps/dir/?api=1&origin="&T2&"&destination="&T3&"&travelmode=driving")

上の式の例では、T列に緯度経度を入力しています。
そのほか、Googleドライブに保存した写真などもURLを指定することで設定できます。

アプリ作成
Glide AppsからGoogleスプレッドシートを読み込みます。
Createapp...→Form Google Sheet...から作成。

なんかいきなりアプリができるので、これを調整する感じです。

レイアウトやコンポーネントを編集して作成します。
アイコンやUIも設定できます。
共有、パスワード設定などもできるので、用途によって使い分けることができます。

MAPと一覧のUIを設定して、データの詳細からルートやメモ書き、写真登録などができるようにしてみました。

作った遍路アプリ

https://shikoku88.glideapp.io/

公開しているものはサンプルです。また、狭い駐車場に車が集中するなど、迷惑をかけてしまわないようにメモや駐車場データは除外しています。また、編集機能も未実装にしています。

作ってわかったこと

いいところ
・爆速で作れて、修正やアップデートが楽ちん
・簡単に利用できる
・JavaScript死亡を気にすることなく運用できる
・インフラまわりのセキュリティはサービス側に任せられる
・家族への共有が楽（アプリインストールを促さずに済む）
・アカウント管理が楽（データも自分のGoogleドライブ内に保管できる）
・サービスのアップデートにより、機能が勝手に改良される

課題
・CSSさわれないので、デザインの細かいカスタマイズができない
　サービスとして展開する場合、結構致命的
・機能が限定的になる
　今回は、GoogleMapへのリンクの書き方で無理やり制御した部分もある
・サービス終了したら終わり
・サービス変更で課金対象になるかもしれない

参考

GoogleMap公式ドキュメント

オープンデータとGoogleの相性が最高だった件（コード無し・SaaS・PWA利用）