鷹の島

▼ 2007年02月の記事一覧

IPA の対応 / フォームの入力エラーを吹き出しで教えてくれる JavaScript / Subversion の入門書 / デブサミ2007行ってキタ / 東京マラソンの応援行ってキタ / Userscripts.org リニューアル / 吹き出しバリデータと TMT Validator を組み合わせてみた / svk コマンドの補完 @zsh /

■ IPA の対応

IPA の返事ノロかったな〜、っていう思い出があります。

* 2005年XX月XX日

javascript:if("AB".match(/(.*?)*?B/)){alert(RegExp.lastMatch);}

を実行すると Firefox はクラッシュ、IE だとメモリ使いまくりでひどい事になる事を確認。

* 2005年12月22日

IPA に報告。

* 2005年12月27日

IPA から届出を受理したとの御連絡。

* 2006年03月08日

IE はメモリや CPU を大量消費するけどクラッシュしないから対象は Firefox のみとする、Firefox もクラッシュするだけなので脆弱性とは言えない、だから不受理にしたいんだけどいい？(意訳)っていう内容の御連絡がありました。2ヵ月以上もかかって… orz

* で？

Firefox は 1.5.0.3 (だったかな？)辺りで無事に修正されました。→ bugzilla

IE は…、ほったらかし…。なので、ここを見た誰かがチェックしたりどうにかしたりしてくれるのを期待して書きました。(遅)

* なんで IPA ？

どこの誰にこの不具合を教えれば良きに計らってくれるか良くわかんなくて…。

△トップ | コメント (0) | トラックバック(0)

■ フォームの入力エラーを吹き出しで教えてくれる JavaScript

フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。

AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。

• 実際の動作サンプル

とりあえず submit ボタンを押せば、全て理解出来るかと思います。

今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。

• いつもの JavaScript シリーズのやつも見たい。

* 最初に

当たり前の話しなのですが、JavaScript で入力のチェックをしたからと言って、サーバサイドに送信されるデータがチェックを通過したものであると考えてはいけません。このライブラリは、ユーザがフォームを送信する前に入力のミスを検知し、利便性を向上させるのが目的であって、サーバに送信されるデータの正当性を確保する事は出来ません。必要に応じて、サーバサイドでのチェックも行ないましょう。*1

* 使い方

まずはスクリプトファイルのアーカイブをゲットしましょう。

• スクリプトと画像とか詰め合わせ

あとは動作サンプル用の valid.html (上の動作サンプルと同じものです)を見ながら頑張ればなんとかなると思います。が、一応解説も書いておきます。

まず入力チェックをしたいフォームの form 要素に、onsubmit="return Validator.submit(this)" を入れます。フォームを送信する前に、各フィールドの値が正しく入力されているかどうかを最終的に判断するための処理を行なっています。

あとは、チェックを行ないたいフィールドに個別に onblur="Validator.check(this)" と入れて、入力のチェックを行なわせるようにするだけです。これで必須入力のフィールドが出来上がりました。

他には Validator.check の第二引数を使って、チェックする内容を指定する事が出来ます。例えば、onblur="Validator.check(this, 'mail')" とすると、入力された値がメールアドレスかどうかをチェックしてくれるようになります。第二引数には以下の値を使う事が出来ます。

• mail - メールアドレス
• kana - 全角カタカナ
• alphabet - [a-zA-Z0-9\-] のみ
• equal - 他のフィールドとの比較
• count - 入力文字数
• num - 数値
• check - チェックボックスのチェック数

equal は良くある「確認用のパスワードはこちら」みたく二つのフィールドに同じ値を入れる必要がある場合に利用します。equal を使う場合は、第三引数に比較を行ないたいフィールドの name 属性値を入れる必要があるので忘れないようにしましょう。詳しくは valid.html をチェックだ。

count と num は範囲を指定する事が出来ます。例えば、5文字〜10文字の範囲で入力して欲しい場合は、onblur="Validator.check(this, 'count5-10')" などとして範囲も一緒に指定します。範囲を指定する方法はいくつかあるので、詳しくは valid.html をチェックして下さい。なんか手抜きチックだけど、多分見た方が早いんで。

ラジオボタンとチェックボックスの場合は要注意です。吹き出しを出したい要素にのみ onblur="Validator.check(this)" を指定します。name 属性が同じなら、どれか一つにだけ入っていればフォームの送信時に吹き出しが表示されるようになるので、全部の要素に入れておく必要はありません。チェックボックスに関しては、count や num と同じように check-2 などとする事で、例えば2個以上のチェックが必須になります。

スペースで区切ると、複数の項目でチェックをする事も出来ます。例えば、6文字以上のアルファベットを入力して欲しい場合は alphabet と count6- を組み合わせればいいので、onblur="Validator.check(this, 'alphabet count6-', ... とします。

