1  固定幅デザインの是非

ネタ元の 760pxと言う新基準 と言う記事は捨て置くとして、固定幅、と言うよりは「一行当たりの文字数/幅がある程度狭いページ」の方が読みやすい気がするというのは個人的な感覚としては同意できる部分だったりする。恐らくは文章を読むときの視線移動量が少なくて済むからだろう。現実に「読むサイトごとに読みやすいようにブラウザの幅を調整する」かと言われると普通の人はそんなことはしないだろうし。

2  固定幅と可変幅、それぞれの優位性?

とは言え一方で liquid (fluid) な可変幅デザインの方が「理に適っている」のは全くその通りだと思う。ユーザがどういう環境で閲覧しているか分からない以上、ユーザ側で調整可能な構造にしておくのはリーズナブルだからだ。だが、高アクセスを稼いでいる世の(主には)ニュースサイトにも固定幅を採用しているサイトが少なくないことには、何かしらの理由があると思う。現実には「自分のサイトの見栄えをある程度予測の範囲に留めておきたい」と言う商用デザイン的な意思が働いている可能性も否めないが、この辺りの比較論をユーザビリティの観点から論じた資料はないものだろうか。

3  CSS の Switch

ともあれ、ユーザに見た目を任せる事は理に適ってると思う。なので「固定幅か全幅かもユーザに選んでもらおう」と言う方針にしてみた。ちょっと調べてみると alternate stylesheet を使う方法 でうまく行きそうだ。StyleSheet Switcher と言うのを見付けたので、link rel のロジックだけ少し直して使わせて貰う。という事で検索窓の左側に >| |< と |< >| と言う 2つのリンクを作ってみた。片方は幅を 800px 固定にし、もう片方は width 100% にする。Script 内部で Cookie も使っているようで、一度設定した幅は保存されるようだ。

4  CSS Switch の仕組み

仕組みとしてはメインの fixed width な stylesheet の他に、 alternate stylesheet として styles-fluid.css と言う css ファイルを作り、link 要素の title を fluid とする。

<link rel="stylesheet" href="/templates/styles-site.css" media="screen" type="text/css" />
<link rel="alternate stylesheet" href="/templates/styles-fluid.css" media="screen" type="text/css" title="fluid" />
<script type="text/javascript" src="/templates/scripts.js"></script>

JavaScript scripts.js の対応部分はこんな感じになる。

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {
    if(a.getAttribute('rel')) {
      if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) {
        a.disabled = true;
        if(a.getAttribute('title') == title) a.disabled = false;
      }
    }
  }
}

document から link 要素を探し、title がついているものは一度全て disable する。title 属性が無いものはそのまま使われる。onclick イベントで setActiveStyleSheet() に引数で与えられた title の付いた link 要素が active になり、css が読み込まれ、そちらの width が適用される。

実際にこれを switch する a 要素を用意する。広げる方には引数として alternate css に付けた title を用いる。

<a href="#" onclick="setActiveStyleSheet('',1);return false;" title="Switch to fixed-width version">&gt;|&nbsp;|&lt;</a>
<a href="#" onclick="setActiveStyleSheet('fluid',1);return false;" title="Switch to full-width version">|&lt;&nbsp;&gt;|</a>

ついでというか 800px 幅の画像だと広げたときに間抜けだったので幅広の画像に代えてみた。とりあえずまともに動いている気がする。

1  Firefox と Space Saver Keyboard II

うちには IBM の SpaceSaver Keyboard II があるのだが、古い Opera や IE 以外では青ボタン+トラックポイントでのスクロールが効かなかった。Firefox で使えるようにしたいと思ってググると、2ch のスレ で Scroll by Track Point と言う記事の URI が紹介されていた。これを読んで改めて google://firefox+tp4table.dat で検索してみると、もじら組のフォーラム に該当記事を発見。tp4table.dat もしくは tp4scrol.dat と言うテキストファイルに、アプリケーション毎のイベントハンドラ設定を入れてやる必要があるらしい。

%SYSTEM_ROOT%\system32\tp4table.dat
; Firefox
*,*,firefox.exe,*,*,MozillaWindowClass,WheelStd,0,9

これを入れて再起動したら、無事にポインタでのスクロールが出来るようになった。

2  Extensions

ついでに Extensions の update をしていたら chrome への登録に失敗したとかで UI に文字化けが。また DTD errorか。という事で extensions の最新のフォルダを余所に移して再起動し、Extensions を入れ直した。ついでなのであまり使っていなかった拡張を削除して整理。現在は

TabMix, Session Saver, AdBlock, Mouse Gesture, SmoothWheel, ChromEdit, Image Zoom, XUL/Migemo, Live HTTP Header, Web Developer, ForecastFox, GMail Notifier

といった辺り。TabMix と Session Saver のお陰で大分使いやすくなった。

3  del.icio.us と Live Bookmark

日本語で利用方法を解説しているサイトとかないのかな。はてなの del.icio.us keyword にツール系の情報は色々あるんだけど。自前の newstalk と一緒に del.icio.us にも bookmark を投げるように手を入れるつもり。