BBcodeについて
Posted: 2014年6月17日(火) 5:14 pm
BBCode(Bulletin Board Code)とは、phpBB などの電子掲示板で使用されるマークアップ言語で、キーワードを角括弧で囲んだタグによってマークアップされた構文が、HTML に変換され、ブラウザに表示されます。デフォルトでいくつかのタグが用意されていますが、このページでは、それ以外の様々なタグを追加する方法を解説します。
[note]1 : BBCode 追加のための予備知識
BBCode を追加する方法と追加する際の注意点。[/note]
[note][note]1.1 : 追加方法
BBCode を追加するには、管理画面にログイン後、
投稿 → メッセージ → BBcode
と進み、[BBCode の追加]をクリックし、BBCode 作成、HTML 表現、ヘルプライン、設定に入力を行います。
BBCode を作成するとき、可変部分に以下のようなトークンを使います。
{TEXT}:あらゆるテキスト文字。
{SIMPLETEXT} :半角アルファベット(A-Z)、半角数字(0-9)、半角スペース、コンマ(,)、マイナス(-)、プラス(+)、ハイフン(-)、アンダーライン(_)
{INTTEXT}:ユニコード文字、半角数字(0-9)、半角スペース、コンマ(,)、マイナス(-)、プラス(+)、ハイフン(-)、アンダーライン(_)、ドット(.)、半角スペース( )
"INTTEXT"は、phpBB 3.0.7 から導入されたトークンで、たぶん"International Text"の略なのでしょう。このトークンを用いれば、非アスキー文字をも含むユニコード文字(Unicode letter characters)の入力が可能なので、日本語のユーザにとっては便利です。
1.2 : トークン選択時の注意
HTMLタグ 内の属性指定に{TEXT} トークンを使用すると、クロス・サイト・スクリプティング攻撃を受ける可能性があり、セキュリティ上非常に危険です。例えば、CodeCogs のサービスを使って、数式を表示しようとして、BBCode 作成で
[tex]{TEXT}[/tex]
HTML 表現で
< img src= "http://latex.codecogs.com/png.latex?{TEXT}"/ >
という設定を行ったとします。すると、外来者が掲示板で
[tex]x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}" onMouse Over="window.location('悪意のあるサイト')[/tex]
という入力を行うことで、
<img src="http://latex.codecogs.com/png.latex?x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}" onM ouseOver="window.location('悪意のあるサイト')" />
という危険なスクリプトを作ることができます。これを防ぐには、{TEXT} の代わりに、{SIMPLETEXT} や {INTTEXT} を使用するとよいでしょう。
もとより{SIMPLETEXT} や {INTTEXT} では数式の入力はできません。投稿に数式を含めたい時は、Online LaTeX Equation Editor で数式画像を作成し、それを添付する形で行いましょう。
本ページでは、以下、私のサイトで採用している BBCode の追加方法を解説します。投稿時における具体的な BBCode の使い方に関しては、システム論フォーラムにある BBCode の使い方を参照してください。[/note][/note]
2 : レイアウトの強化
文が長くなる時は、小見出しを付けて整理するとか、水平線で内容を区切ったりする必要が出てきます。また、画像とそのキャプションなど、センタリングが必要となる時もあります。これらのための BBCode を追加します。
[note]2.1 : 見出し
各投稿の見出しのレベルが<h3>なので、投稿内で小見出しを付ける場合は、<h4>タグをつける必要があります。
BBCode 作成:
- コード: 全て選択
[heading]{TEXT}[/heading]
HTML 表現:
<h4>{TEXT}</h4>
2.2 : 水平線
濫用は避けるべきですが、気軽に内容を区切る時に使えます。コード間には何も入力する必要はありません。
BBCode 作成:
- コード: 全て選択
[hr][/hr]
HTML 表現:
<hr />
2.3 : センタリング
画像とそのキャプションは、センタリングした方が見栄えがします。
BBCode 作成:
- コード: 全て選択
[center]{TEXT}[/center]
HTML 表現:
<div style="text-align: center;">{TEXT}</div>
2.4 : インデント
注釈、定理、公式の提示など、地の文との区別を明確にするために、左のパディングを大きく取ります。
BBCode 作成:
- コード: 全て選択
[note]{TEXT}[/note]
HTML 表現:
<div style="padding-left: 20px;">{TEXT}</div>[/note]
3 : 上付き文字と下付き文字
上付き文字と下付き文字は、数式や化学式を書くときに必要です。
[note]3.1 : 上付き文字
BBCode 作成:
- コード: 全て選択
[super]{TEXT}[/super]
HTML 表現:
<span style="vertical-align: super;">{TEXT}</span>
3.2 : 下付き文字
BBCode 作成:
- コード: 全て選択
[sub]{TEXT}[/sub]
HTML 表現:
<span style="vertical-align: sub;">{TEXT}</span>[/note]
4 : 引用と出所
ブロック引用のためのタグ“blockquote”はデフォルトでありますが、インライン引用のためのタグ“<q>”はないので、新しく付け加えます。また引用せずに情報の出所を示すためのタグも追加しましょう。これらは、Firefox Make Link で単一のパターンとして登録しておきながら、CSS を用いて異なる見栄えを与えることで、日本語と英語とでは異なる記号で括ることができます。
[note]4.1 : インライン引用
BBCode 作成:
[q="{TEXT1}"]{TEXT2}[/q]
HTML 表現:
<q>{TEXT2}</q><span class="source">Source: {TEXT1}</span>
4.2 : Youtube 引用
BBCode 作成:
[youtube]{SIMPLETEXT}[/youtube]
HTML 表現:
<div style="text-align: center;"><object type="application/x-shockwave-flash" style="width:420px; height:315px;" data="http://www.youtube.com/v/{SIMPLETEXT}"><param name="movie" value="http://www.youtube.com/v/{SIMPLETEXT}" /></object></div>
なお、{SIMPLETEXT} には、URL に表れる以下の Youtube 動画のストリング(英数字からなる ID 番号)をペイストします。
http://www.youtube.com/watch?v=ストリング
4.3 : 情報源表示
BBCode 作成:
Source: {TEXT}
HTML 表現:
<span class="source">Source: {TEXT}</span>[/note]
5 : 任意行数の表
以下のような表を作るには、
[table-head-first]table-head-first[/table-head-first][table]table[/table][table]table[/table][table-body-first]table-body-first[/table-body-first][table]table[/table][table]table[/table][table-body-first]table-body-first[/table-body-first][table]table[/table][table-body-last]table-body-last[/table-body-last]
以下のようなコードを作成すればよい。 ただし、1行1列目に[table-head-first]タグを使い、2行目以降の1列目に[table-body-first]タグを使い、最終行最終列に[table-body-last]タグを使い、それ以外には[table]タグを使うことで、任意の行列数を持った表を作ることができます。なお、コード間で改行すると、改行の数に応じて表全体が下に下がってしまうので、途中で改行しないでください。
- コード: 全て選択
<table class="standard"><tr class="thead"><th>table-head-first</th>
<td>table</td>
<td>table</td>
</tr><tr class="tbody"><th>table-body-first</th>
<td>table</td>
<td>table</td>
</tr><tr class="tbody"><th>table-body-first</th>
<td>table</td>
<td>table-body-last</td></tr></table>
だから、以下の四種類の BBCode を作れば、任意の行数の表を作ることができるということになります。
5.1 : 先頭行先頭列
BBCode 作成:
- コード: 全て選択
[table-head-first]{TEXT}[/table-head-first]
HTML 表現:
<table class="standard"><tr class="thead"><th>{TEXT}</th>
5.2 : 一般行先頭列
BBCode 作成:
- コード: 全て選択
[table-body-first]{TEXT}[/table-body-first]
HTML 表現:
</tr><tr class="tbody"><th>{TEXT}</th>
5.3 : 一般行一般列
BBCode 作成:
- コード: 全て選択
[table]{TEXT}[/table]
HTML 表現:
<td>{TEXT}</td>
5.4 : 末端行末端列
BBCode 作成:
- コード: 全て選択
[table-body-last]{TEXT}[/table-body-last]
HTML 表現:
<td>{TEXT}</td></tr></table>