Posts Tagged “html5”

HTML5のinput[type=email]は制限が厳しすぎて使えないという話

HTML5にinput type=”email”というフォーム属性が追加されています。最近のブラウザはだいたい対応しています。
それまでの input type=”text”よりも使いやすくなるはずでした。

サンプル:

何ができる属性かというと、メールアドレス入力フォームで
・@がない
・全角文字になっている
・xxx@yyy.zzの形式になっていない
などをブラウザ側でチェックしてくれるものです。

チェックして、エラーがあればこんな感じのエラー表示が出ますね。

では、これは何が正しくないのでしょうか。

答えは半角スペースが入っているです。そんなの一般の人はわかんねーっつの。メアドをスペース込みでコピペしたらアウトです。もうフォームを送信することはできません。でもユーザは何が間違っているかは気づきません。
「abc@example.com」を1文字ずつ、それこそ読み上げながら確認して間違っていないことを確信しても送信できません。これはもう、フォーム側が間違っているに違いない、と思います。そしてクレームになり、フォーム側(サーバ側処理)はあくまでも「正しく入力してくれ」とか「xxx@yy.zz形式で入れてくれ、使える文字は0-9a-z@+_-.です、みたいなことを言っても、会話は通じません。

ということで、結局このタイプは使えないで、メアドのチェックはサーバサイドで書くかJSで書くかしかないというお粗末な状態にあります。

何が悪いのかというと、
・ブラウザ側の実装の問題:スペースは容認してほしい
・エラー文言の問題:どんなエラーでも「メールアドレスが正しくありません」では何が正しいのかわからない
・利用可能文字が不明な問題:利用可能な文字や、連続ドットや使える記号や全角文字がNGなら、それを明示してほしい

2012/05/10 firefox12で確認しています。

Twitter bootstrapをよく参考にするけどフロントエンドフレームワークについて思うこと

Twitter Bootstrap というフロントエンド開発フレームワークが2011年の夏くらいに出ました。と時をほぼ同じくして、僕もその当時に携わっていたプロジェクトで同じようなフレームワークを作っていたので、Bootstrapはいいなあ、おしゃれだなあ、と思いつつ、作りかけのフレームワークの完成度を上げていきました。

バージョン1
バージョン2

その際、よくBootstrapのコードを眺めたり真似したりしていたんですが、さすが海外の天才が作ったのは違うよね、勝てないよね、と思っていたんですが、最近は、でもそこまでの機能はいらんよねと思うようになってきました。

IDEAxIDEAさんなんかがゾッコンらしい記事がありますが、そのくせ、「そのままのデザインはイヤだ」みたいな記事もときどき見ます。個人的には、WebサービスのUIは全部Bootstrapになればいいと思ってます。なぜか。デザインがいいから、とかじゃなくて「オレオレデザイン」じゃなくなるからです。保存ボタンや重要なアクションがあるボタンは青で、画面内で吹き出しが出たりページトップに戻ったりするボタンは白、みたいに共通の使い分けができるというのが理由です。

デザインが一般化すればするほど、Webサービスの利用目的を阻害する要因が減っていくはず、と考えます。iPad3の発表会でも、「デジタルデバイスが究極に進化すると、その存在を感じさせなくなる」という一言がすべてです。「このボタンは何だっけ」とか「あの操作をするにはどうすればいいんだっけ」という疑問は全部無駄な行動で、本当はそのボタンを押す目的があるはずです。編集した画像を忘れないように保存しておきたい、とか(保存を自動にすることでそれは達成されるけど気持ち的な問題もあるし)。ユーザにサービス自体の体験を向上させるためには、デザインも機能もすべてが透明になる必要がある、と僕は思っていて、現状、フロントエンド開発で最もそれに近いのはBootstrapじゃないかと思うのです。だからこそ、スキンはあんまり変えない方がいいと思ってます。

HTML5のinput-typeをProgressive Enhancement的に使えるようにする

やりたかったのは、INPUT-TYPEを動的に変えること

HTML5でINPUT-TYPEが13種類も増えました。が、対応しているのはブラウザによって全然違います。「type=email」とか「type=url」なんて普通に使いたいのに、古いIEには対応していないので泣く泣く使わずにお茶を濁してしまうことって、よくあります。
そこで思いました。「input-typeを動的に変えればいいんじゃね?」
で、試してみました。が、IEではtype属性を動的に変えるとエラーが出ます。jQueryでも「attr(“type”,”hoge”)」なんてやると例外エラーが出ます。なので、やっぱりIEがアホなせいでダメじゃん、と思った矢先、「逆に使えるブラウザだけ使えばいい」と思い直しました。