PWAアプリ版　公園・避難所・病院マップ　New

https://go.glideapps.com/play/3xBVqx5XmOftJ0vmgJW3

GlideというGoogleのサービスを使ってPWAアプリにしました。まずは見てみて、使ってみてください。

PWAアプリだと、ホームに登録しておくと、通信が途絶えている時でも使えます。

公園・避難場所・病院、および　AEDマップなどのリンクや、もし災害が起こった時に必要なリンク類も入れておきました。こんなアプリが簡単に作れちゃうってすごいですね。

実は公園マップにはアプリ版なども作ってあるのですが、いまいち動作がもっさかったりして公表していませんでした。このGlideってサービス凄い。FusionTableというマップを作製できるサービスが終了するということで、このページでもFusionTableを沢山つかっていたのでがっかりだったんですけど。。このGlideってサービスを知って、さすがGoogle。。あんまり使われないとすぐにサービス終了かもしれませんが(笑)。。　代替サービスの本質をついてきますね。

Glideの使い方

僕は、このページみて作りました。たまたまサンプルが公園だったのでやりやすかった(笑)

だいたいこれ見れば、使えます(笑)　って　ことですが。。気に入ったので少しだけ説明してみようとも思います(笑)

PWAって？

プログレッシブウェブアプリ　の略ですが、ここに特徴が書かれています。

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=ja

基本的に、Webってサーバー側で動いているもので、App（アプリ）っていうのは、端末側で動くものです。Web技術が拡張されて、端末のDBを操作したりメモリ空間を使えるようになったおかげで、Web技術を使って、端末側で動かすことができるようになりました。

上のGoogleのサイトによると。。こんな特徴があります。

• 段階的 – プログレッシブ・エンハンスメントを基本理念としたアプリであるため、 ブラウザに関係なく、すべてのユーザーに利用してもらえます。
• レスポンシブ – パソコンでもモバイルでもタブレットでも、次世代の端末でも、 あらゆるフォームファクタに適合します。
• ネットワーク接続に依存しない – Service Worker の活用により、オフラインでも、 ネットワーク環境が良くない場所でも動作します。
• アプリ感覚 – App Shell モデルに基づいて作られているため、アプリ感覚で操作できます。
• 常に最新 – Service Worker の更新プロセスにより、常に最新の状態に保たれます。
• 安全 – 覗き見やコンテンツの改ざんを防ぐため、HTTPS 経由で配信されます。
• 発見しやすい – W3C のマニフェストとService Worker の登録スコープにより、 「アプリケーション」として認識されつつ、検索エンジンからも発見することができます。
• 再エンゲージメント可能 – プッシュ通知のような機能を通じで容易に 再エンゲージメントを促すことができます。
• インストール可能 – ユーザーが気に入ればアプリのリンクをホーム画面に残して おくことができ、アプリストアで探し回る必要はありません。
• リンク可能 – URL を使って簡単に共有でき、複雑なインストールの必要はありません。

ちょっと前から注目していて、このページも何度かサービスウォーカを入れてPWA化したり、AMP化したりもしていますが、ただ早いWebというのと、Googleにホストされる感じで、それほど凄いな。。と思わせてくれませんでしたが、このGlideというサービスが出て、一機に使い道が見えてきた気がします(笑)

Glide

ちなみに、GoogleにはAndroid用の画像アップロードライブラリにGlideっていうライブラリもあって紛らわしいのですが。。　こちらは、Googleスプレッドシートを使ってPWAアプリを簡単に、コードを書かなくても、作れるサービスです。

https://www.glideapps.com/

これ本当に簡単です。

簡単に作ってみましょう(笑)

GlideにはGoogleアカウントで入ってください。

こだいらのパン屋さんのスプレッドシートがあったとします(笑)　というかあらかじめ用意しておかないとダメです。一行目に　店名など項目名を入れます。タブの名前も変えておくといいです。このタブの数だけNavigationというリストページができます。　画像があれば、画像のリンクも入れておくといいです。出ない場合もあるんですが(笑)

まず、Glideに入ります。

そうすると、こんなページが出てきます。（僕の場合は、公園マップつくっちゃったからアプリが一つできていますが。。）

これで、New Appをクリックすると、既存のスプレッドシートを呼ぶ画面が出てきます。

そうするとですね。もうアプリができちゃっているんですよ。

Navigationというところで、スプレッドシートのタブの指定だったりをします。その順番を入れ替えたりできます。

Screensでは、Layoutのところをいじると、リスト形式にしたり、画像形式にしたり 、そこに出す項目（Item）を選べます

Screensを選んだまま、たとえばひとつのパン屋さんの詳細画面を選ぶと、Componentsというのがでてきて、それの順番を変えたり、Mapを出したり、コメントを付けれるようにしたりすることができます。

ChatとかCommentがつけられるんですが、これがまたうまくできてて、SpreadSheetに書き込まれます。みんなで作るアプリっぽくできますね。

GoogleのSpreadSheetの方の設定で、もし、このスプレッドシートに書き込みなど変更があったら、メールを送信するとかの機能もあるので、アプリに書き込まれたら通知されるっていうこともできますね。

https://support.google.com/docs/answer/91588?co=GENIE.Platform%3DDesktop&hl=ja

コメントやチャットなどは、メール認証とかができるので、メールアドレスで不正の書き込みなども防止できます。

できあがったアプリはこちらです。

https://go.glideapps.com/play/5w76bYjNS8z8aTiySfMe

むちゃくちゃ簡単です。

ただ、地図が住所か名前からしか引けないのが。。難点で、場所が少しづれますね。

有料版だと、ドメインとかも使えるようです。

詳しい内容があんまりどこにも出ていないので、これからも変わっていくのかもしれませんね。。

本命はDART言語

じつは、Dartっていう言語がGoogleで発表されていて。。これWeb側もApp側も両方使える言語で、こっちの方がもっと興味あるんですが。。

https://www.dartlang.org/

DASHって名前だった言語が、DARTになって、DART2.0になって、そいでもってFlutterっていうデザインプラットフォームもできている。これこれから学ぶとするといいかも。。

https://flutter.dev/