メールフォームをブログ記事ごとに設置する(その3)

ブログ記事からメールフォームのページにリンクし、ブログ記事の情報をメールフォームに渡す方法の2つ目として、JavaScriptを使う方法を解説します。

1.ブログ記事テンプレートの書き換え

まず、ブログ記事テンプレートを書き換えます。
その手順は、PHPを使う方法の手順1と同じです。

2.メールフォームテンプレートの書き換え

次に、メールフォームのテンプレートの先頭に、以下のようなタグを入れます。

<MTSetVar name="use_js" value="1">

3.メールフォーム共通部分テンプレートの書き換え

次に、「メールフォーム共通部分」のテンプレートモジュールを書き換えます。

メールフォーム共通部分のテンプレートモジュールの中に、以下のようなタグがあります。

<input type="hidden" name="mail_blog_id" value="<$MTBlogID$>" />

このタグの前に、以下のようなタグを追加します。
「フィールド名1」等には、手順1.で付けたフィールド名を指定します。

<MTIf name="use_js">
<script type="text/javascript">
//<![CDATA[
    var names = { "フィールド名1" : 1, "フィールド名2" : 1, ・・・, "フィールド名n" : 1 };
    var querys = location.search.split(/&/);
    for (var i = 0, j = querys.length; i < j; i++) {
        var queryTmp = querys[i].split(/=/);
        if (names[queryTmp[0]]) {
            document.write('<input type="hidden" name="' + queryTmp[0] + '" value="' + decodeURIComponent(queryTmp[1]) + '" />');
        }
    }
//]]>
</script>
<MTElse>
<input type="hidden" name="フィールド名1" value="<$MTMailPreviewExtParam name="フィールド名1"$>" />
<input type="hidden" name="フィールド名2" value="<$MTMailPreviewExtParam name="フィールド名2"$>" />
・・・
<input type="hidden" name="フィールド名n" value="<$MTMailPreviewExtParam name="フィールド名n"$>" />
</MTIf>

例えば、ブログ記事からメールフォームへmail_blog_name/mail_entry_title/mail_entry_idの3つの情報を渡す場合だと、メールフォーム共通部分に以下のタグを追加します。

<MTIf name="use_js">
<script type="text/javascript">
//<![CDATA[
    var names = { "mail_blog_name" : 1, "mail_entry_title" : 1, "mail_entry_id" : 1 };
    var querys = location.search.split(/&/);
    for (var i = 0, j = querys.length; i < j; i++) {
        var queryTmp = querys[i].split(/=/);
        if (names[queryTmp[0]]) {
            document.write('<input type="hidden" name="' + queryTmp[0] + '" value="' + decodeURIComponent(queryTmp[1]) + '" />');
        }
    }
//]]>
</script>
<MTElse>
<input type="hidden" name="mail_blog_name" value="<$MTMailPreviewExtParam name="mail_blog_name"$>" />
<input type="hidden" name="mail_entry_title" value="<$MTMailPreviewExtParam name="mail_entry_title"$>" />
<input type="hidden" name="mail_entry_id" value="<$MTMailPreviewExtParam name="mail_entry_id"$>" />
</MTIf>

4.メールフォームの再構築とメール本文等のテンプレートの書き換え

ここから後は、PHPを使う場合の手順4および手順5と同じです。

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください