gas
spreadsheet
PWA

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


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

弊社 @pro_matuzaki 氏の「Firestoreのテストデータ投入をGASで楽にする」に便乗してスプレッドシートのネタです。

全然プログラムと関係ないですが、先日、以下の記事を発見しました。

いや~そんな、さすがにすんなり出せたら、みんな仕事なくなっちゃうよ~?w

ってことでさっそく挑戦してみました!

Glide – amazing apps without code : https://app.heyglide.com/

Glideサービスの紹介やアカウントの登録方法などは上記の記事をご覧になってください。

基本的にはGoogleアカウントでログインしてDriveのアクセス権許可するだけです。


データの準備

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

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

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

都内はすでにシーズンオフですが桜のスポット情報をいくつかピックアップして適当にスプレッドシートを作成します。

(ウォーカープラス様、勝手に拝借してます!すいません!)

例えば以下のようにします。

56006698-ee46fb80-5d10-11e9-8854-e0e15e81ebdf.png


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

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

56006946-d1f78e80-5d11-11e9-850a-65e67f0e0903.png

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

56006963-e3d93180-5d11-11e9-8b4c-98f8899262ec.png

ドーーーーンと表示されました!!!

もうこの時点でだいたいできてるーーー!!!w

詳細ページもバッチリw

56006761-2e0de300-5d11-11e9-9acd-e78e7ec06f1f.png

右側の"Summary"とか"Simple Value"、"Markdown"などのフィールドが自動的に判断されるんですね!!

"Summary"を勝手に組んでくれるところが憎い!憎いよアンタ!!


画面要素の編集

コンポーネントもいろいろあるので・・・

56006789-4978ee00-5d11-11e9-82bc-a002698f1e84.png

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

56006829-7200e800-5d11-11e9-8548-6a1b1db30f5d.png

"Map"コンポーネントに住所のカラムをバインド、ということが画面上でできてしまいます。

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


全体設定

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

56006878-952b9780-5d11-11e9-9e38-23198370c7de.png

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


公開

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

56006679-d7a0a480-5d10-11e9-912c-ad2e8d84501d.png

公開完了!w

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

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

昨日の NativeScriptのネタ といい、このレスポンスの速さ、ホント新しい時代を感じてしまいますね。。。


関連リンク

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

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