#publisher gihyo.jp：WEB+DESIGN STAGE RSS1.0 gihyo.jp：WEB+DESIGN STAGE
   RSS2.0 gihyo.jp：WEB+DESIGN STAGE Atom

技術評論社

     * Software Design
     * WEB+DB PRESS
     * Web Site Expert
     * 組込みプレス

     * このサイトについて
     * お問い合わせ

   検索したい用� 検索

   IFRAME:
   http://as.gh.impact-ad.jp/hserver/SITE=DESIGN/AREA=SUPERBANNER/AAMSZ=72
   8X90/OENCJP=UTF8

   レンタルサーバ導入ガイド
     * DEVELOPER STAGE
     * ADMINISTRATOR STAGE
     * WEB+DESIGN STAGE
     * LIFESTYLE STAGE
     * CLOUD COMPUTING STAGE

   gihyo.jp » WEB+DESIGN STAGE » 連載 » CMSのポテンシャルを引き出す─MODxで作る商用サイト »
   第16回　MODxのスニペットを使いこなす─FormIT［その2］

CMSのポテンシャルを引き出す─MODxで作る商用サイト

第16回　MODxのスニペットを使いこなす─FormIT［その2］

     * この記事についてTwitterで発言する
     *
     * このエントリーをはてなブックマークに追加
     *
     * Clip to Evernote

   2011年10月14日

   中満英生

   MODx, FormIT, スニペット, エラーメッセージ, フック

   この記事を読むのに必要な時間：およそ 3.5 分

はじめに

   出張や長期休暇の都合上，前回の記事からずいぶんと時間が経ってしまいましたが，今回も前回に引き続き，MODxに欠かせないスニペットのひとつである
   FormITについて解説したいと思います。基本的な設置方法については前回解説済みですので，必要であれば内容をおさらいしておいてくださいね。

送信者への控え送信

   一般的なサイトの問い合わせフォームを利用すると，フォームの内容が控えとして投稿者に送信されてくることがほとんどだと思います。この機能は標準でサ
   ポートされているため，次のようにスニペットのパラメータを少し設定するだけで簡単に実現することができます。なお，外部CSSを使っていない都合上，
   今回はエラー文字列などの色を変更するため，
<div class="success" style="color: #ff0000;">...</div>

   という一見意味のない表現を用いています。実際に運用する場合には，CSSファイル内にてsuccessというクラスを定義しておき，HTML部分には
<div class="success">...</div>

   という表現を用いるのが一般的です。

   リスト1　問い合わせフォーム内のスニペットのパラメータを変更（赤字が変更部分）
[[!FormIt?
 &hooks=`email,FormItAutoResponder`
 &emailTpl=`formit_mailbody`
 &emailSubject=`【お茶のなかみつ園】お問い合わせありがとうございます`
 &emailTo=`user@example.com`
 &emailToName=`お茶のなかみつ園`
 &fiarTpl=`formit_mailbody`
 &fiarSubject=`【お茶のなかみつ園】お問い合わせありがとうございます`
 &fiarFrom=`noreply@example.com`
 &validate=`name:required,
      email:email:required,
      message:required`
 &successMessage=`<p>お問い合わせを受け付けました。</p>`
]]

<div class="success" style="color: #ff0000;">[[!+fi.successMessage]]</div>
<form class="form" action="[[~[[*id]]]]" method="post">
<table id="contactform">
<tbody>
<tr><th>お名前<span style="color: #ff2222;">*</span></th>
<td><input id="name" type="text" name="name" value="[[!+fi.name]]" /><br /><span
 class="error" style="color: #ff0000;">[[!+fi.error.name]]</span></td>
</tr>
<tr><th>メールアドレス<span style="color: #ff2222;">*</span></th>
<td><input id="email" type="text" name="email" value="[[!+fi.email]]" /><br /><s
pan class="error" style="color: #ff0000;">[[!+fi.error.email]]</span></td>
</tr>
<tr><th>問い合わせ内容<span style="color: #ff2222;">*</span></th>
<td><textarea id="message" name="message" rows="7" cols="35">[[!+fi.message]]</t
extarea><br /><span class="error" style="color: #ff0000;">[[!+fi.error.message]]
</span></td>
</tr>
<tr><th> </th>
<td><input id="submit" type="submit" name="submit" value="送信" /></td>
</tr>
</tbody>
</table>
</form>

   ここでは，フックの追加と投稿者向けのメール設定を定義しています。フックとは，投稿が行われる前や行われた際に関連して実行される処理であり，For
   mITが持つ独自のプラグインのように考えることができます。また，投稿者向けのメール設定については，これまでの&email...パラメータとよく
   似ているため，解説の必要はないでしょう。

   もし，投稿者，管理者に異なった内容のメールを送信したい場合には，別々のテンプレート用チャンクを作成し，&emailTplと&fiarTplパラ
   メータでそれぞれのチャンクを指定してください。

