プログラミング？コーディング？ナニソレおいしいの？GlideとGoogleSpreadSheetで5分でPWAを作成！

こんにちは！いつもご覧いただきありがとうございます。

なんと私、「Glide」という面白いおもちゃを発見しましたのでそちらを今回は紹介したいと思います。

ちらっと耳にしてはいましたが、なんとこのツール、コーディングやプログラミングなしでPWAが作れちゃうのです！
最近Web界隈ではこの「PWA(Progressive Web Apps)」が盛り上がっており、賛否両論もあったりと何かと話題に取り上げられることが多いので注目しています。
しかも、僕が多用している「Google SpreadSheet」と連携するだけで簡単にWebサイトが作れるという！！！

実際に使ってみてめちゃくちゃ感動したのでご紹介いたします！
簡単なものだとたった五分でできちゃいます！

実際に作成したものがこちら↓
Kyoto Brew Map

PWAって？

最近話題になっている「PWA」。
これは「Progressive Web Apps」の略で、スマホ向けのWebサイトWebアクリケーションを、スマートフォンアプリのように使える仕組みです。
これは「Webサイトなのにアプリみたいにホーム画面にアイコン追加したり、プッシュ通知がきたり、オフラインで使えたりする」スグレモノです！

サイト運営者はアプリのストアへの申請もなく規制もなくアプリ（のようなもの）を作成できます。
ユーザーとしてはアプリをインストールするわけでないので容量を節約できます。

サイト運営者にもユーザーにも優しい技術なのです。

主な事例としては

• Twitter Lite
• 日経電子版
• SUUMO

など、様々な業種の企業が参入している急上昇の技術です！

そんなPWAをたった5分で作れちゃうツールが「Glide」なのです！
※簡単なものに限る

早速作ってみるよ「Glide」！手順を紹介！

「いやいや！そんなに簡単にWebサイトとか作れるわけないじゃん！しかも最新技術でしょ！？無理無理！」
僕も最初はそう思ってました。

しかし、実際に使ってみるとまさに「目からウロコ」
超手軽！超簡単！超コーディング不要！
「百聞は一見に如かず」ということで早速触ってみましょう！

今回必要なものは

• Googleアカウント
• Glideアカウント
• Google SpreadSheet
• ちょっとしたデータ

です。

Googleアカウントを所持している前提で進めますのでGoogleアカウント持ってない方は先に作っておくことをお勧めいたします。
Googleアカウントの作成方法は今回は紹介しないのでご注意を！

下準備１（Glideアカウント登録）

まず、Glideのアカウントを作成します。

下記のURLからGlideにアクセス↓
Glide

するとこのような画面が表示されるので右上の「Sign up」をクリック！

登録はGoogleアカウントで行います。
真ん中の「Continue with Google」をクリック

Googleのアカウントを選択します。

アカウント認証が完了するとダッシュボードが表示されるのでまずはここでアカウント登録は終了です。

下準備２（Google SpreadSheet）

次はPWA作成のための「データ作成」です。

普通のWebサイトではここでデータベースやJSON、APIなどを使用するのですが、今回は「Google SpreadSheet」を使用します。

まずはGoogle DriveかGoogleSpreadSheetAppにログインして新しいスプレッドシートを作成します。

ここに自分の表示させたいデータを入力します。
今回はとりあえず京都のカフェにしました。

ここでシートの名前などはしっかり書いておけばあとで変更する手間がないのでお勧めします。

これで下準備完了です。

新しいアプリを作る（Map機能を使ってみよう）

それでは早速サイトを作成しましょう。

Glideのダッシュボード画面に戻って「+ New app」を選択。

するとスプレッドシートの選択窓が表示されるので先に作成したスプレッドシートを選択します。

スプレッドシートのデータをもとに雛形を作成してくれました！！早い！
このままでも完成で良いのですが画像を用意していないのでちょっと不恰好かも。

そこで「このアプリをMapアプリにしてしまおう」という考えに至りました。
そして右側のメニューの「Map」をクリック

すると、自動で住所を検出してマップにピンを立ててくれるではありませんか！

ピンをクリックすると下からそこの情報が。

さらに下から出てきたものをクリックすると詳細画面に遷移します。

モックアップをみながらサイトを作成できるのです！
すごい！

あとはドメインやディスクリプションなど、ちょっとした調整。
左側のメニューの「Settings」で調整できます。

これで完成とします！

実際にスマホで見るときは左下の「Open app」をクリック。

アプリのおすすめページ！ここで右上のQRコードにカメラをかざすと実際に見ることができます。

すげえ。

独自ドメインの使用などは有料月額料金で設定できるみたいです。

使ってみて思ったこと

Glideを使ってみてこのツールのメリット、デメリットをまとめてみました。

• メリット
  • コーディング、プログラミング不要
  • デプロイ不要
  • データベース不要
  • Googleアカウントとの連携が簡単
  • Google SpreadSheetを利用するっていうのがまたいい
• デメリット
  • 自由度が低い
  • 無料版では制限が多い
  • 有料版でも自由度は比較的低めかも

Google SpreadSheetでURLだけの一覧を作って、GAS（Google Apps Script）を使ってそのURLからスクレイピングして各項目をセルに挿入するみたいなことを自動化したら面白そうだなあ

軽いものであれば、Webの入門、ブログのちょっとした付随アプリ、少人数でのメモ共有程度に使えそうです。
僕はついでに「Kyoto Brew」のマップ版に利用しようかなと思ってます。