簡易表記法を採用した Web ページ生成ツールの作成

簡易表記法を採用した Web ページ生成ツールの作成
Development of the Web Page Formation Tool by Abbreviated Notation
三輪 昭生
Akio MIWA
キーワード CSS / 尐数派色覚 / アクセシビリティ
KEY WORDS CSS / achromat / accessibility
１ はじめに
今日，インターネットの普及により，自治体，公
共団体など公共性の高い組織では，Web ページを使
って積極的な情報提供を活発に行っている．これら
のインターネットによる情報提供で一番大きな恩恵
を受けているのは，視覚障害者であろう．
これまで，これらの組織団体からの情報提供は，
主として紙媒体を中心としたものが大部分で，一
部，視覚障害者に対しては，点字や音声テープによ
る情報提供があったものの，その情報量は非常に限
られていた．
しかし，現在では，音声ブラウザを使用すること
で，「正しく記述された Web ページ」であれば，必
要なページを自由に読上げさせることが可能とな
り，視覚障害者は，健常者と同等の情報を得ること
が可能になったのである．
だが，Web ページによる情報提供だけで，すべて
の問題が解決するわけではない．というのも音声ブ
ラウザによる閲覧可能な「正しく記述された Web ペ
ージ」がまだまだ尐ないからである．
現在，インターネット上には，以下に挙げるよう
な誤った記述方法が氾濫しており，音声ブラウザで
は，これらの記述を正しく読上げる事ができない．
・一文字毎に文字色を変え目立たせる．
・強制改行をして文章のレイアウトを整える．
・単語の途中に空白を入れ上下の文字幅を調整す
る．
また，文法や記述方法以外にも，配色の問題があ
る．なるべく目立つようにと赤色を多用したり，背
景に派手な画像を入れたページを見かけるが，これ
らのページは尐数派色覚の人や高齢者にとっては，
非常に見難いページとなっている．
特に，日本人では男性の 20 人に 1 人，女性の
400 人に 1 人が色覚に問題を抱えており，日本全体
では約 300 万人近くにもなる．先に述べたようなペ
ージでは，このような人たちには，正しく情報が伝
わっていない可能性がある．
これらの問題に対処するために，Web アクセシビ
リティを規定した日本工業規格(JIS)[1]が平成 16
年に策定された。この規格では，様々な状況を想定
し，web ページの設計，開発，保守および運用にお
いて，配慮すべき事項を規定されている．
しかし，この JIS 規格の中で配慮すべき事項とし
て取り上げられている項目は多岐に渡るので，専門
家以外の人が規格を満たす Web ページを構築するこ
とは容易なことではない．
この問題を解決する方法として，デザイン部分は
専門家に任せ，それぞれの担当者は，各々の専門知
識を生かして文章を執筆に注力することが最善の策
でないかと考えられる．
そこで，今回は，これを実現するために，文章と
デザインを分離した Web ページ生成ツールの作成に
取り組んだ．
まず，配色などの画面デザインについては，予め
定義されている Cascading Style Sheets（カスケ
ーディング・スタイル・シート，CSS）の読み込み
に対応し，元となる CSS の生成については，昨年の
研究テーマとして開発した「アクセシビリティに配
慮したユーザスタイルシート生成ツール」を利用す
ることにした[2]．
また，それぞれの文章の論理的な構造を示すため
の章組み，段落，強調，箇条書きなどの表現は，オ
ブジェクト指向スクリプト言語 ruby で採用されて
いる RD(Ruby Document format)という簡易表記法
を採用した．
2 開発，実行環境
開発には，WindowsXP 上に導入した Java を使用
した．設定ツールの作成には，Java の統合開発環
境である NetBeans を用いた．また，Java のグラフ
ィカルユーザーインターフェイス (GUI) を構築す
るためのツールキットである Swing をベースにし
て，パーツのレイアウトをデザインした．以下に使
用した開発環境とツールのバージョンを示す．
開発環境
Microsoft Windows XP [Version 5.1.2600]
開発ツール
java version "1.6.0_01"
NetBeans IDE 5.5 (Build 200612070100)
ruby 1.8.5 (2006-12-25 patchlevel 12)
ruby ライブラリ
RDtool
version 0.6.20
rd2html-ext version 0.1.4
3 開発したツールの解説
3.1 起動
このツールを起動すると，図１のようなシンプル
なエディタ画面が立ち上がる．通常のワープロのよ
うに，自由に編集が可能である．
図２のような複製，切り取り，貼付けの機能を備
えている．
これらを使って，RD の表記法に従った文章を記
述していく．
図1
3.2 機能
3.2.1 入力補完
RD の表記法は，シンプルで覚えやすく可読性が
高いが，初心者がすべての機能を使いこなすことは
難しい．そこで，図３のように，使用頻度の高いタ
グを，メニューから選択し，簡単に挿入できるよう
にした．
また，インライン表記の場合は，予め，修飾した
い文字列を選択状態にしてから，目的の修飾をメニ
ューから選ぶと，自動的に，タグで囲まれた状態に
なる．現在，挿入可能なタグは，以下の通りであ
る．





