書籍「いちばんやさしいGoogleビジネスプロフィールの教本」

Glideを使ってGoogleスプレッドシートでPWAアプリを作成する方法

アプリ

今日のエントリーは、Glideを使ってGoogleスプレッドシートでPWAアプリを作成する方法を紹介します。

Glideを使えば、非エンジニアでもスプレッドシートを使うだけで、コード不要で簡単にPWAアプリが作れます。僕は5分でPWAアプリが作成できました。

Glideとは?

Glideを開発しているのは、David Siegel氏が率いるY Combinatorから出資を受けているスタートアップです。

スプレッドシートのデータを利用するので、コード不要というところが素晴らしいですね。

無料プランと有料プランがある

料金プランは、無料プランと有料プランがあります。

  • Free APP $0
  • Pro APP $19
  • BUSINESS APP $99

無料プランでもPWAアプリの作成ができるのでご安心ください。

Glideを使って、GoogleスプレッドシートでPWAアプリを作成する手順

Glideを使って、GoogleスプレッドシートでPWAアプリを作成する手順を紹介します。

今回は、「湘南のヨットハーバー リスト」のPWAアプリを作ります。5分もあれば作成できます。

以下の手順で行ってください。

  1. Glideにサインアップ
  2. Googleスプレッドシートで「湘南のヨットハーバー リスト」を作る
  3. GlideでPWAアプリを作成する
  4. PWAアプリをネットに公開する

1. Glideにサインアップ

「Sign Up」をクリックして、Glideにサインアップします。

Glideにサインアップ

「Continue with Google」をクリックしてください。

「Continue with Google」をクリック

「アカウントの選択」が表示されるので、アカウントをクリックする。

「アカウントの選択」が表示されるので、アカウントをクリック

「Glide が Google アカウントへのアクセスをリクエストしています」と表示されるので、「許可」をクリックする。

「Glide が Google アカウントへのアクセスをリクエストしています」と表示されるので、「許可」をクリック

Glideにサインアップが完了し、管理画面が表示されます。

Glideの管理画面が表示される

2. Googleスプレッドシートで「湘南のヨットハーバー リスト」を作る

Googleスプレッドシートで「湘南のヨットハーバー リスト」を作ります。「ヨットハーバーの名前」「住所」「電話番号」「写真」を入力します。

Googleスプレッドシートで「湘南のヨットハーバー リスト」を作る

「写真」はGoogleドライブにアップして、取得したリンクをスプレッドシートに記載します。

「画像」はGoogleドライブにアップして、リンクを取得

3. GlideでPWAアプリを作成する

GlideでPWAアプリを作成します。

①「New App」をクリック

GlideでPWAアプリを作成

②Googleスプレッドシートで「湘南のヨットハーバー リスト」を選択

Googleスプレッドシートで「湘南のヨットハーバー リスト」を選択

③Glideがスプレッドシートを分析して、スマホに最適化される

「How to organize your sheet」と表示されるので「Got it!」をクリックします。

「How to organize your sheet」と表示されるので「Got it!」をクリック

ほぼ出来上がりです。

細かいレイアウトの調整

細かいレイアウトの調整を行います。

①表示レイアウトの変更

表示レイアウトを「Title」に変更します。

表示レイアウトを「Title」に変更

②「写真」を紐付ける

「写真」を紐付けると、スプレッドシートのリンクの画像と紐付きます。

「写真」を紐付ける

③コンテンツの調整

コンテンツをクリックします。
今回は「江の島ヨットハーバー」を選びます。

Summery(名称)をクリックして、写真を選択する↓

Summery(名称)をクリックして、写真を選択する

Componentsの右の「+」をクリックすると、色々なコンテンツを追加することが可能です。Googleマップを追加したり、ユーザーのコメントの入力ができるようにすることが可能です。

Glideに、Googleマップを追加したり、ユーザーのコメントの入力ができるようにする

ユーザーがコメントをする際には、ユーザー名・メアドの登録が必要なので、コメント欄が荒れるリスクは少なくなっています。

認証機能

アプリを使う際の認証機能を設定することも可能です。3種類の認証方法があります。

「Setting」をクリックして認証方法を選択します。デフォルトはPublicです。

  • Public・・・誰でも利用できる
  • Public with Email・・・メアドで認証すれば利用できる
  • Password・・・指定されたコードを入力すれば利用できる
  • Email whitelist・・・ホワイトリストに入っているメアドで認証すれば利用できる

Glideの3種類の認証方法

Email whitelistで認証するときのみ、新規シート (Email whitelist) を作る必要があります。
新規シート (Email whitelist) に認証するメアドを登録します。

4. PWAアプリをネットに公開する

PWAアプリをネットに公開する方法です。以下の手順で行います。

①アイコン・タイトル・テーマの設定

「Setting」をクリックし、スマホのホーム画面に設置するアイコンや、アプリのタイトル、テーマを設定します。

Glide アイコン・タイトル・テーマの設定

②PWAアプリをネットに公開

「Open App」をクリックします。

Glide PWAアプリをネットに公開

アプリを公開するサイトが表示されます。

Glide アプリを公開するサイトが表示され

スマホでURLをクリックするか、QRコードを読み込むと、PWAアプリを体験できます。

ナビゲーション機能

スプレッドシートに複数の「シート」があると、ナビゲーション機能が有効になり、PWAアプリのボトム部分にナビゲーションを追加されます。

ナビゲーションを追加するには、以下の手順になります。

①スプレッドシートに新規シートを追加

スプレッドシートの「シート」が、PWAアプリのナビゲーションになります。追加で新規シートを追加してください。今回は、「江の島」「逗子」「油壺」をシートにするので、そのままPWAのナビゲーションになります。

Glide スプレッドシートに新規シートを追加

②PWAアプリのボトムに部分にナビゲーションが追加される

PWAアプリのボトムに部分にナビゲーションが追加されます。

PWAアプリのボトムに部分にナビゲーションが追加される

PWAアプリを見てみたい方は、URLをクリックすればアプリを体験できます。

ホーム画面に追加する

ホーム画面に追加することも可能です。

Glide PWAアプリ iOS↓

Glide PWAアプリ iOS

Glide PWAアプリ Android↓

Glide PWAアプリ Android

さいごに

以上、Glideを使ってGoogleスプレッドシートでPWAアプリを作成する方法を紹介しました。

スプレッドシートを使えば、誰でも簡単にPWAアプリが作成できますので、ぜひお試しください。