スタートページ＞ 主張・講演＞ 論文等

授業教材，授業の情報化

自作教材のＷｅｂ化による授業の実践

木暮　仁

２００１．９．３０提出

『東京経営短期大学紀要』第１０集(2002.3)掲載。pp.213-224.

目　次

１　はじめに
２　実践の理由
３　教材作成での工夫
４　今後の課題と期待
５　おわりに
付録　スクリプト［hyoji］の解説

１　はじめに

私は数年来，教材を自作してＷｅｂサイトに掲げ，それをプロジェクタで投影して授業を行なってきた。それに対する学生の評価は図表１に示すように肯定的である（注１）。ここでは，このような授業方法を採用した理由と実践にあたっての工夫を報告する。

学生の評価

図表１　学生の評価

注１：このアンケートは，本学での自己評価の一環として行なっている「授業に関する学生へのアンケート調査」に追加して実施した。「システム設計」「データベース」「情報と社会」の３科目ともに教材は私が作成した。前の２科目は２年生への科目で私が担当し，後の１科目は１年生への科目で他の先生が担当した。

（追記）上記の調査対象は短大生であったが，その後（２００４年１月），横浜商科大学商学部（４年制大学）で２～４年生対象の「情報処理論」（３８名）にアンケートしたところ，次の結果を得た。やや厳しい数値であるが，ほぼ同じような傾向にある。

４年制学生の評価

２　実践の理由

以下，テキストを自作した理由，授業でプロジェクタを用いた理由，ＨＴＭＬで作成した理由およびそれをＷｅｂサイトに掲載した理由にわけて報告する。

２．１　テキストを自作した理由

（１）市販教科書の内容が古い

私の担当する科目のうち，「情報と社会」や「経営と情報」など社会や企業における情報技術の活用に関する分野では技術の発展が急速であり環境が激変する。たとえば，本文の執筆時点は２００１年夏であるが，２０００年夏と比較すると次のような状況の変化が生じている。

「データベース」や「システム設計」などの科目（将来，システム提供者ではなく利用者になる学生を対象にしている）のような比較的進歩の遅い分野でも，データウェアハウス，ビジュアル環境開発，ＥＲＰパッケージなどの発展があり，これらの科目の基本的な事項に大きな影響を与えている。 　古い内容の教科書を用いていたのでは，授業の大半を別途教材で補う必要がある。それならば，教材全体を自作したほうが統一性のある内容になり，学生は理解しやすく，教員は授業がやりやすくなる（注２）。

注２：学生への教育では，いたずらに表面的な変化に流されるのではなく，原理原則を理解させることが必要であるが，それとともに，現在あるいは数年将来の姿を理解させることも必要である。たとえば，インターネット以前と以後では情報システムの体系そのものが変化しているし，ＥＲＰパッケージの利用はシステム開発に関する基本的な考え方も変化させている。情報技術を活用する立場では，このような変化は一時的なものではなく原理原則が変化しているのである。

（２）市販教科書と授業のアンバランス

本学は短大であり，２年間で必要な事項をカバーさせる必要である。また，セメスタ制を採用しており半年で自己完結した内容にする必要がある。さらに，学生の科目選択の自由度も高いので，連続した科目設定をするのは不適切である。

市販教科書を用いたのでは，そのかなりの部分を省略し，しかも，それ以外の事項を他の教材で補わなければならない。学生からすれば，授業で使わないのに高い図書を購入させらることになる。まして，数冊の教科書を購入させることは不適切である。

２．２　プロジェクタを用いた理由

（１）学外での経験

私は１９９８年まで民間企業にいたのだが，ペーパーレスに厳しい環境であり，発表資料の配布は極度に制限されていた。発表資料はいつでも参照したり再利用するために，デジタル化してサーバに保管するようにしていた。そのために，数人の会議ですらプロジェクタを用いる風潮があった。これは特定の企業に限ったことではなく，むしろ一般的な形態であろう。社外・学外の講演もかなりしているが，１０年近くプロジェクタを用いない講演をしたことがない。

企業では，発表者が丁寧に板書きして参加者がノートをするようなことは稀である。最近は営業担当者が訪問先でプレゼンテーションを効果的に行なうために，携帯用のプロジェクタすら普及し始めている。これから社会に巣立つ学生には，そこでの環境に慣れさせておくことも必要であろう。

（２）板書きの問題点

社会人を相手に発表するときには，よしんば板書きをすることがあっても，単に単語だけを書くとか，抽象的な関係図を書く程度である。ところが学生は教員の板書きをノートに丸写ししたがるので，懇切丁寧な文章や図表を板書きしなければならない（注３）。私は文字や図を書くのが苦手で悪筆だし遅い。それをコマごとに同じことをやらされたのでは，授業時間の大半をそれに費やすことになる。　先のアンケート結果にもあるように，プロジェクタを用いることにより，文字や図表がわかりやすくなるし，授業の流れが円滑になる。

