サブカテゴリ―を使えば、導線がもっと便利になる【ノーコード・ツールGlide】

インラインリストの導線に不満がありませんか？

画面にリストを表示させて、アイテムの一つをタップすると、その詳細画面がすぐに表示される。。。

「それでいいじゃない？🤔」

そ、そうですね💦。多くの場合、これで事足りますね。しかし、アイテムのサブカテゴリ―をいくつか作って、ユーザーにそのサブカテゴリーをドリルダウン（下へ下がる）していただいて、最後に、詳細ページを表示できないでしょうか？

分かりにくい？画像で確認しましょう。

サブカテゴリ―をドリルダウン？

今回サンプルとして利用するのは、「チーズのリストアプリ」です。

なぜチーズかって？チーズは、種類が豊富で分類方法が色々あるから説明に都合が良かったという理由です。まあ、筆者がチーズ好きといのもあります😅。

それはさておき、チーズのリストのトップ画面です。チーズは硬さに応じて４つのカテゴリーに分けることができるようです。へ～（チーズは好きだが、詳しくない私💦）。これがメインの区分。

軟質チーズを選びました。おっと、さらにカテゴリーが現れました。フレッシュタイプを見たいとしましょう。

すると、ここまで来て、具体的なチーズ名、すなわち、アイテムが現れました。カッテージを選びます（個人的にはモッツァレラが大好きです🙄。）

チーズの詳細画面が現れました～。カテゴリーを下りていく感じの導線ですね。これを実現できないか、というわけです。

実現できるかどうかと言うと、「実現可能」です。しかも標準機能で🎉。

ただし、、、データソースを入念に準備しておく必要があるんです。テーブル内リレーションが必要だったり、多くの注意点があります。

ということで、今回のシリーズでは、多階層のカテゴリーをドリルダウンしていく導線の作り方をご紹介します！

そういえば、動画はこちらです。「やってみよう！リストのカテゴリーを多段階にしたい！」です。

では、行ってみよう！

まずはデータの確認から

さて上で触れたように、データの作りこみが重要です。

今回についてはアプリ側の設定はおまけみたいなもんです。テーブルは２つあります。

一つ目は、トップ画面に紐づけるテーブルです（正確には、リレーションカラムの方に紐づけるのですが）。

やや、何とも怪しいテーブルです。1行2列。列の一つはリレーション。ということは、リレーションのキーになりうるのは、ナチュラルチーズの列しかないですね。。。とか、いろいろ思うところがあります。

では、チーズのデータはどこにある？

それは、2つ目のテーブルです。な、、なにかおかしい、いつもと違います。カテゴリーが含まれる列が３つもあります。

え、どれが詳細画面に表示されるアイテム？？？突っ込みどころ、満載です😅。

でも、ここでくじけないでください！「困難は分割する」のです！一つ一つ丁寧に見ていけば、なんとかなりますよ！

ということで、詳細は次回に。

今日は、ここまで。

まとめ

今回は、多階層のカテゴリーをドリルダウンしながら、詳細画面にたどり着く導線を実現しようという、企てについてお話ししました。

導入の話しかできませんでしたね😅。ひとつの記事を読めば、一つ以上は学ぶことがあるように作ってはおりますが、毎日更新をポリシーにしているブログですので、今回はお許しください。

まあ、「サブカテゴリーを作ってリスト表示することもできるんだなぁ」ということはわかっただけでもよしとしましょう！

では、ビーダゼーン！

※私のやる気アップとブログの品質向上につながりますので、記事が気に入られた方は、「ポチっ」と好きボタンを押してくださったり、フォローいただけますと幸いです🙇。