« 2009年02月 | メイン | 2009年04月 »

2009年03月31日

『Webアクセシビリティ』 ジム・サッチャー他 (毎日コミュニケーションズ)

Webアクセシビリティ →bookwebで購入

 インターネットにつないだパソコンは障碍者にとって重要なコミュニケーション手段となっている。聴覚に障碍があったり、歩行に障碍のある人はパソコンによって健常者と対等に仕事ができる。視覚に障碍のある人にとってもパソコンは社会とつながるかけがえのない手段だ。

 視覚障碍者にパソコンが使えるのかと疑問に思う人がいるかもしれないが、画面に表示されるテキストを読みあげるソフトが NECのPC98の時代(20年以上前だ)から開発されていて、視覚障碍者もパソコンをバリバリ使っていたのである。キーボードの配置さえ憶えてしまえば、コマンドを打ちこんでパソコンを操作することにかけては、視覚障碍者も健常者も変わりはないのだ。パソコン通信の時代には大手BBSには必ず視覚障碍者のためのコーナーがあって、さかんに情報交換がおこなわれていたものだった。

 ところが、WindowsとWebの時代になると情況が一変する。マウスでクリックするだけで操作できるWindowsやWebの登場は健常者にとっては福音だったが、視覚障碍者にはかえって不便になったのだ。視覚障碍者にとってはキーボードからコマンドを打ちこむ操作法の方がありがたかったのである。

 視覚障碍者がWebページを利用できるように、Webページの内容を読みあげる音声ブラウザが開発されている。地の文は男性の声で、リンクの張ってある語句は女性の声で読みあげるので、リンク先に飛ぶことは可能だが、視線を自由に動かせる健常者と異なり、音声ブラウザでは最初から順に読みあげていくのを待たなければならない。

 パッと見てリンク先にパッと飛ぶなどということはできないから、画面上部や左側にメニューのあるページでは、本文にはいる前にメニューの項目を延々と聞かされる破目になる。

 小物の画像を多用しているページもやっかいだ。画像には alt属性といって説明を埋めこむことができるが、alt属性がはいっていないと「画像」とだけ読みあげられるので、単なるボタンであっても何か意味のある画像ではないかと気を回さなければならなくなる。

 もっと困るのは表組レイアウトで作られたページである。眼で見れば文章が縦方向につづいていくのか、横方向につづいていくのかは一目瞭然だが、音声ブラウザは表を横方向に読みあげていくので、縦方向につづく文章だと支離滅裂になるのである。

 多くのWebページは視覚障碍者にとって使いやすいとはいえない。一部には音声ブラウザ専用のページを設けているサイトもあるが、複数の体裁のページを用意するには追加コストがかかり、継続的に更新されるかどうか心もとない。一つのページが健常者にとっとも、視覚障碍者にとっても使いやすいことが理想であり、また最も現実的な解決法なのである。

 今、視覚障害を例にとったが、手の不自由な人や高齢者にとっても、同じことがいえる。老眼になると小さな字が読めなくなるが、表組レイアウトのページのほとんどでは、ブラウザの[表示]メニューから文字を大きくしようとしても、文字の大きさが変わらない。表組レイアウトは諸悪の根源である。

 障碍をもった人でもアクセスできることをアクセシビリティ、アクセシビリティを考慮して作られたWebページをユニバーサルWebという。

 アクセシビリティについては早くから研究されており、Webの技術標準を策定しているW3Cは WAI という下部機関を設置してユニバーサルWebのためのガイドラインを公開している。日本でも JIS X 8341 というアクセシビリティのJISが作られており(8341は「ヤサシイ」の語呂合わせ)、その第三編ではユニバーサルWebのための指針が定められている。

 欧米では公的機関のWebページはアクセシビリティを満たさなければならないのはもちろん、リンク先のページもアクセシビリティが要求されている。ユニバーサルWebになっていないと、公的機関からリンクを張ってもらえないところまで来ているのである。日本もいずれそうなるだろう。

 わたしが関係している日本ペンクラブの「電子文藝館」でも、視覚障害をもった読者の方から改善を求める意見をいただいたことからユニバーサルWeb化の検討をはじめている。幸い、会員に JIS X 8341 の策定にかかわった関根千佳氏がおられたので、関根氏が代表をつとめるユーディットに簡易チェックをお願いした。

 結果は惨憺たるものだった。指摘された欠陥のかなりの部分は手直ししたが、一番のネックであるフレーム構造は依然として残っている。近々独自ドメインに引越す予定なので、それまでは大がかりな改造は控えておこうということになっているが、フレーム構造はやはりまずかろう。

 アクセシビリティについては10冊ほど本が出ているが、多くはどこをどう直したらいいかというハウツー本で、よくも悪くも対症療法的である。

 本書は600頁を超える大冊だが、1/3はアメリカのリハビリ法など、アクセシビリティに関する欧米の法律と社会政策に割かれている。アクセシビリティの社会的意義と影響についてこれだけ踏みこんだ本は他にないと思う。

 巻末には JIS X 8341 の解説と日本語音声ブラウザの現状を紹介した付録がついている他、本文の随所に訳注が挿入され、彼我の事情の違いと、原著が出た後の最新情報を伝えている。

 欧米の音声ブラウザ環境は日本とは較べものにならないくらい進歩しているらしい。驚いたのはAcrobat Readerに知らないうちに読みあげ機能がついていたことだ([表示]メニューから呼びだす)。日本語未対応なので日本語のpdfは読みあげられないが、英語は行またぎの部分も含めてならかに読みあげてくれる。日本が技術力はあるのに、なぜこういうところに使わないのだろう。