注３：学生はノートに書くことによって覚えるということもあるが，むしろノートを取ることに時間をかけてしまい，考えたり理解することをなおざりにしていないだろうか。そもそもテキストを自作することにより，学生にノートを取らせる事項は既にテキストに記述してあるし，私が担当しているような科目では，暗記をすることよりも自分で考えて理解するほうが重要である。授業ではよりよく理解させるために，資料を提示したり口頭で関連事例や体験などを話したいのである。

２．３　ＨＴＭＬで作成した理由

（１）PowerPointによる授業の問題点

プロジェクタによるプレゼンテーションでは，資料をPowerPoint（以下ＰＰと略記）で作成するのが一般的であるが，これは授業用教材あるいは自習用教材として用いるのでは，次のように不適切なことがある。

（２）ＨＴＭＬによる解決

それに対して，ＨＴＭＬで作成したＷｅｂページをプリントしたものを学生にテキストとして配布して，そのＷｅｂページを投影しながら授業をすることにより，上記の問題点がかなり回避できるだけでなく，次のような利点もある。なお，授業を円滑にするためにいくつかの工夫をしたが，それについては後で詳述する。

しかし，すべての教材をＨＴＭＬにするのは不適切なこともある。たとえば，ある図表の上に他の図表を重ねていくというような，アニメーション効果を取り入れるのは，ＨＴＭＬよりもＰＰのほうが作成しやすい。ケースバイケースでツールを使い分けるべきである。

２．４　Ｗｅｂサイトに掲載した理由

当然，授業を受けている学生が自宅でも学習しやすくすることが主目的である。授業では時間の制約があり，伝えたい内容の一部しか取り扱うことができないし，自習環境では理解を深めるためにより多くの教材を必要とする。しかし，教材のすべてをプリントして配布するのは資源の浪費であり，それを解決するにはＷｅｂサイトへの掲載が適している。

また，学外の人でこの分野に関心を持つ人への支援をすることも目的である。実際に，Ｗｅｂサイトに掲載したことにより，他学の学生や社会人からも質問や意見を電子メールで受け取ることもある。同サイトにはテキストだけでなく学会等の論文や雑誌掲載のエッセイなども掲げているので区分が不明確であるが，テキストを掲げた１９９８年以降３年間で約１００通のメールを受信している。その大半はページに関する感想や社内教育での利用の許可問合せであるが，なかには私の誤認を指摘いただき，修正に役立ったものもある。

なお，私はこのような教材は他者と共有化して共同で改善することが重要だと思っている。その観点からも，より多数の人に開示することが望ましく，それにはＷｅｂページでの公開は効果的な手段である。

３　教材作成での工夫

実際の教材は次のＷｅｂサイトに掲げてあるので参照されたい。
　　学外からアクセスするとき：http://www.kogures.com/hitoshi/webtext/index.html
　　学内でのイントラネット：　http://cosmos.tnc-ipd.ac.jp/~kogure/jugyo/webtext/index.html
　　（このページからではこちらから入れる。）

ここで「webtext」ディレクトリには下記のモジュールやスクリプト等が入れてあり，各科目のシラバスや授業スケジュール等は「jugyo」の下の他ディレクトリにある。

なお，以下の工夫は逐次的に行なってきたので，そのサイトにある各ページのすべてに適用されているのではないことをお断りしておく。

３．１　全体の構成での工夫

（１）モジュール化

教材を科目ごとに作成するのではなく，各テーマに分解したモジュールにすることを考えた。モジュール化することにより，次のような利点がある。

このような観点ではできるだけ細分化するのが望ましいし，Ｗｅｂページはそれに適している。しかし，この教材をテキストとしてプリントし配布することを前提とすると，各ページで改ページするために全体のページ数が多くなってしまうので，あまり細分化するのは不適切である。

それを解決するには独立したページを一つのページに結合させる手段があればよいのであるが，後述のようにその手段を見出せないでいる。現在では，原則として１回の授業分を１～２のページにする程度で妥協している。

（２）索引での工夫

