kawama.jp

jquery+Pear::HTML_QuickFormでメールフォーム

カテゴリ: Ajax,JavaScript,PHP — タグ: , , , , — 2011年1月12日 23:09 — Comments (1)hatebu count

を作ってみました。

フォームの送信はjqueryのajaxメソッドで、Pear::HTML_QuickFormはエラーチェックに使っています。
エラーがある場合はphpからjsonでエラーフラグとエラーメッセージを出力し、jqueryでエラーを受け取って処理します。

jqueryでエラーチェックのロジックを書いてもいいと思いますが、HTML_QuickFormのエラーチェックは使い慣れているので、この組み合わせでメールフォームを作ってみました。

こちらがそのフォームです。メールは飛ばないので、好きなだけ送信ボタンを押して大丈夫です。

サンプルメールフォーム

html,css,javascript,phpを完全に分離しているので、このようにブログ記事、ページ内にフォームを設置できます。(linkタグをdiv内に入れるな、という警告が出てしまいますが)

ソースはこちら。

mail_form.css
mail_form.js

phpはこんな感じです。


<?php

require('HTML/QuickForm.php');
require('HTML/QuickForm/Rule.php');
$form = new HTML_QuickForm('mailForm');

$form->addElement('text','contact_name','contact_name',array());
$form->addRule('contact_name', 'お名前を入力してください', 'required', '', 'server');
$form->addElement('text','contact_email','contact_email',array());
$form->addRule('contact_email', 'メールアドレスを入力してください', 'required', '', 'server');
$form->addRule('contact_email', 'メールアドレスを正しく入力してください', 'email', '', 'server');
$form->addElement('text','contact_title','contact_title',array());
$form->addRule('contact_title', '件名を入力してください', 'required', '', 'server');
$form->addElement('text','contact_description','contact_title',array());
$form->addRule('contact_description', '内容を入力してください', 'required', '', 'server');

$result = array();
$result["error"] = 0;

if($form->validate()){ $form->process("send_emails",FALSE); }
else{
$result["error"] = 1;
$result["error_msgs"] = $form->_errors;
}

echo json_encode($result);
exit;

function send_emails($v){
//メール送信
}
?>

昨年後半から少しずつjqueryの勉強をしていますが、こうやって実用的なアプリケーションが作れるようになってくるとコーディングも楽しくなってきますね。

今年はさらにjqueryの知識や経験を深めていきたいと思います。

※2011/01/24追記
display:noneの要素(送信中表示やサンキューメッセージ)からはouterWidth()等のメソッドで要素のサイズを取得できないことがわかったので、display:noneではなくvisibility:hiddenを使うようにソースを修正しました。

「Dust-Me Selectors」で使っていないCSSを整理する

カテゴリ: CSS,技術関連 — タグ: , , — 2011年1月11日 21:30 — Comments (0)hatebu count

サイトを長く運営していると、使っていないCSS、いわゆるゴミがどんどん増えてきます。

パフォーマンスに影響が出るほどのゴミではないのですが、編集作業の邪魔になったりすることはよくあります。

というわけでCSSの掃除をしようと思ってググってみると、まず「CSS Redundancy Checker」というウェブサービスが見つかりました。

が、サイトにアクセスしてもエラーが出るだけ。どうも閉鎖してしまったようです。

というわけで他の方法がないか探してみると、「Dust-Me Selectors」というfirefoxのアドオンがありました。

https://addons.mozilla.org/en-US/firefox/addon/5392/

さっそくインストールして使ってみます。

ステータスバーに箒のアイコンが出てくるので、これをクリックすると箒が動き出し、開いているページのチェックが始まります。

チェックが終わると使われていないセレクタの一覧が出力されます。
このkawama.jpだと、wp-calendarのセレクタなどが検出されました。

サイトマップなどを指定すると、サイトの全ページをまわってチェックしてくれます。

cssの掃除って面倒なのでサボりがちになってしまうので、こういうツールがあると助かります。

フォントをemで指定(bodyでfont-size:62.5%)

カテゴリ: CSS — タグ: , , , — 2011年1月6日 20:40 — Comments (0)hatebu count

ユーザビリティの点で、フォントはpxでなくemで指定するのがベター

というのが少し前から言われています。

ただ、ずっとpxを使い続けている自分としては、実際にemを使うとなると戸惑いがあります。

が、最近、bodyに対してfont-size:62.5%を指定するという手法を知りました。

こんな感じで62.5%指定します。

body {
font-size: 62.5%;
}

これだけですが、詳しく説明しますとそのページの標準状態の文字サイズの大きさが10pxであれば、12pxの大きさは1.2emとなります。20pxであれば2emとなります。

body要素に対して”font-size: 10px;”としてしまうと、IEのメニューから文字サイズを変更できなくなります。そこでパーセント単位で指定するために、62.5%(10px÷16px)を指定しています。