入力内容のチェックは行ないたいけど、必須ではない場合、例えばメールアドレスの入力欄はあるけど、入力しなくても良い場合などがあると思いますが、そういう時は、頭に ! を付ければ必須ではなくなります。 例の場合は onblur="Validator.check(this, '!mail')" です。

* エラーメッセージ

吹き出しに出力されるエラーメッセージは、Validator.rule の中に Unicode escape して書いてあります。グリモン本のサポートサイト に、Unicode escape のツール があるので、それを利用しました。Unicode escape しておくと、ドキュメントの文字コードが何だろうがちゃんと表示出来るのでお勧めの方法です。

* 拡張

新しいエラーチェック用のルールを作りたい場合は、Validator.rule に追加すればすぐ使えます。例えば、YYYY-MM-DD 形式をチェックしたい場合は、validator.js に次のコードを追加して、onblur="Validator.check(this, 'date') と指定すればうまく動きます。

Validator.rule.date = function() {
   if(!this.value.match(/^\d{4}-\d{2}-\d{2}$/))
      return 'here is error message';
}

* デザインの変更

吹き出しとかの画像を変えたりしたい場合は、CSS ファイルをいじるだけで変更できるようにしてあります。基本的な画像の構成が変わらなければ、そんなに難しい作業ではありません。注意が必要なのは、div.baloon img でボックスの高さを確保している点です。画像の高さが変わる場合は、ここの指定を変更する必要があります。クロスブラウザのためにちょっと面倒な事になってるんですけど、まぁ、そんな感じ。

* ライセンス

いつもの通り、パブリックドメインを宣言しておくので、どうぞ好きなように利用して下さい。もちろん画像も。

* Just-size.networks は最高です

see also. http://www.just-size.net/

* 更新履歴

• XHTML 環境で親要素に position:relative が指定されていると吹き出しが表示されない問題を修正しました。
• XHTML 環境で吹き出しの表示に問題があったので、修正しました。
• 警告表示用のメッセージを分離して、簡単に多言語対応出来るような仕組みを用意してみました。ので、英語が堪能な方からの翻訳待ってます。
• Array.prototype を拡張している環境で問題があったので、修正しました。
• num や count の範囲を渡す処理に不具合があったので、修正しました。
• num, count での 不具合 を修正しました。
• チェックボックス用に check 識別子を追加しました。
• ルールの password を equal に変更し、フィールドの同一性を確保する機能とした。
• いくつかのエラーメッセージがわかりにくかったので、変更しました。
• validater というスペルが誤っている事を 教えてもらった ので修正しました。こういうのは気付きにくいので、指摘してくれる事は大変嬉しいです。

• *1: 高木先生に 指摘されて、表現を変更しました。変更前:

  当たり前の話しなのですが、JavaScript で入力のチェックをしたからと言って、サーバサイドでの入力値のチェックをさぼってはいけません。このライブラリの目的は、ユーザがフォームを送信する前に入力のミスを検知し、利便性を向上させるのが目的であって、セキュリティ的なチェックの役目は全くもっていないのでそこん所は忘れないでおきましょう。

△トップ | コメント (40) | トラックバック(4)

■ Subversion の入門書

TortoiseSVN の使い方を知りたかったのでゲット。

自分の場合、人に Subversion を使わせる立場でありまして、その人達は大体 Windows オンリーで非プログラマなもんだから TortoiseSVN を使わせる事になるんですが、コマンドライン版と大分使い勝手が違うんで説明するのが結構大変なんですよね。switch とか今だにわからん。そんなわけで、ウェブサイトとか教えてもどうせ見ないから、TortoiseSVN の使い方を書いた解説書を読ませたいと常々思っていたので、丁度良かったです。

この本は、一人で Subversion を使い始める所から複数人でコラボレーションする所までが順に実例付きで解説されているので、初めて Subversion に触れるような人にはもってこいの入門書になってます。Subversion って何だろうっていうレベルの人が読むのに丁度良い感じかな。

なんか帯に「Subversion はバックアップツールの一種です」とか書いてあるんですが、まさしくその通りでして、いちいち日付のフォルダに過去のファイルをコピーして運用しているような人は、こういうツールを使って欲しいと心から思います。

一つばかり不満点を挙げるなら、プロパティの扱いがちょっと小さ過ぎの気が。svn:keyword だけほんのちょっと紹介した上で「いくつかの理由で使わない方が良い」と書いてありましたが、その理由も明記されておらず。せめて svn: で始まるプロパティにどんなものがあるのかだけでも紹介して欲しかったな。

ちなみにコマンドラインでバリバリ使うような人には、こっちの Subversion実践入門 がお勧めです。

△トップ | コメント (3) | トラックバック(0)

■ デブサミ2007行ってキタ

昨日は朝からデブサミ行ってました。運営の方、発表者の方、皆さん大変お疲れ様でした。色々勉強になり、とても有意義な時間をすごす事できました。ありがとうございました。

発表を見て気になったモノ。

