こんにちは！
EPICs株式会社です。
長いテキストを表示する際、「続きを読む」機能を実装することで、画面を見やすく使いやすいデザインにすることが可能 です。
この機能により、初めは指定した行数だけを表示し、ユーザーが「続きを読む」ボタンをクリックすると全文を表示することが可能となります。
本記事では、Bubbleでの「続きを読む」機能の実装手順 を詳しく解説します。
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
EPICs株式会社の特徴
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
ざっくりの課題でも
プロが無料で提案
プロが無料で提案
目次
実装手順
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を維持しながら、必要に応じて全文表示が可能 になります！