→bookwebで購入

『現場のプロから学ぶXHTML+CSS』 CSS Nite編 (毎日コミュニケーションズ)

現場のプロから学ぶXHTML+CSS →bookwebで購入

 Webデザイナーのための再教育本はたくさん出ているが、一歩進んだ内容の本を紹介しよう。CSS NiteというWeb技術関係のセミナー会社が編纂した『現場のプロから学ぶXHTML+CSS』で、『Web標準の教科書』の益子貴寛氏ら七人の専門家が執筆している。

 多彩な執筆者が参加しているだけに、話題は多岐にわたっており、読者の関心の持ち方によってさまざまな面を見せる本になっている。

 自分自身のサイトならうまく表示されないブラウザがあっても気にしないで通してきたが(悪いのはブラウザの方だと思っている)、他人様のサイトではそうも言っていられない。2001年に電子文藝館の立ちあげに係わった時はスタイルシートを使うといっても、まだそんなに高度なことはやっていなかったので、Netscape4でレイアウトがおかしくなる程度だったが、今回、お手伝いした立教大学文芸・思想専修サイトの場合は段組レイアウトやオーバーラップメニュー等々をやっているので、ブラウザの互換性が問題になった。IEとそれ以外のモダンブラウザの違いは予想していたが、W3Cに忠実とされるモダンブラウザでもいろいろと理屈に合わないことが出てくるのである。

 本書を読んで、どんなブラウザでも同一の表示結果がえられるようにプロは苦労しているのだなということがわかった。完全に同一の表示になるはずはないが、同一に近づけるためのテクニックがいろいろ蓄積されているのである。

 たとえば、リセットスタイルという技法が紹介されている。絵を描く前に下地を白く塗っておくとムラなく仕上がるが、それと同じように、ブラウザに組みこまれた表示スタイルを無効するためのスタイルシートをまず読みこませ、その後、メインのスタイルシートを適用するわけである。

 リセットスタイルと似た発想で、マージンを設定する時はパッディングを0に設定し、パッディングを設定する時はマージンの方を0に設定するというワザも役に立った。

 文章量のすくないページだと、ブラウザ右端のスクロールバーが表示されず、ウィンドウの横幅がその分広がるが、横幅が変わらないようにするために、スクロールバーを強制的に表示させるワザも紹介されている。

 もちろん、どんなに手をつくしても完全に同一に表示されるわけではないし、お荷物のブラウザまでカバーしようとすると時間もコストもかかる。サイトの性格と予算によって、どこかで線引きをしなければならない。どのブラウザがどのような問題をかかえ、どんな対策があるか、どれだけ手間がかかるか、経験的にどこで線を引いたらいいかが本書では随所でふれられている。実務経験の豊富な人の言葉は説得力がある。

 もう一つ興味を引かれたのはメディア別のスタイルシート、特に印刷用スタイルシートだ。

 現在、Webページはパソコンで見るだけのものではなくなっている。フルブラウザをそなえたケータイ電話は当たり前になっているし、インターネット対応のTVも増えている。視覚障碍者のための音声ブラウザもある。プリンタに出力することもパソコン以外の表示法にはいるだろう。

 印刷用のスタイルシートを画面用とは別に指定することによって不要な要素を印刷からはずしたり、レイアウトをシンプルにしたり、画面表示にはゴシック体、印刷には明朝体というような使いわけをしようというわけだ。

 印刷するとリンクはただの下線強調になってしまうが、リンクの張られた語句の後ろにリンク先の URL を出力させるワザがあるのは知らなかった。

 こういうおいしそうな機能を知ると、自分のサイトでも使ってみたくなる。数年前からWebに飽きていて更新する意欲が減退しているが、本書によって久しぶりにカツをいれられた格好である。

