Movable Type用ShortCodeプラグイン・その6（自動整形との関係）

ShortCodeプラグインを使う上で、Movable Typeやリッチテキストエディタの記事の自動整形の機能を考慮することが必要な場面があります。
このことについて解説します。

1.リッチテキストエディタによる整形

リッチテキストエディタで記事を入力した場合、エディタ上ではただ文章だけを入力しているように見えますが、実際には段落や改行のタグも入力されます。
そして、それらのタグが入った状態で、データベースに記事が保存されます。

TinyMCEやFCKeditorでは、以下のようにタグが入力されるようになっています。

  • Enterキーを押すと、そこで段落が終わりであるとみなされます。
    個々の段落は<p>～</p>のタグで囲まれます。
  • Shift＋Enterキーを押すと、その位置で改行されます。
    改行した位置には<br />タグが挿入されます。

例えば、TinyMCE等で、以下のように文章を入力したとします。
空行が空いているところは、Enterキーを押して段落を分けたことを意味します。 

これは段落です。

Shirt＋Enterキーを押すと改行になります。
ここまでが段落です。

すると、内部的には以下のようにタグが付加されます。 

<p>これは段落です。</p>
<p>Shirt＋Enterキーを押すと改行になります。<br />
ここまでが段落です。</p>

2.「改行を変換」による整形

リッチテキストエディタを使わずに、フォーマットを「改行を変換」にして記事を入力した場合は、データベースには入力した通りの形で記事が保存されますが、記事を再構築する時点で以下のような整形が行われます。

  • 空の改行が出るごとに、文章を区切ります。
  • 区切った個々の部分が、divやtableなどの一部のタグで囲まれている場合は、その部分をそのまま出力します。
  • 個々の部分がタグで囲まれていない場合は、その部分を段落とみなして、<p>～</p>のタグで囲みます。
  • pタグで囲んだ部分の中では、通常の改行は<br />タグ＋改行文字に置き換えられます。

例えば、フォーマットを「改行を変換」にして、以下のように文章を入力したとします。 

これは段落です。

通常の行です。
ここまでが段落です。

すると、記事を再構築する時点で自動整形が行われ、出力は以下のようになります。 

<p>これは段落です。</p>

<p>通常の行です。<br />
ここまでが段落です。</p>

3.ShortCodeプラグインと整形の関係

ShortCodeプラグインでは、整形が終わった後の文章を、処理の対象にしています。
そのため、プラグインに渡されるデータには、自動整形によるHTMLのタグも含まれます。

例えば、以下のようにショートコードを入力したとします。
空の改行だけの行は、段落の区切りを表します。 

表の例

[table]
1,2,3
a,b,c
[/table]

表の後に出力する内容

この場合、リッチテキストエディタや自動整形によって、整形後の記事は以下のようになります。 

<p>表の例</p>

<p>[table]<br />
1,2,3<br />
a,b,c<br />
[/table]</p>

<p>表の後に出力する内容</p>

そして、tableショートコードには、以下のようなデータが渡されます。 

<br />
1,2,3<br />
a,b,c<br />

ただ、このままで上記の部分をtableタグに変換すると、各行の最後の列に不要なbrタグが入ってしまいます。
また、tableショートコードの前後がpタグで囲まれていますが、そのままだとtableタグがpタグで囲まれることになり、HTML的に望ましくありません。

このようなことから、ShortCodeプラグインでは、以下のような処理を行えるようにしてあります。

  • ショートコード内のブロックに<br />タグが含まれる場合、それらをすべて削除してから、ショートコードの処理を適用する
  • ショートコードの処理結果の前後が<p>と</p>のタグで囲まれる場合、<p>と</p>タグを削除して、処理結果だけを出力する

これらの処理によって、前述のtableショートコードの例は、最終的には以下のように出力されます。 

<p>表の例</p>

<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>a</td><td>b</td><td>c</td></tr>
</table>

<p>表の後に出力する内容</p>

4.処理方法を変えることもできる

上で述べたように、ショートコードのブロック内のbrタグを自動的に削除したり、ブロックの前後のpタグを自動的に削除したりすることができます。
ただ、ショートコードの種類によって、これらのタグを削除する方が良い場合もあれば、良くない場合もあります。
また、ブロック内の内容によっても、タグを削除する方が良い場合もあれば、良くない場合もあります。

そのため、個々のショートコードで、タグを削除する／しないのデフォルト値は異なります。
また、ショートコード毎に、デフォルトとは違う動作をさせることもできるようにしてあります。
これらについては、明日解説します。