http://css-style.jp/notebook/xhtml_css/font02.html

とりあえず一度使ってみましたが、なかなか使い勝手がいいです。px指定から卒業できそうな気がします。

jqueryで年齢認証っぽいダイアログを表示する

カテゴリ: Ajax,JavaScript — タグ: , , , — 2011年1月5日 22:40 — Comments (0)hatebu count

amazonなどで見かける「あなたは18歳以上ですか?」の警告、いわゆる年齢認証”っぽいもの”をjqueryで作ってみました。

参考:amazonの警告画面

amazonはサーバー側で認証してますが、javascriptだとクライアント側での認証です。
なので本質的に違うものになりますが、jqueryなら簡単に作れそうだと思ったので、とりあえず同じようなものを作ってみました。

流れとしては

0.クッキーを確認。認証が済んでいなければ1へ
1.ページにアクセスしたら画面全体を黒くし、認証ダイアログを表示
2.「いいえ」をクリックしたらYahooに飛ばす。「はい」をクリックしたらそのままページを表示
3.「はい」をクリックした場合、認証OKのクッキーを食わせて、再訪してもダイアログは出さないようにする

という具合になります。

クッキー制御にはjquery.cookie.jsを使いました。
http://plugins.jquery.com/project/cookie

認証ダイアログはSimpleModalというプラグインを選択。似たようなライブラリはいくつかありましたが、調べた中では最終更新が一番新しかったのでこれを選びました。
http://www.ericmmartin.com/projects/simplemodal/

サンプル:jqueryで年齢認証っぽいダイアログを表示

所詮はクライアントサイドなので限界はあると思いますが、先にcssでbodyをdisplay:noneにしておくとか、いろいろ工夫することでサーバーサイドの認証に近づけられると思います。

Yandexボットからのアクセス

カテゴリ: Apache — タグ: , — 2011年1月4日 21:58 — Comments (0)hatebu count

正月休み中のログを見ていたら、Yandexというクローラーからアクセスが目につきました。

このYandexというのは、ロシアの検索エンジンだそうです。日本語には非対応ですが、コンテンツの収集をしているようです。

robots.txtを読んでるし、ちゃんとUserAgentで身元も明かしているのでそれほどお行儀の悪いボットではないようです。
またクロールされているのはAmazon PAAPIとは関係ないコンテンツサイトなので、アクセスが多くてもそれほど被害はありません。

というわけで、しばらくは様子を見てみようと思います。

[php]ファイルをテンポラリなパスでダウンロードさせる

カテゴリ: PHP — タグ: , , , — 2010年12月29日 23:00 — Comments (0)hatebu count

publicでない場所に置いてあるファイルを、ランダムなパスで一時的にダウンロードできるようにする。

というのを作りました。

ちょうど今zencartをいじっていて、ダウンロード販売機能のソースコードを参考にさせて(というかほぼそのまま使わせて)もらいました。
該当のソースコードは以下のパスにあります。
includes/modules/pages/download/header_php.php

プログラムの流れは

1.ユーザーがphpにアクセス
2.ランダムで一時ディレクトリを作成
3.作成した一時ディレクトリの中にオリジナルファイルへのシンボリックリンクを作成。
4.ユーザーをシンボリックリンクへ303リダイレクト
5.ユーザーが目的のファイルを閲覧する

となります。

それと、作成したディレクトリを定期的に削除することで、ファイルが一般に公開されてしまうことを防ぎます。

zencartではphpにアクセスがあるたびに過去に作成した一時ディレクトリを削除していますが、必要ならばcronで定期的に削除するなどの処理を組み込んでもいいと思います。

ソースはこんな感じになります。


//古いシンボリックリンクを削除
zen_unlink_temp_dir(DIR_FS_DOWNLOAD_PUBLIC);

//ディレクトリ作成
$tempdir = zen_random_name();
umask(0000);
mkdir(DIR_FS_DOWNLOAD_PUBLIC . $tempdir, 0777);

$symlink_file = DIR_FS_DOWNLOAD_PUBLIC . $tempdir . '/' . $file_name;
$redirect_link = "/pub/" . $tempdir . '/' . $file_name;

//シンボリックリンク作成
$link_create_status = @symlink($org_file, $symlink_file);

//リダイレクト
if ($link_create_status==true) {
header("HTTP/1.1 303 See Other");
header("Location: ".$redirect_link);
}

phpのrequireとincludeの違い

カテゴリ: PHP — タグ: , , , , — 2010年12月20日 22:21 — Comments (0)hatebu count

ファイルを読み込むこの2つのメソッド。どちらも同じような動きをします。

自分はrequire派です。なんとなくincludeよりrequireのほうが上等というか、レベルが高い印象があったので、requireを使ってました。

今回とあるサンプルコードを読んでいたらincludeが使われており、気になって調べてみましたが、答えはphpマニュアルに書いてありました。

