おすすめ記事

おすすめ記事一覧

Adalo Resource・プログレスバー、星評価、ストップウォッチ(スクリーンとコンポーネントセクション)について

Adalo - Build Your Own No Code App

みなさんこんにちは。いかがお過ごしでしょうか。年度末ということで大忙しな方も多いかと思います。本当にお疲れ様です。またこのタイミングで何か新しいことにチャレンジしようという方も多いのではないでしょうか。ぜひノーコードツールAdaloにチャレンジしてほしいと思います。この記事ではノーコードツールAdaloのAdalo Resoure内のスクリーンとコンポーネントセクションより「プログレスバー、星評価、ストップウォッチ」の日本語解説をお届けします。それではLet’s Go!

プログレスバー

プログレスバー(進捗状況バー)は 完了したタスクの数など、ユーザーに進捗状況を表示 します。

まず、Adalo Marketplaceからプログレスバーコンポーネントがインストールされていることを確認し、左パネルのプラスボタンをクリックして、プログレスバーコンポーネントを探し、アプリの画面上にドラッグします。

プログレスバーコンポーネントは、ドラッグで幅と高さを調整できます。

左パネルでは、以下のプロパティを設定できます。

・プログレスバリュー: これをTo Doリストアプリに使用する場合、マジックテキストを使用して、ログインユーザー > タスク > カウントという値を設定し、マジックテキストチップをクリックして、完了したかどうかがTrueのタスクのみをカウントするフィルタを追加します。

・マキシマムバリュー: これは完了時のプログレスバーの値で、10のような静的な数値にすることもできますし、ログインユーザー > タスク > カウントのように、マジックテキストでこの値を設定することもできます。

・色: この色は、プログレス値を表しています。

・バックグラウンドカラー: この色は、プログレスバーの中でまだ完成していない部分の色です。

星評価

こちらでは数字を星評価で表示したり、ユーザーが評価を設定できます。

まず、Adalo Marketplaceから星評価コンポーネントがインストールされていることを確認し、左パネルのプラスボタンをクリックして、星評価コンポーネントを探し、アプリの画面上にドラッグします。

星評価のコンポーネントでは、ドラッグしてコンポーネントの幅を調整できます。 幅を広げたり狭めたりすると、星の間隔が自動的に調整され、星が等間隔になるようになります。

左側のパネルでは、以下の調整が可能です。

・ユーザーがレーティングを設定することはできるか?:  に対して「いいえ、評価を見ることしかできません」を選ぶとき 星のコンポーネントをインタラクティブにしたくない場合は、このオプションを選択します。 これは、星がマジックテキストによるスコアの集計を表す場合によく用いられる選択です(現在の製品 > 評価 > 平均スコアなど)。このオプションを選択すると、マジックテキストでレーティング値を設定することができます。

・ユーザーがレーティングを設定することはできるか?: に対して「はい」を選ぶとき ユーザーがレビューを投稿したり、体験を評価したりするときなど、コンポーネントをインタラクティブにしたい場合は、このオプションを選択します。このオプションを選択すると、「現在のレビュー」>「評価」のように、コンポーネントが設定するデータベースのプロパティを選択することができます。

・スターの数:  星の数を5個にするか10個にするか を選択できます

・アクティブカラー: 選択された星の色

・インアクティブカラー: 選択されていない星の色

・スターのサイズ

・クリックアクション: 上で選択したプロパティに加えて、ユーザーが選択した星の数の値をどこかに保存しておきたい場合は、このコンポーネントに追加したアクションのマジックテキストメニューで、この選択した星の数を利用できます。

ストップウォッチ

アクティビティの所要時間を記録。ラップ機能に対応。

まず、Adalo Marketplaceからストップウォッチコンポーネントがインストールされていることを確認し、左パネルのプラスボタンをクリックして、ストップウォッチコンポーネントを探し、アプリ内の画面にドラッグします。

左側のパネルで以下の調整ができます。

・タイムカラー

・タイムフォントサイズ

・アイコンサイズ

・ミリ秒を表示するかしないか

・スタートボタン: アイコン、カラー、追加のアクション (スタートボタンは常に時間をスタートさせますが(そのためのアクションを追加する必要はありません)、プレイボタンが押されたときに実行する追加のアクションを指定することができます。)

・ポーズ(一時的に止める)ボタン: アイコン、カラー、追加のアクション

・リセットボタン: アイコン、カラー、追加のアクション

・ラップボタン: ラップボタンの有効化・無効化、アイコン、カラー、ラッププリフィックステキスト、ラップテキストカラー、ラップの文字サイズ、追加アクション

まとめ

いかがだったでしょうか。今回の記事ではプログレスバー、星評価、ストップウォッチといったアプリには欠かせない機能の操作方法の紹介をしました。別の記事ではさらなる他の機能の紹介と解説も行っていきます。それではまた別の記事でお会いしましょう。See You Soon!

 

 

 

Katsu

Katsu

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







関連記事

  1. Adalo Resource・Adaloで何ができる?

  2. Adalo Resource・とりあえず始めてみる

  3. Adalo Resource・決済機能付きショッピングカートの設定方法、ユーザーの公開プロフィール画…

  4. 記事作成

    Bubble・言語とアプリ内コミュニケーション、SNSについて

  5. 記事作成

    【ブログ運営者必見】サイトにCTAを設置できる「HelloBar」をご紹介!

  6. 記事作成

    【2020年】NoCodeでスタートアップ構築!ツール14選!

  7. Adalo Resource・ACHペイメントと銀行送金(Stripe)(スクリーンとコンポーネント…

  8. SaaSロゴ

    Webflow(CMS)

  9. 記事作成

    Bubbleのテンプレートの使い方&(ベータ版)Figmaからのインポート(取り込み)

人気記事

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

おすすめ記事一覧

  1. 勤怠管理
  2. Bubble
  3. 記事画像
  4. top_image
  5. 飲食店 会計
PAGE TOP