HTMLによる教材作成とその活用

同朋学園本部事務局経理課　河邊憲二

1996.08.19-20 第２８回学習工学セミナー発表

インターネットＷＷＷのための情報提示言語であるＨＴＭＬを利用して作成した
教材を紹介する。ＨＴＭＬを利用することにより生徒でも簡単に情報提示が可能
になり、インターネット上に公開すれば世界中からその情報が利用できる。また
最新のＪＡＶＡアプレットを用いれば、インタラクティブな新しいタイプの教材
をＨＴＭＬで簡単に作成することができる。ここでは、生徒作品の例として昨年
同朋高等学校の文化祭で２年５組が取り組んだ『戦後５０年のデータベース』と
ＪＡＶＡアプレットを利用した『脂肪族炭化水素の立体構造』を紹介する。　　
目次

インターネットとＷＷＷ教材
ＨＴＭＬによる教材作成法
　（１）ＨＴＭＬで教材を作成するのに必要な環境
　（２）スタンドアロンでＷＷＷ教材を利用するのに必要な環境
　（３）ＨＴＭＬによる教材作成法
生徒作品の例『戦後５０年のデータベース』
Javaによる教材例『脂肪族炭化水素の立体構造』
インターネット上での教材開発
謝辞・参考資料

１　インターネットとＷＷＷ教材

　インターネットの普及が始まってその教育利用に関してたくさんの実践がおこなわれるようになった。正確な統計調査があるのかどうかわからないが、印象としては

学校やクラスを紹介するホームページの作成
電子メールやＣＵＳＭを利用した学校間のコミュニケーション実践
ＷＷＷの情報を利用した授業実践

というような利用が一般的である。もちろん授業でインターネットを利用できる環境にないと、こうした授業実践はできない。専用線にサーバーがあればいうことはないのだが、そういう恵まれた環境の学校はまだ少ないのが現状である。同朋高校でもかろうじてダイヤルアップＩＰ接続ができる電話回線があるだけで、同朋高校のホームページは個人加入のプロバイダのスペースを利用している。しかし、ＷＷＷのブラウザが動作可能なパソコンがあれば、スタンドアロンでもＷＷＷ教材を利用することはできる。また、ＨＴＭＬの特徴を生かせばインタラクティブなマルチメディア教材を簡単に作成することができ、授業に利用することができる。もちろん専用線にサーバーの環境が整えば、作成した教材はそのままインターネットで公開することができて、世界中の学校あるいは生徒の自宅からその教材を利用することができるようになる。実際、ＷＷＷで探せば教育利用を目的とした教材のホームページやデータベースも数多く存在する。ただし、残念ながら世界中にあるこうしたページのほとんどは英語で書かれており、内容のレベルも様々である。したがって、すぐに授業で使うというわけにはいかない。そこでやはり自分で使いやすい教材ページを自作していくことが必要になってくる。インターネットの特徴を生かせば、同じような内容の教材を各学校でバラバラに作って利用するというような無駄をなくし、優れた教材を共有することが可能になり、インターネット上に教材センターを構築することも容易である。ＨＴＭＬという共通の仕様で教材を作成するということは、全く新しい学習教材環境を提供することであり、そこから新しい授業形態と学習効果をもたらす可能性が期待できる。

２　ＨＴＭＬによる教材作成法

（１）ＨＴＭＬで教材を作成するのに必要な環境
　　ＨＴＭＬは標準テキストで作成されたデータにタグを埋め込んで、ハイパーテキストの論理構造を記述するもので、文字設定やレイアウト設定、リンク設定をするハイパーテキスト作成用言語である。アンカータグにより、他のテキストページやマルチメディアデータにリンクを張り、ハイパーテキスト化が容易にできるようになっているもので、標準テキストの編集ができる環境であれば教材作成は可能である。最近はパソコンのワープロソフトでもＨＴＭＬツールの付属した製品が標準になりつつあり、エディタなどでもタグ専用のコマンドが用意されていたりするので、そうしたソフトがあれば特別な専用ソフトを購入する必要はない。ただしＨＴＭＬの仕様は現在でも拡張されており、ブラウザ側の影響を大きく受けるようになってきているので、できるだけ最新版を入手する方がよい。ＪＡＶＡなどを利用するならその開発環境も用意しておきたい。さらにブラウザとエディタが動く環境なら、作成した教材の画面を確かめながら編集作業ができるので、より効率よく教材開発ができる。ハードウェア環境としては特に要求されるようなものはないが、開発環境としてメモリやハードディスクに余裕がある方がよい。画像データや音声、ムービーなどを扱うなら、さらにその処理のための環境も必要である。マルチメディア教材を作成するのであれば、ぜひデータ加工用のソフトを用意しておきたい。また、ビデオキャプチャボードやデジタルカメラ、スキャナなどの周辺機器を活用することができればなおよい。

