音声ブラウザと相性の良いHTMLを作る(3)。

さらに続き。
今回は、記号、日付、数式、そしてイメージマップについて考えてみる。

関連エントリー

• 音声ブラウザと相性の良いHTMLを作る(1)。
• 音声ブラウザと相性の良いHTMLを作る(2)。
• 音声ブラウザと相性の良いHTMLを作る(4)。
• 音声ブラウザと相性の良いHTMLを作る(5)。

記号、日付、数式について

(とある)音声ブラウザはデフォルトの設定で記号を読み上げない。

いちいち読み上げたら鬱陶しいというところもあるのだが、以下のような場合は問題になる。

例1 リンクが認識できないし、移動もできない。

<a href="http://example.com">◎</a>

例2 記号に意味を持たせている。例えば営業カレンダーなんかで良くある場合。

▲＝休館日
◎＝営業日
※＝イベント開催日

少々鬱陶しくなるかもしれないが、こういった記号はやはり読み上げられるようにテキストにしてあげた方が良いような気がする。

とはいえ、記号が何に使われているのかの判断は (これまた文脈解析でもしなければ) 不可能だ。※(あすたりすく)がイベント開催日を表しているのか注釈なのか、どう判断すりゃいいんだ?

判断できそうなものもある。例えば数式や日付など。

$str =~ s/((?:¥G|>)[^<]*?)(^0|[1-9])((?:[0-9]|(?:[¥+|＋|¥-|-|/|*|=])|¥s){10,}[0-9])(.*?)/$1.&math_to_str($2.$3).$4/eg;

0以外の数字で始まる(<-悩ましいところだけど電話番号を拾ってしまうので...いや逆に電話番号を識別すればいいのか?)数字と演算記号とスペースで構成される10文字(<-適当)以上の文字列で、且つ数字で終了しているものを置換対象とする。

あと、一応 &math_to_str の中で =(イコール) を含むかどうかチェック。住所の中に 1-2-3 とか出てくるので。

数式の場合は「ー」は「ひく」あるいは「まいなす」に変換してやれば良い（その他の場合は変換しない、とすれば良いか。

また、数式の中の「＝」は「いこーる」または「わ」(<-「は」ではなくて) とする。

日付フォーマットも年月日形式に変換する。
「ごぶんのにせんなな じゅうはち」とか読み上げられた日にゃぁ、何が何だか。

$str =~ s/((?:¥G|>)[^<]*?)(?<![0-9]|[a-z]|[A-Z]|"|'|¥/)([0-9]{4})¥/([0-9]{1,2})¥/([0-9]{1,2})(?![0-9]|[a-z]|[A-Z]|¥/)/$1.&checkdate($2,$3,$4,$6)/eg;

タグの中を置換すると /2007/5/18/post.html みたいな(MTとかで良くあるパターン)ものをひっかけてしまうので、タグの外であることと "/ あたりで始まる場合はURL等の可能性があるので除外する。

また、マッチした後に実在する日付かどうか一応チェック。2007/02/30 は日付じゃない! と判断することで精度を高める(ようにできるだけ努力)。

※このあたり実は強くないので添削求む!

記号を「よみ」に変換することで逆に今度は視覚的に理解しづらくなる。 「音声ブラウザでできるだけ読み上げやすいHTML」がコンセプトではあるけれども、文字を大きくしたり配色を変えてみたり色んな用途に使えるエンジンにしたい、という思いもあって (色んなスキンを適用できるってのも単純に楽しいし) 、この切り分けはCSSで行えるようにクラス名を振ることにした。

<span class="naked_sign">×</span><span class="naked_aural">かける</span>

現状はここまで。

▲ページの先頭へ -> さんかくぺーじの先頭へ

とかになってしまうが、回避する策はあるだろうか... 要素内容が「記号とスペース」のみの場合だけ変換する? う〜んいまひとつかもしれない。

---

イメージマップについて

イメージマップについても正しく記述していればちゃんと読み上げてくれる。 但し、AREA要素を使う場合はALT属性が必要。

ということで変換しなくても良いのだが画像を削除あるいは外部リンクに変換する関係でそのままではまずかろう。

単にAREA要素をリンクに変換すれば使えるのだが、一連のひとかたまりのリンクということでUL〜/ULの形式に変換する。

以下は Yahoo! Japan の例

<img src="http://i.yimg.jp/images/main13.gif" width=675 height="60" usemap="#Map" border=0 alt="Yahoo! JAPAN">
<map name="Map">
<area shape="rect" coords="194,1,430,57" href="/r/lg">
<area shape="rect" coords="626,1,670,16" href="/r/ht" alt="ヘルプ" title="ヘルプ">
<area shape="rect" coords="627,22,672,40" href="/r/et" alt="登録情報">
...
</map>

変換後のHTML

[画像:<a href="/naked.cgi/default/http://i.yimg.jp/images/main13.gif">Yahoo! JAPAN</a>]
<ul class="image_map">
<li><a href="/naked.cgi/default/http://yahoo.co.jp/r/lg">/r/lg</a></li>
<li><a href="/naked.cgi/default/http://yahoo.co.jp/r/ht">ヘルプ</a></li>
<li><a href="/naked.cgi/default/http://yahoo.co.jp/r/et">登録情報</a></li>
...
</ul>

問題は1つめのリンク。ALT属性がない。ALT属性がないものはぶった切ってしまえ! と思ったけれどイメージマップしか置いていないページ (ALT属性もないし) をこのあいだ目にしたので、仕方ない。リンク先のパスをALTの代用とすることにした。

現状はこのようにしているが一点問題があって、MAP要素はコード上のどこに置かれるかわからないのだ。

<map name="menu">
<area... />
<area... />
</map>

<p>以下のメニューから選択してください。<p>

<p><img src...usemap="#menu" /><p>

そのまま変換すると「以下のメニュー」じゃなくなるのだ。位置関係がおかしくなってしまう。

アンカーで飛ばすか、あるいはスマートなのはこんな感じか。

<dl>
<dt>[イメージマップ:<a href="/naked.cgi/default/http://i.yimg.jp/images/main13.gif">Yahoo! JAPAN</a>]</dt>
<dd>
<ul>
<li><a href="/naked.cgi/default/http://yahoo.co.jp/r/lg">/r/lg</a></li>
<li><a href="/naked.cgi/default/http://yahoo.co.jp/r/ht">ヘルプ</a></li>
<li><a href="/naked.cgi/default/http://yahoo.co.jp/r/et">登録情報</a></li>
...
</ul>
</dd>
</dl>

「イメージマップ」って言葉がわかりやすいかどうかが気にはなるが。

---

以下、テスト用

• 読み上げないテキスト
• 読み上げるテキスト
• 挿入されたテキスト(日付指定あり)
• 削除されたテキスト(日付指定あり)
• 挿入されたテキスト(日付指定なし)
• 削除されたテキスト(日付指定なし)

テストビュー: デフォルト 音声ブラウザ 携帯ブラウザ 黒地に白 淡い紫 大きな文字

次は、↑この件について。

関連エントリー

• 音声ブラウザと相性の良いHTMLを作る(1)。
• 音声ブラウザと相性の良いHTMLを作る(2)。
• 音声ブラウザと相性の良いHTMLを作る(4)。
• 音声ブラウザと相性の良いHTMLを作る(5)。