Closed2021/01/17にクローズ16

Glide試用その２@ポケモン初代の図鑑を作る

このスクラップは続き物です。
前回: https://zenn.dev/akinosora/scraps/225bc41941a9bf

スクラップなので、前のものにそのまま追記していく形が本来の運用のような気がしましたが、
前回がちょっとわかりにくく、一新したかったので、新しく投稿しなおしました。

前回の題材(原神の秘境)がわかりにくかったので、
今回は題材を、シンプルで知名度のありそうなポケモンに変えています。
なお内容は初代です。金銀までしかやったことないので。。。

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

参考

アカウント作成

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

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

以下のようなスプレッドシートを作成。
図鑑No、名前、タイプ1、タイプ2、ついでに出現するバージョンを複数カラムで管理。

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

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

なお上部のサーチバーにて、絞り込みができる。

以下のようなアプリが生成される。

リスト

さて、ここで個人的にイマイチだと思ったのは、タイプ1とタイプ2を横並びに表示できないこと。

調べてみたが、Glideの機能ではできなそうだった。
どうするのがいいか。。。

[Qiita] GlideでスプレッドシートからPWAを作る際に知っておきたい７つのこと

表示用シートでデータの見た目を調整する

日付と場所を1項目にまとめて表示したい

「タイトル by 作者」のような表示をしたい

こういったロジックやその結果となるセルはマスターデータシートには含まず、それを参照する表示用シートで実現しましょう。

なるほど。
スプレッドシート側で、マスタデータとは別に、
Glideでの表示用に加工したシートを用意するのがよさそう。

もともとのシートをマスタとして扱い、
それと別に、Glideでの表示用シートを用意する。

以下のような形。

Glideで表示するシートを、マスタから表示用のものに切り替えると、
以下のようになる。
やりたかったことはできたか。

リスト

Publish > Publish app で公開。

以下で生成されたアプリを利用できる。

今回作ったスプレッドシートもリードオンリーで公開します。

所感

コードレスでお手軽にアプリが作れるのは非常に魅力的
とはいえGlideでできる表現には限度がある。スプレッドシート側での工夫で改善可能
マスタデータ管理用のシートと別にGlide表示用のシートを用意すると良し

それはそれとして新しい課題が産まれてしまった。。。
結合したタイプでのIN-APP Filterが使いにくい。

できれば単一のタイプで絞り込みたいが、そううまくもできないか。。。

タイプ複合前も、タイプ1とタイプ2が別列だったため、
それはそれでIN-APP Filerがうまく動かなかったわけだが。

このあたり、どうにかできないかしら。。。

このスクラップは2021/01/17にクローズされました