Glideとは
スプレッドシートからノンコーディングでPWAアプリが作れるツワモノツール。
https://www.glideapps.com/
基本的な使い方はPaizaさんの記事でわかりやすく説明されています。
初めてGlide触るよって方はこちらを是非。：簡単過ぎる！GoogleスプレッドシートからPWAアプリを開発できる「Glide」を使ってみた！
なぜ書くのか
見た感じ絶対できそうなのに、なかなかやり方がわからず苦戦したのでこちらに書き残しておきます。
ソースは公式ヘルプのこちら
(公式にあるやんけ、と言われそうだけど字幕なし英語動画だったんだ察してくれ…)
前提：Glideの親子関係(リレーション)
Glideにはリレーション用のコンポーネントが3種類あります。
- Relation：1対1のみ
- Inline List：1対1、1対多(レコードの中にリレーション先の情報を簡易表示させられる)
- List Relation：1対1、1対多(レコード内からリレーション先に移動できる)
※Relationコンポーネントのみ1対1にしか対応していないため、後に出てくるDataメニューでの設定で「Mutch Multiple」にチェックを入れたリレーション列には使えません。
(この他にもSubcategoriesとかHierarchiesとかあるっぽいけど今回は触れません。)
作るもの
今回はTodo管理アプリもどきを作る前提で進めていきます。
ひとつのアプリの中に複数のカテゴリ(親)があり、その中にTodo(子)が格納されるイメージ。
スプレッドシート(もととなるデータベース)
リレーションを組む時は子となるTodoをひとつのシートにまとめる必要があります。
カテゴリごとにシートを分けたくなりますが我慢です。親は親、子は子でひとつのシートです。
また、カテゴリとTodoを紐付けるためのキーとなる項目が必要なので、
カテゴリにはA列に「カテゴリ名」、TodoにはC列に「カテゴリ」で作成しておきます。
カテゴリシート
Todoシート
Glide Dataでのリレーション設定
Dataメニューを開いてリレーション設定を行います。
※このDataメニューでの列の追加はあくまでGlide内でだけ適用され、元のスプレッドシートへは反映されないので注意。(最初追加した列がスプレッドシート側に出てこなくて混乱した。元データを汚さずにいじれるようにというGlideの配慮…)
親となるシートを開いた状態で右上にある「Add Column」をクリック。
項目を設定します。
Label：適当な名称(後ほどレイアウト設定するときにわかりやすければなんでもOK)
COLUMN TYPE：Relation
CONFIGURATION：キーとなる列をそれぞれ選択(上が現在のシート、下に紐付けたいシート内の列を入れます)
Match multiple：チェック(今回は1対多のリレーションのため。)
これでリレーション設定は完了です。
Glide Layoutにリレーションコンポーネントを追加
実際にアプリ上にリレーションコンポーネントを追加します。
親となるTabを開き、適当なレコードを開く
→ 右上の「+」ボタンを押してコンポーネントを選択。
今回はレコード内の情報も少ないため、コンポーネントは「Inline List」を使います。
Sourceに先ほどDataメニューで作成した列を指定すればリレーションの出来上がりです。
上はスタイルをCompact Listにしていますが、Checklistでもいいかもしれない。
ということで変更。
スプレッドシート上で列「完了」を追加して、チェックボックスの受け皿にしてみました。
あとはその他のレイアウトを整えて完成です。
完成
完成品はこちら
→ https://qiitatask.glideapp.io
親子階層が使えると一気に使える範囲が広がると思うのでこの記事が参考になれば幸いです。
(アプリそのもののコピーを許可したいのに設定に飛ぼうとすると何故か落ちる…後日いけそうだったら設定変更しておきます。)