ノーコードでアプリ開発をやってみたいと思ったときにおすすめな「Adalo」です。
Adalo(アダロ)は、簡単にアプリが作れるノンプログラミングツール。
プログラムコードを知らなくてもアプリ製作が可能なツールです。
ここでは、「AdaloのImage List(イメージリスト)」を紹介します。
目次
Adalo
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m01d_202236230.jpg)
Adaloは、ノーコードで使えるアプリ開発ツールです。
⇒ https://www.adalo.com/
Adaloを使用するには登録が必要です。
登録方法やエディタ画面は別記事に書いていますので、下記の記事を参考にしてください
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
Image List(イメージリスト)
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m24d_215420402.jpg)
Image List(イメージリスト)は、画像をリスト状に表示することができるコンポーネントです。
リストは、複数の物を一つにまとめて表示するときに役立ちます。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m28d_110529865.jpg)
Adaloのエディタ画面の+からコンポーネントを追加することができます。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m29d_152047600.jpg)
リストコンポーネントは全部で7つあります。
- Simple List:シンプルリスト
- Card List:カードリスト
- Image List:イメージリスト
- Avatar List:アバターリスト
- Horizontal Card List:ホリゾンタルカードリスト
- Horizontal Chip List:ホリゾンタルチップリスト
- Custom List:カスタムリスト
ここでは、「Image List(イメージリスト)」を紹介します。
Image List(イメージリスト)の使い方
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m24d_213051436.jpg)
Image Listは、画像のリストです。
Image List(イメージリスト)を使用するには、Image Listを使用したいスクリーンへ移動させます。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m24d_213028901.jpg)
左サイドバーでイメージリストの設定をすることができます。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m24d_213035908.jpg)
イメージリストには、以下のような項目があります。
- Image List:イメージリスト
- Text:テキスト
- Image Style:イメージスタイル
- icon:アイコン
メインのデータ設定は、Image Listから行います。
Image Listの設定
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m24d_213547754.jpg)
【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?にリストを入力します。
![](https://hikari-sedori.com/wp-content/uploads/2020/10/IMG_8268-removebg-preview.png)
データベース内の表示するデータを指定します。
データを指定すると、フィルタ、並べ替え、アイテム数の変更が可能。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m24d_213536875.jpg)
Columnsは、画像のカラム数を変更できます。
クリックしたときのアクションを付けたい時は、+アクション追加で設定が可能です。
Text設定
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m24d_214056056.jpg)
テキストでは、タイトルテキストを設定できます。
- Subtitle:字幕
- Subtitle position:字幕の位置
- Text position:テキストの位置
- Background effect:背景効果
テキストの詳細設定を行えます。
Image Style
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m24d_214109696.jpg)
【Image Style設定】
- shape:形状
- Rounding:丸み
- Shadow:影
丸みは、画像の丸みを付ける設定です。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m24d_220044576.jpg)
画像に関する設定ができます。
icon設定
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m24d_214121080.jpg)
iconでは、カラーやデザイン設定を行えます。
- icon:アイコン
- position:位置
- Color:カラー
- +ADD Action:アクション追加
アイコンを変えることも可能です。
アイコンをクリックしたときのアクションも追加できます。
まとめ
AdaloのリストコンポーネントにはImage List(イメージリスト)があります。
イメージリストは、アプリに画像を表示できるリストです。
表示したデータはプレビューで確認しないと分からないので、プレビューを使用して確認します。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m24d_215420402.jpg)
アプリにリスト表示を使用したいときに役に立つコンポーネントです。
adaloのリストコンポーネントは全部で7つあります。
- 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設定