おすすめ記事

おすすめ記事一覧

Adalo Resource・空の状態を作る方法、検索バーの作成方法、ユーザーがフィルタリングできるリストの作成方法

Adalo - Build Your Own No Code App

みなさんこんにちは。いかがお過ごしでしょうか。外の気候も次第に暖かくなり、多くの地域で桜が満開ですね。感染症対策を講じながらお花見していただけたらなと思います。さてこの記事ではノーコードツールAdaloのAdalo Resourceよりチュートリアルセクションの「空の状態を作る方法、検索バーの作成方法、ユーザーがフィルタリングできるリストの作成方法」を日本語で解説します。前回の記事同様、チュートリアルセクションはタイトルが長くなりがちですが、本文の内容はさほど難しくないかと思いますので、早速いってみましょう!

空の状態を作る方法

空の状態とは、表示すべきデータがない場合のアプリの表示方法です。例えば、 ホーム画面にユーザーの旅行のリストが表示されているが、ユーザーがまだ旅行を作成していない場合、真っ白な画面を表示するのではなく、旅行を作成する必要があることを説明するメッセージを表示する ことができます。

空の状態を作る必要があるのは、主に2つのケースです。検索バーで入力内容がデータに適合しない場合や、ユーザーがデータのない画面に遭遇した場合などです。

検索バー 空の状態

検索語に結果がない場合、空の状態を作る

1, リストの下に画像を挿入する(そのために画面サイズを拡張する必要があるかもしれません)
2, 画像の可視性を変更して、時々見えるようにする
3, リストに適用したのと同じフィルタを画像に適用する。ここでは、リストのアイテム(等しい、含む、含まない)の入力
4, カスタムフィルタを適用して、アイテム数が0のときに画像が見えるようにする
5, 空の状態をテストするためのプレビュー

空のページの状態

 表示するものがない場合、画面のための空の状態ページ を作成する(以下の例を参照)

1, リストや他のコンポーネントの下に画像を挿入する(そのために画面サイズを拡張する必要があるかもしれません)。
2, 画像の可視性を変更して、時々見えるようにする
3, リストアイテムの数が0の場合、画像が表示されるように可視性を設定する
4, 必要に応じて、コンポーネントと同じカスタムフィルタを空の状態に追加する
5, 空の状態をテストするためのプレビュー

検索バーの作成方法

リスト内の検索は、アプリの機能として非常によく使われるものですが、Adaloを使えば、簡単なステップでこの機能を実装することができます。

はじめに、データベースコレクションの設定を済ませておくのが一番簡単です。このチュートリアルでは、”Friends “という名前のデータベースコレクションを用意します。コレクションの中には、”name “のテキストフィールドと、コレクションのイメージフィールドの2つのプロパティが必要です。コレクションの中には、レコードを追加する必要があります。これらのレコードは、ユーザーがアプリ内で検索できる基準となります。ここでは、名前と画像のレコードを6つ追加していますが、必要に応じていくつでも追加できます

1, Adalo Canvasに戻り、左パネルを開いたら、”画面追加 “の下にある “検索リスト “を検索する。その画面を _____ にドラッグする。
2, アプリ画面のシンプルリストをクリックし、左パネルに移動する。最初のドロップダウンで、データベースコレクションの “Friends “を選択し、リストとデータベースを結合する。
3, フィルターまでスクロールダウンし、”add another filter “をクリックする。
4, 「Name」、「Contains」、「Form Inputs > Search Term」の順に選択する。これにより、データベースコレクション内のすべてが表示され、ユーザーが入力している間に検索結果が表示されるようになる。
5, 左のパネルを下にスクロールして、「Subtitle」をクリックしたら、右側のスライダーをクリックしてオフにする。
6, アプリをプレビューして、テストしてみる。

これでAdaloアプリに検索が追加されました!

クローン可能なアプリに関しては下記のリンクよりご覧ください。

https://previewer.adalo.com/763aa3a8-bf22-41ff-be15-2db992e04f1c

ユーザーがフィルタリングできるリストの作成方法

アプリでリストをフィルタリングする方法をご紹介します。

まず、シンプルなリストの画面をアプリに追加してみましょう。次に、Componentsに移動して、シンプルなリストの上にドロップダウンメニューを追加してください。チュートリアルでは、すでにデータベースを設定していますので、あなたのデータベースを設定するためには、以下のことが必要になります。

・映画のデータベースコレクションの作成
・Moviesコレクションには、Name(テキスト)、Image(イメージ)のプロパティが必要
・Categories用の別のデータベース・コレクションを作成
・Categoriesコレクションの中には、Nameのプロパティが必要。また、「Movies」コレクションとの間に、複数の「カテゴリー」が1つの「ムービー」に属することができる「多対1」の関係の作成

Simple Listに戻って、Movies Collectionにバインドしてみましょう。また、サブタイトルのテキストを更新して、カテゴリー名のマジックテキストを表示するようにしましょう。次に、Dropdown MenuをCategories Collectionにバインドしましょう。

次は、フィルターの設定です。シンプルなリストをクリックして、「フィルタ」→「すべての映画」と表示されているところに、「カスタムフィルタ」を追加しましょう。これで、ユーザーが選択したときに、ドロップダウンメニューの下に表示されるように、追加のフィルタを作成することができます。カスタムフィルターは、次のように設定します:Current Movie > Category > NameCtainsSelected Category > Name

これでシンプルリストにフィルターが追加されました。

クローン化については下記のリンクを参照ください。

https://previewer.adalo.com/a4dfdb82-ae59-4ad1-9fec-a9379e8e3c05

まとめ

いかがだったでしょうか。前回同様、チュートリアルの記事は長めのタイトルの割には本文が短く、またYouTubeでの確認が可能、という点で比較的わかりやすい内容だったかと思います。次回もチュートリアルの内容を取り上げますので、ぜひチェックしていただけると幸いです。それではまた別の記事でお会いしましょう。See You Soon!

 

 

 

Katsu

Katsu

高校まで日本で育ち、大学からアメリカ・ニューヨークへ。マスメディア、ジャーナリズム、インターネットメディア戦略を専門に修学。コロナ禍でオンライン主体になりつつある世の中で、記事が何かの手助けになれば幸いです。







関連記事

  1. SaaSロゴ

    Husky(Jungleworks)

  2. SaaSロゴ

    Yappli

  3. 記事作成

    Bubble・Slack(スラック)&Box(ボックス)

  4. 記事作成

    Bubbleのデータ読み込みとプラグインの公開・バージョニングを解説!

  5. Adalo Resource・ユーザーが他の人をフォローできるようにする方法、フォームにステータス(…

  6. 記事画像

    【学生必見】BubbleによるWebアプリ開発のリアルに迫る!

  7. 保護中: 自社開発のSaaSで新しいサービスを提供 株式会社ONE COMPATH

  8. 記事作成

    Bubble・データを表示する、ダイナミックな式を構築する

  9. 記事作成

    Bubbleのカスタムフォントと設計時のコツを解説してみた!!

人気記事

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

おすすめ記事一覧

  1. 記事画像
  2. 飲食店 会計
  3. top_image
  4. Productivity
  5. 記事画像
PAGE TOP