エラーメッセージを編集する

   現状では，&validateパラメータにより全ての項目が必須とされていますが，項目を空欄にして投稿した場合，各フォームの下には「This
   field is required.」という英語のメッセージが表示されます。

   図1　必須項目を記入しない場合のエラー

   図1　必須項目を記入しない場合のエラー

   ここで思い出していただきたいのは第12回で紹介したLexicon機能です。今回のエラーメッセージは，「システム」→「語彙トピックの管理」→「ネ
   ームスペースでformitを選択」より探し出すことができます。

   メッセージを日本語化させるためには，以前行ったように，付属の翻訳ファイルを日本語用ファイルとしてコピーし，「語彙トピックの管理」より日本語訳を
   上書きさせれば良いのですが，名前が入力されていない場合には「名前の入力は必須です。」，メールアドレスが不正な場合には「メールアドレスの入力は必
   須です。」といった形で，パーツごとに異なるエラーメッセージを表示させたい場合があります。

   この場合，前回紹介したカスタムの妥当性チェックを使い，チャンクごとに異なったエラーメッセージを用意するというのもアリなのですが，妥当性チェック
   の数だけチャンクを用意するのは骨の折れる作業です。実は次のようにエラーメッセージは簡単に変更することができます。

   リスト2　パーツごとに異なったエラーを表示させる（赤字が追加部分）
[[!FormIt?
 &hooks=`email,FormItAutoResponder`
 &emailTpl=`formit_mailbody`
 &emailSubject=`【お茶のなかみつ園】お問い合わせありがとうございます`
 &emailTo=`user@example.com`
 &emailToName=`お茶のなかみつ園`
 &fiarTpl=`formit_mailbody`
 &fiarSubject=`【お茶のなかみつ園】お問い合わせありがとうございます`
 &fiarFrom=`noreply@example.com`
 &validate=`name:required,
      email:email:required,
      message:required`
 &successMessage=`<p>お問い合わせを受け付けました。</p>`
 &name.vTextRequired=`■ 名前の入力は必須です。<br />`
 &email.vTextRequired=`■ メールアドレスの入力は必須です。<br />`
 &message.vTextRequired=`■ 問い合わせ内容の入力は必須です。<br />`
]]
--- 略 ---

   図2　エラーメッセージ変更後

   図2　エラーメッセージ変更後

   日本語の問い合わせフォームで英語のエラーが表示されるのは不自然ですので，ぜひとも設定しておきたい機能のひとつです。

フックを活用する

   フックとは，FormITが持つプラグインのようなもの，と解説しましたが，本校執筆時点でFormITには，下記のビルトインフックが含まれています
   。

   表1　ビルトインフックの内容
          フック名                     用途
   email               メール送信する
   redirect            投稿後，ページをリダイレクトさせる
   spam                IPチェックなどでspam投稿を防止する
   recaptch            spam投稿防止のために，reCaptchaを使用する
   FormItAutoResponder 自動応答を実現する

   各フックの使い方は，すでになんとなく理解いただけているかと思いますが，詳細は例のごとくスニペットのドキュメントを参照してみてください。

   ビルトインフックだけでも多機能なフォームを作成することができますが，妥当性チェック同様，カスタムのフックを作成することもできます。試しに，カス
   タムフックを使って，メール内に「送信日」という項目を追加してみましょう。ここでの「送信日」とは，フォームが送信された際の日付と時間を意図してい
   ます。

   まず，カスタムのフックは妥当性チェック同様，スニペットとして作成します。内容は非常にシンプルで，postdateという変数に実行時の時刻情報を
   代入し，trueを返しているだけです。

   リスト3　SetPostdateスニペット
<?php
$hook->setValue('postdate', strftime("%F %H:%M:%S"));
return true;

   次に，&HooksパラメータにSetPostdateフックを追加します。

   リスト4　問い合わせフォームリソースの内容（赤字が追加部分）
