BBCodeからHTMLへのコンバーター
BBCodeはフォーラム時代の軽量マークアップでした。[b]bold[/b]、[url]、[quote]、[code]のような形式です。phpBB、vBulletin、XenForo、SMFのほぼすべての掲示板で使われ、それらのプラットフォームには今も何百万件もの投稿が残っています。このコンバーターはBBCodeを解析し、現代的なCMS、静的サイト、フォーラムタグを理解しないMarkdown-to-HTMLパイプラインへ貼り付けられる、妥当できれいなHTMLを出力します。
BBCodeを変換する方法
-
1
BBCodeを貼り付ける
投稿全体でも断片でも構いません。入れ子のタグも処理します。
-
2
パーサーが開始タグと終了タグをトークン化
対応する `[tag]...[/tag]` の組から、対応するHTML要素を生成します。
-
3
タグ属性を対応付ける
`[color=red]`、`[size=18]`、`[url=https://...]` のような指定はインラインスタイルや`href`属性になります。
-
4
HTMLをコピー
ブログ記事、ドキュメントページ、フォーラム移行にそのまま使えます。
対応タグ
| BBCode | HTML出力 |
|---|---|
[b]text[/b] |
<strong>text</strong> |
[i]text[/i] |
<em>text</em> |
[u]text[/u] |
<u>text</u> or <ins> |
[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> |
[list=1][*]a[/list] |
<ol><li>a</li></ol> |
[color=red]t[/color] |
<span style="color:red">t</span> |
[size=18]t[/size] |
<span style="font-size:18px">t</span> |
[table]...[/table] |
<table>...</table> |
セキュリティ上の注意
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よりずっと高いため、情報が失われやすくなります。
標準では未知のタグはそのままの文字列として通します。完全にきれいな出力を保証したい場合は、厳格（strict）モードで丸ごと削除できます。
はい。[quote]、[list]、[code] は任意の深さで入れ子にできます。パーサーがタグのスタックを追跡し、正しく閉じます。
関連ツール
カラーパレットジェネレーター
基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。
ランダム英字ジェネレーター
A-Zの英字をランダムに生成します。文字数を指定し、大文字・小文字・混在を選んで、ゲーム、課題、授業活動に使えます。
HEX カラーピッカー
色を見た目で選び、HEX、RGB、HSL、HSV、CMYK の値と、白・黒に対するコントラストを確認できます。
JSONフォーマッター
JSONを貼り付けて2スペースまたは4スペースで読みやすく整形し、コンパクトに圧縮し、コピー前に構文をすばやく確認できます。
ランダムカラー生成ツール
1〜50個のランダムなHEXカラーを生成し、色見本で確認して、CSSやテスト、配色検討に使えるコードをコピーできます。
ランダムカラーパレットジェネレーター
2〜15色のランダムなカラーパレットを生成し、ビビッド、パステル、ミュート、ダークからスタイルを選んで、HEXコードやCSS変数をコピーできます。