最近 www.lowreal.net のページの作り直しをしている。もともと、1ページだけ好き勝手いろいろやってみるためのものだったので大分適当だったのを、もうちょいちゃんと自己紹介用のページに使えるようにするという狙いと、あとまぁやっぱ好き勝手またやってみたくなったという感じで、久しぶりに HTML のマークアップから CSS、 JS までいろいろと使った。

今回は、普通に内容情報を変更をするとともに、ページ単体でのスマートフォン (Mobile Webkit = iPhone, Android) 対応と、実験的に巨大スクリーン対応を入れている。

スマートフォン対応は大抵のまともなサイトは最近入れはじめているし、小さいスクリーン用に別の情報コントロールを入れるのはまぁ正しいと思うので、適度にそうやった。このページは twitter からの流入が一番多いし意味もある程度はありそう。

巨大スクリーン対応は、デカイ画面に全画面にすると余白があきすぎで滑稽になるのがあまりにもあれなので (かつてはまぁリキッドレイアウトならば、利用者が適時ウィンドウサイズを変えればいいだろうと思っていたけれども、そうはいっても、という感じなので)、特定サイズ以上のウィンドウサイズになったら、ページ全体を拡大するように (1240 を基準として、拡大率が 1.4 倍以上になるなら適用 = 1920程度から拡大される) してみた。(WebKit, Gecko のみ) この対応が正しい対応かどうかはちゃんと考えきれてはいない。フォントサイズが固定ではなく、エラスティックレイアウトなので、ピクセル基準ではなくフォントサイズ基準にすべきだけどとりあえず。

PC で開いたとき、一番上の画像を切り替わるようにしてみたけど、なんとなく実装したらおもいのほか簡単にできてびっくりした。簡単に管理したいなーと思ったので、切り替わる画像は fotolife の特定 ID の RSS からとっていて、あとは fotolife にアップロードしていくだけで切り替わる写真が変化していくので、管理も楽な感じになった。fotolife のフィードなら何でもいけるのでブログパーツみたいにできそう。