→bookwebで購入

2009年03月30日

『Webデザイン 知らないと困る現場の新常識100』 こもりまさあき他 (MdNコーポレーション)

Webデザイン 知らないと困る現場の新常識100 →bookwebで購入

 今、書店に行くと、古い作り方でやってきたWebデザイナーに新しいWeb技術を教える本が山のように積んである。

 古い作り方というのは、枠線を非表示にした見えない表でWebページをまず四角形に仕切り、その四角形の中に文章を流しこんでいくやり方である。凝ったデザインを作るには四角形の中にさらに表を作って小さい四角形に仕切り、画面を細かく分割していく。これを表組レイアウトという。縦方向には若干の自由度があるが、横方向の寸法はピクセル単位でガチガチに固めなければならない。ブラウザには文字の大きさを変える機能がついているが、表組レイアウトではほとんどの場合、レイアウトが崩れないように文字の大きさを決め打ちにしている。

 これに対して新しい作り方では、文章を内容に即してブロックわけし、各ブロックをどのように表示するかをスタイルシートというルールで記述する。スタイルシートは別のファイルとして独立させ、Webページ本体からリンクする形をとることが多いから、同じWebページでも、スタイルシートをとりかえるとレイアウトががらりと変わる。blogをやっている人はさまざまなレイアウトを選べる「スキン」という設定項目を御存知と思うが、「スキン」を変えるというのはリンクするスタイルシートを変えているのである。

 ガチガチに固めた表組レイアウトからスタイルシートへの転換は、マルクス主義の統制経済から市場経済への転換に匹敵する思想革命の様相を呈している。わたしはアマチュアなのでギャラリーの位置から楽しんで見ているが、Webデザインを仕事にしている人にとっては新技術への対応は死活問題になっているようである。Webデザイナーのための再教育本がたくさん出版される所以である。

 この方面ではすぐれた本がたくさん出ているようだが、わたしは四人の専門家による『Webデザイン 知らないと困る現場の新常識100』を選んだ。頁をぱらぱらめくったところ、気になる項目がたくさん目にはいってきたからで、他の本ときちんと比較したわけではない。

 本書は一つの話題を見開き二頁で解説するという体裁をとっている。説明は1500字前後で、それに簡単なサンプルコードと、それがどう表示されるかという画面写真がつく。

 通して読んだ時にはずいぶん不親切な本だなと思ったが、サンプルコードを実際に打ちこんでみると、そんなことはないとわかった。打ちこんでいるうちに、なにをやっているかがわかるくらいの、ちょっとしたテクニックを紹介しているのである。

 ちょっとしたテクニックといっても、スタイルシートだけでサブメニューを出す方法とか、リストを横並びに表示する方法、角丸の出し方など、使いでのありそうな話題がとりあげられていて、こんな風にやるのかと実におもしろかった。新しいサイトでも早速使わせてもらった。

 最後の方には見積もりを出す上での注意点とか、お金を払ってもらえない時の対処法とかプロのためのアドバイスが書かれていて、へえーと思った。

→bookwebで購入

2009年03月29日

『Web標準の教科書』 益子貴寛 (秀和システム)

