Bubbleでチャット機能を実装する際、チャットリストには「最後に送られたメッセージ」の内容を表示するのが一般的です。
しかし、改行を含むメッセージがある場合、そのままではリスト上で見づらくなってしまうことがあります。
LINEのようなUIでは、改行を含むメッセージでも改行部分を半角スペースで置き換え、1行で自然に表示しています。
この記事では、BubbleでLINEのようにチャットリストに改行部分を半角スペースで表示する方法を解説します。
また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。
従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。
- 開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
- 開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
- リリース後の改修スピードも早い → PDCAを早く回せる
日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。
- 日本最大級のノーコード開発実績 → 高度な開発もスピーディー
- 複数のノーコードツールに対応 → 最適なツール選びで開発費用・期間を最大限抑えられる
- マーケティングまで支援が可能
プロが無料で提案
実装手順
- チャットリストに表示するテキスト要素に「find & replace」を設定
- 正規表現を使って改行コードを検出
- 改行コードを半角スペースに置き換えて表示
実装方法
1. 表示対象のText要素を選択
- Text要素の中に、チャットの最後のメッセージを表示するために
Parent group’s Chat’s last_send_message_text
などを使っている部分に注目します。
2. find & replace を追加
このデータの後に「:find & replace」を追加し、以下のように設定します
✅ 設定内容
- Use a regex pattern：チェックをON（※これを忘れると動作しません）
- 「正規表現（regex）」を使うことで、改行などの特殊文字を検索できます。
- 「正規表現（regex）」を使うことで、改行などの特殊文字を検索できます。
Regex pattern
r?n|r
- 「改行コード（LF, CRLF, CR）」をすべて対象にする正規表現
- Replace by：半角スペース（見た目は空白ですが、スペースを1つ入力します）
これにより、改行がすべて半角スペースに変換され、1行でチャットリストに表示されます。
3. 表示例（LINEとの比較）
LINEでも、長文や改行が含まれたメッセージは「チャット一覧」上では改行がスペースに変換されて表示されているのがわかります。
Bubbleでもこのテクニックを使えば、LINEのようなスッキリした表示が可能になります。
補足：正規表現とは？
正規表現（Regular Expression）は、文字列のパターンを表すための特殊な書き方です。
今回の r?n|r は「改行文字」を検索するためのもので、Bubbleでも正規表現を有効にすれば使用できます。
まとめ
- 改行が含まれるチャット文は、チャットリストではそのままだと見づらい
- LINEのように改行を半角スペースに変換すれば、自然な表示になる
- Bubbleでは find & replace を使い、正規表現で改行をスペースに置き換えられる
ちょっとした実装ですが、一工夫でユーザーが見やすいチャットリストを実装できるようになります。
是非試してみてください！
