開発者向けツール

BBCodeビューアー

ツールバーでBBCodeタグを挿入し、リアルタイムでプレビュー。HTMLのコピー・ダウンロードにも対応。Steamの[spoiler]を含む34タグ、登録不要。

BBCodeを貼り付けると、入力したそばからプレビューが表示されます。ツールバーやCtrl+B・Ctrl+Kなどのショートカットで選択範囲をタグで囲め、[spoiler]・[noparse]・[olist]を含む34種類のタグを描画。プレビューはHTML表示に切り替えてコピー・ダウンロードでき、.txtの読み込み・保存にも対応します。処理はブラウザ内で完結し、サーバーへは送信されません。

BBCodeエディター

303

ライブプレビュー

Patch notes

Bold Italic Underline Strike

Link

AuthorThis is a quote

  • First item
  • Red item

Hidden ending

console.log('Hello World')

こちらも必要かもしれません

Markdownビューアー

ライブビジュアライゼーションでMarkdownをプレビューおよび編集します。

ツールを開く

HTMLビューア

.htmlファイルを開くかコードを貼り付けて、エディタの横で表示結果をリアルタイムに確認できます。

ツールを開く

MarkdownをJSONに変換

Markdown AST、テーブル、および frontmatter を JSON に変換します。

ツールを開く

HTMLをJSONに変換

HTML 構造を JSON ツリーに変換します。

ツールを開く

BBCodeビューアーの使い方

  1. 1

    BBCodeを入力する

    左側のエディターにBBCodeを入力または貼り付けます（例：[b]太字のテキスト[/b]）。.txtファイルを開いて読み込むこともできます。

  2. 2

    ライブプレビューを確認する

    右側のパネルがリアルタイムで更新され、書式を付けたテキストが掲示板でどう表示されるかをそのまま確認できます。フラスコのアイコンを押すと、各タグの見本を読み込めます。

  3. 3

    タグを挿入して確認する

    文字を選択してツールバーのボタンを押すか、Ctrl+BやCtrl+Shift+8などのショートカットでタグを付けます。リンクや画像はURLの入力欄が開くので、貼り付けて挿入し、プレビューを見ながら整えます。

  4. 4

    コピーまたは書き出す

    BBCodeをコピーして投稿欄に貼り付けるか、HTML表示に切り替えてHTMLをコピー・ダウンロード、または.txtとして保存します。

参考資料

  • Wikipedia — BBCode

    BBCodeの概要、成り立ち、代表的なタグ、掲示板がこの軽量マークアップをどう解析するかを解説したページです。

  • Wikipedia（日本語）— BBCode

    BBCodeの日本語版記事。掲示板ソフトがHTMLの代わりに角括弧のタグを採用した経緯と、主なタグの書き方がまとまっています。

  • phpBB — BBCode Guide

    太字・斜体・URL・画像・引用・コードブロックなど、標準的なBBCodeタグを一覧で示したphpBB公式ドキュメントです。

  • Steamコミュニティ — テキスト書式ヘルプ

    レビューやディスカッションで使えるBBCodeタグをSteamが公式に一覧化したページで、[spoiler]・[noparse]・[olist]や表のオプションも載っています。

  • Godot ドキュメント — RichTextLabelのBBCode

    ゲームエンジンGodotが独自に拡張したBBCodeの解説。[wave]や[shake]など、掲示板にはないアニメーション用タグが載っています。

関連ツール

Markdownビューアー

投稿やドキュメント向けのもう一つの軽量マークアップ、Markdownの書式をリアルタイムでプレビューできます。

HTMLビューアー

生のHTMLを描画してプレビューします。BBCodeがどんなHTMLに変換されるかを確かめるのに便利です。

HTML圧縮ツール

公開前に余分な空白やコメントを取り除いてHTMLを軽量化します。

テキスト比較・差分

2つのテキストやマークアップを並べて、違いをひと目で見つけられます。

よくある質問

