【PWA】GoogleのGlide で PWAアプリが簡単に作れます。公園・避難所アプリさっそく作ってみました【おすすめ】

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

小平公園・避難所マップデータPWA

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

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

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

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

Glideの使い方

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

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

PWAって?

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

はじめてのプログレッシブウェブアプリ  |  Web Fundamentals  |  Google Developers

基本的に、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 • Create an app from a Google Sheet in five minutes, for free
Glide turns spreadsheets into beautiful, easy-to-use apps, without code. Pick a spreadsheet or start with a template, customize your app, then share it instantl...

これ本当に簡単です。

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

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

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

まず、Glideに入ります

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

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

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

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

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

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

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

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

Turn on notifications in a spreadsheet - Computer - Docs Editors Help
Set notifications to find out when other people have changed your spreadsheets, and see what they’ve modified. This feature is not available in Google Docs or S...

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

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

小平パン屋さんマップ

むちゃくちゃ簡単です。

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

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

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

本命はDART言語

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

Dart programming language
Dart is a client-optimized language for fast apps on any platform

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

Flutter - Beautiful native apps in record time
Flutter is Google's UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with e...

  • 21
    シェア
スポンサーリンク
スポンサーリンク




PHP Code Snippets Powered By : XYZScripts.com