おすすめ記事

おすすめ記事一覧

Adalo Resource・ユーザーが他の人をフォローできるようにする方法、フォームにステータス(またはその他の関連レコード)を自動的に設定する方法、アプリにチャットを追加する方法

最終更新日:2021.10.13

Adalo - Build Your Own No Code App

みなさんこんにちは。いかがお過ごしでしょうか。日に日に気候が暖かくなり、あっという間に暑い夏がきてしまうのではないかと不安になったりもしますね。さてこの記事では前回から引き続いてノーコードツールAdaloのAdalo Resourceをもとにチュートリアルセクションの「ユーザーが他の人をフォローできるようにする方法、フォームにステータス(またはその他の関連レコード)を自動的に設定する方法、アプリにチャットを追加する方法」を日本語で解説します。タイトルは長めですが本文の中にYouTubeのリンクも貼りますので、そちらも確認いただければ幸いです。それではいってみましょう!

この記事の目次

ユーザーが他の人をフォローできるようにする方法

このセクションではユーザー同士がフォローし合えるようなソーシャル要素のあるアプリの場合の解説をします。このチュートリアルでは、View User’s Profile画面がすでに作成されている状態からスタートします。プロフィール画面の作成方法については、How to set up a Public Profile screen for Usersのチュートリアルを参照してください。

データの設定

UsersテーブルにFollowingリレーションを追加

1, 左のツールバーにある「データベース」セクションを開きます。
2, ドロップダウン矢印を選択して、Usersデータテーブルを展開します。
3, + ADD PROPERTYを選択します。
4, Relationshipにカーソルを合わせます。
5, Usersを選択します。
6, 「A User can have multiple Users」と書かれたオプションを選択します。A User can have multiple Users(ユーザーは複数のユーザーを持つことができる)」というオプションを選択します。
7, Doneを選択します。
8, 左のツールバーに戻り、「Users」リレーションシップの赤いボックスで、「Users」と書かれている「Name」フィールドを選択します。
9, Usersというテキストを削除して、名前をFollowingに変更します。
10, Saveを選択します。

UsersテーブルにFollowersリレーションを追加

1, 左のツールバーにある「データベース」セクションを開きます。
2, ドロップダウン矢印を選択して、Usersデータテーブルを展開します。
3, + ADD PROPERTYを選択します。
4, Relationshipにカーソルを合わせます。
5, Usersを選択します。
6, 「A User can have multiple Users」と書かれたオプションを選択します。A User can have multiple Users(ユーザーは複数のユーザーを持つことができる)」というオプションを選択します。
7, Doneを選択します。
8, 左のツールバーに戻り、「Users」リレーションシップの赤いボックスで、「Users」と表示されている「Name」フィールドを選択します。
9, 「Users」というテキストを削除し、「Followers」に名前を変更します。
10, Saveを選択します。

トグルによるFollowingの設定

テキストラベルの設定

1, コンポーネント追加ボタンを選択
2, 「テキスト」を選択します。
3, 画面上にテキストを配置します。
4, 左側のツールバーで、「テキストを入力」と書かれた下のグレーのボックスにカーソルを置きます。
5, テキストを削除します。
6, “Follow? “と入力します。

Toggleを設定し、ログインしているユーザーがフォローしているユーザーに現在のユーザーを追加

1, コンポーネント追加ボタンを選択します。
2, 「ボタン」セクションまでスクロールダウンし、それを選択してメニューを展開します。
3, トグルコンポーネントを選択します。
4, 画面上にトグルを配置します。
5, What does this trigger? “で、”Logged in User” > “Following” > “Includes Current User? “を選択します。

ログインしているユーザーを現在のユーザーのフォロワーとして追加するアクションの設定

1,トグルを選択します。
2, 左のツールバーで、「クリックアクション」の項目までスクロールし、「+ADD ACTION」を選択します。
3, 「アップデート」→「現在のユーザー」を選択します。
4, 左ツールバーに表示された[アップデート]セクションで、[フォロワー]までスクロールし、ドロップダウン矢印を選択します。
5, [追加] > [ログインしているユーザー]を選択します。
6, 「Show Advanced」を選択します。
7, When does this happen? で、「常に」と書かれたドロップダウン矢印を選択し、「時々」に変更します。
8, このアクションは次の場合にのみ発生します」の下で、「選択」と書かれた横のドロップダウン矢印を選択します。
9, Current User > Followers > Allに設定します。
10, Contains “と書かれた箇所の横にあるドロップダウン矢印を選択します。
11, “Does not contain “を選択します。
12, 条件の最後の値、Emptyと書かれている部分のドロップダウン矢印を選択し、Logged in Userに設定します。
13, Doneを選択します。

ログインしているユーザーを、現在のユーザーのフォロワーから外すアクションを設定

