「WordPressで学ぶPHP(2)データ構造(配列・オブジェクト)編」を発売しました。
本書は「WordPressで学ぶPHP(1)変数・制御構造編」の続編にあたり、PHPの「データ構造」(配列とオブジェクト)について解説します。
配列やオブジェクトは、頭の中で考えるだけでは、イメージがつかみにくいです。本書では図を多用して、配列やオブジェクトをなるべく分かりやすく解説することを心がけました。
Kindle本で、定価250円です。
メールフォームプラグインV2.0・その18(メールフォームのAjax化)
メールフォームプラグインでは、メールフォームをAjax化することもできます。
1.メールフォームテンプレートの書き換え
まず、メールフォームテンプレートで、以下の2箇所を書き換えます。
1-1.MTMailFormAjaxJSタグの追加
メールフォームテンプレートの中に、以下のタグを追加します。
追加する位置は、メールフォーム本体を表示する直前が良いでしょう。
<$MTMailFormAjaxJS$>
1-2.Ajax化する部分をdiv要素で囲む
次に、Ajaxによって表示を変化させる部分を、「<div id="ajax_mail">」と「</div>」のタグで囲みます。
1-3.書き換えの例
Movable Type標準テンプレートセット用のメールフォームの場合、メールフォームのテンプレートを以下のように書き換えると良いでしょう。
赤字の箇所が書き換えた部分です。
<MTSetVar name="mail_setting" value=""> <MTSetVar name="body_class" value="mt-main-index"> <MTSetVar name="main_template" value="1"> <MTSetVar name="sidebar" value="1"> <MTSetVarBlock name="page_title">メールフォーム</MTSetVarBlock> <$MTInclude module="ヘッダー"$> <$MTMailFormAjaxJS$> <div id="ajax_mail"> <h2 class="comments-open-header">メールの送信</h2> <$MTIncludeMailFormCommon$> </div> <$MTInclude module="フッター"$>
2.メールフォーム共通部分テンプレートの書き換え
次に、「メールフォーム共通部分」のテンプレートで、フォーム部分(form要素の内部)に、以下のタグを追加します。
<input type="hidden" name="mail_ajax" value="1" />
また、送信と確認のボタンのタグを、以下のように書き換えます。
<input type="button" name="mail_preview" id="mail_preview" accesskey="v" value="確認" onclick="return FJAjaxMail.send('preview');" /> <input type="button" name="mail_post" id="mail_post" accesskey="s" value="送信" onclick="return FJAjaxMail.send('post');" />
3.送信確認等のテンプレートの書き換え
メールフォームをAjax化すると、送信確認/送信エラー/送信完了の各ページは、Ajaxによって表示されるようになります。
手順の1.でメールフォームテンプレートにdiv要素を追加しましたが、その内部がAjaxによって書き換えられます。
そこで、送信確認/送信エラー/送信完了の各テンプレートを書き換えて、div要素内に表示したい内容だけを入れるようにします。
たとえば、送信確認のテンプレートは、以下のようにすることが考えられます。
<h2 class="comments-open-header">メールの確認</h2> <div class="comments-open-content"> <p>以下の内容でメールを送信します。<br />内容を修正する場合は、この後にあるメールフォームで修正してください。</p> <p>名前:<br /><$MTMailPreviewAuthor$></p> <p>メールアドレス:<br /><$MTMailPreviewEMail$></p> <p>題名:<br /><$MTMailPreviewSubject$></p> <p>本文:<br /><$MTMailPreviewBody convert_breaks="1"$></p> </div> <h2 class="comments-open-header">メールフォーム</h2> <$MTIncludeMailFormCommon$>
4.処理待ち時および処理エラー時のメッセージの設定
Ajaxで通信処理を行っているときと、通信処理でエラーがあった時に、メッセージを表示することができます。
メールフォームの設定を開き、「Ajax」の部分の「処理待ち時のメッセージ」と「処理待ち時のメッセージ」の欄に、それぞれのメッセージを設定します。
メッセージの中では、Movable Typeのタグを使うこともできます。
5.メールフォームの再構築
ここまでの作業が終わったら、メールフォームのテンプレートを再構築します。
そして、メールフォームの動作を確認します。
6.Ajaxの制限
Ajaxでは、ドメインをまたがった通信を行うことができません。
この制限は、メールフォームプラグインでも当てはまります。
たとえば、Movable Type本体が「http://www.foo.com/~」のアドレスにインストールされているとします。
一方、ブログのアドレスが「http://blog.foo.com/~」になっているとします。
この場合、MTとブログのドメインが一致していないので、メールフォームをAjax化することができません。
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください
やま
お世話になります。
4.2標準テンプレート(Ajax)をインストールして使おうと思ったのですが、テストしたところ「メールを処理しています。しばらくお待ちください。」の表示画面で止まってしまって先に進めません。
何が原因なのでしょうか?
まだカスタマイズ前のフォーム作りたての状態で、こちらでいじったところはなく、さっぱり見当がつきません。
ちなみに4.2標準テンプレート(各種機能版)は問題なく動きますし、以前4.1標準テンプレート(Ajax)のテンプレートからカスタマイズして使ってた時も全然OKでした。
よろしくお願いします。
やま
ひとつだけ心当たりが・・・
このページの「6.Ajaxの制限」のところに
「Ajaxでは、ドメインをまたがった通信を行うことができません。」
とありますが、これってサブドメインでもやはりダメなのでしょうか?
そうだとすれば、すべて納得です。
4.1標準テンプレート(Ajax)が動いているのはMovable Type本体がインストールされてる親サイトですし、今回の4.2は新しくサブドメインで作った関連サイトなので・・・
その場合は原因は特定できたとしても、Ajaxあきらめるしかないですかね・・・^_^;
壱
>やまさん
こんにちは。
ご質問の件ですが、サブドメインでもAjaxは使えません。
例えば、MT本体を「www.hogehoge.com」以下にインストールし、メールフォームを「blog.hogehoge.com」に出力した場合、Ajaxは使えません。
やまから壱への返信
やはりそうでしたか。
どうもお騒がせいたしました。
ありがとうございました。
きの
こんにちは。
初めてコメントします。
4.2標準テンプレート(Ajax)にてインストールし、再構築を行ったところ以下の内容のエラーが出てしまいました
「テンプレート「mail_form:メールフォーム」の再構築中にエラーが発生しました: <mtMailFormAjaxJS>タグでエラーがありました: メールフォームの設定を読み込むのに失敗しました 」
特に編集したわけではないのですがもし、心当たりがあるような話でしたらご教授願えますか?
よろしくお願い致します。
壱からきのへの返信
>きのさん
こんにちは。
ご質問の件ですが、以下の点をご確認ください。
1.以下のページの「メールフォームテンプレートへのタグの追加」の作業は行っていただいたでしょうか。
http://www.h-fj.com/blog/archives/2008/02/02-103011.php
2.1.を行っているにも関わらずエラーが出る場合は、メールフォームの設定の名前を半角英数字だけに変えて、再度「メールフォームテンプレートへのタグの追加」を行ってから、メールフォームのテンプレートを再構築しなおしてください。
きのからきのへの返信
>壱さん
早速のご回答、ありがとうございました。
名称を全角で対応しておりました。
半角で設定名をセットしたところ、無事再構築できました。
罠というか無知というか、安心して老こんじゃったような気分でしたw
なにはともあれ、無事解決で助かりました。
感謝です。ありがとうございました!
>>きのさん
>こんにちは。
>ご質問の件ですが、以下の点をご確認ください。
>1.以下のページの「メールフォームテンプレートへのタグの追加」の作業は行っていただいたでしょうか。
>http://www.h-fj.com/blog/archives/2008/02/02-103011.php
>2.1.を行っているにも関わらずエラーが出る場合は、メールフォームの設定の名前を半角英数字だけに変えて、再度「メールフォームテンプレートへのタグの追加」を行ってから、メールフォームのテンプレートを再構築しなおしてください。
plume
いつもお世話になっております。
Ajax版を使わせて頂いておりますが、送信完了のテンプレートに、GoogleのCVカウンターを設置したのですが、動作してくれません。
firebugでソースを確認したところ、noscriptの記述はあるのですが、<script></script>の記述は消えているようです。
<div id="ajax_mail"></div>
の中にscriptを書いてもダメなのでしょうか?
もしその場合、CVタグをサンクスページに設置する方法はありますか?
お忙しいところ恐れ入りますが、ご教授いただけますようよろしくお願いします。
壱
>plumeさん
こんにちは。
ご質問の件ですが、Ajax一般の仕組みで、Ajaxで読み込まれた内容にJavaScriptが入っていても、それは自動的には処理されません。
送信完了時点で何かJavaScriptを実行したければ、以下のような考え方でカスタマイズを行います。
1.メールフォームのテンプレートに、送信完了時に実行したいJavaScriptを入れておきます。
2.mt-static/plugins/MailForm/js/mailform.jsの中の「success : function(html) {」の部分を書き換えて、送信完了結果を表示するとともに、1.のJavaScriptを実行するようにします。
plumeから壱への返信
>壱さん
ご回答いただきありがとうございます。
javascriptの知識がなく、具体的な記述方法がわからなかったのですが、プログラマの知人にご回答いただいた内容を見せたところ簡単に対応してくれました。
解決することができて助かりました。
ありがとうございました!