教材作成のための環境

テキストエディタまたはテキストの扱えるワープロ
画像、音声、ムービーなどのデータを扱うソフト
ハードディスクやメモリの容量は多いほどよい
ビデオキャプチャボード、デジタルカメラ、スキャナなどデータ入力用周辺機器
その他必要に応じたＪＡＶＡなどの開発環境

（２）スタンドアロンでＷＷＷ教材を利用するのに必要な環境
　　ＨＴＭＬで作成したＷＷＷ教材を授業などで利用するためには、一般にインターネットに接続しているパソコンが必要だが、ここではスタンドアロンで利用する場合についての利用環境を説明する。この場合、少なくともＨＴＭＬを解釈してデータを表示することができるブラウザが必要である。ブラウザといえば今や世界の８割近いシェアを占めるといわれているのがネットスケープ社のブラウザで、独自にＨＴＭＬを拡張しており、ＪＡＶＡにも対応している。ホームページでもネットスケープの２．０以上を指定するものも非常に多い。ＨＴＭＬはある程度の表現をタグによって指定できるが、実際にはブラウザ側の解釈の仕方が異なっていたり、ブラウザによっては解釈できないタグも存在する場合がある。したがってブラウザによって同じ教材ページが異なって見えるという現象が起きる。これを防ぐには、常に作成側と同じブラウザを利用するか、どのブラウザでも解釈できる最小限のＨＴＭＬタグのみを利用してページを作るかのいずれかになる。現在のところは最新のネットスケープの利用をするのが、表現力の点からいっても最もよいと思われる。また、マルチメディアデータをインラインで表示するヘルパーアプリケーションも、ネットスケープの最新版では、ある程度付属しており追加も容易である。その他に必要な環境としては、ある程度のハードディスク容量とメモリに余裕があればなおよい。教材データの容量が小さければフロッピーディスクでもよいが、マルチメディアデータが入るとどうしてもデータ量が増加するので、ハードディスクはあった方がよい。サウンドボードやグラフィックボードは最近は標準で装備されているが、なければボードを追加する必要がある。

教材表示のための環境

ブラウザソフトの最新版（ネットスケープがよい）
マルチメディアデータを再生表示するためのヘルパーアプリケーションソフト
ハードディスクやメモリの容量は多いほどよい
必要に応じてマルチメディアデータを再生表示するための拡張ボードなど

（３）ＨＴＭＬによる教材作成法
　　ＨＴＭＬでＷＷＷ教材を作成するのは、技術的にはホームページを作成するのと同じことで、特別な技術を必要とすることではない。ただし、教材の内容に応じてどういったページ構成が効果的かを検討しておくことが大切である。データベース的なものにするか、教科書的にマルチメディアデータを構成するか、本格的なハイパーテキストで教材を構成するか、さらに使う側の操作性や利用方法なども考慮して構成を考える必要がある。また、素材となるテキストデータの量や画像データなどの大きさもページを構成する上で重要な要素である。加えてデータを後から追加したり、修正変更がしやすい構成にしておくと便利である。授業で利用することが前提であれば、１時間の授業の指導案に基づき利用できるように、内容と量そしてその提示順序や方法など、教材ページとして特に配慮が必要な場合もある。この点では一般に公開して利用してもらうＷＷＷページとは違う発想も必要になってくる。
　　ア．ＨＴＭＬの使い方
　　　まず、ＨＴＭＬの使い方をある程度マスターしておかなければ教材作成はできない。この点に関して日本語で読める簡単な解説として、『ホームページ作成講座』（河邊）がある。ここで基本的なタグの使い方について解説している。一般的にはページは上から下へ、テキストは左から右へ読まれることを考えた構成をするが、アンカータグによる他のテキストへのリンクを利用することで、ハイパーテキスト化がなされるので、アンカータグの使い方を他のＷＷＷホームページなどを参考にマスターするとよい。
　　イ．素材データの作成
　　　教材を作成するにはまず素材データを作成する。素材データにはテキストの他に
　　　　gif,jpg,bmpなどの画像データ／au,wavなどの音声データ／midiなどの音楽データ
　　　　mov,aviなどのビデオデータ／その他JAVAのclassファイルなど
これらの教材データの作成には対応するソフトを利用する。その際必要に応じてスキャナやビデオキャプチャなどを利用することができる。また、市販のライセンスフリーの素材データを使用してもよい。データ量があまり大きくならないようサイズの縮小、圧縮や減色処理などの処理をする。インターネット上で利用する際は、データ転送にあまり時間がかからないよう配慮するべきである。
　　ウ．教材ページの編集
　　　必要な素材データができたら、テキストデータにＨＴＭＬタグを埋め込みハイパーテキスト化していく。画像などの素材へはアンカータグでリンクを張る。ローカルで使用する教材であれば、その素材のディレクトリとファイル名を指定し、インターネット上の他のページへリンクを張る場合には、プロトコルとリンク先を指定する。この作業はブラウザとエディタを開いて、表示を確認しながら進めると便利である。
　　エ．教材ページ作成の留意点
　　　一般のホームページ作成にもいえることだが、とくに教材ということで、凝った形式の画面構成よりもわかりやすいシンプルな内容構成を工夫するのがよい。また、ハイパーテキストも煩雑に多用するのは避けた方がよい。主題となる内容をかえってあいまいにし理解しにくくなるからである。内容に応じた素材をいかにわかりやすく提示するかという点では、普通の教材プリントなどを作成する場合と共通するところがある。その一方でプリントのような平面的な構成ではなく、多面的なマルチメディア素材を生かしたページ構成の工夫がポイントである。