• Archer
• デプロイツール
• Assurer
• サーバのテスト&監視ツール
• Zen
• VB みたいな感覚でウェブアプリが開発出来るやつ
• Caché ってやつと連携するらしいけど、肝心の Caché の価格がウェブじゃ見れないし、多分企業向けなんだろう

あと安売りしてるっぽかったので Rails本 買ってきたんだけど、超絶定価だった。ひどい。

さらに、そういえば、出発直前まで会場は中目黒だと思い込んでたので、危うく迷子になる所でした。

△トップ | コメント (0) | トラックバック(0)

■ 東京マラソンの応援行ってキタ

と言うわけで、東京マラソン に行って参りました。参加申し込みはしてないので、応援だけです。いつも応援してもらってるので、今回は沿道で応援する役をやりたかったんです。

あいにくの天気でムチャクチャ寒くて死にそうでしたが、選手の皆さんは頑張ってるので弱音は吐けません。しかし、思ったよりも応援の方が多くて、スタート地点は随分と混んでました。

さっぱり前が見えないので、スタート地点から遠く離れた場所で初陣の選手を応援する事にしました。歩いても歩いても人が途切れない…。1km くらい歩いて、ようやくすき間を発見して収まる事が出来ました。雨が振ってたせいで、傘が邪魔過ぎて切れそうになりました。

» 続きを読む...

△トップ | トラックバック(0)

■ Userscripts.org リニューアル

いつの間にか Userscripts.org が大リニューアルして使い勝手が大分変わってます。レスポンスも凄い良くなってる気がする。

早速スクリプトのインストールで迷ったけど、右上に黒い色で「Install this Script」なるリンクがあった。目立たねえええ。

でもユーザ別にアイコンが使えるようになったり、使いやすいフォーラムが追加されたりとますます便利になってます。もっと登録スクリプトもガンガン増えるようになるといいっすね。

で、スクリプトを配布している人だけの話題ですが、スクリプトの Description の項に書く記法が変わったようで、画像が表示出来なくなっていたのを直す必要がありました。画像の場合は普通に img タグが使えるみたいです。説明が見当たらなくてなかなかわからん。

あと、どうでも良くないんだけど、グリモン本 の中の Userscripts.org の解説は書き直しだね！

△トップ | トラックバック(0)

■ 吹き出しバリデータと TMT Validator を組み合わせてみた

TMT Validator っていうフォームの入力値チェック用のライブラリがありまして、これって結構見た目とか簡単にカスタマイズ出来て、何気にすごい便利なライブラリなんで、この前紹介した 吹き出しバリデータ でやってるのと似た方法でエラーを表示するコールバック用のコードを書いてみました。

• 実際の動作サンプル

この TMT Validator は、吹き出しバリデータと違ってエラーメッセージも簡単にカスタマイズ出来たりとか、かゆい所に手が届く感じなので、そういう柔軟性を求めてる上に吹き出し表示が気に入ってる方はこっちを使ってみて下さい。

オリジナルの配布ファイルに、以下のファイルを追加すれば使えるようになります。CSS と画像ファイルは 吹き出しバリデータ のやつと同じものです。

• baloon_validator.js
• baloon_style.css
• images/baloon.gif
• images/baloon_right.gif

それで、ライセンスなんですけど、オリジナルに従うという形にしたいのですが、これ、何ライセンスなんでしょうか…？ 独自ライセンスぽい気がするんだけど…、良くわかんね。とりあえず、作者のサイトに置いてもらえないか連絡してみようと思います。

* 追記

Customizing error display のページから、動作サンプル用ページにリンクをしてくれました。

あと、やっぱりライセンスは独自のもので、オープンソースじゃないという事です。

△トップ | トラックバック(0)

■ svk コマンドの補完 @zsh

そろそろ svk コマンドでも使いはじめてみようかと思い立ったのでちょこちょこ遊んでみました。

でもって普通のオプションすら補完されないのが不便過ぎて死にそうなので調べてみた所、結構便利な形で補完機能が使えるような事がわかったのですが、情報が全然無くてすぐには出来なかったので、手順を書いておきます。

といってもチョー簡単ですけど。

まずは次の URL から _svk と svk-complete.pl をゲット。

https://intrigeri.boum.org/svn/pub/_svk/

svk-complete.pl をどこか PATH の通ったディレクトリに配置。とりあえず /usr/local/bin あたり。

_svk は zsh の補完用のファイルを読み込むところに配置。$fpath で定義されているディレクトリ*1に置けば良いらしい。私の環境の場合は独自のファイルは /usr/local/share/zsh/site-functions に置くのが良さそうだったので、ここを使う事に。自分の好きなディレクトリを使いたい場合は、.zshrc に fpath=(~/.mycomp $fpath) みたいに書いておけば ~/.mycomp が使えるようになるので、この方法も良いかも。

これでめでたくローカルのリポジトリのパスまで補完されるようになったので、長ったらしいパスをいちいち手入力する必要が無くなりました。

• *1: echo $fpath すると出てきますよ

△トップ | コメント (0) | トラックバック(0)