タッチアップしてみよう: HTML仕様解釈の違いを吸収する
では実際に非互換性から生じた表示の崩れをタッチアップして正しく表示させる事例を見てみましょう。問題の特定から、ユーザースクリプトのプログラミング例まで、順番に見ていきます。
問題の例
このサンプルページは、テーブル用タグの属性に関する解釈の違いから問題が生じている例です。このページの作者の意図は、各段落が折り返して表示され、右端の縦線よりも左側にすべてのコンテンツを表示するというものでした。しかしFirefoxではそのようなレンダリング結果になっていません。
<td>タグの属性として、width属性がピクセル単位で指定されており、かつnowrap属性も指定されている場合に問題が発生します。IEでは、nowrapよりもwidthが優先され、指定の幅を越えるような長い文章は折り返されて表示されます。一方Firefoxでは、nowrapが優先されます。その結果、作成者の意図に反して横に長くはみだして表示されてしまうのです。
問題箇所の特定 ～ DOMインスペクタの活用
問題の箇所はHTMLのソースを追いかけて特定することもできますが、DOMインスペクタ拡張機能を活用すれば、より効率的に作業を進められます（図8）。
DOMインスペクタを起動し、左上にあるボタン
を押してから、ブラウザ上に表示されている問題の箇所をクリックします。すると、クリックした箇所に対応するDOMノードがDOMインスペクタ内部で表示されます。この操作によって、HTMLソース中の問題箇所を素早く特定することができます。
属性の変更によるデバッグ
さて問題箇所が特定できたら、その修正を考えます。DOMインスペクタで問題の箇所を特定できれば、その属性値の情報や関連するCSSの情報を調べることができます。DOMインスペクタの右側に、詳しい情報が表示されるので、それが問題解決のヒントになるのです。
この問題の例では、<td>タグの属性としてwidthとnowrapの両方が指定されていることが分かります。
ここで、問題となっている属性値の上で右クリックしてみましょう。Editメニューを選ぶと、その属性の値を修正することができます。また右クリックからDeleteメニューを選択することで、その属性自体を削除することも可能です。
DOMインスペクタを用いてnowrap属性を削除することで、折り返されて表示されることを確認することができるでしょう。
ユーザースクリプトの作成
DOMインスペクタを上手に活用して、問題の特定と原因が分かりました。そこで、この問題を解決するためのユーザースクリプトを作成してみます。次のスクリプトは、Greasemonkeyを利用してこの問題をタッチアップするためのスクリプトです。
// ==UserScript== // @name Conflicting "nowrap" Remover // @description correct the nowrap and width conflict problem in table tags // @namespace http://www.touchupweb.org/~iiojun/ // @include http://www.touchupweb.org/ja/sample/ // ==/UserScript== var tdtags = document.getElementsByTagName("td"); for (i = 0; i < tdtags.length; i++) { if (!tdtags[i].hasAttribute("nowrap")) continue; if (!tdtags[i].hasAttribute("width")) continue; var wid = tdtags[i].getAttribute("width"); // it is ok if width is non-null and specified with % if (wid && wid.match(/.*\%$/)) continue; tdtags[i].removeAttribute("nowrap"); }
このスクリプトでは、まずgetElementsByTagName()メソッドによって<td>タグを抽出しています。そして続くforループで、それらのタグについて問題がないかどうかをチェックし、問題がある場合はその修正を試みています。
forループの内部では、nowrap属性とwidth属性が定義されているかどうかをチェックします。もしこれらに関する矛盾がなければ、問題ありません。width属性が指定されていても、ピクセル単位ではなく％で指定されていれば問題ないことが分かっています。widthがピクセル単位で指定されており、さらにnowrapが指定されている場合は、removeAttribute()を用いてnowrap属性を削除することで、widthとnowrapの矛盾を回避し、表示レイアウトの崩れをタッチアップすることができるのです。
TouchUpWebプロジェクト
このように、Greasemonkeyを利用することでIEに特化したWebコンテンツをFirefoxなどからも利用できるように修正できることが分かりました。ただし、GreasemonkeyのユーザースクリプトはURLを指定して適用するため、問題のあるコンテンツに遭遇したときにそれを修正するスクリプトが存在するかどうかは、自ら探さなければなりません。
これを自動化する試みが、TouchUpWebプロジェクトです。TouchUpWebプロジェクトでは、これらの問題を修正するスクリプトをデータベースで管理しています。そしてTouchUpWeb拡張機能を利用することで、データベースへの問い合わせからスクリプトのダウンロード、Greasemonkeyを利用したスクリプトの適用による問題の解決までを、自動的に実行することができるようになります。
TouchUpWeb拡張機能
TouchUpWebを使うには、TouchUpWeb拡張機能をインストールする必要があります。TouchUpWeb拡張機能は、TouchUpWebプロジェクトに用意されているダウンロードページから、Greasemonkey拡張機能のインストールと同様の手順でインストールすることができます。なお、TouchUpWeb拡張機能はGreasemonkeyを利用しているので、事前にGreasemonkey拡張機能をインストールしておく必要があります（TouchUpWebプロジェクトでは、日本語化したGreasemonkey拡張機能とTouchUpWeb拡張機能を同時にインストールできるようにした統合パッケージも用意しています）。
表示が崩れていたり、JavaScriptがうまく動かないページを見つけたら、ウィンドウ左下に表示されているTouchUpWeb拡張機能アイコンをクリックしてみましょう（図9）。このアイコンをクリックすることで、TouchUpWeb拡張機能が起動されます。TouchUpWeb拡張機能が起動されると、TouchUpWebサーバに、そのページをタッチアップするスクリプトが登録されているかどうかを問い合わせます。
そのページをタッチアップできるスクリプトがTouchUpWebサーバに登録されている場合、当該スクリプトがダウンロードされます。適用するかどうかを尋ねられるので、問題がなければ適用してみましょう。そのスクリプトを適用して正しく表示されるようになれば成功です。なお、ダウンロードしたスクリプトはGreasemonkeyがスクリプトを格納する領域に保存されるため、2回目からは手動でTouchUpWeb拡張機能を起動する必要はありません。
TouchUpスクリプトの登録
TouchUpWebプロジェクトでは、非互換問題のあるページをタッチアップするTouchUpスクリプトを募集しています。IEに依存するようなコンテンツを修正するスクリプトを書いたら、ぜひTouchUpWebプロジェクトが用意しているBugzillaに登録してください。TouchUpWebプロジェクトのコミッタがそのスクリプトを確認して、問題がなければTouchUpWebサーバのデータベースに登録します。
まとめ
本稿では、Webコンテンツの非互換問題について解説し、その問題を解決する一つの手段としてGreasemonkeyの利用とそのユーザースクリプトの書き方を説明しました。また、そのユーザースクリプトを管理して自動的に適用する機構を実現するTouchUpWebプロジェクトを紹介しました。
なお、TouchUpWebプロジェクトは独立行政法人情報処理推進機構（IPA）の2005年度下期オープンソースソフトウェア活用基盤整備事業の支援を受けて開発されました。現在、プロジェクトはSourceforge.netでもホストされています。TouchUpスクリプトの登録だけでなく、プロジェクトへの参加も歓迎します。興味のある方はぜひ私やプロジェクト関係者もしくはプロジェクトのメーリングリストまでご連絡ください。