[[!FormIt?
 &hooks=`SetPostdate,email,FormItAutoResponder`
 &emailTpl=`formit_mailbody`
 &emailSubject=`【お茶のなかみつ園】お問い合わせありがとうございます`
 &emailTo=`user@example.com`
 &emailToName=`お茶のなかみつ園`
 &fiarTpl=`formit_mailbody`
 &fiarSubject=`【お茶のなかみつ園】お問い合わせありがとうございます`
 &fiarFrom=`noreply@example.com`
 &validate=`name:required,
      email:email:required,
      message:required`
 &successMessage=`<p>お問い合わせを受け付けました。</p>`
 &name.vTextRequired=`■ 名前の入力は必須です。<br />`
 &email.vTextRequired=`■ メールアドレスの入力は必須です。<br />`
 &message.vTextRequired=`■ 問い合わせ内容の入力は必須です。<br />`
]]
--- 略 ---

   あとは，メールのテンプレートであるformit_mailbodyチャンクにpostdateという項目を加えます。

   リスト5　formit_mailbodyチャンクの一部
送信日：       [[+postdate]]<br />
お名前：       [[+name]] 様<br />
メールアドレス：  [[+email]]<br />

   これにより，仮にメールが遅延した場合でも正確な送信日時がわかるようになり，より充実した問い合わせフォームとなりました。

最後に

   世の中にはさまざまなメールフォームが存在しますが，MODx＋FormITの組み合わせでは，パラメータやフックを活用することで，FormIT自体
   のソースを変更することなく多彩な投稿フォームを作成することができます。

   FormITの解説は次回で最後です。次回はさらにフックを活用して，より実用的な機能を追加していきます。

   IFRAME:
   http://as.gh.impact-ad.jp/hserver/SITE=DESIGN/AREA=MAIN.REGULARBANNER/A
   AMSZ=468X60/OENCJP=UTF8

   MODx, FormIT, スニペット, エラーメッセージ, フック

著者プロフィール

   [HideoNakamitsu3.jpg]

中満英生（なかみつひでお）

   大学時代に出会ったSolarisがきっかけでUNIXの世界へ。その後ホスティングプロバイダ，データセンターで実務経験を積む傍ら，雑誌記事の執筆
   や技術セミナーの講師を務める。サーバ設定の他，セキュリティに関する著作や技術者エッセイも執筆経験あり。

バックナンバー

CMSのポテンシャルを引き出す─MODxで作る商用サイト

     * 第22回　祝！MODx-2.2リリース
     * 第21回　MODxとIfスニペット
     * 第20回　MODxでスマートフォン対策［その2］
     * 第19回　MODxでスマートフォン対策［その1］
     * 第18回　MODxとコメント投稿機能
     * 第17回　MODxのスニペットを使いこなす─FormIT［その3］
     * 第16回　MODxのスニペットを使いこなす─FormIT［その2］
     * 第15回　MODxのスニペットを使いこなす─FormIT［その1］
     * 第14回　MODxにおけるロールやアクセスポリシー
     * 第13回　MODxで会員限定ページを作成する

   バックナンバー一覧

関連記事

     * 第3回　WordPressの基本的な5つのルール（その3：フックとフィルタ）

トラックバック

   このエントリのトラックバック URI

コメント

コメントの記入

     お名前   ____________________
   メールアドレス ____________________
    タイトル   ____________________
    コメント
           ____________________________________________________________
           ____________________________________________________________
           ____________________________________________________________
           ____________________________________________________________
           ____________________________________________________________
           ____________________________________________________________
           ____________________________________________________________
           ____________________________________________________________
           ____________________________________________________________
           ____________________________________________________________
           ____________________________________________________________
           ____________________________________________________________
           ____________________________________________________________
           ____________________________________________________________
           ____________________________________________________________

   送信

   IFRAME:
   http://as.gh.impact-ad.jp/hserver/SITE=DESIGN/AREA=RECTANGLE1/AAMSZ=300
   X300/OENCJP=UTF8

   Gihyo Digital Publishing

ピックアップ

   サイバーエージェントを支える技術者たち
          サイバーエージェントを支える技術者たち

          「アメーバブログ」などを展開するAmebaを運営するサイバーエージェントの技術者に，多くの魅力的なサービスを支える秘密を伺いまし
          た。

   大規模ソーシャルサービス mixiを支える技術
          大規模ソーシャルサービス mixiを支える技術

          日本最大のSNS「mixi」を支えるエンジニアたちが，運用にまつわる裏話や使える技術を紹介していきます。

   Windows Azureユーザーズフロンティア
          Windows Azure ユーザーズフロンティア

          これからWindows Azureを活用しようという皆さんに，さまざまな角度から有益な情報をお届けしていきます。

   Future of Appsが提案する　スマートフォンアプリ開発の新しいカタチ
          Future of Appsが提案する　スマートフォンアプリ開発の新しいカタチ

          スマートフォンでPRしたい企業とアプリ開発企業のニーズをマッチングするサービス「Future of Apps」をご紹介します。

   企業を強力にサポートするハイスペックNAS―QNAP TS-EC1279U-RP
          企業を強力にサポートするハイスペックNAS ―QNAP TS-EC1279U-RP

          企業の悩みに答えるハイスペックNASをご紹介しましょう。

   IFRAME:
   http://as.gh.impact-ad.jp/hserver/SITE=DESIGN/AREA=RECTANGLE2/AAMSZ=300
   X300/OENCJP=UTF8

