PWAアプリ版 公園・避難所・病院マップ New
GlideというGoogleのサービスを使ってPWAアプリにしました。まずは見てみて、使ってみてください。
PWAアプリだと、ホームに登録しておくと、通信が途絶えている時でも使えます。
公園・避難場所・病院、および AEDマップなどのリンクや、もし災害が起こった時に必要なリンク類も入れておきました。こんなアプリが簡単に作れちゃうってすごいですね。
実は公園マップにはアプリ版なども作ってあるのですが、いまいち動作がもっさかったりして公表していませんでした。このGlideってサービス凄い。FusionTableというマップを作製できるサービスが終了するということで、このページでもFusionTableを沢山つかっていたのでがっかりだったんですけど。。このGlideってサービスを知って、さすがGoogle。。あんまり使われないとすぐにサービス終了かもしれませんが(笑)。。 代替サービスの本質をついてきますね。
Glideの使い方
僕は、このページみて作りました。たまたまサンプルが公園だったのでやりやすかった(笑)
だいたいこれ見れば、使えます(笑) って ことですが。。気に入ったので少しだけ説明してみようとも思います(笑)
PWAって？
プログレッシブウェブアプリ の略ですが、ここに特徴が書かれています。
基本的に、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アプリを簡単に、コードを書かなくても、作れるサービスです。
これ本当に簡単です。
簡単に作ってみましょう(笑)
GlideにはGoogleアカウントで入ってください。
こだいらのパン屋さんのスプレッドシートがあったとします(笑) というかあらかじめ用意しておかないとダメです。一行目に 店名など項目名を入れます。タブの名前も変えておくといいです。このタブの数だけNavigationというリストページができます。 画像があれば、画像のリンクも入れておくといいです。出ない場合もあるんですが(笑)
まず、Glideに入ります。
そうすると、こんなページが出てきます。（僕の場合は、公園マップつくっちゃったからアプリが一つできていますが。。）
これで、New Appをクリックすると、既存のスプレッドシートを呼ぶ画面が出てきます。
そうするとですね。もうアプリができちゃっているんですよ。
Navigationというところで、スプレッドシートのタブの指定だったりをします。その順番を入れ替えたりできます。
Screensでは、Layoutのところをいじると、リスト形式にしたり、画像形式にしたり 、そこに出す項目（Item）を選べます
Screensを選んだまま、たとえばひとつのパン屋さんの詳細画面を選ぶと、Componentsというのがでてきて、それの順番を変えたり、Mapを出したり、コメントを付けれるようにしたりすることができます。
ChatとかCommentがつけられるんですが、これがまたうまくできてて、SpreadSheetに書き込まれます。みんなで作るアプリっぽくできますね。
GoogleのSpreadSheetの方の設定で、もし、このスプレッドシートに書き込みなど変更があったら、メールを送信するとかの機能もあるので、アプリに書き込まれたら通知されるっていうこともできますね。
コメントやチャットなどは、メール認証とかができるので、メールアドレスで不正の書き込みなども防止できます。
できあがったアプリはこちらです。
むちゃくちゃ簡単です。
ただ、地図が住所か名前からしか引けないのが。。難点で、場所が少しづれますね。
有料版だと、ドメインとかも使えるようです。
詳しい内容があんまりどこにも出ていないので、これからも変わっていくのかもしれませんね。。
本命はDART言語
じつは、Dartっていう言語がGoogleで発表されていて。。これWeb側もApp側も両方使える言語で、こっちの方がもっと興味あるんですが。。
DASHって名前だった言語が、DARTになって、DART2.0になって、そいでもってFlutterっていうデザインプラットフォームもできている。これこれから学ぶとするといいかも。。