Website made with rich jQuery,Ajax & Perl,PHP
ジオステーション
Sponsor
全ページにご感想フォーム
[最終更新日:2011/01/29]
このページの最下部にもありますが、大手企業のサイトでよく見かけます「この情報はお役にたてましたか?」等の質問に 「はい」や「いいえ」で答えるだけのフォームを全てのページに挿入して感想やメッセージを収集するシステムです。 今回もAjaxを使用しますので静的HTMLにも簡単に導入できます。
また、収集した情報も集計され、管理者はCSVでダウンロードすることもできます。 収集自体はPHPで行いますので、最低限度PHPが利用可能なサーバに限られます。

ここからenquete.zipをダウンロードしていただき、解凍していただくと、 enquete.phpが有りますので、サイトのルートディレクトリに、新しいディレクトリ/enqueteを作成して、 その中に置いてください。少し設定していただく必要が有りますのでエディタで開いてください。
  /*==============================================================
 	ファイル名が指定されず、/ で終わっているアドレスのファイル名
 	通常は「index.html」*/
 $DirectoryIndex = "index.html";
 /*==============================================================
 	監理者パスワード
 	セキュリティのため、必ず変更してください。
 	管理者は「enquete.php?pw=パスワード」でアクセスして
 	CSVをダウンロード可能*/
 $root = "abcd1234";
 /*==============================================================*/
  
最初は4行目の$DirectoryIndexです。 これは、ファイル名を省略されてアクセスされたページのファイル名を設定します。 通常、サイトのホームページにアクセスする場合はドメイン名を指定してファイル名を省略することが多いため、 正確にファイル名まで指定したページとアドレスが違っているように見えます。 これを解消するため、http://www.domain.jp/でアクセスされた場合でも、http://www.domain.jp/index.htmlで アクセスされた場合でも同じページであることをCGIに知らせる設定です。
もう1つは、10行目の管理者用パスワードの設定です。管理者はenquete.phpにパスワードを付けてアクセスすることで、 収集したアンケート結果をCSV形式でダインロードしていただけます。
【例】
http://www.domain.jp/enquete.php?pw=パスワード
CSV形式ですから、保存時に220228.csvのようなファイル名で保存していただくだけで、 直接Microsift Excel等で開くことができます。


  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <meta http-equiv="Content-Language" content="ja" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title>リッチなサイトを作ろう|inetagency</title>
 <script type="text/javascript" src="/jquery/jquery.js"></script>
 <script type="text/javascript" src="/ajax.js"></script>
 </head>
 <body>
 
 				-- 中略 --
 
 		<div id="EnqueteBox">ここにアンケートが挿入される</div>
 
 				-- 中略 --
 
 <script type="text/javascript">
 	getAjaxText('/enquete/enquete.php', 'EnqueteBox');
 </script>
 </body>
 </html>
  
こちらがHTMLのサンプルです。 10行目のjquery.jsは、今回は必要有りませんがデフォルトとして記述しています。もちろん無くても結構です。 11行目のajax.jsは必須ですのでこちらを参照してインストールしてください。 17行は実際に感想フォームが挿入される位置の宣言です。 最後の、21行から23行が、ページが最初にアクセスされたとき、Ajaxからフォームを挿入しています。
わずか、これだけの事で全ての静的HTMLはもちろん、PHPやPerlのCGIスクリプトでも挿入できます。

当サイトのページのように、前項「全てのページにコメントフォーム」と同時に導入する場合は注意が必要です。 commentform.jsにはajax.jsが内蔵されていますので重複し、使用できません。 また、1ページに自動的にロードされるAjaxが複数有る場合も通常の呼び出しではエラーになります。 以下は、コメントフォームと、感想フォームを併用するサンプルです。
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <meta http-equiv="Content-Language" content="ja" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title>リッチなサイトを作ろう|inetagency</title>
 <script type="text/javascript" src="/jquery/jquery.js"></script>
 <script type="text/javascript" src="/ajax.js"></script>
 <link rel="stylesheet" href="/commentform.css" type="text/css">
 </head>
 <body>
 
 				-- 中略 --
 
 		<div id="commentBox">ここにコメントフォームが挿入される</div>
 		<div id="EnqueteBox">ここにアンケートが挿入される</div>
 
 				-- 中略 --
 
 <script type="text/javascript" src="/enquete/com_enq.js"></script>
 </body>
 </html>
  