その他の連載

［自転車イラスト紀行］徒然走稿

          ［自転車イラスト紀行］徒然走稿

          イラストレーターであり，自転車ツーリングを趣味にしている，杠さんによるイラスト付きの紀行文です。季節に彩られた道を，風を受けなが
          ら一緒にのんびりと走りませんか。

Windows Phoneアプリケーション開発入門

          Windows Phoneアプリケーション開発入門

          Windows Marcketplace for
          Mobileがサービス開始され，作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にW
          indows Phoneアプリケーションの開発をしてみませんか？

CMSのポテンシャルを引き出す─MODxで作る商用サイト

          CMSのポテンシャルを引き出す─MODxで作る商用サイト

          筆者が作成，運用している商用サイトの構築を例に，OSSのCMSであるMODxを使った商用サイトを作るためのポイントを紹介していき
          ます。

Software is Beautiful

          Software is Beautiful

          Windows
          95/98などのチーフアーキテクトなどを務めたことで知られる中島聡氏による，エンジニアとして働き，生活していくうえで考えるべきこ
          と，そしてそれを解決するヒントをお届けします。

週刊 Windows Azure Platform 通信

          週刊 Windows Azure Platform 通信

          毎週，Windows Azure Platformおよびその関連情報の最新動向をお届けします。

元オリコン編集長☆イノマーの『叫訓』

          元オリコン編集長☆イノマーの『叫訓』

          『オリコン』元編集長の筆者が体験，体現した業界人生を総括！
          入社から下積み，そして編集長へ至る道，その間に出会った人々との今だから書けるウラ話満載の『叫訓』をお届けします。

きたみりゅうじの聞かせて珍プレー

          きたみりゅうじの聞かせて珍プレー

          ソフトウェア開発の現場で体験したトホホな失敗，思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。みなさんからの投稿もお
          待ちしてます！

mixiエンジニアがおくるソーシャルアプリ開発実践講座

          mixiエンジニアがおくるソーシャルアプリ開発実践講座

          いまや生活になくてはならないソーシャルネットワークサービス（SNS）。SNSと連携したアプリケーションも多数登場しています。本連
          載ではmixiの開発に携わっているエンジニア自らが，mixiアプリの開発手法について具体的に解説していきます。

   連載一覧

gihyo.jp special

     * gihyo.jp インフラエンジニア情報局
     * エンジニアパワーアップ講座 ～システム基盤を活用するための基礎知識～
     * テストエンジニア ステーション
     * IVIAに賭けた日本のテスト技術への想い
     * 疾走するネット・ダイナミズム
     * レンタルサーバ導入ガイド

gihyo.jp

     * DEVELOPER STAGE
     * ADMINISTRATOR STAGE
     * WEB+DESIGN STAGE
     * LIFESTYLE STAGE
     * SCIENCE STAGE
     * NEWS & REPORT
     * CLOUD COMPUTING STAGE

書籍案内

     * 新刊書籍
     * 書籍ジャンル一覧
     * 書籍シリーズ一覧
     * 新刊ピックアップ
     * ロングセラー
     * 電脳会議

定期刊行物一覧

     * Software Design
     * WEB+DB PRESS
     * Web Site Expert
     * 組込みプレス

     * 「きたみりゅうじの聞かせて珍プレー 」投稿案内

主なタグ

     * FreeBSD
     * Ubuntu
     * Webデザイン
     * Linux
     * Java
     * セキュリティ
     * Android
     * PHP

   [ タグ一覧 ]

