【Simple Listの使い方を詳しく】ノーコードツールAdaloの使い方

Adaloの解説動画 Text


兵庫県神戸市でアプリ開発事業を営んでいる ミコミアのハタイはです。
動画にてノーコードアプリ開発ツールAdaloの説明を行なっており、今回はその動画の文字起こし記事となります。
該当動画はこちらです。

【並べるならこれ】Simple List Adalo 講座 Bコース - YouTube
https://www.youtube.com/watch?v=sJiEvg9bG20


今回はAdaloのコンポーネントで、コンポーネント開いていただいて3つ目にあるシンプルリスト(Simple List)っていうものを使用していきたいと思います。
早速ドラック&ドロップして好きなところに置いてみてください。まず1番最初に、「このリストは何のリストですか」という風に聞かれていますで、このリストはデータ ベースのデータに結びついています。リストを動かすために、何か1つデータを作ってみると良いかもしれません。
ということで、コレクションネームをつけて、タイトルを入力していきます。
ここは日本語入力ができます。追加する中身を決めていきますので、ネーム(name) とジェンダー(gender)を入れておきます。


次にナンバーを追加します。今回はテストなので、適当に作っていきます。0 recordsと書いてあるので、ここをタップしてください。具体的に データはここのAddの部分から入れていきます。ネイム(name)は普通に何でも自由なものを打ち込んで ください。 今回は、2つ3つほど入れた方がいいですね。今回2つ入れたので、閉じます。こちらタップしていただいて、この部分でデータを選択します。今回作りましたデータを使います。


フィルターという部分がありますので、この部分を選択します。そうすると、こういう風に先ほど設定したものが出てきます。is equal toていうのは「等しい」というです。例えば、さっき入力したものを選択しますとネームがミコミアのものだけ、ここに表示されるというものになります。

ソーティング(sorting)というのは、順番を入れ替える機能です。例えば上から順番にあから順番に並べて いくのとOから順番に並び、後ろから並べていくこともできます。ジェンダー男性を上に女性を下に、または、女性を上に男性を下にみたいな感じで並べ替えることができます。
先ほどナンバーというもの設けたのですが、これでナンバー(数字)が高いものが低いものを、低いものから高いものという風に変えることができます。
アダロの場合は、データベースにIDというものがあり、1ずつ上がっていく形で設けられているのでIDをソート番号に使ってもいいかもしれません。

次ですねマキシマムナンバーアイテムズ(Maximum Number Items)というところです。ここはリストに表示する最大数について聞いています。今回は2つしか入れてないので、2ですね。データ数がないので今回は特に設定せずに行きたいと思います。

次にこれはですねアドバンスドオプション(Advanced Options)という追加設定です。ユーザーがアイテムを更新したり、新しいアイテムを追加した時 にと表示されていますので、オートリフレッシュ機能です。例えば、ユーザーが会員登録し、 その会員登録したユーザー一覧を表示するリストを持っていってそれを常時見たい場合はオートリフレッシュをつけたらいいと思います。ユーザーがスクロールしてアイテムをロードすることができますかというのは、下に引っ張ったりしてロードするものもあります。

ディバイダーというのがあります。ディバイダーは分けるものです。ディバイダーのカラーも選べます。

タイトルは、データベースから自動で持ってくるマジックテキストもあります。マックスラインは1行、2行、マックスラインなしという風に選ぶことができます。サブタイトルも設定できます。

イメージ(画像)についてです。パソコンから選択して、セットすることができます。
また、URLというのは画像に結びついてるURLをこの中に入れるとアプリを読み込んだ際に表示されるというものです。

エラー だったりとかNo Imageみたいなものを表示することができます。

Right sectionにあるトグル(Toggle)というのは、チェックボックスとかだったり押すと状態や色が変わるものです。
これは今、選択できない状態になっています。なのですが、データベースのアドプロパティで、TRUE・FALSEというのがあるのでこれを選んでください。
押してチェックマークが入ったら、TRUEで チェックマーク入ってないとFALSEがデータベースに保存される形になります。
一般的には、星とかを使うことが多いです。

アクティブアイコンっていうのは押された 時に何を表示するかっていう表記です。基本的には、押された場合は色が入っていることが多いです。
お気に入りマークを押すとそのデータをリストに入れたいという時は、押した時にアップデート・クリエイトなどでデータを更新したり追加したりする必要があります。

アディショナルアクション(Additional Action)です。これはトグル(Toggle)がオフの状態の時はどうしますかというアクションの設定になります。
バックグラウンドは背景になります。バックグラウンドカラーもここで選択することができます。ボーダーというのは外枠のことになります。
ボーダーのサイズを上げていただいて、分かりやすい色にすると良いと思います。

検索などを実装されたい場合にはリストサーチを使ってください。
検索をONにしますと、ボックスができまして、検索ができるようになります。ノーサーチリーチメッセージ(No Search Message)というの検索結果なしということです。カスタムでお好きなように設定してみるのもありだと思います。リストエンプティ ステート(List Empty State)というのはリストの中身に何もない時に表示するものです。

動画ではより詳しく解説しています。
今回はSimple Listを実装・解説しました。