ノーコードでアプリ開発をやってみたいと思ったときにおすすめな「Adalo」です。
Adalo(アダロ)は、簡単にアプリが作れるノンプログラミングツール。
プログラムコードを知らなくてもアプリ製作が可能なツールです。
ここでは、「AdaloのImage List（イメージリスト）」を紹介します。
目次
Adalo
Adaloは、ノーコードで使えるアプリ開発ツールです。
⇒ https://www.adalo.com/
Adaloを使用するには登録が必要です。
登録方法やエディタ画面は別記事に書いていますので、下記の記事を参考にしてください
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
Image List（イメージリスト）
Image List（イメージリスト）は、画像をリスト状に表示することができるコンポーネントです。
リストは、複数の物を一つにまとめて表示するときに役立ちます。
Adaloのエディタ画面の＋からコンポーネントを追加することができます。
リストコンポーネントは全部で７つあります。
- Simple List：シンプルリスト
- Card List：カードリスト
- Image List：イメージリスト
- Avatar List：アバターリスト
- Horizontal Card List：ホリゾンタルカードリスト
- Horizontal Chip List：ホリゾンタルチップリスト
- Custom List：カスタムリスト
ここでは、「Image List（イメージリスト）」を紹介します。
Image List（イメージリスト）の使い方
Image Listは、画像のリストです。
Image List（イメージリスト）を使用するには、Image Listを使用したいスクリーンへ移動させます。
左サイドバーでイメージリストの設定をすることができます。
イメージリストには、以下のような項目があります。
- Image List：イメージリスト
- Text：テキスト
- Image Style：イメージスタイル
- icon：アイコン
メインのデータ設定は、Image Listから行います。
Image Listの設定
【Image Listの設定項目】
- What is this a list of?：何のリストか？
- Filter：フィルタ
- Sorting：並べ替え
- Maximum number of items：アイテムの最大数
- image：画像
- If there ‘s no image：画像がない場合
- Columns：カラム
まず、What is this a list of?にリストを入力します。
データベース内の表示するデータを指定します。
データを指定すると、フィルタ、並べ替え、アイテム数の変更が可能。
Columnsは、画像のカラム数を変更できます。
クリックしたときのアクションを付けたい時は、＋アクション追加で設定が可能です。
Text設定
テキストでは、タイトルテキストを設定できます。
- Subtitle：字幕
- Subtitle position：字幕の位置
- Text position：テキストの位置
- Background effect：背景効果
テキストの詳細設定を行えます。
Image Style
【Image Style設定】
- shape：形状
- Rounding：丸み
- Shadow：影
丸みは、画像の丸みを付ける設定です。
画像に関する設定ができます。
icon設定
iconでは、カラーやデザイン設定を行えます。
- icon：アイコン
- position：位置
- Color：カラー
- +ADD Action：アクション追加
アイコンを変えることも可能です。
アイコンをクリックしたときのアクションも追加できます。
まとめ
AdaloのリストコンポーネントにはImage List（イメージリスト）があります。
イメージリストは、アプリに画像を表示できるリストです。
表示したデータはプレビューで確認しないと分からないので、プレビューを使用して確認します。
アプリにリスト表示を使用したいときに役に立つコンポーネントです。
adaloのリストコンポーネントは全部で７つあります。
- Simple List：シンプルリスト
- Card List：カードリスト
- Image List：イメージリスト
- Avatar List：アバターリスト
- Horizontal Card List：ホリゾンタルカードリスト
- Horizontal Chip List：ホリゾンタルチップリスト
- Custom List：カスタムリスト
今回は、「AdaloのImage List（イメージリスト）」を紹介しました。
ノーコードツールのAdaloを使用する時の参考になればと思います。
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
⇒ コンポーネントとスクリーンの追加設定
⇒ Adaloの画像の入れ方
⇒ Adaloのスクリーン設定
⇒ AdaloのDatabase設定
