5.HTMLビューアの開発

前章の実験から，HTML教材のようなオンスクリーンの教材がロービジョンにとって印刷物と同等の読書速度が保て，さらに検索時間で短縮が望めることが分かった．そこで，HTML教材に手軽にCSSを適用してレイアウトを設定するツール（HTMLビューア）の開発に取り組んだ．

図２　HTMLビューアの構造

5.1.HTMLビューアへの要求

HTMLビューアはHTML教材のレイアウトを簡単かつ自由に設定できるツールを目指している．したがって，HTMLビューアは以下の要求を満たすものでなければならない．

  1. 設定可能なレイアウト：読書に関する先行研究に基づき，文字サイズ，配色，文字間隔，行間隔，１行文字数，フォントについて，自由に設定できるようにする．
  2. キーボード操作が中心：ロービジョン者は視覚に様々な障害を持っているため，マウス操作が苦手な者が多くいる．したがって，キーボード操作によるレイアウトの設定を可能にする．
  3. 導入が簡単：ソフトのインストールなどを行わなくても利用できるようにする．
  4. スタンドアロンでも使用可能：利用者全員がWEB教材をインターネットで見られるわけではないので，CD-ROMなどで利用できるようにする．
  5. CSSによる調整：多くのHTML文書で利用できるように，レイアウトの調整にはCSSを利用する．

    6. 5.2.HTMLビューアの構造

    開発に使用した言語はJavascriptである．同言語はスタンドアロンでも利用でき，キーボード操作を実現し，インストールの作業を行わなくても利用できるなどのメリットがある．開発環境は，基本ソフトとしてWindows98，ブラウザソフトとしてInternet Explorer5.0を利用した．

    ビューアの構造を図２に示す．本システムは表示部と設定部に分かれている．設定部は，表６に示すように，８つの設定ページから構成される．１ページで，１つのレイアウトに関するパラメータが変更できるようになっている．各設定ページではレイアウト情報を数値化し，８桁のレイアウトデータとして記録している．レイアウトデータのそれぞれのページが担当している部分を書き換えてcookieに保存する．８桁のうちそれぞれの設定内容を記録する桁数を，表６の「CSSファイル名」の列に１以上の数字で示す．このレイアウトデータは，図２では66421822となっている．図３では，そのレイアウトデータの表示結果を示す．

    表示部は，１つのJavascriptファイルを各HTMLファイルが参照することにより，各HTMLファイル内でプログラムが動作しレイアウトを再現するようになっている．設定部でcookieに保存された８桁のレイアウトデータから，各数値に対応するCSSファイルを呼び出し，レイアウトを再現する．文字サイズの設定に必要な数だけCSSファイルをあらかじめ用意する仕組みになっている．ビューアはcookieに保存されているレイアウトデータを参照して，該当するCSSファイルを呼び出し，組み合わせてレイアウトを再現する．

    cookieにレイアウトデータが格納されるため，個人情報はクライアントマシンで管理できる．すなわち，同じ端末で同じログイン名でログインすれば，既に設定しておいた状態と同じレイアウトでHTML教材を読むことができる．また，cookieのファイルはログイン名を変えることで別に作成される．１台のコンピュータを数人で使用することの多い学校に適した方法である．

    図３　レイアウトデータ66421822による表示例

    利用者は，本HTMLビューアを組み込んだWEBページを参照すればHTMLビューアを意識する必要はない．HTMLビューアが稼動しているページで，スペースキーを押すと，設定部の１ページ目（文字サイズ設定ページ）へ移動する．設定ページのユーザインターフェイスを図４に示す．

    図４　設定ページのユーザインターフェイス 設定ページでは左右カーソルキーで設定ページ間の移動，上下カーソルキーで各パラメータの変更，エンターキーで決定し元のページへ戻ることができる．

    本HTMLビューアは5.1で列記した要求を満たすことができた．このHTMLビューアとHTML教材やHTML教科書を組み合わせることで，ロービジョン一人一人の視覚特性に応じたレイアウトを手軽に設定できる環境が整ったことになる．次章ではこれらのツールを用いた実践を紹介し，臨床の中でその妥当性について検討していく．

    表６　設定ページの構成とレイアウトデータ66421822の場合のCSSファイルの記述例
    ページ数設定内容CSSファイル名CSSファイル内容
    １文字サイズ60000000.cssbody,input{31pt}
    ２全体の配色06000000.cssbody,A,hr{background-color:black ; color:white}
    ３行間隔00400000.cssbody{line-height:180%}
    ４文字間隔*00020000.cssbody{letter-spacing:0.2em}
    ５１行の長さ00001000.cssbody{margin:0% 3%}
    ６アンカー文字色00000800.cssA{color:yellow} A:hover{color:white;background-color:black}
    ７図の配色*00000020.cssimg{filter:invert()}
    ８フォント00000002.cssbody{font-family:ＭＳ ゴシック,Osaka}