おすすめ記事

おすすめ記事一覧

Adalo Resource・マジックテキスト(スクリーンとコンポーネントセクション)について

Adalo - Build Your Own No Code App

みなさんこんにちは。いかがお過ごしでしょうか。首都圏の1都3県では緊急事態宣言の延長論が濃厚のようですね…。気分的にはスッキリしないコトも多々ありますが、ぜひ気持ちを切り替えてノーコードツールAdaloの活用に勤しんでいただければ幸いです。さて本日の記事ではAdalo Resourceのスクリーンとコンポーネントセクションより「マジックテキスト」を解説します。前回の「リスト」の記事と併せてご覧ください。それでは早速いってみましょう!

マジックテキスト

テキストを表示するコンポーネントでは、テキストボックスの下のツールバーにマジックテキストのアイコンが表示されます。これをクリックすると、コンポーネントに追加できるマジックテキストが表示されます。

マジックテキストは、アプリのデータベースからのテキストで自動的に置き換えられます。 例えば、 画面に旅行の詳細が表示されている場合、マジックテキストを使用して旅行名を表示する ことができます。

ログインしているユーザー、リスト内のアイテム、または現在の画面にリンクしているリストのアイテムにマジックテキストを表示することができます。

例えば、旅行のオプションを表示する旅行アプリを持っていて、ユーザーが特定の旅行をクリックして、その旅行の詳細情報を表示する画面を開くことができるようにしたい場合のことです。

1, テキストボックス、画像、その他のコンポーネントを挿入します

2, 赤いアクセントのある文字を選択します

3, データベースコレクションとマジックテキストとして追加するプロパティを選択します

4, 「プレビュー」をクリックして、マジックテキストが動作することを確認してください

上記の写真は上のステップのうち4番目のステップ(プレビューを押して…)を示しています。

日付と数字の書式設定方法

追加するマジックテキストが数字または日付のプロパティの場合、その情報がどのようにフォーマットされるかをカスタマイズすることができます。

書式オプションを表示するには、マジックテキストチップの鉛筆の部分をクリックします。

数字に関しては、

・数字フォーマットを選択する:数値にカンマを入れるか、省略するか、通貨として表示するかを選択することができます。

・接頭語と接尾語:接頭語と接尾語は、 数字が単数か複数かに応じて適切な単語をスマートに表示する ことで、あなたのテキストをさらに不思議なものにしてくれます。例えば、旅行の数を表示する場合、単数形の接尾辞を 「一回だけの旅行 」に、複数形の接尾辞を 「複数回の旅行」 に設定することができます。 そうすると、アプリは自動的に「1トリップ」または「2トリップ」を表示します。

日付に関しては、データのフォーマットを日付、日付/時刻、曜日、相対(3日前など)のいずれかにするかどうかを選択できます。

合計、カウント、平均、最小値と最大値

データベース内に互いに関連する 2 つのコレクションがある場合、 マジックテキストを使用して、合計、カウント、平均、最小値、最大値を表示する ことができます。例えば、データベースに旅行のコレクションとアクティビティのコレクション(各アクティビティには価格プロパティがあります)があり、各旅行が複数のアクティビティを持つことができる場合、旅行に関する情報を表示する画面やリストがある場合、マジックテキストを使用して以下のように表示することができます。

1, その旅行の活動回数
2, その旅行のアクティビティの料金の合計
3, その旅行のアクティビティの平均料金
4, その旅行のアクティビティの最大料金
5, その旅行のアクティビティの最低価格

他の数字と同様に、チップ上をスリックして、アプリに表示される数字の書式をカスタマイズすることができます。

フィルターを追加する

また、これらの集計にどのレコードを含めるかを指定するためのフィルタを設定することもできます。 例えば、アクティビティのコレクションに「Will Definitely Do」のTrue/Falseプロパティがある場合、「Will Definitely Do」がTrueに設定されているアクティビティの価格の合計のみを表示するようにフィルタを追加することができます。フィルタを追加するには、チップをクリックしてフィルタの追加を選択します。

カスタムの数式を作成する方法

マジックテキストを追加するとき、メニューの最後のオプションは「新しい公式」です。 このオプションを選択すると、「カスタム公式」というチップがテキストボックスに追加されます。 式を入力するために以下の作業を行ってください。

・カスタムフォーミュラチップをクリックしてフォーミュラエディタを開きます。
・ここでは、次の演算子と同様に任意の数値を入力することができます。(+,-, *, /)(Excelと一緒です…)

・また、マジックナンバーのアイコンをクリックしてマジックナンバーを挿入することもできます。

Magic Numbersは、データベースのNumberプロパティを使用します。また、関連するコレクションの数、和、平均などのマジックナンバーをフィルタリングすることもできます。また、マジックナンバーのアイコンをクリックすると、機能を挿入するオプションが表示されます。 以下の機能に対応しています。

1, ラウンド(Round): 数値を最も近い整数に丸めます。ROUND(4.32)は4と表示されます。ROUND(4.5)は5と表示されます。

2, 整数(Integer):  数値から小数を削除します。 (これは切り捨てと考えることもできます。) INT(4.32)は4と表示されます。 INT(4.5)は4と表示されます。 INT(4.999)は4と表示されます。

3, 絶対値(Absolute Value): 数値の絶対値を表示します。ABS(4.32) は 4.32 と表示されます。ABS(-4.32)は4.32と表示されます。

4, 平方根(Square Root): 数値の平方根を表示します。SQRT(9)は3と表示されます。

5, 指数(Exponent): 別の数字の乗数を表示します。EXP(3,2)は9と表示されます。

6, 乱数(Random Number): 指定した2つの値の間に乱数を表示します。RAND(0,1) は 0 から 1 の間の乱数を表示します。

7, ログ(Log): 数値の基底10対数を表示します。LOG(100)は2として表示されます。

例を見てみましょう。旅行の総費用とその旅行に行ける人数があるが、一人あたりの旅行費用を見たい場合は、カスタムの数式を使用することができます。

1, テキストボックスを挿入します。
2, 赤いアクセントのある文字を選択して、マジックテキストを挿入します。
3, ポップアップリストから新しい数式を選択します。
4, 鉛筆のアイコンをクリックして数式エディタを開きます。
5, マジックナンバーのアイコンをクリックして、トリップコストを選択します。
6, “/”を入力してください
7, マジックナンバーアイコンをクリックして、グループサイズを選択します。
8, 他の数値と同様に、接頭辞/接尾辞を編集し、カスタム式をフォーマットすることができます。

まとめ

いかがだったでしょうか。今回の記事ではノーコードツールAdalo Resourceのスクリーンとコンポーネントセクションより「マジックテキスト」に関する説明をお届けしました。最後のあたりでは数学の要素もちらほら出ましたが、基本的にはExcelで触っている数式と同じと捉えていただければ構いません。マジックテキストはユーザーとしては当たり前に使っている機能ですが、逆に構築する側になるときちんとマニュアルを理解しながら作業する必要がありますね。それではまた別の記事でお会いしましょう。See You Soon!

 

 

 

 

 

Katsu

Katsu

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







関連記事

  1. 記事作成

    Bubbleアプリの公開・非公開の仕組みに迫る!!

  2. Adalo Resource・マーケットプレイスペイメント前編(Stripe)(スクリーンとコンポー…

  3. Adalo Resource・Apple Appストアへの公開

  4. 記事作成

    Bubble・ユーザータイプ・OAuth(オーオース):X を用いたログイン

  5. SaaSロゴ

    Webflow(CMS)

  6. 記事作成

    BubbleのAgencyプランとテンプレート・プラグイン販売について解説!!

  7. SaaSロゴ

    Husky(Jungleworks)

  8. 記事作成

    Bubbleのパスワードポリシーとビジュアル設定を深堀りしてみた!!

  9. tribe

    Tribe

人気記事

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

おすすめ記事一覧

  1. 記事画像
  2. 記事画像
  3. 記事画像
  4. 記事画像
  5. 記事画像
PAGE TOP