【Bubble開発】チャットリストで改行を半角スペースに変換して表示する方法

Bubbleでチャット機能を実装する際、チャットリストには「最後に送られたメッセージ」の内容を表示するのが一般的です。
しかし、改行を含むメッセージがある場合、そのままではリスト上で見づらくなってしまうことがあります。

LINEのようなUIでは、改行を含むメッセージでも改行部分を半角スペースで置き換え、1行で自然に表示しています。

この記事では、BubbleでLINEのようにチャットリストに改行部分を半角スペースで表示する方法を解説します。

実装手順

1. チャットリストに表示するテキスト要素に「find & replace」を設定
2. 正規表現を使って改行コードを検出
3. 改行コードを半角スペースに置き換えて表示
   

実装方法

1. 表示対象のText要素を選択

• Text要素の中に、チャットの最後のメッセージを表示するために

Parent group’s Chat’s last_send_message_text

などを使っている部分に注目します。

2. find & replace を追加

このデータの後に「:find & replace」を追加し、以下のように設定します

✅ 設定内容

• Use a regex pattern：チェックをON（※これを忘れると動作しません）
  • 「正規表現（regex）」を使うことで、改行などの特殊文字を検索できます。
    

• 「改行コード（LF, CRLF, CR）」をすべて対象にする正規表現
• Replace by：半角スペース（見た目は空白ですが、スペースを1つ入力します）

 これにより、改行がすべて半角スペースに変換され、1行でチャットリストに表示されます。

3. 表示例（LINEとの比較）

LINEでも、長文や改行が含まれたメッセージは「チャット一覧」上では改行がスペースに変換されて表示されているのがわかります。

Bubbleでもこのテクニックを使えば、LINEのようなスッキリした表示が可能になります。

補足：正規表現とは？

正規表現（Regular Expression）は、文字列のパターンを表すための特殊な書き方です。
今回の \r?\n|\r は「改行文字」を検索するためのもので、Bubbleでも正規表現を有効にすれば使用できます。

まとめ

• 改行が含まれるチャット文は、チャットリストではそのままだと見づらい
• LINEのように改行を半角スペースに変換すれば、自然な表示になる
• Bubbleでは find & replace を使い、正規表現で改行をスペースに置き換えられる

ちょっとした実装ですが、一工夫でユーザーが見やすいチャットリストを実装できるようになります。

是非試してみてください！