見出し 大，中，小
リンク
画像
リスト 番号付き，番号無し
インライン
強調
プログラムコード
メタ変数
キーボード
用語の指定
脚注
フォーマット抑制
メインウィンドウ
図2
編集機能
図3
挿入機能
3.2.2 スタイルシート指定
メイン画面の上部に，スタイルシートを指定する
テキストフィールドがある．ここに CSS ファイルの
名前を記述しておくと，HTML への変換時に，この
スタイルシートの情報が反映される．
ここで，使用するスタイルシートは，前年度に開
発した「高齢者，視覚障害者用ユーザスタイルシー
ト生成ツール」で生成したものが使える．
また，インターネットで公開されている tDiary
という日記公開ツール用に作られたテーマのデータ
を流用することも可能である．
3.2.3 HTML への変換
必要な文書を入力後，メイン画面の下部にある
[変換]ボタンをクリックすると，変換が行われ，図
４の HTML ウィンドウにその結果が表示される．
3.2.4 変換結果の確認
HTML ウィンドウの下部にある[Browser View]ボ
タンをボタンをクリックすると，OS に設定されて
いる標準ブラウザが呼び出されて，その結果が表示
される．この結果を確認し，必要であれば，テキス
トの入力と修正－>変換－>結果の表示と内容の確認
という作業を繰り返しながら，必要なページを構築
していく．
3.2.5 HTML ファイルへの保存
前述の作業を繰り返し，文章の構成とレイアウト
の確認が終わったら，HTML ウィンドウのファイル
(F)-保存(S)で，拡張子を”.html”としたファイル
名を付けてデータを保存する．
4 まとめ
ウェブアクセシビリティの向上のために，
RD(Ruby Document format)という簡易表記法を採用
した Web ページ生成ツールを作成した．
行頭に，何種類かの記号を加えることで，文章の
構造を決め，特定の文字列で領域を囲むことで文字
列の修飾を行うことが可能で，使用頻度の高い記号
は，メニューから選択して，簡単に挿入できるよう
にした．
また，スタイルシートを自由に差し替えること
で，デザインの検証も可能である．
しかし，今回作成したツールでは，1 ページ単位
でのページ生成しかできない．HTML の最大の特徴
は，ハイパーリンクを使った相互参照の機能にある
ので，複数のページ間のリンクを管理する機能を付
け加えたい．
また，さらに，その延長として，閲覧しているペ
ージがウェブサイトの構造のどこに位置しているか
把握できるように階層などの構造を示した情報を提
供できるようにしたい．これは，先に述べた JIS 規
格[1]に求められている機能である．
今後は，今回作成したようなツールを使い，情報
弱者に配慮し，ウェブアクセシビリティの基本を学
んで，積極的な情報提供をするサイトが増えてくる
ことに期待をしたい．
参考文献
[1]日本工業標準調査会(2004)：日本工業規格 高
齢者・障害者等配慮設計指針 - 情報通信における
機器，ソフトウェア及びサービス - 第 3 部:ウェブ
コンテンツ JIS X 8341-3:2004，日本規格協会
図4
HTML への変換結果
[2]三輪：“高齢者，視覚障害者用ユーザスタイル
シート生成ツールの作成”, 岡山県工業技術センタ
ー報告第 32 号, 岡山県工業技術センター(2006).
pp.75-77.