22行目は併用を可能にするjavascriptです。 enquete.zipに同梱されていますのでご利用ください。
サンプルはこちらに有ります。

Comment
$(this).corner("left");コメントに関するお約束

  1. ご意見、ご希望、ご質問など、何かありましたらご投稿ください。
  2. ご質問に対する回答は、分かる範囲でお答えしますが、お約束は出来ません。
  3. 投稿していただいたコメントはこのページに記載されます。
  4. コメントは各ページごとに独立しています。それぞれのテーマに沿ったコメントをお願いします。
  5. タグはいっさい使用できません。タグもそのまま表示されます。
  6. 印は必須です。ハンドル名でも結構ですのでご記入ください。
  7. パスワードを記入しておけばご自分の記事を削除できます。
  8. 当サイトにふさわしくないと判断した記事は管理者の独断で削除することがあります。
お名前
パスワード
件名

Enquete
このページの情報、記事はお役に立ちましたでしょうか?
はい いいえ どちらとも言えない

※ご意見が有ればどうぞ(公開されません)
更新履歴
10/07/26 Winテーマの変更
10/06/08 まだまだ使えるXP
10/06/02 jQueryテーマ...
10/05/25 Win7は業務に...
10/04/11 携帯位置情報取得
10/03/09 カレンダーの追加
10/03/01 サービス開始
有料サービス
  1. データ変換サービス
    番地まで記載されたテキスト形式の住所データをお持ちの場合、「緯度」、「経度」及び、 「最寄り駅」と座標、「最寄のインター」と座標の情報を追加したCSVデータを作成してお返しします。 座標付ですので簡単にGoogleマップに位置表示することができます。
    【例】
    名称 住所
    東京タワー 東京都港区芝公園4丁目2-8

    名称 住所 緯度 経度 沿線 最寄り駅 緯度 経度 高速名 インター 緯度 経度
    東京タワー 東京都港区芝公園4丁目2-8 35.6585873 139.7454247 都営大江戸線 赤羽橋 35.655007 139.743642 首都高速都心環状線 芝公園 35.6544767 139.745769
    ※住所データは必須です。電話番号では特定できません。

    費用は1件当たり、わずか32円。100件で3,200円、1000件でも32,000円です。
    追加される最寄り駅、最寄のインター共に直線距離で最も近いもの1件です。複数必要な場合はお問合せください。
  2. システム開発
    Googleマップや最寄り駅、最寄のインターを利用したWEBシステムを開発します。
    自社製品が全国どこで購入可能で、どの駅で降りれば1番近いのかなどをユーザにお知らせすることができ、販売促進にも貢献します。 また、ご自分の住所を指定して最も近い店舗を検索したり、距離を指定して範囲内の店舗を検索して地図を表示するシステムの開発もできます。
    もちろん、携帯版も可能です。
    携帯版はGIF形式の静止画ですのでキャリヤや機種を選びません。 ほぼ、全て機種で使用可能なシステムになります。

    携帯電話ですからWEBのようなパフォーマンスは望めませんが、 静止画でも地図の「縮小」、「拡大」をサポートします。
    お見積もりは「お問合せ」から、 ご希望の機能をできるだけ詳しくお書きいただき、お送りください。
  3. 最新のユーザインターフェースの導入
    現在注目を集めているAjaxやJavascriptを使用したハイセンスなインターフェースの導入をお手伝いします。
    jQueryプラグインのオーバーレイを複数使用した最先端のドキュメントの生成が可能になります。 また、オーバーレイやAjaxを使用する事で、無駄なリロードを減らすことができ、パフォーマンスも向上します。
お問合せフォーム
  1. 全てのお問合せはこちらの専用フォームをご使用ください。 もちろん、ご意見/ご希望でも結構です。
  2. システムに存在しない路線や、新たに開通した路線をご存知の場合はお知らせください。
  3. 有料サービスで新たなシステム開発のお見積もりをご希望の場合は、 出来る限りご希望の機能を詳しくお願いします。
  4. は必須項目です。必ずご記入ください。
お名前
フリガナ
Email
Email(確認) ※確認のためもう一度 (コピー禁止)
タイトル お問合せ お見積もり ご意見/ご希望
内容