ドロップダウン型カスタムフィールドの選択肢の数値をカンマ区切りにする

MTQに以下のような質問が上がっていました。

カスタムフィールドの種類「ドロップダウン」の文字列に、半角の「\」とカンマ「,」を使いたいのですが、そのエスケープ方法がわかりかねております。

ドロップダウンの選択肢として、「￥5,000～￥10,000」のようなカンマ区切りの数値を使いたいということです。
しかし、Movable Typeのドロップダウン型のカスタムフィールドでは、カンマは選択肢の区切りとして使われる仕様です。

完全な解決ではありませんが、MTAppjQueryプラグインを使って、選択肢として表示される文字を置換する方法を紹介します。

1.仕様

冒頭で述べたように、ドロップダウン型のカスタムフィールドでは、選択肢の文字列にカンマを入れることはできません。
そこで、選択肢の文字列にはカンマを含めずに、管理画面を表示する時点でjQuery（MTAppjQueryプラグイン）で置換して、数値をカンマ区切りにするようにします。

また、半角の「￥」と「＼」は、同じ文字コードの文字です。
英文では「＼」ですが、日本語では「￥」で表示するようになっています。
確実に「￥」で表示させるには、半角ではなく全角にするのが簡単です。

ちなみに、「￥」を半角にしてスタイルシートで日本語のフォントを指定することも試してみました。
しかし、MacのSafariでドロップダウンを開いたときに、選択肢内の「￥」が「＼」で表示されてしまいました。
完全に半角にするのは難しそうです。

これらのことを考慮して、選択肢として指定する文字列（カスタムフィールドの「オプション」の設定）は、数値にカンマを含めずに、「￥下限の数値～￥上限の数値,￥下限の数値～￥上限の数値,・・・」のような形で設定することにします（「￥」は全角）。

質問された方の例では、選択肢として「￥5,001～￥10,000」「￥10,001～￥20,000」「￥20,000～」と表示したいということでした。
そこで、カスタムフィールドの「オプション」には、以下の値を設定します。

￥5001～￥10000,￥10001～￥20000,￥20001～

2.MTAppjQueryプラグインのuser.jsにカンマ区切りの処理を入れる

次に、MTAppjQueryプラグインをインストールします。
その後、そのuser.jsファイルを以下のように記述して、ドロップダウンのカスタムフィールドに含まれる数値をカンマ区切りにします。

3行目の「ベースネーム」の箇所は、カスタムフィールドにつけたベースネームに合わせて置換します。
例えば、ベースネームを「entry_price」にした場合だと、3行目は「$('#customfield_entry_price option').each(function() {」にします。

(function($){
    $('#customfield_ベースネーム option').each(function() {
        var opt = $(this);
        opt.html(opt.html().replace(/\d+/g, function(n) {
            return n.replace(/(\d)(?=(\d\d\d)+$)/g, "$1,");
        }));
    });
    ・・・（管理画面をカスタマイズするその他の処理）・・・
})(jQuery);

3.テンプレートの書き換え

2.のjQueryでは、ドロップダウンに表示する選択肢だけ、数値をカンマ区切りにしています。
サーバーに送信される値は、カスタムフィールドに設定した値（カンマ区切りでない値）のままです。
そのため、カスタムフィールドの値をテンプレートタグで出力すると、カンマ区切りではない値が出力されます。

そこで、カスタムフィールドの値をブログに出力する際にも、カンマ区切りにするようにします。
これは以下のように書くことができます。
1／2／3行目の「タグ名」の部分は、カスタムフィールドにつけたテンプレートタグ名に置き換えます。
例えば、テンプレートタグを「EntryPrice」にした場合だと、1行目のMTIfタグは「<mt:If tag="EntryPrice">」と書きます。

<mt:If tag="タグ名">
<mt:タグ名 regex_replace="/^￥?(.*)～(.*)$/","$1" numify="1" setvar="min">
<mt:タグ名 regex_replace="/^(.*)～￥?(.*)$/","$2" numify="1" setvar="max">
<mt:If name="min">￥<mt:GetVar name="min"></mt:If>～<mt:If name="max">￥<mt:GetVar name="max"></mt:If>
</mt:If>

2行目は、選択肢の文字列から「～」の前にある数値を抜き出して、カンマ区切りにし、変数minに代入する処理です。
同様に、3行目は「～」の後にある文字列をカンマ区切りにして、変数maxに代入する処理です。
そして、4行目で、「￥」→変数minの値→「～」→「￥」→変数maxの値の順に出力します。

4.正規表現は便利

今回の例のように、Web製作の中で、正規表現を使えると便利な機会は多いです。
Web製作をしている方には、正規表現をマスターすることをお勧めしたいです。
拙著「はじめての正規表現 for Web Creator」をぜひお読みください。