過去の記事で「Groupの中にGroupが入ったときの、Data sourceのフロントへの表示方法」をご紹介しました。かなり読まれて好評でした。
Group内にGroupが入れ子になっている場合のデータ表示方法を知りたい方は過去の記事をご覧ください↓
今回は踏み込んでRepeating groupの場合に、どのようにDataを表示させるのかを解説します。
Repeating group編です。
Repeating groupの特徴
はじめにRepeating groupって何？の方へ、簡単におさらいをしておきましょう。
Bubbleエディターの「Containers」から「Repeating Group」を選択し描画するとこのような何段かになった箱が表示されます。この一番上の箱「セル」に指定したデータやデザインが下のセルにも繰り返し表示されます。
試しに一番上のセルに「アイコン」を配置してみます。
するとエディター上では同じアイコンが下のセルにも反映されたことがわかります。
Type of content とData sourceの指定が必要
しかし実際の画面（プレビュー画面）では全くの白紙で表示されます。
これはRepeating groupは「何か」を繰り返し表示させることを前提としており、必ず「Type of content」→ 何のコンテンツを繰り返し表示させるのか？
や「Data source」→ そのデータは何か？の指定をしなければならないからです。
例えば、くだものの名前が入ったDataを指定すると、このようにDataに入っている数ぶん（この例では４行）、プレビュー画面でもアイコンが表示されるようになります。
Type of content: fruit
Data source: Do a search for で Type「fruit」を指定
今回の例で使用した「くだもの」のData作成方法はこの後に詳しく解説しています。
手動でデータの追加をしたことが無い方はこのまま事項を読み進め、一緒に作成してみましょう！
Dataの中身をRepeating groupに表示させるには？
前項までで、Repeating groupの特徴と、その中で繰り返し表示させるには「何を繰り返しさせるか」を指定する必要があることをお伝えしました。
ここからは実際にRepeating group内にDataの中身を表示させる方法を解説していきます。
前項のくだものの例で試してみましょう！
表示させるDataを作成しましょう！
Dataは以下の通り作成しています。
手をうごかして試している方はデータを同じように作ってください。
Bubbleエディタの「Data」タブから
Data typeは、fruit
Fieldは、fruit_name（Field typeは 「text」）
で作成
App dataから、実際に表示させる中身のデータを作っておきましょう！
実際のDataが空だとRepeating groupに表示されませんので、いくつか「App data」タブから追加をしておきます。
Dataは手動で追加できます。
Dataの手動追加方法
＜STEP1＞App dataタブから該当のData（今回はAll fruits）を選択
＜STEP2＞New entry（新規追加）ボタンをクリック
＜STEP3＞POPUPで追加画面が出たら、入力し
＜STEP4＞CREATEボタンを押す（確認画面が出たら「GOT IT」ボタンを押す）
Repeating groupに表示させる内容を指定するだけ
データの中身が出来上がったら、フロント側（デザインを表示させる側）にその値を指定するだけです。
先ほど作ったRepeating groupに追加で「text」を入れます。
フルーツ名を表示させるためのテキストが必要です。
次に今配置したテキストに「何のデータを表示させるか」を指定します。
その前に！
*Repeating groupの「Type of content」と「Data source」を忘れずに指定していますか？ 忘れた方は前項を確認ください。
＜STEP2＞ 青い「Insert dynamic data」を押し、「Current cells fruit」を選択
＜STEP3＞ 続けて、「’s fruit_name」を選択
前項の「Repeating groupの特徴」でRepeating group全体には「fruit」のデータ一覧を表示させる指定が完了しています。
今回の＜STEP2＞では、このテキストに、現在のセルの「fruit」データを表示させる指定をしています。一番上の行、２番目の行というように行ごとのセルに値を振り分けてると言い換えるとわかりやすいかもしれません。
＜STEP2＞までで、各行にfrutのデータを入れるよ、という指定をしたので
今回のSTEP3では、そのfruitの「何の値＝field」を入れるのかをさらに絞って指定します。
ここで??と思った方は、もう一度Dataを見返してみてください。
＜STEP2＞で（このセルの）Data typeを、＜STEP3＞ではその Fieldを指定していることがわかります。
ここまでできたらプレビュー画面で表示してみましょう！
このように表示されたら合格です！
ここの概念は、プログラミング未経験の方には少しわかりにくいかもしれません。
2-3回、ご自身でDataを作りリピーティンググループで表示させることによりコツが掴めてきます。
ポイントは一度で諦めずに何度も自分で作ってみることです。
何度も作るうちに慣れて理解できるようになります。
いかがでしたでしょうか？
Repeatign groupのデータ表示は ポイントが多いですね。Repeating group自体にデータの指定が必要だったり、その一つのセルに指定する「Current cell’s 〜」という新しい単語が出てきたり…
英語であるゆえに我々は苦労するんだろうな〜（笑）英語ネイティブだったら単語そのままの意味を理解できるからもっと習得が早そう( ´^`° )ですが、、要は慣れです。
私も日々挑戦＆慣れを繰り返しています。
この記事を通じてRepeating groupを理解し使いこなせるようになっていただけたら嬉しいです。
今後も初心者に向けて、ポイントを解説していきます。
知れば知るほど楽しくなるBubble♪
今日も一歩前進！引き続き楽しんでいきましょう^^
