【Bubble開発】カンマで区切るタグの表示を3個まで制限する方法

こんにちは！
EPICs株式会社です。

Bubbleでは、Inputフィールドにカンマ区切りで複数のタグを入力させるような設計が可能ですが、標準機能では「タグの数を制限する」処理が難しい場面があります。

本記事では、JavaScript to Bubble（Toolboxプラグイン）を活用して、カンマで区切りるタグ入力を3つまでに制限する方法をご紹介します。

実装のイメージ動画はこちら！

実装手順

1. Input欄にカンマ区切りでタグを入力させる
2. 入力値が3つ以上のとき、JavaScriptで3つ目までを抽出
3. JavaScript to Bubbleで抽出結果をBubbleへ返す
4. Display dataアクションで結果をGroupに格納・再表示
5. 初期値の設定や、タグの表示も併せて設定

実装方法

1. Inputタグの設定

• Placeholder：例）「東京都、ショップ、近場」
• Initial content：Parent group’s text でタグを初期表示可能に
• Content format：Text

ユーザーが自然にカンマ区切りで複数ワードを入力できるようにします。

2. JavaScriptによるカット処理の準備（Toolboxプラグイン）

Run JavaScript アクションに以下のコードを記述します。

• param1には、Inputタグの値を渡します（例：This Input’s value）
  これにより、カンマ区切りのうち最初の3つのみが抽出されます
  

3. JavaScript to Bubbleで結果を受け取る

• bubble_fn_suffix：truncateResult
• Trigger event：チェックON（イベントを発火）
• Publish value：チェックON（値をBubble側へ返す）
• Value type：Text

この設定により、JavaScriptから返された3つのタグがBubbleで扱える状態になります。

4. 入力が3つを超えたときにJSを実行

「Input tag’s value is changed」イベントで、以下の条件を設定。

この条件を満たしたときに、Run JavaScriptアクションを実行します。

5. 結果を表示する（再入力として反映）

JavaScriptの結果が返されたら、Display dataアクションを使って、以下のように表示内容を上書きします。

• Element：g tag（Groupなど
• Data to display：This JavaScripttoBubble’s value

これにより、入力値が3つを超えたときには自動的に最初の3つに制限され、それがUIに再表示されます。

6. 初期値の設定（編集画面などでの活用）

すでに登録されたタグ情報を編集画面などで表示する場合は、下記のように記述できます。

これにより、登録済みのタグリストをカンマ区切りでInputに表示できます。