AdaloのChat SCREENの設定方法(チャットスクリーン)

ノーコードでアプリ開発をやってみたいと思ったときにおすすめな「Adalo」です。

Adalo(アダロ)は、簡単にアプリが作れるノンプログラミングツール。

プログラムコードを知らなくてもアプリ製作が可能なツールです。

ここでは、「AdaloのChat SCREEN(チャットスクリーン)」を紹介します。

Adalo

Adaloは、ノーコードで使えるアプリ開発ツールです。
⇒ https://www.adalo.com/

Adaloを使用するには登録が必要です。

登録方法やエディタ画面は別記事に書いていますので、下記の記事を参考にしてください
⇒ Adaloの登録方法
⇒ Adaloのエディタ画面

AdaloのChatスクリーン

スクリーンは、ADD SCREENから追加することができます。

AdaloにはChatスクリーンが用意され、Miscスクリーンの中にあります。

スクリーンの追加は左サイドバーの+をクリックして、ADD SCREENから行います。

Adaloのエディタ画面のMiscをクリックすると、3つのスクリーンが表示されます。

AdaloのMiscスクリーンは全部で3つあります。

  • Modal:モーダル
  • Chat:チャット
  • Left Nav:左ナビゲーション


この中のChatスクリーンをクリックします。

次に、スクリーンの名前を付けます。

独学ノーコード
スクリーン名を日本語を入力しようとすると文字化けすることがあります。

文字化けして、うまく入力できない時は、他のテキストエディタなどを使用して、コピペして対応してください。

スクリーン名をつけるとスクリーンの設定になります。

ここまでは、どのスクリーンを選択しても同じ流れになります。

Chat

Chatは、チャットが行えるスクリーンです。

メッセージのやりとりをすることができますが、Chatは単体で使用することができません。

使用するには、別スクリーンからチャートスクリーンへ飛ばす必要があり、いくつかのスクリーンを組みあわせます。

Userページを作り、ユーザーをクリックするとChatが開くようにします。

Chat単体ではなく、スクリーンを連携をさせます。

【Chatの詳細設定】

  • components:コンポーネント
  • Action:アクション
  • Available data:利用可能なデータ


componentsの中に、リスト、上部バー、形状が入っていて、それぞれの設定を行えます。

チャットはListで設定を行い、新規コレクションでMassgeのフォルダを作成します。

事前にMessageフォルダを作成し、Massage Text、名前(メールアドレス)、時間などを記載します。

このようなコレクションを用意します。

チャットの構成を知りたい場合は、テンプレートのチャットを参考にするといいです。

チャットテンプレートはこのような構成になっています。

機能を追加していくと複雑になるので、テンプレートで仕組みを確認してください。


Chatの詳細設定は、リストで行います。

What is this a List of?(これは何のリストですか?)でリストを選択します。

ここではmassageを使用します。

Filterでは、フィルター設定ができます。(Current Convirstation message>message)


Sortingは、並べ替えができます。

Update data-old to-newest(新しいものから古いもの)にします。

他には、表示数の変更が可能です。

Columnsでは、チャットの表示数を変えれます。

Items spacingでは、間隔の調整を行えます。


メッセージの送信ボタンはClick Actionsで行います。

クリックアイコンの変更とクリック時の動作を設定できます。

ここではCollectionをMessageにします。

Massge Text input

Current Converstation(現在の会話)といった設定をします。メッセージが入っていない状態では送れないといった設定もここでできます。


一番下のEDIT STYLEでは、詳細編集ができます。

チャットスクリーンは以上のパーツで構成され、チャットを使用する時に使えます。

スクリーンのデータ表示の確認は、プレビューをクリックして確認します。

チャットは、スクリーン上には反映されないので注意してください。チャットの内容はデータベースのmassageに入ります。


今回は、「AdaloのChatスクリーン(チャットスクリーン)」を紹介しました。

ノーコードツールのAdaloを使用する時の参考になればと思います。

⇒ Adaloの登録方法
⇒ Adaloのエディタ画面
⇒ コンポーネントとスクリーンの追加設定
⇒ Adaloのブランディング設定
⇒ Adaloの画像の入れ方
⇒ Adaloのスクリーン設定
⇒ AdaloのDatabase設定

スポンサードリンク



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です