昨日よく読まれた記事

     * マイクロソフトのテスト環境はどう進化したか？－ソフトウェアテストシンポジウム 2012基調講演レポート
     * 「第25回　HTML5とか勉強会」活動報告
     * 第58回　激安タブレットainol Novo 7 Paladinレビュー（1）
     * 2012年1月26日　VMwareのオルタナ的存在に─Red Hat Enterprise Virtualization
       3.0が国内提供開始
     * 第1回　Androidアプリを開発する前に
     * 2012年1月26日　FreeBSD 8.3-RELEASEは3月リリースで検討開始
     * 2012年1月第4週号 1位は，迅速にWebサイトを作成するためのフレームワーク「HTML
       KickStart」，気になるネタは，Apple，「iBooks 2」「iBooks Author」「iTunes U」アプリ発表
     * 「100万人から教わったウェブサービスの極意」出版記念トークイベント開催
     * カヤック，スマホを活用したコミュニケーションアプリを続々リリース――最速プロフィール交換アプリ「flap.to」，写真共有アプリ「写真
       袋」
     * 第74回　すごい豆まき

企業動向

     * 1/26  【クラウド，ビックデータ時代に】 「Ｗｉｎｄｏｗｓ　Ｓｅｒｖ...（株式会社日立製作所(エンタープライズサーバ事業部)）
     * 1/26 【HH News & Reports】元警察キャリア官僚が語る！　2012年のあ...（ハミングヘッズ株式会社）
     * 1/26 500円でつくるかわいいフォトブック『TOLOT』 「第1回デジタルえ...（株式会社フリップ・クリップ）
     * 1/26 2013年卒向けより「大学入試Web出願サービス」を提供（株式会社リクルート）
     * 1/26 【Sweetネイル＆オフィスネイル特集】 Nail Quick（ネイルクイッ...（株式会社ノンストレス）

   [ 企業動向一覧 ]

最近のトラックバック

     * 第57回　いまが旬？Android 4.0のNexus Sをレビュー（2）（from yasuos.com）
     * 第4回　電子書籍端末SONY 「Reader」レビュー（4）（from yasuos.com）
     * Macに便利なターミナルマルチプレクサ「tmux」をインストールする（from zukunasi.net）
     * いまが旬？Android 4.0のNexus Sをレビュー（from yasuos.com）
     * EeePC 4GにAndroidを入れてみた（from とあるIT系脱求職者の日記(仮称)）

最近のコメント

     * 次回の実装編が楽しみです。（by 加納喜代継）
     * お願いします（by デマ）
     * 次号が楽しみです。（by 加納　喜代継）
     * とても分かりやすいです。（by 加納　喜代継）
     * ご指摘ありがとうございます（by gihyo.jp編集部）

売れています

     * キタミ式イラストIT塾　「ITパスポート」 平成23年度 キタミ式イラストIT塾　「ITパスポート」 平成23年度
     * オンラインゲームを支える技術 ―壮大なプレイ空間の舞台裏 オンラインゲームを支える技術 ―壮大なプレイ空間の舞台裏
     * 天才ガロアの発想力―対称性と群が明かす方程式の秘密― 天才ガロアの発想力―対称性と群が明かす方程式の秘密―
     * JavaScript本格入門　～モダンスタイルによる基礎からAjax・jQueryまで
       JavaScript本格入門　～モダンスタイルによる基礎からAjax・jQueryまで
     * 今すぐ使えるかんたんパソコン家計簿2011　無料の家計簿ソフト付き 今すぐ使えるかんたんパソコン家計簿2011　無料の家計簿ソフト付き
     * マンガ建築考 ―もしマンガ・アニメの建物を本当に建てたら― マンガ建築考 ―もしマンガ・アニメの建物を本当に建てたら―

メールでのお知らせ

   メールで次の案内をお送りしております。メールの配信を希望する方は，利用したい項目をチェックしてメールアドレスを入力し，［登録］ボタンをクリック
   してください。
     * [X] gihyo.jp UPDATES［ほぼ週間に1回］
     * [X] 新刊メールマガジン［ほぼ週間に1回］
     * [X] 電脳会議の各号案内［ほぼ1ヵ月半に1回］

   e-mailアドレス� 登録

   ※変更する場合や停止する場合は，登録情報変更ページをご覧ください。

   ※登録いただいたメールアドレスには，そのお知らせ以外，配信いたしません。

このサイトについて

     * 会社案内
     * プライバシーポリシー
     * 書籍・雑誌の購入について
     * 広告出稿のご案内
     * お問い合わせ

     * Software Design
     * WEB+DB PRESS
     * Web Site Expert
     * 組込みプレス

   Feed (RSS/ATOM)

   このページの先頭へ
   技術評論社

   Copyright © 2007-2012 All Rights Reserved by Gijutsu-Hyohron Co., Ltd.
   ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。