1, トグルを選択します。
2, 左のツールバーで、「クリックアクション」の項目までスクロールし、「+ADD ACTION」を選択します。
3, 「アップデート」→「現在のユーザー」を選択します。
4, 左ツールバーに表示された「更新」セクションで、「Followers」までスクロールし、ドロップダウン矢印を選択します。
5, Remove> Logged In Userを選択します。
6, 「Show Advanced」を選択します。
7, When does this happen? “で、”Always “と書かれたドロップダウン矢印を選択し、”Sometimes “に変更します。
8, 「このアクションは次の場合にのみ発生します」の下で、「選択」と書かれた横のドロップダウン矢印を選択します。
9, Current User > Followers > Allに設定します。
10, 次のフィールドは「Contains」と自動入力されます。これはそのままにしておきます。
11, 条件の最後の値、Emptyと書かれている部分のドロップダウン矢印を選択し、Logged in Userに設定します。
12, Doneを選択します。

ボタンでフォローしているユーザーを設定

フォローボタンの追加

1, 左ツールバーの「Add Component」ボタンを選択します。
2, 「ボタン」を選択します。
3, それを画面上に配置します。
4, 左ツールバーの「テキスト」の下にある「Button」というテキストを選択して削除します。
5, 「Follow」というテキストを追加します。

現在のユーザーをLogged in UserのFollowingリストに追加するアクションを設定

1, フォローボタンを選択します。
2, 左ツールバーの「クリックアクション」の下にある「+ADD ACTION」を選択します。
3, アクションを[更新]>[ログインユーザー]に設定します。
4, 左側のツールバーに表示された[アップデート]セクションで、[フォロー]までスクロールし、ドロップダウン矢印を選択します。
5, Add > Current Userに設定します。
6, Doneを選択します。

ログインしているユーザーをカレントユーザーのフォロワーリストに追加するアクションを設定

1, フォローボタンを選択します。
2, 左側のツールバーの[アクションをクリック]の下にある[+ ADD ANOTHER ACTION]を選択します。
3, アクションを「更新」>「現在のユーザー」に設定します。
4, 左ツールバーに表示された「更新」セクションで、「Followers」までスクロールし、ドロップダウン矢印を選択します。
5, Add > Logged In Userに設定します。
6, Doneを選択します。

フォローボタンが条件付きで表示されるように設定

1, フォローボタンを選択します。
2, 左側のツールバーで、ボタンの名前が表示されている部分の隣にある、オーバーフローメニューを選択します。
3, 「Change Visibility(表示の変更)」を選択します。
4, 左ツールバーの「表示」セクションで、「常に表示」と書かれた横のドロップダウン矢印を選択します。
5, 「Sometimes Visible」に設定します。
6, 「Will be visible if…」と表示されている部分の下にあるドロップダウンメニューを選択します。
7, Logged in User > Following > Allに設定します。
8, “Contains “と表示されている箇所の横にあるドロップダウンメニューを選択します。
9, 「Does not contain」を選択します。
10, 条件の最後の値、Emptyと書かれているところで、ドロップダウンの矢印を選択し、Current Userに設定します。
11, Doneを選択します。

Unfollowボタンの追加

1, 左ツールバーの「Add Component」ボタンを選択します。
2, 「ボタン」を選択します。
3, それを画面上に配置します。
4, 左ツールバーの「テキスト」の下にある「Button」というテキストを選択し、削除します。
5, 「Unfollow」というテキストを追加します。
6, アイコンと表示されている下で、xを選択して配置されているアイコンを削除します。
7, ドロップダウンメニューを選択します。
8, 使用したいアイコンを選択します。この状況では、キャンセルのアイコンを選択しました。

ログインしているユーザーがフォローしているユーザーのリストから現在のユーザーを削除するアクションを設定

1, 「Unfollow」ボタンを選択します。
2, 左側のツールバーの[アクションをクリック]の下にある[+ アクションの追加]を選択します。
3, アクションを「更新」>「ログインしたユーザー」に設定します。
4, 左側のツールバーに表示された[アップデート]セクションで、[フォロー中]までスクロールし、ドロップダウン矢印を選択します。
5, Remove > Current Userに設定します。
6, Doneを選択します。

ログインしているユーザーを、現在のユーザーのフォロワーリストから削除するアクションの設定

1, フォローボタンを選択します。
2, 左側のツールバーの「クリックアクション」の下にある「+ ADD ANOTHER ACTION」を選択します。
3, アクションを「更新」>「現在のユーザー」に設定します。
4, 左ツールバーに表示された[更新]セクションで、[フォロー]までスクロールし、ドロップダウン矢印を選択します。
5, Remove > Logged In Userに設定します。
6, Doneを選択します。

Unfollowボタンを条件付きで表示するように設定

1, 「Unfollow」ボタンを選択します。
2, 左側のツールバーで、ボタンの名前が表示されている部分の隣にある、オーバーフローメニューを選択します。
3, Change Visibility(表示の変更)」を選択します。
4, 左側のツールバーの「表示」セクションで、「常に表示」と表示されている部分の隣にあるドロップダウン矢印を選択します。
5, 「Sometimes Visible」に設定します。
6, 「Will be visible if…」と表示されている部分の下にあるドロップダウンメニューを選択します。
7, Logged in User > Following > Allに設定します。
8, 次のフィールドは「Contains」と自動入力されます。これはそのままにしておきます。
9, 条件の最後の値で、Emptyと書かれているところで、ドロップダウン矢印を選択して、Current Userに設定します。
10, Doneを選択します。

フォームにステータス(またはその他の関連レコード)を自動的に設定する方法

旅行のような新しいレコードを作成するフォームでは、旅行を作成した人やそのステータスなど、新しい旅行の値を自動的に設定したい場合があります。 このような場合は、 フォームを設定する際に、左パネルの「フィールド」セクションで、これらのプロパティを「自動的に設定」に追加 することができます。

しかし、Status がテキストフィールドではなく、Trip に関連する他の Collection である場合、適切な Status レコードを “Current Status” としてフォーム画面に表示し、フォーム経由で作成された新しい Trip に 自動的に設定できるようにするには、ちょっとしたコツが必要 になります。 ここでは、その方法をご紹介します。

フォーム画面にリンクするコンポーネントをリスト化

1, ボタンなどのコンポーネントを選択した状態で、オーバーフローメニューを選択します。

2, Make Listを選択します。

3, リストが選択された状態で、それが何のリストであるかを選択します。この例では、「ステータス」のリストを選択しました。

ユーザーに1つのボタンしか表示されないように、「リスト」をフィルタリング

1, Add Another Filterを選択します。

2, 「Select Column」を選択して、フィルタリングしたいフィールドを選択します。今回は、「ステータスの名前」でフィルタリングすることにします。

3, フィルタ条件のデフォルトは「Is equal to」です。今回のシナリオでは、この条件が必要なので、そのままにしておきます。

4, Emptyという単語を選択します( ドロップダウンアイコンではありません )。これで、注文ステータスをフィルタリングしたい内容を入力することができます。次に、フィルタリングしたいステータスを入力します。この例では、Draftというステータスを使いました。

現在のステータスは、新規旅行画面の「利用可能なデータ」欄にLinked Dataとして表示されます。フィルターをかけたことにより、そのCurrent StatusはDraftになります。

フォームの設定

1, ボタンがリンクされているページに移動し、選択します。

左のツールバーにある「コンポーネントの追加」ボタンを選択します。

「フォーム&フィールド」ドロップダウンを選択します。

フォームを選択し、画面上に配置します。

フォームを選択した状態で、このフォームに使用するコレクションを選択します。この場合は、Tripsを選択しました。

Fieldsのドロップダウンを展開します。Set Automatically」に「Status」が表示されているはずです。 下の最初の画像のように「Current Status」が表示されていれば、完了です。

2, このチュートリアルの前のステップを完了する前に、すでにフォームを設定していた場合は、下の画像のように「ステータス」が「空」と表示されていますので、「ステータス」プロパティをクリックして展開してください。

3, ドロップダウンを選択します。

4, 値を「Current Status」に設定します。

これで、新しいTripを作成するたびに、自動的にDraftステータスに関連づけられます。

アプリにチャットを追加する方法

まとめ

いかがだったでしょうか。本文が長めで、読み応えがあったかと思いますが、理解を深めるために記事を何度も読み返していただければ幸いです。チュートリアルに関する記事は以上ですが、他のセクションに関する記事がすぐにあがる予定なので、そちらもぜひチェックしてみてください。それではまた別の記事でお会いしましょう。See You Soon!

システム見直し本舗編集長 三ツ谷直臣

システム見直し本舗編集長 三ツ谷直臣

日本に限らず海外のSaaSの紹介や、SaaS特集記事を取り上げていきます!
ご相談・お問い合わせは下記リンクよりお願いします。
https://andd.live/contact/







関連記事

  1. 記事作成

    Bubbleのプラグイン基礎を徹底解説!!

  2. Adalo Resource・画面とコンポーネントベーシック

  3. SaaSロゴ

    Panther(Jungleworks)

  4. Adalo Resource・地図と各種グラフ(スクリーンとコンポーネントセクション)について

  5. 記事作成

    Bubble・API使用ケース&APIを使う

  6. 特集記事

    あまり知られていない!強力NoCodeツール18選!

  7. Getresponse

  8. 記事作成

    Bubble・スケジュール化されたワークフロー・再帰的なワークフロー

  9. Adalo Resource・スケジュールされたプッシュ通知の送信方法、スペシャルリンク [メール・…

人気記事

  1. topimage
  2. 記事画像
  3. 特集記事
  4. Collaboration

おすすめ記事一覧

  1. 記事画像
  2. 記事画像
  3. 飲食店 会計
  4. maidoh concept picture
  5. タスク
PAGE TOP