ノーコード ラボ

No Code のツールやアプリについて紹介します

Bubble で作る「フラッシュカード」: カウントダウンタイマーの作り方

今回は「4択クイズアプリ」に引き続き、Bubbleを使った「フラッシュカード」の作り方について、カウントダウンタイマーを中心にご紹介したいと思います。

f:id:yksmt:20190828120455p:plain

f:id:yksmt:20190828120513p:plain

1. アプリ概要

1-1. 作成するアプリ

英単語と日本語訳が2秒ごとに入れ替わるフラッシュカードを作成します。

1-2. 前提条件

Bubble にはユーザー登録が終わっており、ログイン後「NEW APP」作成までできている状態

1-3. アプリの主な機能

  • スタートボタンクリックで、フラッシュカードが表示される
  • 2秒ごとに英単語と日本語訳が表示され、すべての単語が表示されたら、初期画面(スタートボタン表示)に戻る
  • 英単語と日本語訳はデータベースから取得する

2. 必要項目の洗い出し

2-1. Designタブ

  • データベースと連携するために Repeating Group をひとつ用意し、「問題番号」「英単語」「日本語訳」の3つのテキストをグループ配下に含める
  • カウントダウンタイマー(Input エレメントを使用)を英単語用と日本語訳用の二つ用意する
  • 残りn問テキストを用意する

2-2. Dataタブ

Type name(テーブル名)は「flashcard」とし、フィールドは「no」「word1」「word2」の3つを作成する。

f:id:yksmt:20190828121214p:plain

2-3. 必要な Custom state

  • 問題番号(現在の問題番号を保持)
  • 最終問題フラグ(最終問題であるか否かを保持)
  • 単語タイプ(英単語か日本語訳かを保持)
  • 英単語用カウントダウンタイマー値
  • 英単語用カウントダウントリガー(カウントダウンを止める、もしくはスタートする)
  • 日本語訳用カウントダウンタイマー値
  • 日本語訳用カウントダウントリガー(カウントダウンを止める、もしくはスタートする)

2-4. 必要なワークフロー(Workflowタブ)

2-4-1. スタートボタンをクリックした時
  • スタートボタンを非表示にする
  • フラッシュカード(英単語)を表示する
  • Custom state の「カウントダウンタイマー値」「問題番号」「最終問題フラグ」「単語タイプ」をそれぞれ初期化する
  • Repeating Group で取得しているデータを1ページ目にセットする
  • 英単語用カウントダウントリガーをセットする
2-4-2. カウントダウントリガーが 1(=カウントダウンする)の時
  • カウントダウンタイマー値の値を毎秒 -1 する
2-4-3. タイマーの値が -1 でかつ最終問題でない時
  • 最終問題の場合は、最終問題フラグを設定する
  • 単語タイプ(英単語か日本語訳か)を切り替える
  • カウントダウントリガー(カウントダウンを止める、もしくはスタートする)を設定する
  • カウントダウンタイマー値を初期化する
2-4-4. タイマーの値が -1 でかつ最終問題の時
  • 単語タイプが英単語の場合は、英単語用カウントダウントリガーは停止し、日本語訳用カウントダウントリガーをセットする
  • 単語タイプが日本語訳の場合は、日本語訳用カウントダウントリガーを停止し、画面を初期化する

以上で、必要な項目や動作の洗い出しが出来ました!あとは、それぞれに配置や設定を行うのみですが、フラッシュカードを作成する際のポイントであるタイマー機能について、もう少し詳しく解説したいと思います。

3. カウントダウンタイマーについて

フラッシュカードの画面上、カウントダウンタイマーは非表示としているため、分かりにくいですが、実際は以下4つの Custom state 値を持つ Input を Designタブに配置しています。

  • 英単語用カウントダウンタイマー値
  • 英単語用カウントダウントリガー(カウントダウンを止める、もしくはスタートする)
  • 日本語訳用カウントダウンタイマー値
  • 日本語訳用カウントダウントリガー(カウントダウンを止める、もしくはスタートする)

f:id:yksmt:20190828135824p:plain

Input の「Initial content」で、対応する Custom state を紐づけます。

f:id:yksmt:20190828151122p:plain

カウントダウンの具体的な仕様は以下の通りです。

  • カウントダウントリガーが 0 の場合はカウントダウンをストップし、1 の場合はカウントダウンをスタートします。
  • カウントダウンタイマー値を 2 で初期化しておき、トリガーが 1 の場合にのみ、毎秒 -1 していきます。
  • カウントダウンタイマー値が -1 になったら、トリガーを 0 にしてタイマーを停止します。

ワークフローの設定は次の通りです。 Workflow タブで「Click here to add an event...」をクリックし、「General」から「Do every 5 seconds」を選択します。 Interval(seconds) を 5 から 1 に変更し、Only when を指定します。これで「トリガーが 1 の時、毎秒ごとに」というイベントが作成できました。

f:id:yksmt:20190828141335p:plain

カウントダウンタイマー値を -1 ずつ減らすには、「Element Actions」の「Set state」で行います。

f:id:yksmt:20190828142039p:plain

カウントダウンタイマー値の初期化も「Set state」で行います。

f:id:yksmt:20190828142050p:plain

カウントダウントリガーも同様ですね。「Set state」から設定しましょう。

f:id:yksmt:20190828143516p:plain

あとは、「4択クイズアプリ」でもご紹介した エレメントの Show や Hide などを設定してフラッシュカードの英単語と日本語訳の表示を切り替えます。最終問題などの判定も Custom state を利用することで可能ですね。

4. まとめ

今回はフラッシュカードをテーマに、カウントダウンタイマーを中心にご紹介しました! Custom state をうまく利用することで、色々な動作が実現できますので、是非参考にしてみてくださいね。 ここまで、お読みいただきありがとうございました!