tsubasatwi( つばさ） 
こんにちは、NoCodeCampのツバサです。
今日は、「Bubble」を使って、カウントダウン機能をノーコードで実装する方法を解説します。 このチュートリアルでは、ボタンを押すとカウントダウンが始まり、値が減っていく出来上がります。
やりたいこと
- ボタンを押した時に、3秒からカウントダウンを開始する。
- 3秒から減算して、2秒、1秒と持続的に値を表示する。
- 値が0になったらカウントダウンを止める。
ここで覚えるBubbleの手順
- カスタムステート: 動的な値を管理するために使用。今回の例では、カウントダウンの数値を保持します。
- Custom Event: 繰り返し処理や特定の条件で実行するアクションを定義できます。
- Dynamic Data: ページや要素に紐づくデータを表示するための設定。
Bubbleを使った実装の手順
エレメントの配置
- 「ボタン」を配置します。
- 名前を「試験開始」に設定。
- 「テキスト」要素を配置します。
- カウントダウンの値を表示するための場所として、表示値を補正。
カスタムステートの設定
- ページ配下 exam に「カスタムステート」を設定します。
- 名前を「
countdowntimer」にし、値の型を「Number」に設定。 - 初期値を（例）「3」に設定。
- 名前を「
ボタン押下時のワークフロー設定
- ボタン要素にワークフローを追加します。
- アクションの設定:
- Step 1:
countdowntimerの値を「3」に設定。 - Step 2: Custom Eventを「1秒後にスケジュール」します。
- Step 1:
Custom Event の構築
カウントダウン機能を構築するために、Workflowがあと2つ作りましょう。
- Decrement Countdown
- 名前:
Decrement Countdown - アクションの設定:
- Step 1:
countdowntimerの値をThis Page's countdowntimer - 1に更新します。 - Step 2: 値が「0」より大い場合のみ、再度 Custom Event
2nd-Decrement Countdownをスケジュールします。
- Step 1:
- 名前:
- 2nd-Decrement Countdown
- 名前:
2nd-Decrement Countdown - アクションの設定:
- Step 1:
countdowntimerの値をさらにThis Page's countdowntimer - 1に更新します。 - Step 2: 値が「0」より大い場合のみ、再度 Custom Event
Decrement Countdownをスケジュールします。
- Step 1:
- 名前:
このように、Decrement Countdown と 2nd-Decrement Countdown の間でループすることで、連続的にカウントダウンが進む仕組みを実現します。
表示用テキスト要素の設定
- テキスト要素に「Dynamic Data」で
exam's countdowntimerを設定します。
動作確認
- プレビューモードでデバッグモードを有効化して確認。
- ボタンを押したときに、値がこの順に表示されることを確認:
- 3 → 2 → 1 → 0
まとめ
Bubbleを使って、カウントダウン機能をノーコードで実装する方法を解説しました。
この基本的な手順を理解することで、Bubbleを使って、カウントダウン機能をノーコードで実装する方法を解説しました。このカスタムステートを活用した実装は、他にもさまざまな応用が可能です。
例えば：
ポイントシステム: ユーザーの操作に応じてポイントを加算・減算する。
進捗バーの表示: 残り時間に応じて進捗バーを動かす。
アニメーションの制御: カウントダウンごとに画面のエフェクトを変更する。
ぜひ、自分のプロジェクトに導入してみてください！