Web標準の教科書 →bookwebで購入

 あるサイトの構築をまかされることになり、久しぶりにホームページの作り方を勉強し、浦島太郎の気分を味わった。

 わたしはWebデザインを仕事にしているわけではなく、単なるアマチュアだが、これまで二度、HTML関係の本をまとめて読んだことがある。

 一度目は「ほら貝」を立ちあげて一年ほどたった1996年頃だ。「ほら貝」をはじめた当時はろくな入門書もツールもなく、「本文を<H4>で囲むと読みやすくなります」などと書いた本まであったくらいで滅茶苦茶だった。HTMLに標準があるという意識もなく、他サイトのソースを見て覚えたタグをエディタでしこしこ埋めこむという作り方だった。しかし、ページが増えてくるとそれでは済まなくなり、本格的な本で勉強しようと思いたったのだ。

 何冊か読んだが、長く手もとにおいて頼りにしたのはローラ・リメイの『HTML入門』正続だった。二冊で千頁を超えたが、アメリカのマニュアル文化の粋というべき本で、初歩から高度な技法まで体系的に記述されており、頭の中がきれいに整理されていく快感を味わった。スタイルシートについてもすでにふれられていて、行間を広げて読みやすくできたのはうれしかった。リメイ本は1998年に第二版が出て、こちらにもお世話になった。

 二度目は日本ペンクラブの電子文藝館の立ちあげにかかわった2001年頃で、当時議論がかまびすしくなっていたスタイルシートについて勉強し直した。賛否両論あったのは理想としては立派でも、実務に使えるほどには熟していなかったからである。

 あれこれ読んだ中で一番教えられたのはすみけんたろう氏の『スタイルシートWebデザイン』と神崎正英氏の『ユニバーサルHTML/XHTML』だった。とくにすみ本は繰り返し読んだ。

 すみ本は情報量はあまり多くなく、リファレンスとしても使いにくいが、スタイルシートとHTMLがどういうものか、見かけと構造の分離がなぜ必要か、一刀両断で示してくれた。すでに絶版であり内容的には賞味期限が切れているが、HTMLの思想を解説した部分は今でも古くなっていないと思う。幸いすみ氏のサイトでHTML版が全文公開されているので、関心のある方は読むとよいだろう。

 すみ氏や神崎氏が示したような考え方はつい最近まで現実離れした理想主義、あるいは過激な原理主義と見なされていたらしく、プロの世界では表組レイアウトが主流だった。スタイルシートを使うとレイアウトが滅茶苦茶になる Netscape4が残っていたこともあるが、スタイルシートの約束する技術がブラウザに十分実装されておらず、できることに限界があったからでもある。実際、スタイルシートで作ったWebページには独特のスタイルシート臭さがあり、一目でわかったものだ。実務に使えるようなツールがなかったことも大きかったろう。

 ところが昨年あたりから流れが変わり、新聞など大手サイトが表組レイアウトからスタイルシート方式に一斉に転換した。見かけは同じなのでHTMLの知識のない人は気がついていないかもしれないが、中味は最新のWeb技術に入れ換わっているのである。

 表組ツールとして有名だったDreamweaverは今や完全にスタイルシート方式に転向したし、マイクロソフトもExpression Webという本格的なツールを出してきたが、サーチエンジンで上位にランクされるにはHTMLの思想にしたがってマークアップした方が有利だと知られるようになったことが一番大きいかもしれない。

 さて本書であるが、著者の益子貴寛氏は最新のWeb技術を知らせるCYBER@GARDENというサイトの主宰者で、その世界では有名な人のようである。『Web標準の教科書』と銘打つだけあって、XTHML+CSS時代の指針となる本で、最初の二つの章でHTMLの理念を解説した後、第三章と第四章では新時代の技法を体系的に記述している。HTMLの思想は論理的に一貫しているが、そうはいっても理屈あわないトラブルはつきもので、第五章と第六章は対症療法的な解決法を紹介している。第七章はアクセシビリティ、第八章はセマンティクWebという次世代の話題の紹介である。どちらかと言えば、ゼロからWeb技術を学ぶ人向けの本と言えるが、目配りとバランス感覚はみごとだ。リメイ本やすみ本と同じように、本書も長く手もとに置くことになりそうだ。

→bookwebで購入