小粋空間  -  a cheap joke and a play on words site

コメントカスタムフィールドの値をクッキーに保存する方法

Movable Typeのコメント投稿フォームで、コメントカスタムフィールドの値をクッキーに保存する方法を紹介します。

１．概要

Movable Typeのコメント投稿フォームは、「ログイン情報を記憶」をチェックしておくことで、投稿時に入力した名前やメールアドレスなどをクッキーに保存し、次回のコメント投稿時に利用することができます。

ただし、クッキーに保存できるのはデフォルトで用意されているフィールドのみで、カスタムフィールドで作成したフィールドは保存できません。

例えば下の画像のように、「テキストフィールド」というコメントカスタムフィールドに入力した値は、次回のコメント投稿時には反映されません。

本エントリーでは、コメントカスタムフィールドに入力した値をクッキーに保存できるようにする方法を紹介します。

カスタマイズ後のコメント投稿フォーム

２．カスタマイズ

カスタマイズ対象は、コミュニティ機能を使っていない場合は、インデックステンプレートの「JavaScript」、コミュニティ機能を使っている場合はグローバルテンプレートの「GlobalJavaScript」になります。

以下に解説するサンプルは、カスタムフィールドのベースネームが「cf」で、カスタムフィールドがテキストフィールドの場合です。

２．１ mtSaveUser()の変更

まず、コメント投稿時に実行される関数mtSaveUser()に、コメント投稿フォームからカスタムフィールドの値を取得する処理（青色部分）を追加します。赤色部分の「cf」がカスタムフィールドのベースネームになります。

function mtSaveUser(f) {
    // We can't reliably store the user cookie during a preview.
    if (is_preview) return;
 
    var u = mtGetUser();
 
    if (f && (!u || u.is_anonymous)) {
        if ( !u ) {
            …中略…
        }
        if (f.customfield_cf != undefined) u.customfield_cf = f.customfield_cf.value;
        if (f.author != undefined) u.name = f.author.value;
        if (f.email != undefined) u.email = f.email.value;
        if (f.url != undefined) u.url = f.url.value;
    }
    …後略…

コメント投稿フォームから取得したデータは、「u」という変数に任意の変数名、ここでは「customfield_cf」という名前で保存します。

２．２ mtBakeUserCookie()の変更

投稿者情報をクッキーに保存する関数mtBakeUserCookie()に、カスタムフィールドの値を保存する処理を追加します。

function mtBakeUserCookie(u) {
    var str = "";
    if (u.customfield_cf) str += "customfield_cf:'" + mtEscapeJS(u.customfield_cf) + "';";
    if (u.name) str += "name:'" + mtEscapeJS(u.name) + "';";
    …後略…

u.customfield_cfをクッキーに保存用フォーマットに整形し、変数strに設定します。シングルクォーテーションやダブルクォーテーションの記述位置に気をつけてください。

２．３ mtUnbakeUserCookie()の変更

クッキーから投稿者情報を取得する関数mtUnbakeUserCookie()に、カスタムフィールドデータを取得する処理を記述します。

【変更前】

function mtUnbakeUserCookie(s) {
    if (!s) return;
 
    var u = {};
    var m;
    while (m = s.match(/^((name|url|email|is_authenticated|profile|userpic|…後略…
    …後略…

【変更後】

function mtUnbakeUserCookie(s) {
    if (!s) return;
 
    var u = {};
    var m;
    while (m = s.match(/^((customfield_cf|name|url|email|is_authenticated|profile|userpic|…後略…
    …後略…

２．２項で設定したクッキー名「customfield_cf」をそのまま設定します。この記述をしておけば、mtUnbakeUserCookie()の処理でクッキーの値が変数uに収集されるようになっています。

２．４ mtUserOnLoad()の変更

ページロード時に実行される関数mtUserOnLoad()に、クッキーから読み出したカスタムフィールドの値を、コメント投稿フォーム反映用の変数に設定する処理を追加します。

function mtUserOnLoad() {
    var u = mtGetUser();
    …中略…
        if (cf) {
            if (u && u.is_anonymous) {
                if (u.customfield_cf) cf.customfield_cf.value = u.customfield_cf;
                if (u.email) cf.email.value = u.email;
                if (u.name) cf.author.value = u.name;
                if (u.url) cf.url.value = u.url;
                …後略…

変数uに保存されているcustomfield_cfの値を、コメント投稿フォームに反映するときに利用する変数cf（comment formの略と思います）のcustomfield_cfに代入します。

３．複数のカスタムフィールドを保存する場合

複数のカスタムフィールドをクッキーに保存するには、２項の設定で、必要な分を同じように追加してください。２．１項であれば次のようになります。

function mtSaveUser(f) {
    // We can't reliably store the user cookie during a preview.
    if (is_preview) return;
 
    var u = mtGetUser();
 
    if (f && (!u || u.is_anonymous)) {
        if ( !u ) {
            …中略…
        }
        if (f.customfield_cf != undefined) u.customfield_cf = f.customfield_cf.value;
        if (f.customfield_cf_2 != undefined) u.customfield_cf_2 = f.customfield_cf_2.value;
        if (f.customfield_cf_3 != undefined) u.customfield_cf_3 = f.customfield_cf_3.value;
        if (f.author != undefined) u.name = f.author.value;
        if (f.email != undefined) u.email = f.email.value;
        if (f.url != undefined) u.url = f.url.value;
    }
    …後略…

チェックボックス・ラジオボタン・セレクトボックスはデータの取得や設定はサンプル異なるかもしれません。通常のJavaScriptのお作法に従ってください。