BBCodeとは何ですか？
BBCode（Bulletin Board Code）は、フォーラムや掲示板で投稿を装飾するために使われる軽量マークアップです。[b]太字[/b] や [url]リンク[/url] のように角括弧でタグを記述し、表示時に安全なHTMLへ変換されます。HTMLを直接使えない掲示板でも、手軽に書式を付けられるのが特徴です。
このビューアーはどのBBCodeタグに対応していますか？
全34種類。[b] [i] [u]などの装飾、[h1]～[h6]の見出し、[url] [img]のリンク・画像、[quote] [code]のブロック、[table]の表に加え、[strike] [spoiler] [noparse] [olist]も描画し、Steamの書式タグにも対応します。[youtube]、[font]、[align]は非対応で、文字のまま残ります。
BBCodeで文字の色やサイズを変えるには？
色は [color=red]文字[/color] のように色名で書くか、[color=#ff6600]文字[/color] のようにカラーコードで指定します（#f60 のような3桁も可）。サイズは [size=20]文字[/size] で、数値はピクセル単位、1～200の範囲で有効です。色名や数値を認識できないときはタグが無視されて文字だけが残るので、プレビューで書き間違いにすぐ気づけます。
画像やリンクのBBCodeはどう書きますか？
画像は [img]https://example.com/a.png[/img]、大きさを決めたいときは [img width=300 height=200]URL[/img] と書きます。リンクは [url]https://example.com[/url]、表示文字を変えるなら [url=https://example.com]こちら[/url] です。[url=example.com] のようにドメインだけ書いた場合は https:// を補って扱います。http・https以外のアドレスはリンクにならず、文字のまま表示されます。
BBCodeで表を作れますか？
作れます。[table] の中に行ごとの [tr] を置き、見出しセルは [th]、通常のセルは [td] で囲みます。セルの結合は [td colspan=2] や [td rowspan=2] です。ツールバーの表ボタンで2列×2行のひな形を挿入でき、Steamの [table noborder=1]（枠線なし）や [table equalcells=1]（列幅をそろえる）も描画します。
入力するとすぐにプレビューされますか？
はい。エディターにBBCodeを入力または貼り付けると、プレビューパネルが即座に更新されます。投稿する前に、書式設定したテキストの見た目をそのまま確認できます。
BBCodeをHTMLに変換できますか？
はい。右側のプレビュー欄で「プレビュー」から「HTML」に切り替えると、HTMLをコピーしたり.htmlファイルとしてダウンロードしたりできます。リンクはhttp/httpsのみ許可され、scriptやon*イベント属性は出力されません。
入力したBBCodeはサーバーに送信されますか？
いいえ。解析と描画はすべてブラウザ内で行われるため、入力したテキストが端末の外に出ることはなく、どこにもアップロードされません。
スマートフォンでも使えますか？
はい。ブラウザだけで動作するため、パソコンでもスマートフォンでもそのまま利用できます。外出先で掲示板に投稿する前に、書式を確認したいときにも便利です。
リンクや画像が表示されないのはなぜですか？
多くの場合、タグの閉じ忘れや角括弧の書き間違いが原因です。例えば [url=...]リンク[/url] や [img]画像URL[/img] の形になっているか確認してください。プレビューと見比べながら直すと、原因を素早く特定できます。
SteamのレビューでBBCodeを使うときの確認に使えますか？
使えます。Steamのテキスト書式ヘルプに載っているタグはすべて描画でき、マウスを重ねるかタップするまで中身を隠す [spoiler]、タグをそのまま見せる [noparse]、番号付きリストの [olist]、[quote=投稿者名] などもプレビューできます。投稿前に崩れがないか確かめてから貼り付けてください。
GodotのBBCodeとは何が違いますか？
GodotのRichTextLabelは角括弧の書き方を借りていますが、[wave]・[shake]・[pulse]といったアニメーション用タグや [font_size] など、掲示板にはない独自タグを持っています。このページで描画するのは掲示板向けのBBCodeなので、Godot専用のタグは効かず、文字のまま表示されます。
[font]タグが効かないのはなぜですか？
[font]・[youtube]・[align]は対応外のタグで、消さずに文字のまま残します。ほかにも、URLがhttp・httpsで始まっていない場合や、[code]・[noparse]の中に書いたタグ（中身をそのまま表示する仕様です）は効きません。256段を超える入れ子もタグとして扱わず文字として残します。