３　生徒作品の例『戦後５０年のデータベース』

　実際に作成した教材の例として、昨年の同朋高校文化祭で２年５組の生徒が作成した『戦後５０年データベース』を紹介する。これは、昨年私がこのセミナーで発表した『インターネットＷＷＷを使う授業の試み』の中で、紹介した生徒アンケートに協力してくれたクラスの生徒が、文化祭で展示発表をするためにＷＷＷを使うことを思いつき、協力して作成したものである。このデータベースは、戦後５０年間の出来事を資料をもとに分担を決めてワープロでテキストデータを入力し、また、画像はスキャナを使って取り込んだものをトリミングして作成し、それらをフロッピーディスクで集めてから編集したものである。ＨＴＭＬのタグの埋め込み以外の作業は、すべて生徒が分担し、資料をあたって調べたり、学校のパソコンやスキャナを使って作業したものである。文化祭当日は、展示教室の一角にパソコンを持ち込み、見学者に自由に利用してもらえるようにして発表した。
　この企画は、生徒が容易にプレゼンテーションにＷＷＷを使うことができるということを示している。それぞれが別々に分担して調べた結果をひとつのデータベースとしてまとめ上げることで、共同作業によってデータに新しい価値を付加するだけでなく、それを発表することを通じて総合的な学習活動を展開するきっかけになったものである。

４　Javaによる教材例『脂肪族炭化水素の立体構造』

　この教材は、今回発表のために作成したもので、Sun MicrosystemsのJava Appletを用いた例である。内容は高校化学の教科書程度の内容で、この『脂肪族炭化水素の立体構造』は、分子構造を立体的に表示するだけでなく、自由に回転させることでその構造を観察できる点が優れている。こうしたインタラクティブな教材はこれまで専用ソフトを使って単独で利用するものがほとんどであったが、Java言語の登場でプラットホームを選ばず、自由な構成で容易に教材を作成することが可能となった。ここで使用したのは、MoleculeViewerと呼ばれるアプレットで、分子構造を直観的に把握するのに有効である。Java言語を用いてプログラミングすることももちろん可能であるが、アプレット（Applet）と呼ばれるＷＷＷのページに埋め込みが可能な小プログラムを用いることにより、ページにより複雑な動きやインタラクティブな効果を作り出すことができるようになった。アニメーションやワイヤーフレーム、スプレッドシートやグラフなど様々なアプレットがすでに公開されているが、プログラミングしだいでまだまだ教材に利用できる可能性がある。

５　インターネット上での教材開発

　以上紹介してきたように、ＨＴＭＬによって比較的簡単にマルチメディア教材が作成でき、インターネットに接続していないローカルな環境でも教育的に利用価値が充分にあることが示された。もともとインターネット上で利用するためにＨＴＭＬで作成された教材であるので、環境が整えばすぐにＷＷＷサーバーに載せて公開することができる。そうすることにより、誰でもその教材を利用し学習することが可能になる。さらに、ネットワーク上で教材の共同開発をおこなったり、各サーバーに点在する教材データをまとめてリンクを張り、インターネット上にマルチメディア教科書を作成することもできる。すなわちこれまでスタンドアロンでなされてきた教材開発を、ネットワーク上に公開した形でおこなうことが可能になるということである。ＨＴＭＬとブラウザの組み合わせにより、ネットワーク上に共通の教材開発環境を手に入れることができるようになったという点で、これまでの教材開発ソフトとは全く違う新しい開発環境をインターネットは提供している。このことはさらに進んで、学習者の環境さえも変えることになる。これまでの教科書ノート黒板といったお決まりの受け身的授業環境から、自らネットワーク上の教材にアクセスして主体的に学習を進め、その結果をネットワーク上に公開して情報交換をし、より理解を深めていくというような新しいスタイルの学習環境が成立するようになる。そうした学習環境の中で、利用に耐えうるような教材をいかに開発していくかというのが、今後の教材作成者の課題となるであろう。