【Bubble】Bubbleで「続きを読む」機能を実装する方法

こんにちは！

EPICs株式会社です。

長いテキストを表示する際、「続きを読む」機能を実装することで、画面を見やすく使いやすいデザインにすることが可能 です。
この機能により、初めは指定した行数だけを表示し、ユーザーが「続きを読む」ボタンをクリックすると全文を表示することが可能となります。

本記事では、Bubbleでの「続きを読む」機能の実装手順 を詳しく解説します。

実装手順

1. カスタムステートの作成

• 表示状態を管理するための Yes/No 型のカスタムステートを設定
  • 対象: テキストエレメントが含まれるグループまたはページ全体
  • ステート名: read
  • タイプ: Yes/No
  • デフォルト値: No（初期状態ではテキストは省略表示）

2. 該当のテキストの高さを制御

① Layout（レイアウト）の設定

• Min height: 0px
• Max height: 表示させたい行の高さ（例：4行表示なら 78px）
• Fit height to content: チェックを入れる

② Conditional（条件付き表示）の設定

• read が Yes のとき：
  • Max height を inf（無制限）に設定
  • ID Attribute を空白にする（適用しない）

📷 画像2：条件付き表示（Conditional）

3. 透明なテキストエレメントの配置

目的

• テキスト全体の高さを取得する
• 本文のレイアウトが崩れないようにする

設定

1. ページ内の目立たない場所に「body2」という名前のテキストエレメントを作成
2. 元のテキストエレメントと同じ横幅に設定
3. Max height を n+1 行以上に設定
   • 例：元のテキストが 78px（4行） なら 100px に設定
4. ID Attribute を削除
5. Conditional（条件付き表示）を削除

4. 「続きを読む」ボタンを配置

設定

• ボタンのテキストを変更
  • read が Yes のとき → 「閉じる」
  • read が No のとき → 「続きを読む」
• ボタンの表示条件
  • body2 の高さが 元のテキストエレメントの max height（例：78px） を超えている場合にボタンを表示

5. ワークフローの設定

「続きを読む」ボタンがクリックされたときの処理

① イベント作成

• Workflow タブを開く
• 「続きを読む」ボタンがクリックされたときのイベントを作成
  • 「Click here to add an event」→「Elements」→「An element is clicked」→ Button 続きを読む

② ワークフローの作成

• read が No の場合：
  • read を Yes に変更（全文表示）
• read が Yes の場合：
  • read を No に変更（省略表示）

以上の手順で、長いテキストでもスッキリとしたUIを維持しながら、必要に応じて全文表示が可能 になります！