非エンジニアでもできる Glide を使った PWA アプリ開発
モバイルアプリ開発というとかなりのコストを投入しないと中々手を出せないイメージをお持ちの方も多いのではないでしょうか。実際フルスクラッチで開発しようとすると開発費用、期間ともにかかってしまうことは否めないでしょう。
しかし、昨今では GUIツールを使ったコーディング無しで開発を進められるサービスもかなり増えてきています。今回紹介する Glide は Google のスプレッドシートを利用して PWAアプリ開発をすることができる非常に画期的なサービスです。
PWAとは
まず Glide について紹介する前に PWAとは一体何なのかを説明しておきたいと思います。PWAとは「Progressive Web Apps」の略で Webサイト上でネイティブアプリのような振る舞いをユーザーに提供することができる仕組みのことです。
以下リンクの Appscope はPWAアプリのまとめサイトです。一覧をみていただくと知らないうちに実は利用していたPWAアプリがあるかもしれません。
Glide の特徴
Glide はこのPWAを前提としたアプリ開発ツールになります。その為、Glide で開発するアプリではPWAの特徴でもあるWebサイト上からのホームアイコン追加やネイティブアプリのようなトップレベルでの表示（ブラウザのバーが表示されない）が可能となります。PWAの特徴でもあるオフラインでの操作はまだ未対応のようで今後実装予定だそうです（2019/09/07時点）。
Glide が持つ最大の特徴は Googleスプレッドシートを簡易DB(データベース)のように扱い、ユーザー登録情報を Glide とスプレッドシート双方向で接続し、更新することができる仕組みにあります。
実際 Glide で開発を進めてみると用意するデータはスプレッドシートの情報のみで且つ、GUI でお気に入り機能やコメント機能なども直感的に追加することができる為、エンジニア以外の方でも気軽にアプリ開発することができます。
Glide の使い方
以下リンク先より画面右上の「Sign up for free」を選択し、アカウント登録を行います。
アカウント登録が完了すると My Apps, Videos, Templates ３つの領域が表示されるはずです。
My Apps では新規アプリ作成とこれまでに作成したアプリが一覧で表示されます。Videos では Glide の基本的な使い方を動画で学習することができます。Templates は Glide を利用して作成できるアプリ例となるテンプレート一覧になります。使いたいテンプレートがあればそのままコピーして自作のアプリにカスタマイズすることもできます。
- Employees
従業員管理ツールで連絡先の登録や部署や所属などのカテゴリー分けと検索ができる。 - Conference
会議やイベントのスケージュール検索や登壇者情報の一覧出力などができる。 - Issue Tracker
発生している問題の報告や連絡先の登録などができる。 - City Guide
ロケーション情報を登録して地域のガイドなどができる。 - FInstagram
インスタのような個別アカウントによる写真の投稿や一覧出力などができる。 - Glide Examples
Glide で便利な機能をまとめたテンプレート。画像カルーセルなどビューを作り込む際、参考にしてみるといいかも。 - Simple CRM
シンプルなCRM（顧客管理ツール）を作成し、一覧出力や検索などができる。
各テンプレートでスプレッドシートのデータ設計がどのように行われているか確認したい時には「View Sheet」を選択するとみることができます。
また、そのままテンプレートを流用したいときには「Copy to my apps」の項目を選択すると 内容そのままで My Apps の領域に新規アプリとして自動追加されます。
ここでは次のスパイスカレー店舗検索アプリを作りながら、Glide で一からPWAアプリを作るフローを紹介したいと思います。
1. Google スプレッドシートの準備
まずスプレッドシートを新規で作成します。Glide では基本的に１シートにつき１ナビゲーションがひも付きます。
ナビゲーションとはアプリ下部に表示されるタブナビゲーションのことです。その為、１ページ毎にスプレッドシート内でシートを作成する必要があります。１シートで複数ページへの出力をさせるといったことはできませんので注意してください。
シートに名前をつけて1行目に Glide で出力したい項目を記述していきます。ここではシート名を「店舗一覧」とします。店舗情報を登録したいので「Shop（店舗名）, Hours（営業時間）, Holiday（定休日）」といったように入力しています。
項目を1行目に入力できたら各項目へ登録したい一覧情報を入力します。独自の画像を登録したい場合、既にサーバー上のどこかへアップ済みであれば絶対パスを登録情報として入力します。まだどこにも画像をアップしていないのであれば、一旦 Glide の管理画面へ戻りましょう。
2. 新規アプリ作成
Glide の管理画面から My Apps の 「+ New app」を選択します。
Googleアカウントに紐づくスプレッドシートが表示される為、先ほど用意したシートを選択します。
次のようにアプリ開発画面が立ち上がります。既に登録済みの情報は一覧で表示されているのではないしょうか。
左サイドバーではアプリの基本的な設定をすることができます。
- Layout
アプリで利用されるコンポーネントの配置やスプレッドシートで設定した出力データの紐付けを行えます。 - Tabs
アプリ下部のナビゲーションに関する設定箇所になります。 - Data
スプレッドシートで登録したデータのビューを表示します。 - Settings
アプリのアイコン設定やドメイン名の設定を行えます。 - Edit sheet
アプリと紐付くスプレッドシートを開きます。 - Reload sheet
スプレッドシートの編集内容を Glide 内で更新します。 - Share app
アプリ公開時、リンク共有を簡単に行えます。
左サイドバーの Layout を展開すると一覧表示にもいくつかスタイルが用意されています。 右サイドバーの STYLE から 好みのものを選択して調整してみてください。当然選択するスタイルによって出力できるデータ項目数は異なります。ここでは登録店舗の位置情報を表示させたいので MAP を選択します。
先ほど未登録になっていた画像を Glide から登録していきましょう。Layout で表示されている画像未登録部分（赤枠）へ登録したい画像をドラッグアンドドロップします。すると画像がトリミングされて登録されていきます。
Google スプレッドシートを確認してみると画像のリンクが登録されているのが分かります。
ここが Glide の優れているところでスプレッドシートで面倒な操作は Glide 側で登録したりと双方向に更新し合うことができるのです。Glide でアップロードされる画像は firebase-Storage へ登録されます。
ユーザー自体にも店舗情報を追加できる権限を与えたい場合は先ほど選んだスタイルから OPTIONS の Add item にチェックを入れます。すると右上に「+」アイコンが表示されます。
ここではユーザーがお気に入り店舗を登録できるようにしたいので、プレビューされているリストの何れかを選択して店舗詳細画面を表示させてください。まだ画像サイズや表示順などビューの設定が終わっていなければ適宜調整してみてください。
お気に入り機能やテキストなど表示に使うパーツが不足していると感じた場合、右上の「＋」ボタンからコンポーネントを追加することができます。お気に入りコンポーネントは Favorite になります。
これでアプリ機能はほぼ完成ですが、せっかくなのでWelcomeページとしてアプリの利用方法を記載したページを用意したいと思います。
新規でページを用意したい場合はスプレッドシートでも別タブシートを追加する必要があるんでしたね。ここでは「ご利用方法」というシート名で追加しました。
別タブでシートを用意できれば表示したい項目を店舗一覧のときと同様にシート1行目へ入力していきます。
ここでは「Title（タイトル）, MainImage（メイン画像）, Contets01, Contets02, Contets03（テキストコンテンツ）」といったように登録してみました。
新しく用意したシート情報をアプリで表示させるためには左サイドバーから Tabs を展開しどのナビゲーションとシートが紐付くのか設定する必要があります。ナビゲーションのアイコンや文言もここで調整することができます。
ビューに特化したページを作成したい時はスタイルを Details にするのがオススメです。
最後に Settings からアプリで利用するアイコンやテーマカラーを調整してみましょう。アプリドメインも取得可能な範囲で自由に設定することができます。
Glide で好みのアイコンがあればそのまま設定できますし、もう少し独自性をもたせたい場合は以前紹介した Shopify が提供する Hatchful などのロゴジェネレーターを利用するとここも手間をかけずリリースすることができます。
3. アプリの公開方法
アプリの公開方法はいたってシンプルです。まずアプリに認証をかけたい場合やアプリにログイン機能を持たせたい場合があるかもしれません。
そんなときは LAYOUT 横の PRIVACY から公開条件を選択できます。誰でも閲覧可能でよければ 「Public」にしましょう。もしe-mail登録を必要としたい場合は「public with email」にしてください。パスワード認証をかけたい場合は「Password」にします。特定のe-mailアドレスの人にしか認証を与えたくない場合は「Email Whitelist」を選択します。
最後公開時にはShare Appボタンから「Open app in browser」で試しに動作確認してみましょう。QRコードを読み取るとそのまま実機でも確認することができます。
まとめ
一通り Glide で PWAアプリを作成してみるとお気づきかもしれませんが、Glide は登録情報のリスト表示、検索に特化しています。
一方でビュー部分のカスタマイズ性やデータの正規化面ではまだ課題がありそうです。ただ、Glideでは新しい機能がどんどん追加されていますし、社内やプライベートで利用するアプリをサクッと作りたい場合、非常に重宝するのではないかと思います。
英語にはなりますが以下リンクに Glideで作成されたアプリが掲載されています。
アイデア次第でさまざなアプリを開発できると思いますのでぜひ触って遊んでみてください。
補足
Glideで作成したPWAアプリがデスクトップにも対応できるようになりました。デスクトップへのインストール方法などは以下動画を参照してみてください。