require() は include() とほぼ同じですが、失敗した場合に E_COMPILE_ERROR レベルの致命的なエラーも発生するという点が異なります。 つまり、スクリプトの処理がそこで止まってしまうということです。一方 include() の場合は、警告 (E_WARNING) を発するもののスクリプトの処理は続行します。

http://phpspot.net/php/man/php/function.require.html

とのことです。なるほど。

ちなみにrequire_once、include_onceというのもあって、こちらだとすでにそのファイルが読み込まれている場合はスキップしてくれます。

便利です。が、_onceありは_onceなしに比べて処理が重くなるという話をどこかで読んだことがあります。(当然と言えば当然ですが)

特に理由がないようならrequireを使っておくのが無難なようです。

jqueryのhover()でプルダウンメニューを作る

カテゴリ: Ajax,JavaScript — タグ: , , , , — 2010年12月19日 22:44 — Comments (0)hatebu count

仕事でプルダウンメニューを作った際のメモ。

jqueryを使ってちょっとしたプルダウンメニューを作りました。

サンプル:jqueryのhoverでプルダウンメニュー

最初は

$('#menu').mouseover(function(){ ...処理... }).mouseout(function(){ ...処理... });

という具合に、mouseoverとmouseoutのメソッドチェーンを使ってみました。

これでも問題ないように見えましたが、実際に作ってみるとカーソルをメニュー要素からプルダウン要素に動かすと、その都度mouseoverの処理が走ってしまうということがわかりました。

ただのプルダウンメニューであれば問題ないかもしれませんが、メニューの表示にajaxでのHTTPリクエストを入れていたので、パフォーマンスの点で問題があります。というか使いものになりません。
サンプルにconsole.logを仕込んであるので、実際にマウスを動かしながらfirebugのコンソールを見ると現象がよくわかると思います。

そこで今度はhoverメソッドを使ってみたのですが、こちらはカーソルをグリグリ動かしても処理は1度しか走りませんでした。

挙動が違う理由はよくわかりませんが、とりあえずhoverを採用して無事実装完了しました。

session.use_trans_sidがOnだと、別ドメインへのformでもhiddenにセッション情報を埋め込んでしまう

カテゴリ: Ajax,JavaScript,PHP — タグ: , , , — 2010年12月17日 21:37 — Comments (0)hatebu count

session.use_trans_sidをOnにしているサイトで、formのaction先が別ドメインのサイトなのにも関わらず、hiddenにセッションIDを付加してしまう、という問題に遭遇しました。

session.use_trans_sidは外部ドメインへのformタグにも無差別に付加する

けっこう面倒な問題。セキュリティ的にもかなりマズイです。

上記のページではurl_rewriter.tagsを使った解決策をとっていますが、今回はjqueryのremove()でhiddenタグを削除するという方法を考えてみました。

$('#form1 input:hidden[name=session_name]').remove();

当然携帯サイトなどでは使えませんが、javascriptがOffだと送信できないフォームなので、この方法を使ってみました。

秀丸のzen-codingマクロでhtmlコーディングをちょっとだけ効率化

カテゴリ: 技術関連 — タグ: , , , — 2010年12月15日 21:55 — Comments (0)hatebu count

最近話題のzen-coding、自分も秀丸にマクロ入れて使っています。

秀丸のzen-codingマクロ

普段からできる限りzen-codingを使おうとしてはいるのですが、なかなか使いこなすことができません。

実際に使おうと思っても、記法が分からない時はリファレンスサイトを見に行かなくてはいけないので、そうなると「普通に手入力でいいや」となってしまいます。

あと、ゼロからhtmlでページを作る機会があまり多くないのも原因のような気がします。
部分修正の時にも使いたいのですが、インデントが崩れてしまったりするので、ちょっと使いにくい感じがします。

そこで設定ファイルをいじって、自分なりのzen-codingの使い方を考えてみました。

設定方法はzenhtml.iniのuse-indentをyesからnoにするだけ。

たとえばこんな文字列があったとします。

君は見たか愛が真っ赤に燃えるのを

「真っ赤」を<span>で囲み、class属性にredを指定したい場合、

「真っ赤」を選択してCtrl+Shift+EでWrapモードを呼び出し、「span.red」を入力してOKします。

すると

君は見たか愛が<span class="red">真っ赤</span>に燃えるのを

こうなります。

ちなみにuse-indentがyesだと、こんな風にインデントが入ってしまいます。

君は見たか愛が<span class="red">
    真っ赤</span>に燃えるのを

zen-codingの本来の使い方からすると少しズレてるのかもしれませんが、最近のコーディングはclassとかidを指定することが多いので、かなり役立ってます。

次のバージョンアップで、Wrapモードの時はインデントをオフにする、みたいな設定ができるようになると嬉しいですね。

Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress