Glide試用その１@原神の秘境検索アプリを作る

完成品。

https://nosy-locket-6902.glideapp.io/

Glide

Build an app from a Google Sheet in five minutes, for free.

公式: https://www.glideapps.com/

GoogleスプレッドシートをDBとして利用した、PWA生成サービス。
月額有料だが、機能制限付きの無料プランがある。今回試すのは無料プラン。

プランについては以下を参照。
https://www.glideapps.com/pricing

参考

• Glide：Googleスプレッドシートから5分でアプリが作成できる
  • https://note.com/a_n_do/n/n7b569c62770c
• Glide Appsを使って、本格的なアプリを10分で作る方法！
  • https://note.com/wecken/n/n08c9413baaf4

アカウント作成

googleアカウントが必要。
スプレッドシートを利用するのでgoogleドライブへのアクセス権限が要求されるので許可する。

アカウント作成に成功すると、このような画面が表示される。

とりあえずスプレッドシートを用意する。
うまい題材が思い浮かばなかったので、オンラインゲーム原神の、日替わり育成素材ダンジョンに相当する秘境のリストにしてみる。通じる人にしか通じないやつ。

試用なので、色々足りていないが適当にデータを入れてみる。

Glideの画面から、
Apps > Create app... > From Google Sheet...
を選択。

連携しているgoogleドライブのスプレッドシート一覧が表示されるので、
先程作成したスプレッドシートを選択する。

するとシートの読み込みとアプリの生成が始まって、間もなく次のような画面になる。

もうこの時点で絞り込みとかできちゃう。お手軽。。。
あとは秘境が解放される曜日とか、実際に手に入る素材情報とかを組み込むだけで、
原神秘境DBとしての実用性が出てくるのでは・・・？

今日はここまで。

TODO
デフォルト設定以外のGlideの機能をもっと掘り下げたい。

もうちょっとだけ続くんじゃよ

シートを整理。次のシートで作り直す。

同じ秘境でも、日によってドロップ品が異なる(ステージ名も異なる)ものは、
今回別レコード扱いにしてみる。

(スクショミスで見えていないが、A列には秘境名が入っている。)

上のシートをGlideで読み込むと、下のようなアプリが生成される。

FEATURES > GROUP でグルーピング化できる。
同じ秘境でまとめると以下のようになる。

LAYOUT > DATA にもどって、表示内容をいじってみる。

グルーピングしたものはDATAで指定せずともグループ名として表示される。
今回秘境でグルーピングしたので、DATAで秘境を表示する必要がなくなった。
その他の情報を表示するよう設定。

FEATURES > IN-APP FILTERを設定すると、
利用者がフィルタ機能を利用できるようになる。

Googleドライブなどに画像をアップロード
↓
シートに画像URLを追加

とすることで、Glideアプリ内で画像が利用できる。
(ドラッグアンドドロップで画像を追加したりもできるようだが割愛)

そのままだと詳細画面から画像URLが利用者に見えてしまうので、画面からURLを除去。

PUBLISH > Publish app で、作ったアプリを公開できる。
今回は個人情報などは使っていないので、セキュリティ設定はそのままでpublicに公開。

これで公開完了。URLやバーコードが表示される。
アクセスすれば作成したアプリが利用できる。

おわり。

もしかしたらGoogleドライブの画像を利用する場合、画像のアクセス権限もpublicにしないと他の人には画像が見えないかも？

時間があれば確認する。

追記:
どうやらそのようだった。
Googleドライブ上にて、リンクを知っているユーザには閲覧可能の設定に変更したところ、
Glideアプリで画像が表示されるようになった模様。

最後に感想だけ。

コーディング不要で、スプレッドシートさえあればアプリを作れるというのがなかなかに面白かったです。
UIが英語なので、それさえなんとかなればハードルはかなり低いのではないでしょうか。

とはいえGlideでできることを把握し、それに沿った範囲で目的に合ったアプリを作るセンスのようなものは必要なのかなと思います。