【Movable Type】正規表現で置換するregex_replaceモディファイアを配列を使ってスッキリと書く方法

この「regex_replace」モディファイアは、変数や値を出力するときに正規表現を使用して置換できる大変強力なモディファイアです。

コンテンツのアドレスをデータベースの中身を書き換えずに出力だけ変化させたい時に便利に使っている方も多いでしょう。

regex_replaceの実例：Twitterのショートコードをウィジェットに置き換える

例えばブログ記事の本文に、次のWordPressのショートコードみたいに書いておきます。（WordPressは[]が二重ではないですが、[]だと色々誤爆しそうなので）

[[https://twitter.com/jdash2000/status/746189261360111620]]

出力のテンプレートでregex_replaceモディファイアを使って以下のように書きます。

<$mt:EntryBody regex_replace="/\[\[(https?:\/\/twitter\.com\/.+?\/status/.+?)\]\]/g","<blockquote class="twitter-tweet" data-lang="ja"><a href="$1">$1</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>"$>

すると、出力が以下のようになります。

<blockquote class="twitter-tweet" data-lang="ja"><a href="https://twitter.com/jdash2000/status/746189261360111620">https://twitter.com/jdash2000/status/746189261360111620</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitterのスクリプトが実行されると、以下のようにツイートが埋め込みされたような表示になります。

便利ですよね。

ツイートのまとめみたいな記事だと、ブログ記事の編集画面で大幅に記述が簡素化できて編集もしやすくなります。

●直に正規表現を書くと、わかりやすさが損なわれる

大変便利なregex_replaceモディファイアなのですが、モディファイアの引数に正規表現をずらずら書いてしまうと、見た感じのわかりやすさが損なわれてしまいます。

先程のショートコードの書き換えですら、mt:EntryBodyタグの記述が結構長くなってしまい、後から見ると分かりづらくなってしまいます。他のショートコードも追加しようと思ったら…考えただけで辛くなってしまいますよね。

見た目のわかりやすさは、後々のメンテナンスで効いてきます。

できる限りわかりやすくしておくことは、未来の自分への投資です。

●regex_replaceモディファイアの引数は配列が使える

regex_replaceモディファイアの引数をわかりやすい記述にするために、ちょっと裏技的な事を理解しておく必要があります。

それはMovable Typeのプラグイン制作で有名な藤本壱さんのブログのこの記述で、コンマ（カンマ）区切りの引数を指定する場合、Movable Type内部では配列として処理されるということ。

そして内部で配列として処理されるのであれば、最初から配列を引数にしておいても動作するということです。

replaceモディファイアでは、「replace="検索する値","置換する値"」のように、2つの値をコンマで区切って指定します。

複数の値を渡せるモディファイアでは、Movable Typeの内部では値を配列として受け取ります。

このようなモディファイアに対して、値を変数で指定する場合は、配列変数を指定するようにします。

配列型のモディファイアに変数を渡す（The blog of H.Fujimoto）

これは以下の公式のドキュメントには書かれていませんが、実際に動作します。

• regex_replace | グローバル・モディファイアリファレンス（Movable Type）
• replace | グローバル・モディファイアリファレンス（Movable Type）

実際にやってみましょう。

配列にまず置換するための条件を設定します。

<$mt:Var name="regex_twitter[0]" value='/\[\[(https?:\/\/twitter\.com\/.+?\/status/.+?)\]\]/g'$>
<$mt:Var name="regex_twitter[1]" value='<blockquote class="twitter-tweet" data-lang="ja"><a href="$1">$1</a></blockquote><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>'$>

そして、先程のregex_replaceモディファイアの部分に配列名を記述します。（$+「配列変数名」）

<$mt:EntryBody regex_replace="$regex_twitter"$>

値を出力する部分がかなりスッキリしましたよね。

見た目がスッキリして、regex_replaceモディファイアの置換の条件も分離できたので、わかりやすくなりました。

わかりやすい書き方をすることで、後々自分が苦しまなくて済みます。よりわかりやすい書き方を目指していきましょう！

それでは、よいMovable Typeライフを。

●補足：複数のregex_replaceモディファイアを適用する時は

様々なWeb制作の中で、regex_replaceモディファイアの置換が1回だけで終わらない案件も多くあるかと思います（DBのデータを直せという意見は無視）。

その時に

<$mt:EntryBody regex_replace="$regex_twitter $regex_facebook $regex_instagram $regex_youtube"$>

みたいにまとめて書けば良いのですが、残念ながらできないようです。

なので、複数を適用しようとするregex_replaceモディファイアを並べて書くしかありません。

追記部分も変換することになったら以下の書き方になってしまいます。

<$mt:EntryBody regex_replace="$regex_twitter" regex_replace="$regex_facebook" regex_replace="$regex_instagram" regex_replace="$regex_youtube"$>
<$mt:EntryMore regex_replace="$regex_twitter" regex_replace="$regex_facebook" regex_replace="$regex_instagram" regex_replace="$regex_youtube"$>

これでは値を出力する部分がわかりづらくなってしまうので

<mt:Unless regex_replace="$regex_twitter" regex_replace="$regex_facebook" regex_replace="$regex_instagram" regex_replace="$regex_youtube">
     <$mt:EntryBody$>
     <$mt:EntryMore$>
 </mt:Unless>

とか

<mt:For regex_replace="$regex_twitter" regex_replace="$regex_facebook" regex_replace="$regex_instagram" regex_replace="$regex_youtube">
     <$mt:EntryBody$>
     <$mt:EntryMore$>
 </mt:For>

といったmt:Unlessタグ・mt:Forタグで括って、そちらでregex_replaceモディファイアの記述をした方が、わかりやすい書き方になりますので参考にしてみてください。

●参考にしたページ

• 配列型のモディファイアに変数を渡す（The blog of H.Fujimoto）
  
• 空白行を詰める | Movable Type（CMS3）
  
• グローバル・モディファイアを自由自在に使う方法（45式::雑記）