デザインがもっとセマンティックになっていくということ

今年はスマホが普及してきたな、と思った。僕が初めてiPhoneに機種変したのは去年(2010年)で、iPhone4が出たばかりのタイミングでした。アプリはあんまり入れてないし、有料アプリはほとんど入れてない。iPhoneを買ってすぐは少し有料のフォルダ管理アプリとかを買ってみたけど、なぜだか100円ちょっとが高く感じる。これは今もそうだ。

ただ、アプリのレビューコメントが情弱ユーザが如実に現れてきたり、なんだか衆愚なアプリがランキング上位をとったりし始めたのが今年の秋。だいたいiPhone4Sがでた頃。あ、Android界隈の話はまったく知らないで書いてますよ。この頃から「スマホ初心者に優しいアプリやWEBサービスってどんな形だろう」と考えるようになってきた。とは言っても2,3ヶ月の話なんだけども。

デザインがセマンティックになっていくとは

いわゆるHTML5という文脈で語られるsection要素やらarticle要素やらアウトライン構造やらという話ではなくて、もっと見た目に近い部分で、そうなっていく。デザイン自体が言葉と同じ意味を主張し始めるようになる、と思ってる。
それはiPhoneだからとかスマホだから、ということじゃなくって、WEBアプリケーションが全体的にそうなっていく、と感じ始めた。結局それは牽引役がいるんだけど、FacebookやTwitterやGoogleがやっぱり代表格で、プラットフォームとしてはWindows8のMetro UIだったりする。

HTML5時代のjquery.lazyloadは画像のdata-original属性を使う

jQuery.lazyloadという画像の遅延読み込みライブラリが一時期はやっていましたが、かつてのスクリプトでは最近のブラウザで正しく動いてくれないそうです。

古いブラウザでは、画像のsrc属性を指定した状態で、lazyloadプラグイン側がいったんそれをカラにしてからDOM構築後にリクエストしにいくことで遅延読み込みを実現してたんですが、最近のブラウザではsrc属性が指定されている時点で(DOM構築タイミングで)画像を読みに行くため、lazyloadが無駄になる、というより多重リクエストをかけるため逆にページが重くなる(最悪の場合ね)ことがありました。

ただ、最新版ではそこが改善されています。
具体的には、画像のsrcタグにダミー画像を指定し、data-original属性に本来読み込ませたい画像パスを指定するというもの。これによって、ページ表示直後はダミー画像(1x1pxの白い画像とかでOK)を表示し、順次リクエストをかけて正しい画像を読み込むという処理ができるようになりました。

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

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