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

2024年6月1日

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

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

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

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

また、本メディアを運営する「EPICs株式会社」は、ノーコードを活用したアプリ・システム開発を行っております。大手ノーコードツールであるBubbleからも、公式代理店として認定されています。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

開発期間をおよそ1/3に抑えられる → 検証や新規事業に向いている
開発費用をおよそ1/3に抑えられる → 浮いた費用を別の領域に利用できる
リリース後の改修スピードも早い → PDCAを早く回せる

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

ノーコード開発サービスについて詳しく知る

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に変換されていれば成功です！お疲れ様でした！