HTML5にinput type=”email”というフォーム属性が追加されています。最近のブラウザはだいたい対応しています。
それまでの input type=”text”よりも使いやすくなるはずでした。
サンプル：
何ができる属性かというと、メールアドレス入力フォームで
・@がない
・全角文字になっている
・xxx@yyy.zzの形式になっていない
などをブラウザ側でチェックしてくれるものです。
チェックして、エラーがあればこんな感じのエラー表示が出ますね。
では、これは何が正しくないのでしょうか。
答えは半角スペースが入っているです。そんなの一般の人はわかんねーっつの。メアドをスペース込みでコピペしたらアウトです。もうフォームを送信することはできません。でもユーザは何が間違っているかは気づきません。
「abc@example.com」を１文字ずつ、それこそ読み上げながら確認して間違っていないことを確信しても送信できません。これはもう、フォーム側が間違っているに違いない、と思います。そしてクレームになり、フォーム側（サーバ側処理）はあくまでも「正しく入力してくれ」とか「xxx@yy.zz形式で入れてくれ、使える文字は0-9a-z@+_-.です、みたいなことを言っても、会話は通じません。
ということで、結局このタイプは使えないで、メアドのチェックはサーバサイドで書くかJSで書くかしかないというお粗末な状態にあります。
何が悪いのかというと、
・ブラウザ側の実装の問題：スペースは容認してほしい
・エラー文言の問題：どんなエラーでも「メールアドレスが正しくありません」では何が正しいのかわからない
・利用可能文字が不明な問題：利用可能な文字や、連続ドットや使える記号や全角文字がNGなら、それを明示してほしい
2012/05/10 firefox12で確認しています。
Twitter Bootstrap というフロントエンド開発フレームワークが2011年の夏くらいに出ました。と時をほぼ同じくして、僕もその当時に携わっていたプロジェクトで同じようなフレームワークを作っていたので、Bootstrapはいいなあ、おしゃれだなあ、と思いつつ、作りかけのフレームワークの完成度を上げていきました。
バージョン1
バージョン2
その際、よくBootstrapのコードを眺めたり真似したりしていたんですが、さすが海外の天才が作ったのは違うよね、勝てないよね、と思っていたんですが、最近は、でもそこまでの機能はいらんよねと思うようになってきました。
IDEAxIDEAさんなんかがゾッコンらしい記事がありますが、そのくせ、「そのままのデザインはイヤだ」みたいな記事もときどき見ます。個人的には、WebサービスのUIは全部Bootstrapになればいいと思ってます。なぜか。デザインがいいから、とかじゃなくて「オレオレデザイン」じゃなくなるからです。保存ボタンや重要なアクションがあるボタンは青で、画面内で吹き出しが出たりページトップに戻ったりするボタンは白、みたいに共通の使い分けができるというのが理由です。
デザインが一般化すればするほど、Webサービスの利用目的を阻害する要因が減っていくはず、と考えます。iPad3の発表会でも、「デジタルデバイスが究極に進化すると、その存在を感じさせなくなる」という一言がすべてです。「このボタンは何だっけ」とか「あの操作をするにはどうすればいいんだっけ」という疑問は全部無駄な行動で、本当はそのボタンを押す目的があるはずです。編集した画像を忘れないように保存しておきたい、とか（保存を自動にすることでそれは達成されるけど気持ち的な問題もあるし）。ユーザにサービス自体の体験を向上させるためには、デザインも機能もすべてが透明になる必要がある、と僕は思っていて、現状、フロントエンド開発で最もそれに近いのはBootstrapじゃないかと思うのです。だからこそ、スキンはあんまり変えない方がいいと思ってます。
今まで、Flashを作ったりHTMLを書いたりアクセス解析をしたりしていましたが、なんとなくそれらの経験が繋がったような気がしました、という話。
HTML(やCSSやJS)を書いてたときは、文字で作った構造がビジュアルになるのが楽しかったし、Flashをやってたときはデザインとインタラクション（とその仕組みになるスクリプト）が一体になっていることが、没頭するくらい楽しかったです。
それから、ただ作るだけじゃダメだなと思うようになり、解析をやり始めました。といってもGoogleアナリティクスに詳しくなったという程度でしかないけど、その構造や仕組みやインテリジェンスを理解するにつれ、これもまた楽しくなってきました。
でも、いつの間にか解析から離れ、またHTMLとかに戻ってくることになりました。HTML5やCSS3といった文脈で、マークアップや制作の楽しさを再確認していたところでした。ちなみにHTML5とCSS3は一体じゃなくて、別にHTML4でもCSS3はブラウザによって動くんだからセットでやる必要はないと思ってます。ただHTML5だとデザインとコードの分離がよりキレイにできるようになったから、「id要素はHTML構造を示す」「cssクラスは装飾を示す」「data-*要素はコードで利用することを示す」と言った感じで分離するといった書き方を底上げして薄ら笑いしたりしています。
で、本題。
