ノーコードでアプリ開発をやってみたいと思ったときにおすすめな「Adalo」です。
Adalo(アダロ)は、簡単にアプリが作れるノンプログラミングツール。
プログラムコードを知らなくてもアプリ製作が可能なツールです。
ここでは、「AdaloのInfo SCREEN インフォスクリーン」を紹介します。
目次
Adalo
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m01d_202236230.jpg)
Adaloは、ノーコードで使えるアプリ開発ツールです。
⇒ https://www.adalo.com/
Adaloを使用するには登録が必要です。
登録方法やエディタ画面は別記事に書いていますので、下記の記事を参考にしてください
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
Adaloのスクリーン
スクリーンは、ADD SCREENから追加することができます。
![](https://hikari-sedori.com/wp-content/uploads/2020/10/IMG_8268-removebg-preview.png)
Adaloでアプリを作るときは、スクリーンを組み合わせていきます。
Adaloには、いろいろなタイプのスクリーンが用意されています。
Adaloのスクリーンは5つの種類があります。
スクリーンの中のInfo(インフォ)スクリーンの中でも4つに分かれます。
ここでは、Info SCREEN(インフォスクリーン)を紹介します。
Info SCREEN(インフォスクリーン)
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m02d_214301702.jpg)
スクリーンの追加は左サイドバーの+をクリックして、ADD SCREENから行います。
Adaloのエディタ画面のInfoをクリックすると、4つのスクリーンが表示されます。
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m03d_215529012.jpg)
Adaloのインフォスクリーンは全部で4つあります。
- Info:インフォ
- Info with sub-List:サブリスト付きの情報
- Info with Links:リンク付き情報
- Info and Action:情報とアクション
それぞれのスクリーンをクリックするとNew Screenが立ち上がります。
スクリーンの名前を付けます。
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m02d_220027391.jpg)
日本語を入力しようとすると文字化けすることがあります。
文字化けして、うまく入力できない時は、他のテキストエディタなどを使用して、コピペして対応してください。
スクリーン名をつけるとスクリーンの設定になります。
ここまでは、どのスクリーンを選択しても同じ流れになります。
Info
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m03d_220233784.jpg)
Infoは、情報のスクリーンです。
大きく3つの項目があります。
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m03d_215555099.jpg)
- components:コンポーネント
- Action:アクション
- Available data:利用可能なデータ
componentsがデーター部分です。
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m03d_215558676.jpg)
componentsの中に、ボタン、テキスト、画像、上部バーが入っていて、それぞれの設定を行えます。
EDIT STYLEでは、画像の詳細編集ができます。
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m03d_215605547.jpg)
以上のパーツで構成され、情報ページを作成する時に使えます。
Info with sub-List
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m03d_220236232.jpg)
Info with sub-Listは、サブリスト付きの情報のスクリーンです。
![](https://hikari-sedori.com/wp-content/uploads/2020/10/IMG_8268-removebg-preview.png)
【Info with sub-Listの詳細設定】
- components:コンポーネント
- Action:アクション
- Available data:利用可能なデータ
componentsの中に、テキスト、シンプルリスト、ボタン、画像、上部バーが入っていて、それぞれの設定を行えます。
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m04d_101341161.jpg)
EDIT STYLEでは画像サイズなどの調整を行えます。
Info with Links
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m03d_220240649.jpg)
Info with Linksは、リンク付き情報のスクリーンです。
- components:コンポーネント
- Action:アクション
- Available data:利用可能なデータ
componentsの中に、形状、グループ、テキスト、画像、上部バーが入っていて、それぞれの設定を行えます。
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m04d_101848866.jpg)
EDIT STYLEでは画像サイズなどの調整を行えます。
Info and Action
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m03d_220243593.jpg)
Info and Actionは、情報とアクションのスクリーンです。
- components:コンポーネント
- Action:アクション
- Available data:利用可能なデータ
componentsの中に、テキスト、グループ、画像、上部バーが入っていて、それぞれの設定を行えます。
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m04d_102721276.jpg)
EDIT STYLEでは画像サイズなどの調整を行えます。
データ表示の確認は、プレビューをクリックして確認します。
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m04d_093822219.jpg)
スクリーン上には反映されないので注意してください。
このようにインフォスクリーンを作成することができます。
Adaloのインフォスクリーンは全部で4つあります。
- Info:インフォ
- Info with sub-List:サブリスト付きの情報
- Info with Links:リンク付き情報
- Info and Action:情報とアクション
4つありますが、ベースは同じでどれも似ています。
InfoとInfo and Actionの違いは下のような感じです。
![](https://hikari-sedori.com/wp-content/uploads/2021/03/2021y03m04d_102636014.jpg)
![](https://hikari-sedori.com/wp-content/uploads/2020/10/IMG_8268-removebg-preview.png)
情報ページを作る時に役立つスクリーンがあるかもしれません。
スクリーンは、アプリに合わせて選択していくといいです。
今回は、「Adaloのスクリーン Info(インフォ)」を紹介しました。
ノーコードツールのAdaloを使用する時の参考になればと思います。
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
⇒ コンポーネントとスクリーンの追加設定
⇒ Adaloのブランディング設定
⇒ Adaloの画像の入れ方
⇒ Adaloのスクリーン設定
⇒ AdaloのDatabase設定
Adaloには、いろいろなタイプのスクリーンが用意されています。