文中でのキーワードから関連したページにリンクを貼るのは当然であるが，多くの場所にリンクさせたいことがある。また，個々のキーワードごとに個別にリンクしていたのでは，その拡張が困難になる。それを解決するために，図表２のような工夫をした。

  1. 「キーワード集」を作成した。ここにはキーワードを見出しとして，目的のリンク先へのリンクが記述されている。
  2. 本文中のリンク個所から直接に目的の場所にリンクするのではなく，いったんキーワード集での該当キーワード個所にリンクする。
  3. すると，キーワード集の該当部分が別ウィンドウに表示される。そのとき，元ウィンドウの邪魔にならないように，ツールバーを非表示にしてウィンドウサイズを小さくするなどの工夫をした。

  4. そのキーワード集のウィンドウを見て適切なリンク先を指定すればよい。



図表２　キーワードのリンク方法

（３）参考ＵＲＬ

モジュールごとに，練習問題や参考文献を示すのは当然であるが，参考文献を示しても学生に多数の図書を購入させたり図書館に同じ図書を多数常備させたりすることはできないので，現実には学生に「参考図書を読んで・・・」という指導ができない。そこで参考文献の替わりに，参考となるＷｅｂページのＵＲＬを掲げることにした。これならば，全員にそれを読むことを強制することができる。

３．２　ページ表示での工夫

ここでの環境は，ＷｅｂサーバではＣＧＩは利用できず，クライアント側ではブラウザだけがあればよい環境を想定する。

（１）配布テキストと表示画面の切り替え

配布テキストでは，枚数を抑えるために過度な図表の表示は避ける必要があるし，モノクロにしないとコピー費用が増大する。ところがそれをそのまま授業で表示したのでは単調になるので，表示画面ではカラー化したりデザインに工夫したりするほうが好ましい。その切り替えを簡単にするには，カラーやデザインなどの指定をできるだけＣＳＳ（カスケード・スタイルシート）にして，表示用とプリント用のＣＳＳを用意するのが効果的である。

些細なことではあるが，Ｗｅｂページでは著者紹介などのリンク，著者へのメールアドレス，改訂履歴などが必要であるが，配布テキストでは不要である。これらも表示用とプリント用のスクリプトファイルを用意することにより容易に切り替えられる。

（２）表示・非表示の切り替え

授業時にリンク先を表示するとき，元のウィンドウとリンク先のウィンドウの両方を同時に見えるようにしておくことが望ましい。それには［新しいウィンドウで開く］で開くこともできるが，それでは元のウィンドウが隠れてしまう。

これを回避するには，図表３のように元の画面の内部に表示させるほうが適切なこともある。それを実現するためにＪａｖａスクリプト［hyoji］を作成した（付録参照）。ページが最初にロードされたときは図表３のＡのようになる。そこでリンク部分である●や■をクリックすると，Ｂのように画像や文章が指定した位置に表示される。さらに●や■をクリックすると，Ａのように非表示になる。

この方法はページが重くなる欠点があるので，一般的には避けるべきであるが，授業の場合には授業開始時に１度アクセスするだけなので問題はない。



図表３　表示・非表示の切り替え


４　今後の課題と期待

現行では，単にテキストをＷｅｂページに掲げただけであるが，そこでも改善すべき事項が多い。学習効果をあげるにはテスト問題などを双方向にすることが必要である。また，このような教材の共同利用も考えられる。

４．１　技術的な課題

以下の記述のなかには，私の知識不足のために誤解している個所があるかもしれない。解決方法をご指導いただければ幸甚である。

（１）他ＨＴＭＬの同一ウィンドウへの展開

たとえば，図表４のように，ＨＴＭＬファイル「broadband.html」と「jisedai-keitai.html」があり，それぞれは単独に通常のＨＴＭＬとしても使え，「index.html」からリンクすると，index.htmlと同じ画面に展開して表示できると，テキスト作成でのモジュール化が非常に便利になる。

ところが，上記の［hyoji］では，ＨＴＭＬファイルは表示できない。その理由は不明であるが，このような機能が実装されることを期待したい。ＣやＰｅｒｌなどの言語を用いて新しいＨＴＭＬをジェネレートするのでは，呼出側のＨＴＭＬの記述が複雑になるので不適切であるし，都合によりＣＧＩは使いたくない。あるいはＸＭＬにすることにより解決できるのかもしれないが，私の理解不足のため未解決のままになっている。



図表４　他のＨＴＭＬを同一ウィンドウに展開できれば

（２）複数ＣＳＳの切り替え

現状では，授業でのプロジェクタ表示用とプリント用の２つのＣＳＳやスクリプトのファイルを用意して，目的に合わせてファイル名を手作業で変更している。ところが学生からは切り替えができないために，表示用のＣＳＳでプリントしてしまうことになる。将来バージョンではそれが自動的にできる（ＣＳＳに環境指定ができる）ようになると聞いたことがあるが，その実装を期待したい。

４．２　双方向機能

