【2019年4月版】Google SpreadSheetから音速でPWAが吐きだせるってホントに？！

# スプレッドシートネタに便乗して

弊社 @pro_matuzaki 氏の「[Firestoreのテストデータ投入をGASで楽にする](https://qiita.com/pro_matuzaki/items/f6d43ff18f970f906357)」に便乗してスプレッドシートのネタです。
全然プログラムと関係ないですが、先日、以下の記事を発見しました。

- [簡単過ぎる！GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた！ @paiza開発日誌](https://paiza.hatenablog.com/entry/2019/04/10/%E7%B0%A1%E5%8D%98%E9%81%8E%E3%81%8E%E3%82%8B%EF%BC%81Google%E3%82%B9%E3%83%97%E3%83%AC%E3%83%83%E3%83%89%E3%82%B7%E3%83%BC%E3%83%88%E3%81%8B%E3%82%89PWA%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E9%96%8B)

いや～そんな、さすがにすんなり出せたら、みんな仕事なくなっちゃうよ～？ｗ
ってことでさっそく挑戦してみました！

[Create an App from a Google Sheet in Minutes · Glide](https://www.glideapps.com/)

Glideサービスの紹介やアカウントの登録方法などは上記の記事をご覧になってください。
基本的にはGoogleアカウントでログインしてDriveのアクセス権許可するだけです。

## データの準備

このGlideのすごいところでもありますが、カラムのデータ内容からいろいろ推測して宜しく出力してくれる、ってのがあります。

なので、スプレッドシート作成とデータの準備を先に行います。

まずデータは適当に以下のサイトから・・・

- [東京都の桜名所・お花見|桜名所 お花見特集2019 - ウォーカープラス](https://hanami.walkerplus.com/list/ar0313/)

~~都内はすでにシーズンオフですが~~桜のスポット情報をいくつかピックアップして適当にスプレッドシートを作成します。
([ウォーカープラス](https://www.walkerplus.com/)様、勝手に拝借してます！すいません！)

例えば以下のようにします。
![56006698-ee46fb80-5d10-11e9-8854-e0e15e81ebdf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/74b9df2b-f7b4-6265-92de-56463c3bde66.png)

## スプレッドシートを取り込む

Glideサイトから"新しいAppを追加"でこのスプレッドシートを選択します。

![56006946-d1f78e80-5d11-11e9-850a-65e67f0e0903.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/3a8c5d8a-33e5-a036-550d-54e5b204ee88.png)

読み込みが終わると・・・

![56006963-e3d93180-5d11-11e9-8b4c-98f8899262ec.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/c1f036ff-33ef-5345-1f1d-6379d57433b7.png)

ドーーーーンと表示されました！！！
もうこの時点でだいたいできてるーーー！！！ｗ

詳細ページもバッチリｗ

![56006761-2e0de300-5d11-11e9-9acd-e78e7ec06f1f.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/de4df1b1-5a0d-1a0b-28b3-0924fdf4dbfa.png)

右側の"Summary"とか"Simple Value"、"Markdown"などのフィールドが自動的に判断されるんですね！！
"Summary"を勝手に組んでくれるところが憎い！憎いよアンタ！！

## 画面要素の編集

コンポーネントもいろいろあるので・・・
![56006789-4978ee00-5d11-11e9-82bc-a002698f1e84.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/e4d1d342-03bd-b445-7e50-b4ca8895b6d3.png)

水平線と地図を追加してみました。

![56006829-7200e800-5d11-11e9-8548-6a1b1db30f5d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/91c9a723-9d86-5dc1-a6f8-830b1bd3ca37.png)
"Map"コンポーネントに`住所`のカラムをバインド、ということが画面上でできてしまいます。

すでにもう完全に"それっぽい"のができてますね・・・

## 全体設定

設定画面でアイコン、テーマ、タイトルなどを設定します。

![56006878-952b9780-5d11-11e9-9e38-23198370c7de.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/1b86828b-dcf1-ccf2-e061-35a13eb77126.png)

ここでURLを決めてしまえば、準備完了です。

## 公開

左下のアイコンから"Open App"をクリックすると・・・

![56006679-d7a0a480-5d10-11e9-912c-ad2e8d84501d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/6e4950f4-67ef-5634-11af-731df65c7d3b.png)

公開完了！ｗ

https://kanto-sakura.glideapp.io/

是非ともスマホでご確認ください。そして"Home画面に追加"してみて下さい。もう、ここまで15分足らずですよ。。。？

昨日の [NativeScriptのネタ](https://qiita.com/koinori/items/aa2a3e124331117704db) といい、このレスポンスの速さ、ホント新しい時代を感じてしまいますね。。。

# 関連リンク

こちらの記事の方が丁寧に説明されているので手順を詳しく知りたい方はどうぞ・・・w

- [1行もコードを書かずにネイティブアプリ（もどき）をリリースする7つのステップ](https://qiita.com/masanarih0ri/items/83f114b1bba0c0b9761e)

詳細画面から別シートの詳細画面へ画面遷移する方法は以下をご覧ください！

- [Glideで1項目を「画面展開→画面展開」する方法（別シート・別項目を参照する）](https://qiita.com/fujineyuri/items/920bbaf62518761e3c4e#_reference-3e77465f5382832e31a7)