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

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

Posted at March 30,2011 1:11 AM
Tag:[Comment, Cookie, CustomField, MovableType]

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

1.概要

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

コメント投稿フォーム

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

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

カスタマイズ前

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

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

2.カスタマイズ

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

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

2.1 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」という名前で保存します。

2.2 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に設定します。シングルクォーテーションやダブルクォーテーションの記述位置に気をつけてください。

2.3 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|…後略…
    …後略…

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

2.4 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に代入します。

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

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

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のお作法に従ってください。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)