おすすめ記事

おすすめ記事一覧

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!

 

 

 







関連記事

  1. 記事作成

    Bubbleのプラグインにおける要素・アクションのビルドを説明してみた!!

  2. 特集記事

    【Webflow】機能や料金を徹底比較!おしゃれなWebデザイン作成ツール!

  3. 記事作成

    Bubble・APIを定義つける

  4. Adalo Resource・リスト(スクリーンとコンポーネントセクション)について

  5. 記事画像

    発注者も必見!ノーコードツールで開発を行うメリット13個

  6. Adalo Resource・ データの変更、条件付きアクション、トリガー通知(アクションセクション…

  7. 特集記事

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

  8. SaaSロゴ

    Instapage

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

人気記事

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

おすすめ記事一覧

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