こんにちは！
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. 透明なテキストエレメントの配置
目的
- テキスト全体の高さを取得する
- 本文のレイアウトが崩れないようにする
設定
- ページ内の目立たない場所に「body2」という名前のテキストエレメントを作成
- 元のテキストエレメントと同じ横幅に設定
- Max height を n+1 行以上に設定
- 例：元のテキストが 78px（4行） なら 100px に設定
- ID Attribute を削除
- 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を維持しながら、必要に応じて全文表示が可能 になります！
