【Bubble】リッチテキストエディタで保存したテキストデータの中のBBコードのh2とh3をh2h3タグに変換する方法

2024年6月1日

著者：大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社：EPICs株式会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。Adalo公認エキスパートも在籍。

ノーコードツールBubbleのリッチテキストエディタで入力したデータはtext型のフィールドへ保存して表示させるのが一般的ですが、エディタ上でH2やH3で挿入したテキストが保存されるとHTMLタグではなく、BBコードで格納されてしまいます。

H2は<h2></h2>で、H3は<h3></h3>といったHTMLで保存させたいのですが、実際使ってみると、BBコードの[h2][/h2][h3][/h3]といった形式で保存されてしまい困ります。

これだとBubbleのHTMLエレメントにInsert dynamic dataで流し込んだ際、以下のようにBBコードのまま出力されてしまいます。

今回は上記問題を解決するためのテクニックをご紹介します！

無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

ノーコード開発会社の選び方
EPICsのノーコード受託開発の特徴
支援実績・事例集

ページロード時にBBコードをHTMLタグに置換する

結論。ページロード時（BubbleのPage is loadedイベント）に、特定の文字列を指定した別の文字列に置換するJavaScriptを実行することで対処可能です。

JavaScriptコードの実行にはプラグイン「Toolbox」のRun javascriptアクションを活用します。プラグインをインストールしていない方はプラグイン追加ページから検索してインストールしましょう。

Toolboxをインストールできたら準備完了です。

次に、該当のHTMLエレメント内でInsert dynamic dataをid=contentを付与したdivで囲って下さい。

その次に、該当のページでPage is loadedイベントをまずは設定し、ワークフローStep1でRun javascriptアクションを選択します。

仕上げにRun javascriptアクションのscript入力欄に以下のコードをコピペして検証してみてくださいませー！

// Bubbleのデータソースからコンテンツを取得
var contentElement = document.getElementById("content");
if (contentElement) {
    var content = contentElement.innerHTML;

    // BBコードをHTMLに変換
    content = bbCodeToHtml(content);

    // 変換された内容を要素に反映
    contentElement.innerHTML = content;
}

function bbCodeToHtml(content) {
    // [h2]...[/h2]を<h2>...</h2>に置換
    content = content.replace(/\[h2\](.*?)\[\/h2\]/g, '<h2>$1</h2>');
    // [h3]...[/h3]を<h3>...</h3>に置換
    content = content.replace(/\[h3\](.*?)\[\/h3\]/g, '<h3>$1</h3>');
    // 他のBBコードタグに対する置換を必要に応じてこれ以降に追加
    return content;
}

ブラウザの検証モードで実際に出力されているソースコードを確認し、以下のようにBBコードがHTMLタグのh2,h3に変換されていれば成功です！お疲れ様でした！