現在は単にテキストと練習問題をＷｅｂページに掲げているだけの一方向であるが，少なくとも練習問題は解答したら正誤のチェックをしたり，教員側で進捗状況を把握できるようにしたい。最近はこのような機能を持つｅ－ラーニングツールが多く市販されているが，価格が高いこととサーバ側でのインストールが必要であることにより，現在の環境に合致しない。

正誤問題，択一問題，語群選択問題の解答チェックをして点数表示をするだけであれば，ＨＴＭＬのフォームからスクリプトを起動させることにより，同一ＨＴＭＬ内部で実現できる。個々の問題と解答をＸＭＬで作成し，その問題を選択してフォーム機能をつけたＨＴＭＬに変換する方法を検討中である。

教員用の管理ツールに関しては，上のフォーム情報を電子メールとして教員に送り，教員のパソコン側に作成してあるアプリケーションをオフラインで実行する方法で実現できると思っているが，実現しても操作が面倒だと思われるので着手していない。なお，学生側での過去の進度把握などのツールに関しては実現方法を見出せないでいる。クッキーを用いるのは，私は好きではないし，学生のパソコンを特定することができないので不適切である。

４．３　教材の共有化と著作権

（１）著作権について

最近は教材の共有化に関する動きが活発になってきた。既に実施されている例もある。私個人としては，このような学生用教材は，一般論を解説しただけのものであり，特別に私の創造的研究を必要としたものではなく，著作権を主張するつもりはない。むしろ，他の人々に利用してもらい，改善していただいたものを私にも利用させてもらえれば，そのほうの利益が大きいと思っている。

でも現実に著作権を放棄するとなると，いくつかの問題が懸念される。

（２）共有での標準化

教材を共有化するときには，ファイル名の統一とかタグのつけ方などでの標準化を図ることが必要である。私自身はそのような標準を設定するだけの能力はない。むしろ，そのような標準化の動向があるならば，私の教材もそれに合わせて作成するのが好都合であると思っている（注４）。

注４：学習管理システムや教材コンテンツの標準化にはＡＩＣＣ，ＩＭＳ，ＬＴＳＣなどがあるが，あまりにも高度なレベルでの標準化であり，ここであげたような意味での標準化ではない。

５　おわりに

従来から「わかりやすい授業」の必要性がいわれ，授業でのマルチメディア化がいわれてきた。先端的な実験では，既に実際の授業を動画や音声でサービスしたり，衛星通信により大学間での交換授業も試みられている。しかし，日常的な現場での状況は，私が実践しているような手段すらあまり進んでいないようである（図表５）。



図表５　授業でのマルチメディア化の現状

ここでは，比較的簡単な形態でも学生に評価されることを示し，それを行なった理由と，実践でのいくつかの工夫を報告した。ここで示した工夫や課題は，学生全員がノートパソコンを大学に持参する環境，サーバのセキュリティ管理の環境，ｅラーニングツールの低廉化などが進むことにより自動的に解決するであろう。しかし，未だその環境になっていない現場もあり，この報告が役にたてば幸甚である。さらにこのような授業が増大することによって，逆に環境整備が進むことができれば，なおさら私の望むところである。またさらに，教材の共有化を行なうことはわれわれ教員にとって重要なことと思う。これらについてのご助言をいただければ幸甚である。

付録　スクリプト［hyoji］について

私は未だスクリプトに習熟していないので，このソースが適切かどうか自信はない。私の環境ではともかく実用的に稼動しているというレベルである。

○ソースリスト

実際には，スクリプト部分は別ファイルになっている。

     <head>
①   <script language="JavaScript">
     function hyoji() {
       var HyojiBasho, ClickBasho, Switch;
       ClickBasho = window.event.srcElement;
       HyojiBasho = ClickBasho.id + "d";
       Switch = document.all(HyojiBasho);
       if (Switch.style.display == "none") {
           Switch.style.display = "";
          } else {
           Switch.style.display = "none";
          }
     }
     document.onclick = hyoji;
     </script>
     </head>
     <body>
     <p>古い内容の教科書を用いていたのでは，授業の大半を別途教材で補う必要がある。</p>
②   <div id="img-1d" style="display: none"><img src="img.gif" alt=""></div>
     <p>市販教科書を用いたのでは，そのかなりの部分を省略し，しかも，それ以外の事項を
③   他の教材で補わなければならない<span class="hyoji" id="img-1">●</span>。学生から
     すれば，授業で使わないのに高い図書を購入させられたような気持ちになる<span class=
④   "hyoji" id="note">■</span>。</p>
⑤   <p id="noted" style="display: none">まして，教科書を数冊購入するよういえば，この
     科目を選択しなくなる。</p>

○実行したときのウィンドウ画面

（図表３に示した）

○説明