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

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

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

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アプリを簡単に、コードを書かなくても、作れるサービスです。

Create an app from a Google Sheet in five minutes, for free • Glide
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

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

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

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

むちゃくちゃ簡単です。

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

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

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

本命は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 SDK is Google's UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

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




PHP Code Snippets Powered By : XYZScripts.com