今回は「4択クイズアプリ」に引き続き、Bubbleを使った「フラッシュカード」の作り方について、カウントダウンタイマーを中心にご紹介したいと思います。
1. アプリ概要
1-1. 作成するアプリ
英単語と日本語訳が2秒ごとに入れ替わるフラッシュカードを作成します。
1-2. 前提条件
Bubble にはユーザー登録が終わっており、ログイン後「NEW APP」作成までできている状態
1-3. アプリの主な機能
- スタートボタンクリックで、フラッシュカードが表示される
- 2秒ごとに英単語と日本語訳が表示され、すべての単語が表示されたら、初期画面（スタートボタン表示）に戻る
- 英単語と日本語訳はデータベースから取得する
2. 必要項目の洗い出し
2-1. Designタブ
- データベースと連携するために Repeating Group をひとつ用意し、「問題番号」「英単語」「日本語訳」の3つのテキストをグループ配下に含める
- カウントダウンタイマー（Input エレメントを使用）を英単語用と日本語訳用の二つ用意する
- 残りｎ問テキストを用意する
2-2. Dataタブ
Type name（テーブル名）は「flashcard」とし、フィールドは「no」「word1」「word2」の3つを作成する。
2-3. 必要な Custom state
- 問題番号（現在の問題番号を保持）
- 最終問題フラグ（最終問題であるか否かを保持）
- 単語タイプ（英単語か日本語訳かを保持）
- 英単語用カウントダウンタイマー値
- 英単語用カウントダウントリガー（カウントダウンを止める、もしくはスタートする）
- 日本語訳用カウントダウンタイマー値
- 日本語訳用カウントダウントリガー（カウントダウンを止める、もしくはスタートする）
2-4. 必要なワークフロー（Workflowタブ）
2-4-1. スタートボタンをクリックした時
- スタートボタンを非表示にする
- フラッシュカード（英単語）を表示する
- Custom state の「カウントダウンタイマー値」「問題番号」「最終問題フラグ」「単語タイプ」をそれぞれ初期化する
- Repeating Group で取得しているデータを1ページ目にセットする
- 英単語用カウントダウントリガーをセットする
2020/11/06 画像追加
2-4-2. カウントダウントリガーが 1（＝カウントダウンする）の時
- カウントダウンタイマー値の値を毎秒 -1 する
2-4-3. タイマーの値が -1 でかつ最終問題でない時
- 最終問題の場合は、最終問題フラグを設定する
- 単語タイプ（英単語か日本語訳か）を切り替える
- カウントダウントリガー（カウントダウンを止める、もしくはスタートする）を設定する
- カウントダウンタイマー値を初期化する
2-4-4. タイマーの値が -1 でかつ最終問題の時
- 単語タイプが英単語の場合は、英単語用カウントダウントリガーは停止し、日本語訳用カウントダウントリガーをセットする
- 単語タイプが日本語訳の場合は、日本語訳用カウントダウントリガーを停止し、画面を初期化する
以上で、必要な項目や動作の洗い出しが出来ました！あとは、それぞれに配置や設定を行うのみですが、フラッシュカードを作成する際のポイントであるタイマー機能について、もう少し詳しく解説したいと思います。
3. カウントダウンタイマーについて
フラッシュカードの画面上、カウントダウンタイマーは非表示としているため、分かりにくいですが、実際は以下4つの Custom state 値を持つ Input を Designタブに配置しています。
- 英単語用カウントダウンタイマー値
- 英単語用カウントダウントリガー（カウントダウンを止める、もしくはスタートする）
- 日本語訳用カウントダウンタイマー値
- 日本語訳用カウントダウントリガー（カウントダウンを止める、もしくはスタートする）
Input の「Initial content」で、対応する Custom state を紐づけます。
カウントダウンの具体的な仕様は以下の通りです。
- カウントダウントリガーが 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 の時、毎秒ごとに」というイベントが作成できました。
カウントダウンタイマー値を -1 ずつ減らすには、「Element Actions」の「Set state」で行います。
カウントダウンタイマー値の初期化も「Set state」で行います。
カウントダウントリガーも同様ですね。「Set state」から設定しましょう。
あとは、「4択クイズアプリ」でもご紹介した エレメントの Show や Hide などを設定してフラッシュカードの英単語と日本語訳の表示を切り替えます。最終問題などの判定も Custom state を利用することで可能ですね。
4. まとめ
今回はフラッシュカードをテーマに、カウントダウンタイマーを中心にご紹介しました！ Custom state をうまく利用することで、色々な動作が実現できますので、是非参考にしてみてくださいね。 ここまで、お読みいただきありがとうございました！
5. おすすめ記事
以下の記事では、Bubble を学習中の方向けに「4択クイズアプリ」の作り方をご紹介しています！
