【Adalo】Lists of Listsで階層形式のリストを作ってみました
（なぜこれを書いたか）
Adalo独自の階層リスト表示である「lists of lists」の使い方がこの間までよく分かりませんでした。Adalo Resources に説明が載っているのですが、解説が簡潔過ぎてイマイチ理解出来ないんです。そこでいつも素敵なAdaloブログを書かれているSEの「ゆかゆか」さんに教えて頂きました。
Adalo Resourcesは分かっている人が書いたマニュアルって感じで、「そんな細かく説明なくても皆さん、もう、分かるよね？！」みたいな部分があります。備忘録を兼ねてAdaloのマニュアルを初心者向けに書き直してみました。Lists of Listsでつまづいている人が参考になれば幸いです。
（ゆかゆかさんのブログ）
１．そもそもLists of listsって何？
Lists of listsはリストの中にもう一つリストがあるような形態のリストです。今日初めて「Lists of lists」という言葉を聞いた人もいるかも知れませんが、そういう人には絶対イメージできないですよね。
イメージ的に言うとWindowsのディレクトリーをどんどんクリックしていって関連する項目をブレイクダウンしていくような階層イメージに近いかなと思っています。
例えば子供がいる親の集団がいて、親の誰かを選択するとその子供が出てきて、子供をクリックするとその子供の成長記録が出てくるみたいな感じでしょうか？（クリックすると、どんどんブレイクダウンして詳細データに展開するようなイメージです）
Adalo Resourcesには例として「旅行計画」（Trips）と「日程」(Days)と「行程」（Actibities）の3つがLists of Listsで階層形式で表現されています。
（私が作ったlists of listsの例）
Adalo Resourcesの例とほぼ同様の内容で初心者向け解説を作ってみました。
①最初の画面
・・・・複数の旅行計画「Trips」（京都旅行、ロンドン旅行、パリ旅行）があり、どれかをクリックすると2ページ目にその詳細が表示されます。（今回は京都旅行を選択）
②次の画面
・・・・京都旅行の詳細を表示しています。1日目の訪問先はどこ、2日目はどこ、3日目はどこと言ったように表現されています。日付（Days）のリストの中に行程（Actibity）のリストが入っている構成です。これが基本的なlists of listsです。以下のような画面をこれから作っていきます。
２．lists of listsの作り方
①３つのデータベースを作り、リレーションでつなぐ
今回のリストはクリックするごとにTrips→Days→Actibitiesとだんだんブレイクダウンするようになっています。まずTrips、Days、Actibitiesという3つのデータベースを作って、リレーションで関連付けを行います。
イメージ的には以下にような関連性を持たせます。中間にあるDaysはTripsとActibitiesの両方にリレーションを設定します。
②Tripsのデータベース
「旅行名」(text)と「写真」（image）のプロパティを作りました。Daysとはリレーションでつなぎます。
③Daysのデータベース
日程（何日目）を表示するプロパティを作り、TripsとActibitiesとはリレーションでつなぎます。
「日程」プロパティはどの旅行か区別がつくように「京都1日目」、「ロンドン1日目」、「パリ1日目」などと、「旅行名＋〇日目」の形で表示した。
④リレーション間のプロパティの組み合わせ
ポップアップメニューから手動で項目を選択します。（自動で組み合わせが出来るわけではないです）
⑤TripsとDaysのリレーション
TripsとDaysは１：Nのリレーションを選択します。（上から2番目の選択）
（京都旅行は複数の日程（Days）を持っており、日程（Days）は京都旅行という一つの旅行に属します。）
⑥Actibitiesのデータベース
行程（訪問先、Actibities）を表示するプロパティを作り、Daysとはリレーションでつなぎます。
⑦DaysとActibitiesのリレーション
DaysとActivitiesのリレーションは1:N（一番上の関係）を選びます。
（一つの日程（Day）は複数の行程（訪問先、Activities）を持っており、訪問先は1つの日程に属します。）
３．2ページ目の「Days」画面の作り方
最初の画面から遷移してくる2ページ目のDaysの画面の作り方を説明します。ここがlists of listsの最大の山場です。
ここには最初の画面で選択した旅行先の詳細情報を表示します。
（画面構成）
①imageコンポーネント
・・・マジックテキストでTripsデータベースの画像と紐づけます。
②text ・・・Days(何日目の表記)
③Simple List・・・Actibity(行程、訪問先)を表示
④ボタン・・・・ここを押すとActibityの情報を入力する画面に遷移する
この画面はプレビューで見るとこんな表示内容になります。
（Simple Listの修正）
私はカスタムリストで作るのかと思っていましたが、Adalo ResourcesではSimple Listを使っていたのでそうしています。リスト項目を箇条書きに表示するのにこちらの方が適しているという判断なのでしょう。
Simple Listには画像やSubTitleがありますが、今回はTitleしか使わないのでスライドスイッチで設定をOFFにしておきます。
（Make Listで３つのコンポーネントをリスト化します）
Days画面のTextコンポーネント、Simple List、ボタンの3つを同時に選択して左ツールバーの「Make List」を選んでリスト化して下さい。
リスト化すると同じ内容の項目が薄い灰色の表示になって繰り返し表示されます。
（リスト化した部分とデータベースの紐づけ）
Make Listでリスト化した部分を選択してデータベースと紐づけます。
・What is this a list of?→「Days」を選択
・Filter→All Daysではなく、その下の「Current Trip > Days」を選択
（Simple List部分の設定）
今度はMake Listでリスト化された部分ではなく、その内側のSimple Listを選択し、以下のように設定します。
・What is this a list of?→Actibities
・Filter→All Actibitiesではなく、その下の「Curent Day > Actibities」を選択
（ボタンの設定）
「Actibityを追加」のボタンを押すとActibityを入力する別画面に遷移するようにLink設定します。
プレビュー画面でみるとボタンを押すと下記のように画面が遷移します。
3日目にActivityを追加したかったら、3日目の部分にある「Actibityを追加」ボタンを押します。
（その他）
～Titleの表記～
Daysの画面に遷移したときにTitle表記が初期画面で選択した「旅行名」になるようにマジックテキスで設定しました。
４．まとめ
上記の設定を行うと下記のようなリストが作れます。これがlists of listsの基本形です。いろいろ設定を行いましたが、どこが分かりづらかったでしょうか？私はDaysの画面でMake Listで作ったリストとSimpleリストをそれぞれDBと紐づけする部分がなかなか理解出来ませんでした。（すぐ忘れるし）
今回説明したデータベース間のリレーションはいづれも１：Nとなっていましたが、内容によってはN：Nになる場合もあるのでよく考えながらやってみて下さい。
（例：「親」→「その子供」→「習い事一覧」などの関係では親と子供は1：Nのリレーションでいいですが、子供と習い事はN：Nになると思います。）
lists of listsはデータの内容を一覧表ではなく、項目別に展開していくような表示には大変向いています。応用範囲が広いので是非覚えて活用してみて下さい。
（過去の投稿はこちら）
https://note.com/mucho3/n/n632515d056d1
この記事が気に入ったらサポートをしてみませんか？