視覚情報保障機能を備えたメディア教材配信システム 筑波技術大学　保健科学部　情報システム学科1）　保健学科鍼灸学専攻2）　保健学科理学療法学専攻3） 伊藤 裕二1）　池宗 佐知子2）　東條 正典2）　成島 朋美2）　漆畑 俊哉3）　佐久間 亨3）　三宅 輝久1）　大越 教夫2）　小野 束1） 要旨：近年、教育現場では、その効果から映像、音声などのメディア教材が使われることが多くなり、メディア教材の編集機器などが安価で入手できるようになってきた。しかし、有益な内容のメディア教材でも使い勝手が良くなければ学習効果は期待できない。目的の教材を素早く見つけることができ（検索性）、見たい・聞きたい箇所は繰り返し、重要でない箇所はスキップして再生（トリック再生）できることが効果を上げるために重要であると考える。視覚に障害をもつ学生を対象とした場合、高い検索性とトリック再生を実現するためには、良好な操作性と多様な見え方に対応できる情報保障機能を兼ね備えたユーザーインターフェースが必要である。今回、そのような要件を満たすオンラインメディア配信システムの開発を試みた。 キーワード：メディア教材配信，情報保障，ユーザーインターフェース，検索性，トリック再生 1．はじめに 　近年、情報伝達手段としてのインターネットの利便性から教育現場においてもWebを活用した教育（Web-based Training: WBT）システムを導入する機会が増えてきている。特に、デジタル化された映像や音声などのメディア教材をネットワーク経由で配信する事例が多数報告されている[1][2]。教科書に代表される紙ベースの教材を用いて講義を行う場合においても、補助的な教材として学生の自学自習用にデジタルメディアを活用することも考えられる。しかし、視覚障害者が利用する場合は情報保障機能を備えたユーザーインターフェースを実装する必要があり、システム構成が複雑化するなどの理由から開発が進んでいないのが現状である。そこで我々は、以前から取組んでいたサーバー・クライアント協調設計による情報保障機能を有するWebプラットフォーム[3][4]を利用して、視覚障害学生向けメディア教材配信システムの開発を試みた。 2．要求仕様 　一般的なメディア教材配信システムでは、目的の教材を素早く見つけることができ（検索性）、見たい・聞きたい箇所は繰り返し、重要でない箇所はスキップして再生（トリック再生）できることが学習効果を上げるために重要であると考える。視覚に障害をもつ学生を対象とした場合、高い検索性とトリック再生を実現するためには、良好な操作性と多様な見え方に対応できる情報保障機能を兼ね備えたユーザーインターフェース（UI）が必要である。システムの使用者別に３つのUI:1）全盲者対応UI、2）弱視者対応UI、3）教員用UIに区分し、各UIに必要な機能・性能を考え、表1のように要求仕様をまとめた。 　まず、1）の全盲者対応UIに関しては、教材の検索段階から再生時の操作まで場面に応じた音声案内を提供できることが必要である。全盲者は、主に音声メディアを利用することを前提としている。映像メディアにおいても音声部分の利用は可能であるが、その内容が映像に依存するものは対象外となる。音声案内機能に関しては、従来市販のスクリーンリーダーにより対応することがほとんどである。しかし、スクリーンリーダーではアプリケーション依存の詳細な設定（例えば、特定のキーを押すとアプリケーションの操作案内を読み上げる）ができないため、システム独自の音声案内機能が必要であると考えた。2）の弱視者対応UIに関しては、Web画面の文字サイズや背景色、映像コンテンツの表示サイズなどが調整できることが求められる。映像コンテンツ自体の配色を調整できれば望ましいが、映像信号のみから自動調整するのは技術的に困難である。将来的には、映像のもととなるPowerPointなどの段階で複数のマスターを用意して配色バリエーションをもたせる方法などで対応する必要がある。3）の教員用UIについては、教員が教材の登録、更新を行うのにWebに関する特別な知識を要しないことを指標とした。教員に関しても登録時の操作において視覚情報保障を考慮する。 表1　要求仕様一覧 3．開発環境 　システム構成を図1に示す。PC環境としては、教育現場で採用実績のあるWindows PC（OSはサーバー側Windows Server 2003、クライアント側Windows XP）を用いた。また、基礎プラットフォームとして以前開発した視覚情報保障機能を備えたWebプラットフォームを用いた。FreeStyle Wiki（FS Wiki） [5]をベースに開発したこのプラットフォームは汎用Webブラウザを用いて操作可能であるため、ユーザー側では専用ソフトウェアをインストールする必要がない。本案件では、メディア教材の登録及び検索、ユーザー設定の部分を拡張機能モジュール（プラグインと呼ぶ）として追加する。開発時、運用時共、プラットフォームをWindows Server（WebサーバーはIIS）上でCGI（common gate interface）として動作させた。開発言語はWebプラットフォームにあわせてPerlを採用し、クライアント側のUIを強化するためにJavaScriptを用いた。また、メディアとそのメタ情報を蓄積するためのデータベースとしては、MySQLを利用した。映像・音声メディアとしては、Windows環境に親和性の高いWMV（Windows Media Video）、WMA（Windows Media Audio）を使い、クライアント側でWMP（Windows Media Player）により再生する。そして、音声案内を実現するための音声合成エンジン（形態素解析を含む）としてマイクロソフト社が提供しているMS Agentをクライアント側PCにインストールした。 図1　システム構成（概念図） 4．開発 　今回開発するシステムの操作画面（以下、ページと呼ぶ）は４種類、すなわち、登録、視聴、再生、ユーザー設定で構成される。登録ページでは教員がメディア教材の登録・更新を行う。視聴ページでは学生が登録されたメディア教材の中から目的のものを検索する。そして、選択された教材はし、再生ページにおいてメディア再生が行われる。以下、教材登録・更新、教材一覧・検索、メディア再生の順で説明する。ユーザー設定に関しては、教材一覧・検索の中で簡単に触れる。 4.1　教材登録・更新 　教員またはその代理者（担当職員など）がメディア教材を登録する。目的の教材を効率的に検索するためには、教材の属性情報を適切に設定する必要がある。本システムで設定した教材の属性情報を表2に示す。検索時は、タイトル、内容・対象、作者の３つの属性情報を使う。登録の際には、上記3つに更新時に有益となるファイル名と登録年月日を加える。登録したデータはデータベースに蓄積され、各レコード（つまり、各教材）にこれらの属性情報が対応付けされる。 　登録操作時の画面表示を図2に示す。教材を登録するには、図2（a）に示す登録のメインページから新規ボタンを押して、教材データ登録画面（図2（b））に移行する。登録時は、内容・対象（入力随意）以外の項目に関して入力は必須である。サーバーにアップロードするメディアファイルを選択するには図2（b）のファイル名のセル右側の参照ボタンを押すとローカルフォルダのファイル選択窓が開くので、そこから指定する。登録した教材データを更新する場合は、図2（a）の番号カラムから該当する番号（リンクになっている）を選択すると図2（c）に示す教材データ更新・削除画面に移行する。データを更新するには、更新したいフィールドを上書き（メディアファイルの場合は参照ボタンを押してファイル選択窓から新しいファイルを選択する）した後、下部の更新ボタンを押す。また、登録した教材データを削除するには、図2（c）下部の削除ボタンを押すと該当データが削除される。 4.2　教材一覧・検索 　教員によって登録されたメディア教材の中から学生が所望のものを見つけ出すために一覧・検索機能が必要である。一覧・検索関連の画面表示（視聴ページ）を図3に示す。図3（a）に示す視聴ページは登録メインページと似ているが、検索に重要でないファイル名及び登録年月日を省いている。また、番号欄はメディアファイルへのリンクとなっており、選択すると再生が始まる仕組みである。上部の検索窓にクエリー（検索ワード）を入力し、右側の検索ボタンを押すと検索結果が一覧表示される。操作を簡単にするために、すべてのフィールドとクエリーとの部分マッチングを行う”曖昧検索”を行うように設計した。いま、図3（b）に示すように「大越」というクエリーを入力し、検索ボタンを押すと、図3（c）に示す検索結果（レスポンス）が得られる。 　視聴ページは学生がメインで使うことになるので、情報保障が不可欠となる。まず、全盲者に対しては、クエリー入力、全件数、教材の属性情報を音声案内する。教材の属性情報の案内では、例えば図3（a）の番号00001の場合、「番号00001のデータへのリンク タイトル 神経内科学 中間試験 その１ 内容・対象 鍼灸学専攻第○学年前期 作者大越」と読み上げる。次の教材データへの移動はTabキー（Shift+Tabキ―で１つ前に）で行い、所望の教材のところでEnterキーを押すとメディアの再生が開始する。 　弱視者に対しては、ユーザー情報にスタイルシート（Cascading Style Sheet: CSS）を設定できるようにし、個人毎に好みの配色や文字サイズでWebコンテンツを表示できるようにした。そして、弱視者の多様な見え方に対応すべく、数種の代表的な配色（例えば、背景:黒色、文字:白色）を定義したCSSファイルを選択肢として準備した。また、文字サイズは配色と独立に、body要素=1em（文字 M の高さ）を100%として60%～300%に設定可能である。ユーザー設定画面を図4（a）に示す。音声案内を有効にした場合、話速を毎分210語～毎分250語まで5刻みで設定できるようにした。この機構を用いて、背景:黒色、文字:白色を指定した場合のブラウザ表示を図4（b）に示す（比較対象として図3（a）は背景:灰色、文字:黒色）。 4.3　メディア再生 　一覧・検索画面から所望の教材を選択し、Enterキーを押すと図5に示すようにメディアの再生が開始する。デフォルトの表示サイズは教材の解像度にあわせてVGA（640 x 480画素）程度に設定している。 　教材としてのメディアを再生する場合、重要個所を繰り返し聞くための巻き戻しや早送りなどのトリック再生が不可欠である。全盲者が操作し易くするため、トリック再生はすべてキー操作で行う設計とした。トリック再生の状態遷移を図6に示す。 　図6では、矢印線は両端の２つの状態間が指定されたキー（線の中央）入力によって遷移することを示している。使用するキーはホームポジション近傍のものを選び、例外はあるが右手と左手で処理内容が対になる（例えば、左右の人差し指で巻き戻しと早送り）ように設定した。長方形で示した状態に遷移した場合、元の状態に戻るためのキーが入力されるまで同じ状態が継続する。一方、楕円で示した状態に遷移した場合、処理後自動的に元の状態に戻る。また、視聴ページに戻るEnterキー、操作案内を聞くＨキーは全画面再生以外のどの状態からでも有効である。 　トリック再生以外に視聴支援のために再生位置記憶機能を実装した。メディア教材は数十分から数時間程度の長さがあるので、再生を開始した後、最後まで見終わる前に中断することも考えられる。その場合、中断した位置を記憶して次回同じ教材を選択したときに、その位置から再生を開始するというものである。実装にはCookie（Webサイトの提供者が、Webブラウザを通じてクライアント側コンピュータに一時的にデータを書き込んで保存させるしくみ）を利用した。停止状態で視聴が中断された場合に限り、ユーザー名とメディア教材番号からなるラベルに中断位置情報（厳密には先頭からの秒数）を一定の有効期限（暫定で30日とした）を設定してCookieに書き込む。そして、メディア教材が選択されるとユーザー名とメディア教材番号からなるラベルを持つCookieを検索し、存在した場合には、そのCookieが示す位置から再生を開始する。 図2　登録操作画面 （a）登録メインページ （b）教材データ登録 （c）教材データ更新・削除 図3　一覧・検索関連の画面表示 （a）視聴ページ （b）クエリーによる検索 （c）検索結果 図4　視覚情報保障の設定 （a）ユーザー設定画面 （b）背景:黒色、文字:白色の表示例 図5　メディア再生画面 図6　トリック再生の状態遷移 5．制約・問題点及び今後の対応 　今回開発したメディア配信システムはWindows PC（OSはサーバー、クライアント側共にWindows XP以降、サーバー側OSはWindows Serverが望ましい、ネットワークカード付属）とネットワーク環境さえあれば移植可能である。現時点では開発したJavaScript関数の一部に互換性の問題があるためWebブラウザはIE（Internet Explorer）に限定される。しかし、学内等での運用では使用するクライアントPCを自前で設定できるので問題ないと考える。 6．まとめ 　視覚に障害をもつ学生が使うことを想定し、音声案内や画面調整などの情報保障機能を備えた動画・音声メディアのオンライン配信システムを開発した。今後は、試験運用を通してユーザーとなる学生、教員から操作性に関するフィードバックを得て、より使いやすいシステムに改善してゆく予定である。 謝辞 　本研究は平成22年度文部科学省特別経費「視覚に障害をもつ医療系学生のための教育高度化改善事業」の支援を受けて実施した。 参考文献 [1] 布施，東海林 他:eラーニングにおけるハイビジョン授業ビデオ教材配信のためのシステム開発，2006 PCカンファレンス 462, 2006. [2] 杉山，梅崎 他: オンライン学習大学ネットワークにおける教材配信システムの開発，メディア教育研究 5(1): 19-26, 2008. [3] Y. Itoh, T. Urushihata, et al.: Development of Web Crawler and Database System for Visually Impaired Students - An Application to Career Support Web System -, NTUT Education of Disabilities 8: 13-20, 2010. [4] 伊藤，成島 他: 視覚障害学生用Webアプリケーション構築のためのプラットフォームの開発，FIT2010 K-056, 2010. [5] FreeStyle Wiki: http://fswiki.sourceforge.jp/cgi-bin/wiki.cgi Online Media Material Distribution System with Information Assurance Capabilities for Visually Impaired People ITOH Yuji1), IKEMUNE Sachiko2), TOJO Masanori2), NARUSHIMA Tomomi2), URUSHIHATA Toshiya3), SAKUMA Toru3), MIYAKE Teruhisa1), OHKOSHI Norio2), ONO Tsukasa1) 1)Department of Computer Science 2)Course of Acupuncture and Moxibustion, Department of Health 3)Course of Physical Therapy, Department of Health Faculty of Health Sciences, Tsukuba University of Technology Abstract: This report introduces a media material distribution system for visually impaired students. Currently, the media materials are becoming pervasive in educational institutions, and their effectiveness has been widely recognized. We were thus able to purchase inexpensive equipment such as an authoring system for creating the media materials. Even if we have valuable materials at hand, the students cannot make full use of them unless the materials are properly distributed and presented. We assume that in order to develop an effective material distribution system, it is essential to ensure the following: 1) the desired material should be easily retrieved from a collection of materials such as database (i.e., findability) and 2) trick-play functions that enable the students to easily access the required information in the chosen material by fast-forwarding, fast-rewinding, etc., should be provided. The systems intended for visually impaired students must have a well-designed user interface that provides a vision-awared machine interface and information assurance in order to meet the above requirements. Keywords: media material distribution, information assurance, user interface, findability, trick-play functions