令和からアクティブに行こう！ということで初めて勉強会に参加してみた。「PWA Beginners 勉強会 #5」、PWAは前から記事などで気にはしていたけど実際にどんなものなのか知っておきたく。当日、「Glide」を使ってスプレッドシートから5分でアプリを作る実演があったので自分も早速やってみました。それではいきましょう！
【目次】
- PWAとは？
- Glideで5分でアプリ作成の実演を見た！！
- 準備したスプレッドシート（Beatles DB）
- Glideのアカウントを作る！
- GlideでPWAを作るっ！！
- Beatles DBアプリ完成！！！
- 最後に
※参考：PWA Beginners 勉強会 #5 - connpass
PWAとは？
PWAは「Progressive Web Apps」の略。Progressiveは「進歩的な,革新的な」といった意味。私にとって印象深いのはプログレッシブ・ロック（略してプログレ！）ですな。クリムゾン好きです、はい。
勉強会でもPWAについてわかりやすくまとめられた発表があったのでスライドを埋め込みます。
※参考：PWA Beginners 勉強会 #5 - 資料一覧 - connpass
※参考：PWAのトレンド背景を考える
Googleが提唱した概念で、
・ネットワークに依存せず（Reliable）
・表示が早くて、アクションもスムーズで（Fast）
・プッシュ通知やホームボタンに追加できる（Engaging）
そう、確かに「通知」と「ホームボタン」のイメージが強くてなんかアプリっぽい機能があるWebね、というイメージでしたよ、はい。もっとそういう表層だけではなく大きな視点で捉えるべきなんですな。
Glideで5分でアプリ作成の実演を見た！！
で、Glideです。これもスライドを埋め込みます。
※参考：Glideで彼女を諌めた話 / How to use Glide for my Girlfriend - Speaker Deck
Glideも言葉としては知っていたんですが、どんなものかよくわかってなかった。Googleのサービスなんだね。実演でGoogleドライブのスプレッドシートを元に1行もコードを書かずにアプリを作成していた！自分もやってみたい。
準備したスプレッドシート（Beatles DB）
今回アプリ化したいスプレッドシートはもう仕込んである。
その名もBeatles DB！の楽曲をまとめました。
※参考：BEATLES DB - Google スプレッドシート
ビートルズの楽曲をシングル、EP、アルバムのトータルで発売日順に並べてある。当時のリスナーが聴いた曲順と、現在発売されているアルバムの曲順を紐付けています。
この表は一場面に収まりきれず、縦も横もスクロールしないと見えない。結構なボリュームです。
Glideのアカウントを作る！
こちらの記事に手順が詳しく説明されていた。
※参考：簡単過ぎる！GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた！ - paiza開発日誌
それでは、実際にやってみようぞホトトギス！
まずはGlideのページに行ってみた。
※参考：Build an app from a spreadsheet in five minutes, for free • Glide
英語で「5分で作れる！」と書いてありますね。まずはアカウントを作るところから。
右上の「Sine Up」をクリック！
ニコちゃんスマイルくんがお出迎え♪
もう一回「Sine Up」をクリック。
Googleアカウントと紐付けてください、といった画面が続く。
GlideでPWAを作るっ！！
紐付けが終わったら左カラムの「New App」をクリック！
どのスプレッドシートを読み込みますか？という画面。「Beatles DB」をクリック！
いきなり画面が自動的に作られた！
右カラムのチェック項目
- 「Show search box」で検索窓の有無をつけられる
- 「Add itemでアイテム」の追加の可否を決められる
- 「Show initials as default image」でアイコンの表示非・表示を切り替え
今回は検索窓あり、アイテム追加なし、アイコンなしにした。
右カラム上の「Layout」のところでいろんなレイアウトに切り替えれる。
右カラム下の「Title」などのところでどこの列を開くか決められる
曲の単独ページ。右カラムの項目の順番や追加、削除などが設定できる。
Beatles DBアプリ完成！！！
ということでアプリができました！
※参考：BEATLES DB
本当に1行もコードを書かずに簡単にできた！スプレッドシートの表よりもみやすくて素晴らしい！スマホの小画面前提のため一覧性は低いものの検索窓の検索性はかなり高い！（曲名、人名、発売年など。例えば「リンゴ」と入れるとリンゴが歌ってる曲だけ表示される）
あと、このURLをスマホブラウザで開いて「ホーム画面に追加」とすると、次からはブラウザではなくPWAとして開く。これはHTMLなのかな？ソースが見えないのでどんな仕組みなのか興味深い。
最後に
以前、スプレッドシートのデータをグラフとして埋め込む「Chart.js」に触れました。
※参考：Google ChartsをQuickにStartする - クモのようにコツコツと
今回のGlideはグラフではなくWebアプリで、また違ったアプローチですね。スプレッドシートのデータを視覚的にわかりやすい形に変換する活用法はこれからも発展していきそうに思います。それではまた！！
※参考：Web開発環境の記事まとめ
qiita.com
