Web Artisan Blog - ウェブ アルチザン ブログ

Nucleus:コメント機能を利用して問い合わせフォーム(簡単なメールフォーム)を作る方法

Nucleus

2005年01月19日

Research Artisan Pro ←リサーチアルチザンがパワーアップして復活しました!!
一昔前のHTMLベースのHP(ホームページ)作りであれば、
ちょっとした入力フォームを作ってアンケートを取りたいと思っても、
やれCGIがいるやなんやらで、実現には中々難しいものがありました。

しかし、今は便利なブログ作成ツールやCMSがあります。
それらを利用することで簡単にできてしまう事も多くなりましたね。。

で、今回はNucleusのコメント機能を利用して、
「お問い合わせフォーム」を作ってみたいと思います。
こんな感じのやつです。。。

>御予約・お問い合わせ

色んなやり方があるとは思いますが、今回の方法は以下の通り。
上記サイト例を元に書いていきます。。
っと、その前にまず前提ですが、
これを実現するには、Nucleusのコメント機能の一部を利用します。
ある意味これがポイントです。といっても大した事はないですが。。
それは何かと言うと、
Nucleusでは、「コメントされるとメールを通知する機能」がついてますよね。
これを利用する訳です。
しかし、コメントではないので画面上に表示されてはいけないし、
入力フォームのレイアウトも変えたいし、、
といった問題もありますが、これにも何とか対応します。


(1)プラグイン「NP_EzComment」のダウンロード

まず、サイケデリックビビアンさんよりダウンロードします。

NP_EzComment - サイケデリックビビアン
アイテムページ以外でもコメントフォーム及びもらったコメントの一部表示(そのコメント本文へのリンク付き)が簡単に出来るプラグインです。どちらかだけ表示も可能です。


Nucleus基本のコメント入力は、”個別アイテムページ”にしか置けません。
でも、こういう入力フォームは大概”メインの目次ページ”に置きたくなります。
つまり、”続きを読む”的なリンクを辿ることなく、
TOPページに入力フォームが欲しい場合もあるのです。
この素晴らしいプラグイン「NP_EzComment」は、上記のように、
”個別アイテムページ”以外でもコメントフォームが置けます。
また、フォームのレイアウト(HTML)定義もプラグイン内に記述しているので、
レイアウト変更も非常にやりやすいです。
この例では、”Name:”を”お名前:”に変えたりしました。

このプラグインの導入は、インストールするだけなので簡単ですが、
入力フォームの日本語が文字化けする場合があります。
それについては、下記記事を参考に。。

<関連記事>
>FTP:アスキー、バイナリモード転送:EUC変換って?


(2)新規Blogの作成

この「お問い合わせ」という括りで、Blogを追加します。
上記例でいえば、「御予約・お問い合わせ」という名前のBlogです。

Blogの名前:御予約・お問い合わせ
Blogの短縮名:toiblog



なぜこうするかと言いますと、
「お問い合わせ」という括りでBlogを分けたほうがやりやすいからです。
それについては、後で触れます。
作成は、「2.高度な方法」で行いますが、この辺の流れは下記記事をご参考に。
「お問い合わせ」用のレイアウトを作る上の考え方も、この記事に基づいていますので。

<関連記事>
>Nucleus:テンプレートの切り替え方法(スイッチ):プラグインは使わない

このBlogの”標準のスキン”は、
今メインのBlogで使用しているものを指定します。

標準のスキン:MAINskin


で、Blogを作成したら、更にカテゴリーを作成。

カテゴリー名:御予約・お問い合わせ


その後は、そのカテゴリーに記事を投稿します。
これは、お問い合わせ紹介の文面になりますね。

御予約、お問い合わせは下記入力フォームにご記入下さい。
また電話やメールでも受け付けております。
・・・・・〜〜




(3)テンプレートの追加

(2)で作ったBlogに紐づくように、テンプレートを2つ作成します。
1つは、”メインの目次ページ”に入力フォームを置くためのもの。

名前:TOIdefault


もう1つは、入力後の送信完了ページ用のものです。

名前:TOIdetail



・”TOIdefault”
「NP_EzComment」はテンプレートに記述するプラグインです。
なので”TOIdefault”のテンプレートを作成する訳で、
この”TOIdefault”に「NP_EzComment」導入の記述をします。
ここで注目すべきは、「NP_EzComment」は入力フォームだけを表示し、
コメント自体の表示をしない事が出来る事です。
よって、”コメントではないので画面上に表示されてはいけない”
の動作を実現する事が出来ます。(だからこれを使います)
記述には下記のパラメータを指定します。

<%EzComment(form)%>



・”TOIdetail”
入力されて送信ボタンが押され、正常にコメントされた場合、
次はどこの画面に行くかというと、”個別アイテムページ”に飛びます。
(1)で投稿した、お問い合わせ紹介の文面の”個別アイテムページ”にです。
しかし、この動作に対して特に何もしないと、
ユーザーからしたらよくわからない動きになります。
ただページが切り替わっただけですからね。
ここで、”TOIdetail”として別テンプレートを用意し、
下記のような文言をテンプレート内に書いておけば、
ユーザーには送信されたんだなと認識されます。

<%body%>
<br />
正常に送信されました。お問い合わせありがとうございました。




(4)”メインの目次ページ”、”個別アイテムページ”の表示制御

(3)で作ったテンプレートを元に、各ページの表示制御を行います。
これはもうサイトによって色々あると思いますが、
とりあえず、この例の”メインの目次ページ”制御はこんな感じです。

