[PWA] Geolonia Maps を使って観光マップを作ろう！

# 概要

2023年2月17日に実施されたセミナー「[Geolonia Maps を使って観光マップを作ろう！](https://geolonia.connpass.com/event/274706/?utm_campaign=&utm_source=notifications&utm_medium=email&utm_content=title_link)」に参加しました。Geoloniaの中の人に許可いただきましたので、セミナーの内容を情報共有したいと思います。すぐに忘れてしまうので忘備録を兼ねて。

このセミナーで初めて、「PWA」という仕組みに触れることができました。PWAなら、iPhoneやAndoridといったデバイスごとに別のコードを用意する必要もなく、面倒な審査も不要など、利点がありまくりでした。このGoogle推奨のクロスプラットフォーム技術が、今後の主流になってくる未来を感じることができました。

最初に、PWAについて簡単に説明します。

# PWAについて

PWAとは、「Progressive Web Apps」の略称で、モバイル向けWebサイトをスマートフォン向けアプリのように使えるようにする仕組みです。

# PWAの利点

1. 共通のコードを使える
PWAは全画面のWebサイトであり、どのようなデバイスであっても共通のコードで表示できる。

2. アプリストアの審査が不要
ネイティブアプリは公開時やアップデートのたびに、アプリストアの審査が必要だが、PWAなら即公開、アップデートが可能である。

3. ユーザーはネイティブアプリと変わりなく使用できる
ユーザーはスマホのホーム画面にアプリのアイコンを置いて、それをタップして起動できるので、ネイティブアプリとの差を感じにくい。

PWAの利点はたくさんありますが、上記の3点だけでもPWAの魅力が十分感じられることでしょう。ゲームのようなリアルタイムの応答が必要なアプリには不向きですが、それ以外のアプリはPWAへの乗り換えを検討できそうです。

# セミナーの報告

では、ここから「Geolonia Maps を使って観光マップを作ろう！」セミナーの内容を報告します。今回のセミナーは、「GCP（Google Cloud Platform）」、「Googleスプレッドシート」、「GitHubサイト」と、3つのサイトを行き来して、PWAを作っていきます。

まず初めは、GCPサイトから見ていきます。

## GCP

GCPサイトを開いて、「新しいプロジェクト」をクリックします。

![screenshot_585.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/c6f519f6-3da3-9154-9a50-9a48dee869d2.png)
 
プロジェクトの名前は任意ですが、本稿では「geolonia-pwamap」にして、以下の作業を続けます。「作成」をクリックします。

![screenshot_586.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/aaf7a682-eb47-436b-5c2c-15119f10acd9.png)

左上のプロジェクト名が正しいことを確認してから、「APIとサービス」「ライブラリ」をクリックします

![screenshot_588.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/a997e729-17e3-5805-fb1c-1debf28d101e.png)

検索窓に「sheets api」を入力して、確定します。

![screenshot_589.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/ae22faa3-1b09-9ac2-e887-f8ebdb516a32.png)

「Google Sheets API」をクリックします。

![screenshot_590.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/465f36e1-f401-986a-c3d3-0d352e03d357.png)

「有効にする」をクリックします。

![screenshot_591.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/2128222d-a825-23af-a1d9-8ad41ca9394b.png)

「認証情報を作成」「APIキー」をクリックします。

![screenshot_594.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/048ac576-ca77-f5e2-b5aa-044062e2f282.png)

最後、作成された「APIキー」をコピーして、「閉じる」をクリックします。コピーした文字列は、大切に保存してください。これで、GCPでの作業は終了です。GCPは閉じてかまいません。

![screenshot_595.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/1352f929-475d-9632-79e7-e0355e22929e.png)

次に、Googleスプレッドシートに、観光マップの情報を入力します。

## Googleスプレッドシート

Geoloniaが公開している[Google スプレッドシートのサンプル](https://docs.google.com/spreadsheets/d/1_m8s4P5tdSeam3nzC5ruSfuvtSejQKEX1FiBeOWJN3E/edit#gid=1957425126)にアクセスします。「ファイル」「コピーを作成」をクリックします。

![screenshot_599.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/8d436e13-c285-7499-bab5-5909ef7d771f.png)

コピーしたシートを編集していきます。本稿では、首都圏某市の図書館のリストを入力しました。SNSのアカウントや公式サイトの入力も可能です。カラムAの「タイムスタンプ」は未入力でかまいません。
次に、スプレッドシートの情報を外部アプリから読み取る設定を行います。「公開」をクリックします。

![screenshot_601.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/e7d47b73-ff8c-b58a-c5b5-05267d7c4072.png)

「リンクを知っている全員」が選んで、「リンクをコピー」をクリックしてください。コピーしたリンクは大切に保存してください。以上で、スプレッドシートの作業は終わりです。こちらも閉じてかまいません。

![screenshot_610.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/8de74cef-50f4-c152-a652-7a70d0833d53.png)

さて、いよいよPWA本体の設定に入ります。GeoloniaさんのGitHubサイトを開きます。

## GitHubリポジトリ「geoloniamaps/pwamap」

GitHubリポジトリ「[geoloniamaps/pwamap](https://github.com/geoloniamaps/pwamap)」を開いてください。ここに全てのコードがあります。今回のセミナーでは、ローカル開発環境は使わずに、オンラインのエディターのみで、PWAを完成させることができます。

https://github.com/geoloniamaps/pwamap

「Use this template」から、このリポジトリーをテンプレートとして、自分のリポジトリーにコピーします。

![screenshot_582.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/76ea0c74-069e-207d-6b55-6bca6af8d856.png)

リポジトリ名は任意ですが、本稿では「geolonia-pwamap」にして、今後の作業を続けます。「Include all branches」にチェックを入れておいてください。

![screenshot_584.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/e7bea998-8418-f5d7-8378-00802f84da14.png)

リポジトリがコピーできたら、データを読み込む設定を行います。「Settings」タブをクリックしてください。

![screenshot_604.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/a66ce7f4-b491-f21d-f0ba-375dadc63120.png)

「Security」「Secrets and variables」「Actions」から「New repository secret」をクリックして、2つの秘密情報を登録します。

![screenshot_605.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/aa21d57c-d880-47f8-b808-ab8f065a3ca0.png)

一つ目は、GCPで作成したAPIキーです。Name「GOOGLE_SHEET_API_KEY」にして、キーを登録します。

![screenshot_606.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/743335e6-19c7-708b-57ac-e85d07864ec6.png)

二つ目は、スプレッドシートのURLです。Name「GOOGLE_SHEET_URL」として、URLを登録してください。これで、Secretsの登録は終わりです。
次に、リポジトリーの設定を行います。

![screenshot_608.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/89fbfce9-172d-8db2-80a1-118e8c6022dd.png)

「Actions」「General」から、「Workflow permissions」を「Read and write permissions」にして、「Save」します。これで、「build」ができるようになりました。

![screenshot_609.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/aeb3b04c-a20f-884a-438c-c8038ea41f79.png)

「Actions」タブの「build」をクリックして、「Run workflow」から「Run workflow」をクリックします。ビルドが開始されますから、数分待ちます。

![screenshot_611.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/b998ea6a-630f-78d8-744e-df30548f289a.png)

ビルドが成功しました。これで初期設定は完了です。PWAアプリを起動するには、「Settings」タブをクリックします。

![screenshot_613.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/86b19f48-91a7-ae9f-f71c-d0bf80d62ab3.png)

「Pages」の一番上に、PWAアプリのURLが表示されています。リンクをクリックします。

![screenshot_614.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/320718/4ea59e47-df1f-5ca1-9cf1-6a7396eefef3.png)

PWAアプリが起動して、観光マップが表示されました！　こんなに簡単に完成してしまうのは驚きです。図書館のマップが正しく表示されていることが確認できました。
QRコードを読み取れば、スマホでネイティブアプリのように表示することが可能です。

# アプリ完成後の設定

一つ注意点として、初期設定では、10分ごとにGitHUb Actionsが走り、ビルドが自動で繰り返されます。変更がなくても、スプレッドシートを見に行き、GitHubのリソースが無駄に使われることになってしまいます。もしデータ更新がないのであれば、自動更新を止めてしまいましょう。

```geolonia-pwamap/.github/workflows/build.yml
# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: build

on:
  push:
    branches:
      - 'master'

  workflow_dispatch:

  # schedule:
    # - cron:  '*/10 * * * *'
    # # 10分ごとに実行

```

「.github」ファルダーのbuild.ymlを書き換えて、scheduleをコメントにします。これで自動更新が止まります。この場合は、スプレッドシートを編集したときは、手動でビルドしなければならない点に注意が必要です。

# 所感

今回のセミナーも面白かった。名前だけ聞いていた「PWA」だが、こんなに便利であると知って、感動した。もうSwiftだ、Kotlinだという時代は終わるのかもしれない。全てをWebが支配する未来をGoogleは目指しているのだろうか。
また、スケジュールが合いましたら、セミナーに参加させていただきたいです。