Twitterでつぶやき

これは Twitter(ツィッター)というウェブ・サービスです


2002年 8月 13日 (火)

ここしばらく,ウェブというか HTML というか,もっと俗っぽくいえば“ホームページ”について考えることが多くなった。最初のきっかけは OperaMozilla といったブラウザ(ユーザ・エージェント:UA)を使うようになったことだ。以前から特定の環境,具体的には MSIE と Netscape 4.x でしか閲覧できない頁 ――そうした頁の多くは“推奨閲覧環境”を謳っている―― というものへの疑問を少なからず持っていたのだが,W3C の勧告する HTMLCSS に適合した頁を(「正しく」というと語弊があるので)素直に表示しうる閲覧環境を整えたことで特にその疑問を強くした。そしてまた最近, xyzzy というエディタの拡張機能(www-mode)によるテキスト・ベースのブラウザを(自分の頁の表示確認の意味もあって)使うようになり,これがまた考えるきっかけとなった。今日は,その辺りの話をしてみよう。

グラフィック系ブラウザ(Opera)で見たasahi.comの画面

まずこちらの画像(一般的なグラフィック系ブラウザではこのテキストの右に表示)をご覧いただこう。このキャプチャー画像は,いわずと知れた asahi.com の(グラフィック・ベースの)ブラウザでの表示である。ブラウザが異なったり設定が異なったりで多少の差異はあるだろうが,おおむねこんな感じだ。最上部にタイトル・バナーを,左右にメニュー項目を配し,真ん中が記事という,ニュース・サイトの見本ともいうべき体裁であり,通常のブラウザで見る限りは見やすくかつ機能的であるといえよう。

しかしながら,これをテキスト・ベースのブラウザで見ると,残念ながらそうはいかない。例えばこの日の記事ないし頁に関していえば,xyzzy + www-mode では 152行目までスクロールさせないとトップ・ニュース(前掲の画像では“日ハムが加工食品……”の部分)の見出しが現れない。また,各記事の個別頁に至っては“地域情報”なるメニューが延々縦に並ぶ結果,なんと 221行目まで目的の記事の見出しが現れないのである(もちろんここでの行数は xyzzy + www-mode でのレンダリングによるもので他のテキスト系ブラウザでは多少異なるだろう。)。僕は使ったことがないのだが,音声で内容を読み上げる UA だと,延々とメニュー項目を聞かされたあとでないと目的の記事に辿り着けないのではなかろうか。こうなると,正直いってこれは大変見づらく,使いづらい。

しかしこれは,何も asahi.com に限ったことではない(もっとも同サイトは,特に左側のメニューが長く顕著なのだが。)。通常我々は(現在用いる言語の法則に従えば),横書きの場合は左から右へ文字を追い,上から下へと行を追うのであって,それに基づいてグラフィック系ブラウザで適切に表示させようとソースを記述すれば「最上部タイトル→左側メニュー→記事」となるのはけだし当然だといえよう(なお,asahi.com のソースを見ると,右側に表示されるメニューも真ん中の記事より先に記述されていることがわかる。)。では,グラフィック系ブラウザでの見映えを重視しつつテキスト系ブラウザ(や音声系UA)をも考慮するにはどのような頁にすればよいか,次の画像をご覧いただきたい。

xyzzy + www-mode で見た拙宅

少々手前味噌だがこの頁の 母屋の表紙頁(いわゆる“ホームページ”)を xyzzy + www-mode で表示した画像である。この頁を一般的なグラフィック系ブラウザで見ると,前述の asahi.com 等と同様,画面の左側に“項目一覧”というメニューが表示されるのだが,画像をよくご覧いただくとわかるように,テキスト系ブラウザではこれが“更新履歴”と“更新日記”よりも後に現れる。実はこの頁,以前はグラフィック系ブラウザでの見映えとでいうところの左上から右下へとソースを記述しており,ゆえにテキスト系ブラウザでも“項目一覧”が最初に表示されていた。しかし,一見さんであれば格別最初に“項目一覧”を必要とするかもしれないが,常連さんはすでにご存じの“項目一覧”よりもむしろ更新に関する情報のほうをより必要とするだろうと考え,CSS を使って現在の形にしたのである。

初めて使ったコンピュータの OS が Windows 95 で,ブラウザが Netscape Navigator 3.x だった(MSIE 2.x も登載されていたがまもなく 3.0 にバージョン・アップした。)。ウェブページを作り出したのは,IBM Homepage Builder 1.0 を使ってだった。HTML の何たるかがまだよくわからなかったころは,例えば Another HTML-lint gateway で「物理的タグではなく論理的タグを用いましょう」(同サイトの解説を参照)というように促されても今一つピンと来なかった。――しかしさまざまな UA,とりわけテキスト・ベースのものや音声読み上げのものがあると知るにつれ,“HTML”が本来意味するところである「論理的に印(マーク)をつけて文書の構造を表す」ことの重要性がわかってきた。それで自分が作っているウェブを,(前述の件だけでなくさまざまな点で)現在のような形に変えてきたのだ。

こうしたマークアップやスタイル化の作業は,所詮は自己満足かもしれない。自己満足という点では Flash 等を使って見映えだけにこだわる(そのため“推奨閲覧環境”を限定する)のも同じだろうが,それならより多くの人に見て(あるいは聞いて)もらえたほうが有用だろう。確かに,(アクセス解析によれば)僕のウェブを訪れる人の約 9割が MSIE を使っているようだが,残り 1割の人だって僕ごときが提供する情報を必要としているかもしれないし,そのような少数派の訪問者にも情報を提供することが,当該訪問者の,ひいては社会全体の利益に資するかもしれないのだから。


この記事に付されたタグ


この記事へのコメントはまだありません

※ 現在コメントは受け付けていません。


トラックバックの送信

  • あなたのブログがトラックバック機能を備えている場合は記事作成画面等から上記 URL に Ping を送信してください。
  • 手動でトラックバックする場合は下記のフォームからあなたのブログおよびその記事に関する情報を送信してください。手動送信時には別のウィンドウが開きます。元のウィンドウ(記事表示画面)をリロードしてトラックバックが反映されていれば処理がなされています。別に開いたウィンドウは送信処理後は閉じても構いません。


.