<%if(category)%>
 <%if(blogsetting,bname,CHIBITAマスターの居酒屋ブログ)%>
  <%otherblog(masterblog,MASTERdefault,5)%>
 <%else%>
  <%if(blogsetting,bname,御予約・お問い合わせ)%>
   <%otherblog(toiblog,TOIdefault,1)%>

  <%else%>
   <%otherblog(chibitablog,CHIBITAdefault,1)%>
  <%endif%>
 <%endif%>
<%else%>
 <%otherblog(masterblog,TOPdefault,1,CHIBITAマスターの居酒屋ブログ)%>
<%endif%>


・・・わかりますでしょうか?
ややこしいですが、
このサイトは3つのBlog、
「chibitablog、masterblog、toiblog」と、
4つの”メインの目次ページ”用テンプレート、
「TOPdefault、CHIBITAdefault、MASTERdefault、TOIdefault」
で制御している訳です。

ついでに、”個別アイテムページ”では、

<%if(blogsetting,bname,CHIBITAマスターの居酒屋ブログ)%>
 <%item(masterdetail)%>
 <div class="itembody">
  <div id="comment">
   <div class="comment-pad">
    <h3>頂いたコメント</h3>
    <%comments(masterdetail)%>
    <h3>コメントを追加する</h3>
    <h5>※コメントして頂いた内容は、サイト上に反映されます</h5>
    <h5>※お名前はニックネームにする事をおすすめします</h5>
    <%commentform%>
    <div id="trackback">
     <%TrackBack(list)%>
    </div>
   </div>
  </div>
 </div>
<%else%>
 <%item(TOIdetail)%>
 <div class="itembody">
 </div>
<%endif%>


となっています。。
ここでは2つの”個別アイテムページ”用テンプレート、
「masterdetail、TOIdetail」
で制御しています。

結局、言いたいのは
<%if(blogsetting,bname,御予約・お問い合わせ)%>のように、
ifとblogsettingを使用し、各Blogの名前で制御しているという事です。

後、NP_CommentTreeで最近のコメントを表示している場合、
下記の定義にしないと、入力された内容がコメントツリーに表示されてしまいます。

<%CommentTree(7,5,current)%>


currentを指定すると、
現在選択されているBlogに対するコメントしか表示されません。
”メインの目次ページ”のコメントツリーの制御も、
下記のようにしておけば、「お問い合わせ」のBlogに対するコメント、
すなわち入力されたコメントは画面上に表示されません。

<%if(category)%>
 <%if(blogsetting,bname,CHIBITAマスターの居酒屋ブログ)%>
 <div id="commentline-side">
  <p>頂いたコメント・トラックバック一覧</p>
  <%CommentTree(7,5,current)%> 
 </div>
 <%endif%>
<%endif%>




(5)”エラーページ”の作成

入力フォームに何も入力しないで送信を押すと、”エラーページ”に飛びます。
よって、”エラーページ”にも正しくエラーが表示されるように定義します。
これは、特にこの対応のためでなく、
普通にコメントされた場合のエラー画面と同じ位置付けなので、
正しく”エラーページ”が表示されるという動作さえしっかりしていればいいでしょう。



・・・ふぅー、しんど。
こんな感じでやれば、大体できると思います。
ユーザーがフォームに入力すれば、
即座にメールが飛んできて、その内容を確認できると言う訳です。

この方法でやる場合は、各サイトの現状の構成による事が大きいので、
単純に1つのBlogでサイト構築している場合は簡単かもしれませんが、
既に複数のBlogで制御していれば、更にややこしくなるでしょうね。。


後、付け加えれば、(2)で新規Blogの作成した事により、
”問い合わせデータ”の管理が容易になります。

”コメントされるとメールを通知する機能”を利用するとは書きましたが、
今回のテーマにおいては、メール以外に、
コメントがDB(データベース)に保存されるという部分も重要なのです。
これは、お客様の重要データという位置づけになりますし、
後々確認する際も、Blogを別にしておいた方が非常に見やすいです。
仮に一つのBlogでこれを実現したとしても、
「お問い合わせ」という記事が、その後追加された記事によって古い記事となり、
Nucleus管理画面上後ろの方に埋もれていきます。
「お問い合わせ」Blogという単位にしておけば、
そのBlogの記事は、「お問い合わせ」しかない訳ですから、
常に即差に問い合わせデータを確認できます。
(問い合わせBlogの問い合わせ記事に対するコメントで確認できるという事ですね)


今回の方法を、下記のサイトにも適用して見ました。
>お問い合わせ

このサイトは元々ブログサイトではなくコメントも必要ないので、
”メインの目次ページ”だけで構成していましたが、
入力フォームを導入することにより、
”個別アイテムページ”、”エラーページ”を追加していますし、
上記(3)、(4)と同じような対応をしています。
サイトリニューアルの為、削除しました

・・・かなり長い記事になってしまいました。
しかし、今回久々Nucleusをいじってみましたが、
やはり素晴らしいツールだと思います。
随分前に、下記の記事を書きましたが、
>Nucleus:スキンとテンプレートの違いを考える(SkinとTemplate)
やはり、シンプルであるが後で色んな機能を付け加えれるのに、
かなりの魅力を感じますね。
ヘタにプラグインを使わずとも、
複数Blogを作って、パズルのように組み合わせていけば、
どんどんおもしろいサイトを作れると思います。