ノーコードでアプリ開発をやってみたいと思ったときにおすすめな「Adalo」です。
Adalo(アダロ)は、簡単にアプリが作れるノンプログラミングツール。
プログラムコードを知らなくてもアプリ製作が可能なツールです。
ここでは、「AdaloのFile Pickerコンポーネントの使い方」を紹介します。
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は、フォームとフィールドを追加することができるコンポーネントです。
フォームとフィールドを追加することができます。
この中にFile Pickerコンポーネントがあります。
![](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は6種類あります。
この中に、File Pickerがあります。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m15d_175819755.jpg)
ここでは「File Picker」の使い方を紹介します。
File Picker(ファイルピッカー)
File Pickerは、ファイルをアップできるフォームです。
![](https://hikari-sedori.com/wp-content/uploads/2020/10/IMG_8268-removebg-preview.png)
File Pickerを使用してアップロードできるようにするには、File Pickerコンポーネントをスクリーンに追加します。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m18d_191712481.jpg)
File Pickerの設定は、EDIT STYLEのみです。
EDIT STYLEでは、エディタ編集ができます。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m18d_191718744.jpg)
サイズや透過率を変更できます。
ただし、File Pickerを設置しただけでは、ファイルをアップすることはできません。
アップロードするボタン(アクション)を追加する必要があり、ボタンコンポーネントと組み合わせます。
ボタンの追加
File Pickerを使用してアップロードするために、ボタンを追加します。
Adaloのボタンの詳細はこちら
⇒ Buttonコンポーネント
まず、ボタンコンポーネントを追加します。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m18d_191741680.jpg)
ボタンをFile Pickerの下に配置しました。
ボタンを日本語でアップロードに変更しました。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m18d_191759937.jpg)
日本語で直接文字入力ができないので、他で入力して貼り付けます。
![](https://hikari-sedori.com/wp-content/uploads/2020/10/IMG_8268-removebg-preview.png)
一旦、他のテキストツールなどで入力して、貼り付けるといいです(2021年2月時点)
次に、ボタンにFile Pickerを使って何をするかのアクションを追加します。
ボタンのアクション設定
ボタンにアクションを設定します。
事前に データベースで画像が入るコレクションを用意する必要があります。
ここでは、データベースのコレクションのFileに画像が入るように設定しています。
次に、+ADD ACTIONを設定します。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m18d_191823824.jpg)
+ADD ACTIONをクリックして、アクションは、Form inputのFile Pickerを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m18d_191836984.jpg)
CollectionではFile(データーベース)を選択。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m18d_191844824.jpg)
Form inputsのFile Pickerを選択します。
実際に画像をアップしてみます。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m18d_191902872.jpg)
ファイルを指定して、アップロードをクリックします。
アップロードされたかどうかを、データベースで確認します。
![](https://hikari-sedori.com/wp-content/uploads/2021/02/2021y02m18d_192026943.jpg)
アップロードしたファイルがデータベースに入ります。
このような流れで、AdaloのFile Pickerコンポーネント設定を行うことができます。
その他のForms&Fields COMPONENTはこちら。
今回は、「AdaloのFile Pickerコンポーネント設定」を紹介しました。
ノーコードツールのAdaloを使用する時の参考になればと思います。
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
⇒ コンポーネントとスクリーンの追加設定
⇒ Adaloのナビゲーションコンポーネント
⇒ YouTubeを表示するコンポーネント