Softonic

BBCodeからHTMLへのコンバーター

ステップ 1 / 2
次へ

BBCodeはフォーラム時代の軽量マークアップでした。[b]bold[/b]、[url]、[quote]、[code]のような形式です。phpBB、vBulletin、XenForo、SMFのほぼすべての掲示板で使われ、それらのプラットフォームには今も何百万件もの投稿が残っています。このコンバーターはBBCodeを解析し、現代的なCMS、静的サイト、フォーラムタグを理解しないMarkdown-to-HTMLパイプラインへ貼り付けられる、妥当できれいなHTMLを出力します。

BBCodeを変換する方法

  1. 1

    BBCodeを貼り付ける

    投稿全体でも断片でも構いません。入れ子のタグも処理します。

  2. 2

    パーサーが開始タグと終了タグをトークン化

    対応する `[tag]...[/tag]` の組から、対応するHTML要素を生成します。

  3. 3

    タグ属性を対応付ける

    `[color=red]`、`[size=18]`、`[url=https://...]` のような指定はインラインスタイルや`href`属性になります。

  4. 4

    HTMLをコピー

    ブログ記事、ドキュメントページ、フォーラム移行にそのまま使えます。

対応タグ

BBCode HTML出力
[b]text[/b] <strong>text</strong>
[i]text[/i] <em>text</em>
[u]text[/u] <u>text</u>
[s]text[/s] <del>text</del>
[url]link[/url] <a href="link">link</a>
[url=link]text[/url] <a href="link">text</a>
[img]link[/img] <img src="link">
[quote]q[/quote] <blockquote>q</blockquote>
[code]c[/code] <pre><code>c</code></pre>
[list][*]a[*]b[/list] <ul><li>a</li><li>b</li></ul>
[color=red]t[/color] <span style="color:red">t</span>
[size=18]t[/size] <span style="font-size:18px">t</span>

セキュリティ上の注意

BBCodeは設計上安全ですが、HTMLはそうではありません。ユーザー投稿のBBCodeをHTMLへ変換する瞬間は、2005年ごろのフォーラムがXSSを持ち込んだ典型的な場面でした。変換後の出力を公開する場合は、次を守ってください。

  • BBCodeタグ内の生のテキストは必ずエスケープする。
  • コンバーターが出力するタグをホワイトリスト化する。未知のタグを生のHTMLとして流さない。
  • [url] と [img] のURLを検証し、javascript: や data: スキームをブロックする。

このツールは入力されたURLを書き換えないため、変換後の出力を公開する前に確認してください。

フォーラム全体の移行

数千件の投稿を移す場合は、コンバーターをパイプラインとして使います。投稿をBBCodeとして書き出す → このコンバーターへ通す → HTMLを取り込む、という流れです。標準タグセットにない特殊な入れ子や独自の絵文字コードを含む投稿を、数十件ほど抜き取りで確認してください。

BBCodeがきれいに対応しないもの

  • 独自のフォーラム用顔文字（:D と :)）、そのまま残してCSSで描画するか、別途前処理します。
  • プラグイン固有のタグ（[spoiler]、[youtube]など）は認識されないため、そのままの文字列として出力します。
  • 未閉じのタグはそのままの文字列として残ります。パーサーはそれらを閉じたり修復したりしません。

よくある質問

はい。Steamコミュニティの投稿、vBulletinやXenForoの掲示板、一部のwiki、多くの古いphpBB環境で使われています。いくつかのゲームサーバー管理パネルでは、内部マークアップとしても残っています。

このツールではできません。HTMLからBBCodeへの変換ツールを使ってください。逆方向はHTMLの表現力がBBCodeよりずっと高いため、情報が失われやすくなります。

未知のタグはそのままの文字列として通します。このコンバーターが認識するのは上の表に挙げたタグだけだからです。

入れ子は、異なるタグ同士なら機能します。たとえば[quote]の中の[b]などです。同じタグを自分の中に入れ子にした場合（引用の中の引用など）は、最初の閉じタグで閉じられ、残りはテキストとして残ります。変換前にそのような投稿を平坦化してください。

関連ツール

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

HTML 圧縮ツール

通常のコメントを削除し、空白を整理して、ブラウザ内で HTML をコンパクトにします。使用前に結果を確認してください。

Nginx 設定ジェネレーター

かんたんなフォームから、TLS・HTTP/2・gzip・ブラウザキャッシュ・リバースプロキシの設定を含む Nginx の server block を生成します。

Markdownリンク生成ツール

URLとアンカーテキストからMarkdownリンクの記法を生成します。タイトルのツールチップや、長い文書を読みやすく整える参照形式のリンクにも対応しています。

補色ファインダー

任意の色の補色を見つけます。HSL上の反対色、スプリットコンプリメンタリーのペア、アクセシブルな配色のヒントを返します。

このツールは他の言語でも利用できます