エントリーにpタグとbrタグが入る仕組み(その1:コード解析)
我楽さんのBlockquoteタグにデフォルトで改行が入るようにする。(のそれた話)がきっかけという訳ではないのですが、私もエントリーのblockquoteタグに改行が入ったり入らなかったりすることがあり、Movable Typeにおけるbrタグ挿入の振る舞いについて前々から調べてました(時間かかりすぎ?)。
ということで書けそうなレベルまでなんとか到達しましたので、シリーズもので書きます(単なるネタ増やしです(笑))。ほとんどPerl&正規表現メモになってしまいました。Perlプログラマの方には既知の部分しかありませんので予めご容赦ください。また認識誤り等ございましたらお許しください。「難しい」という方は最後のまとめだけお読み頂ければ幸いです。
エントリー入力画面で、下にある「テキストエリア」というセレクトボックスが「Convert Line Breaks」になっている場合、「保存」または「確認」をクリックすると改行部分には自動的に <p>~</p> または <br /> が挿入されます。
この処理を行っているのが
- lib/MT/Util.pm
の html_text_transform という下記の関数です。
1:sub html_text_transform {
2: my $str = shift;
3: $str ||= '';
4: my @paras = split /\r?\n\r?\n/, $str;
5: for my $p (@paras) {
6: if ($p !~ m@^</?(?:h1|h2|h3|h4|h5|h6|table|ol|dl|ul|menu|dir|p|pre|center|form|fieldset|blockquote|address|div|hr)@) {
7: $p =~ s!\r?\n!<br />\n!g;
8: $p = "<p>$p</p>";
9: }
10: }
11: join "\n\n", @paras;
12:}
処理は行番号毎に下記のようになっています。
- 引数であるエントリー文字列をローカル変数 $str に保持(他の処理から"@_"という省略された変数で引き継いでいます)。
- $str が空き、つまりエントリーが空きでなければ取得(この文は $str = '' || $str; と同義でしょうか)。
- $str を改行二つ(つまり空行)が入っている箇所で分割します。例えばエントリーに空行が3ヶ所あれば4つの(いわゆる)段落に分割されます。分割されたものは @paras という配列に保存されます。改行文字は文字コード(Shift_JIS、EUC等)によって "\r\n" と "\n" の2種類があり、
- \r?\n\r?\n
- \r\n\r\n または \n\n
- 分割された単位で下記の処理を繰り返します。この行では @paras から一段落分ずつ取り出し、変数 $p に設定しています。
- 該当するタグ(ここではh1、h2、h3?hr)にマッチしないか判定。
まず "m@?@" という構文はパターンマッチを表しており、段落中に "?" にある文字列が含まれていれば処理結果は「真」、つまり以降の処理を実施します。パターンマッチはPerlでは、
- /正規表現/
- m@正規表現@
- "<?" または "</?"
以上をまとめると、各段落の先頭が"<h1"、あるいは"</h1"等、条件式に書かれている開始・終了タグにマッチしないことが、この行の条件となります。マッチしなければ次の行を実行します。 - 改行文字を "\n<br />\n" に変換。雰囲気で変換しているのは分かりますが先と同様、"?" を\rの直後に用いることで "\r\n" または "\n" を対象としているのが分かります。また文字列置換は、
- s/置換前の文字列/置換後の文字列/g;
- s!置換前の文字列!置換後の文字列!g;
- 段落の最初と最後に <p>~</p> を挿入
- 分割した段落を "\n\n"(空行)で結合して元に戻す
処理内容は以上です。まとめると、
- pタグ:段落の先頭と最後に挿入(空行で区切られたものが「段落」となります)
- brタグ:段落内の改行部分に挿入。ただし条件式にかかれている文字列にマッチしない場合は挿入されない
ということになります。図に単純な例を示します。文章の前後には改行はないものとします。リスト内の「←空行」は便宜上の表示ですので文章には含まれません
【変換前】
あいうえお
←空行
かきくけこ
さしすせそ
【変換後】
<p>あいうえお</p>
←空行
<p>かきくけこ<br />
さしすせそ</p>
タグを用いた例については次回に記します。(つづく)
- ブログ記事ページでその記事以外のブログ記事一覧を表示する方法
- MTEntriesタグをテンプレートで複数使う時に記事を重複させない方法
- Movable Type5.2のTinyMCEを5.1のボタンに戻す方法
- Movable Typeで製品情報のテーブルを作る
- Movable Typeのブログ記事ページのファイル名に日別の通番を振る
- 予定日を過ぎたブログ記事を「最近のブログ記事」に表示しない
- mt-csv2customfields v0.03
- 複数ブログのブログ記事を時間順に1件ずつ表示する
- Movable Type のブログ記事にフラグメント識別子(ページ内リンク)を設定する
- 特定のカテゴリーに属するブログ記事一覧を表示する(改)
- Movable Type 4 でカテゴリー別にブログ記事ページのデザインを切り替える方法(その2)
- Movable Type 4 でカテゴリー別にブログ記事ページのデザインを切り替える方法(その1)
- ブログ記事に同一カテゴリーのブログ記事リストを表示(MT4版・改)
- ブログ記事に同一カテゴリーのブログ記事リストを表示(MT4版)
- 概要と本文を切り替える(Movable Type 4・デフォルトテンプレート版)
≫ Util.pm?絵文字入力その後? from Platinum
前絵文字入力を頑張っていたんだけど、今度は『短縮コード(独自タグ?)』で入力した... [続きを読む]
≫ 「改行を変換する」で、br /ではなくbrを入れたい from デースケドガーJP Lasty.org
lib/MT/Util.pmにある、html_text_transformという... [続きを読む]
≫ [カ]変な改行の修正。 from 惜賭馬 Blog
以前のブログにて、スロのテンプレを作るのに、<ul>とか<dt... [続きを読む]
≫ MTで気になること (pタグとblockquoteタグの取り扱いについて) from E.L.F!?$\~JunKtion
MTで、前々から気になることがある。 何かっつうと、MTってデフォルト状態だと、... [続きを読む]
≫ エントリにpタグとbrタグが挿入される仕組みについて from naclog
エントリーにpタグとbrタグが入る仕組み(その1:コード解析) 正規表現ができないと分からない模様。 とりあえずメモ、と。 ... [続きを読む]
≫ エントリにpタグとbrタグが挿入される仕組みについて from naclog
エントリーにpタグとbrタグが入る仕組み(その1:コード解析) http://www.koikikukan.com/archives/20... [続きを読む]
≫ Movable TypeのBlockquoteタグ from *cosmos* blog
blockquoteタグが面倒だったんです。
改行をしてくれないために、わざわざ自分でタグを入れたりして。
なんとかならんのか!?と思って調べたら・・・... [続きを読む]
お知らせありがとうございます。^^
が、ちんぷんかんぷんっす。
ニュアンスは何となくわかるんですがね?。^^;
いえいえ。
必要な情報は最後の5行くらいですので、他は読み飛ばしてくださって結構です。