ie8でjqueryのtoggle()が使えない

という状況に遭遇しました。

調べてみたところ、同じ問題で困っている人がけっこういるようでした。
http://okwave.jp/qa/q6169954.html

is(':hidden')も使えないようです。
この方はjqueryのソースコードの中まで見て調べています。
http://d.hatena.ne.jp/hiro_nemu/20090821/1250837131

ie8をie7互換モードで動かすという解決策もあるようです。
http://d.hatena.ne.jp/hide1080/20081116/1226833590

ie8でも環境によっては使えることもあるようで、正直よくわからないですね。
なんにしても迷惑な話です。

photoshopで「保存されるファイルの中に、ラテン文字以外の文字が含まれてい ます...」の警告メッセージ

たまにphotoshopを使うんですが、ファイルを保存するときにいつも「保存されるファイルの中に、ラテン文字以外の文字が含まれています。これらのファイル名と互換性のない Web ブラウザやサーバがあります。」というアラート(？)メッセージが表示されます。

特に不具合もないので無視してましたが、ちょっと気になったのでググってみました。

答えはadobeのサイトに載っていました。

http://kb2.adobe.com/jp/cps/223/223753.html

ファイル名やフォルダ名、つまり保存するパスに2バイト文字が含まれているとこのエラーが出るようです。
ほぼ毎回エラーが出る理由が分かりました。


そして解決策は、

上記の警告メッセージを表示しないで保存するには、「ファイル名」、「保存先のフォルダ名」、「保存先のフォルダのパス名」に 2 バイト文字を含まないようにします。

とのこと。
設定などでは回避できないようです。。

かなりウザいですが、いまさらPC内のフォルダ名を変更するのも難しいので、ガマンするしかないようです。

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

を作ってみました。

フォームの送信は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、いわゆるゴミがどんどん増えてきます。

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

というわけで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%)

ユーザビリティの点で、フォントは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で年齢認証っぽいダイアログを表示する

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

参考：amazonの警告画面

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

流れとしては

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

という具合になります。


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

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


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


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

Yandexボットからのアクセス

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

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

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

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