ノーコードでアプリ開発をやってみたいと思ったときにおすすめの「Adalo」
Adalo(アダロ)は、簡単にアプリが作れるノンプログラミングツール。
プログラムコードを知らなくてもアプリ製作が可能なツールです。
ここでは、Adaloで検索窓を作れる「Text inputコンポーネントの使い方」を紹介します。
Adaloの使い方
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m01d_202236230.jpg)
Adaloは、ノーコードで使えるアプリ開発ツールです。
⇒ https://www.adalo.com/
Adaloを使用するには登録が必要です。
登録方法やエディタ画面は別記事に書いていますので、下記の記事を参考にしてください
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
Forms&Fieldsコンポーネント
Forms&Fields COMPONENTは、フォームとフィールドを追加することができるコンポーネントです。
使用すると、フォームとフィールドを追加することができます。
![](https://hikari-sedori.com/wp-content/uploads/2021/01/2021y01m28d_110529865.jpg)
Adaloのエディタ画面の+からコンポーネントを追加することができます。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m03d_133516944.jpg)
【Forms&Fields COMPONENTの種類】
- Form
- Text input
- Data Picker
- Dropdown menu
- File Picker
- Image Picker
ここでは、Text input(テキストインプット)を使い検索窓として使用する方法を紹介します。
検索窓にユーザー名を入力して、一致するユーザーを下に表示させます。
Text input設定
![テキストコンポーネント](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m03d_133644647.jpg)
コンポーネントの中のText inputコンポーネントを選択します。
Text inputコンポーネントを入れたいスクリーンへ移動させます。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m03d_210800913.jpg)
ここでは、Text inputコンポーネントを使用して検索窓を作成していきます。
まずテキストサイズの大きさを調整します。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m03d_210813065.jpg)
表示される文字を変更します。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m03d_210935936.jpg)
文字を検索と入力しました。
EDIT STYLEで詳細設定ができます。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m03d_215226145.jpg)
検索窓のデザインや色を変えることができます。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m03d_215333461.jpg)
ここでは、色をグレーにして、角を少し丸くしました。好きなデザインに変更できます。
ここで検索窓の作成は終了です。
検索スクリーンの作成
次に、下部に検索のスクリーンを作成します。
検索したものが表示されるコンポーネントを作成します。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m03d_211752022.jpg)
今回は、Simple list(シンプルリスト)を使用して表示したいので、Simple listを設置します。
Simple listに表示するデータを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m03d_211818756.jpg)
What is this a list of? は、ユーザーのリストを検索するのでUsersを使用します。
その下の+ ADD anther filterをクリックします。
表示はユーザーネームを検索して表示したいので、Usernameを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m03d_211951059.jpg)
Containsを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m03d_212018148.jpg)
次に、何をContains(含む)するのか?を選択します。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m03d_212134331.jpg)
検索のワードに含まれるものを検索したいので、INPUTを選択します。
以上で設定が終了です。
検索窓に入力したユーザーネームがある場合は、下のスクリーンに表示されます。(そのままプレビューで確認すると、自分だけがサインインしているので自分が表示されます。)
最終チェックは、他のユーザー名のデータを入力して確認してください。
このような流れで、AdaloのText inputコンポーネントを使用して検索を行うことができます。
今回は、「AdaloのText inputコンポーネントの使い方」を紹介しました。
ノーコードツールのAdaloを使用する時の参考になればと思います。
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
⇒ コンポーネントとスクリーンの追加設定
⇒ Adaloのナビゲーションコンポーネント
⇒ YouTubeを表示するコンポーネント
コメントを残す