マルチメディア教材の配布
授業にマルチメディア教材を取り入れることで教育効果が上がることは、前回の記事で説明しました。当然、学生からは「授業で使っている教材を使って勉強したい」などの要望が寄せられてきます。それならば、と、さしあたってシミュレータ教材をWebサーバに置いてみました。ところが、寄せられる声は- 知らない拡張子で、使い方が分からない → 圧縮ファイルです
- 展開はできたけど、エラーで実行できない → Runtime Libraryがないのでインストールしてください
- Runtime Libraryってどこにありますか？どれを入れればよいですか？ → このURLからダウンロードしてください
- プログラムは動いたけど、これ何？ → .....
圧縮ファイルの展開とかRuntime Libraryについて、マニュアルやFAQを充実させてもラチがあかないので、その辺は割り切って、教材の説明が必要だと感じました。また、当初はプレゼンテーションのデータも配布していなかったので、第2弾として、シミュレータ教材＋プレゼンテーションデータ＋講義映像を配布しました。と言っても、それらのデータを別々に置いて、「第○週」というリンクを掛けただけです。予想通り、「プレゼンのデータが開けません」との声が寄せられました。もちろん、「要PowerPoint」と明記したり、PowerPointViewerの配布ページへのリンクも付けておいたのですが。
ここまで来たら、とにかく使ってもらおうと本腰を入れて研究を始めました。まずは、Webブラウザ上で動かせば、ライブラリとかViewerの問題は解決するだろうと思い、JavaとかFlashに注目しました。とは言っても、シミュレータ教材を含むマルチメディア教材をWebコンテンツとして成立させるなんて、夢のまた夢です。今でこそ、HTML5の旗の下に、何でもHTML+JavaScript+CSSで片付きそうな勢いですが、当時はJavaScriptを本気で実用化させることすら無理と言われていた時代です。
そしてFlashへ
第3弾として、プレゼンデータの集まりをFlash上で成立させることを行いました。プレゼンデータはアニメーションを多用し、1ページ内の文字数を多くしつつ、今説明している箇所を分かりやすくしていました。ですので、まずはFlash上でそれらのアニメーションを再現し、「次」ボタンにより学習者が手動で読み進めるような形式にしました。実際にこの作業を担当した学生は、Flashならではのアニメーションを多用して、「かっこよく」したかったようですが、あまり派手にすると視認性が落ちるのは目に見えていたので、とにかく元データを再現して貰うように話し合いました。ですが、派手なアニメーションが多数残っていたのは彼の意地だったものと思います。参考までに、使用したFlashはFlash MXかその前だったと記憶しています。アニメーションは、図形の変形を使ってタイムラインに従って高さがほぼ0の状態からすーっと大きくなるように手作業で付けていました。作業自体は地味です。地味ですが延々と続きます。だいたい一科目のスライド数が150枚程度だったと記憶しています。プレゼンデータが何とかなりそうだったので、第3弾の続きとして、シミュレータ教材をJavaに移植する作業に取りかかりました。とは言っても、VB6でお世話になった仮想座標やTimerなどがJavaには存在しません。この辺は、実際に担当した学生達が意地になって移植しました。移植したソースプログラムはJava Applet特有のpaintやinitなどのせいで処理が散乱している上、仮想座標を物理座標に変換するための式が所々に散らばり、かつ、Timerの代わりに使ったThreadのせいで、その後のメンテナンスが絶望的な状態でした。現に、VB6版のシミュレータは、たいていバージョンアップしていますが、Java版のバージョンアップは見送られた状態です。とは言え、これらを配布したところ、ライブラリなどに関する質問は激減しました。だいたい一科目のシミュレータ数が30程度だったと記憶しています。
さらに第3弾の続きとして、マルチメディア教材の説明を配布することになりました。これについては、教員の空き時間の関係で授業そのものを録画することと、圧縮にはMPEG-1を用いることが決まりました。MPEG-1を選択した理由ですが、当時は様々な動画圧縮技術が出てきた時代ですが、そのなかでもプラットフォームを問わず、編集・圧縮・再生環境が安定していて、当時の貧弱な家庭ネットワークにも対応できるように選びました。学生がダウンロードするにしても、ネットワーク帯域を考えるとちょっと大きなサイズだったと思います。とは言え、シミュレータ＋プレゼン＋説明が揃いました。学生からの声は、案の定、「手で動かすのが面倒」「動画データがでかい」「ウィンドウが重なりすぎて混乱する」などでした。ウィンドウの件については、確かに当時の狭い画面で、講義映像とFlash、Javaを開くのは無謀でした。肯定的な意見としては、概ね「このような教材が無いよりは良い」という程度でした。
プレゼンデータと講義映像の統合
そこで第4弾として、ブラウザ上でシミュレータとプレゼンと講義映像を統合することに挑戦しました。さらに欲張って、プレゼンが講義映像に同期して進むとか、先生の説明している場所が分かるようにレーザーポインタを再現するとか、今思えば無謀きわまりない仕様で作成することになりました。作業手順はこんな感じです。- PowerPointのデータを、グループ毎にまとめてコピーし
- Flash側でタイムラインを考慮しながらペースト。
- それぞれのアニメーションが終わるところで一時停止するようActionScriptを記述
- 授業を撮影（教員＋スクリーン）→編集（スライド1枚ごとに動画像を切り分ける）→それぞれ圧縮。
- タイムラインに講義映像をペースト
- 講義映像に合わせてプレゼンデータのタイムラインを引き延ばす
- プレゼンのアニメーションタイミングを調整
- スクリーンを撮影したビデオを見ながら手作業でレーザーポインタの光をコンテンツ上に再現
- 目次を作成してリンクを掛ける
統合型教材誕生
第5弾は、いよいよシミュレータの統合です。第4弾の開発手法では、とにかく表示内容全てをFlashの支配下に置いていましたが、HTMLをベースとするようコンテンツ全体を見直しました。開発担当の学生が、「HTML内の別々のFlash同士で変数を共有できる（ように見せかける）技術」を発見し、この機能を軸に開発を進めました。具体的には、全体を一つのFlashにするのを辞め、講義映像再生用のFlashコンテンツとプレゼンテーションデータ表示用のFlashコンテンツに分けました。細かいことを言えば、それらの他に目次が付きます。そして、講義映像Flashが再生時間を通知し、それを受けてプレゼンFlashがアニメーションやレーザーポインタを進めていく方式です。ついでに講義映像も別ファイルに置いて、メンテナンス性を向上させました（後になって講義映像の編集ミスが見つかることが多い）。肝心のシミュレータはと言うと、プレゼンFlashの代わりにシミュレータを読み込むようHTMLに記述しています。今でこそ、JavaScriptなどを介してFlash→Javaにデータを送ることができますが、当時はそんなことは夢のまた夢。そのため、シミュレータの動作は、学習者が手作業で進めることになりますし、レーザポインタも再現されません。その代わり、プレゼン時に教員を再生している箇所を、シミュレータ時にはスクリーンの映像に切り替えることにしました。とりあえず、マルチメディア教材を統合することができなので、統合型教材と名付けました。
このように苦労した甲斐あって、ほとんどの学生から「このようなコンテンツが必要」との意見を貰いました。実際にシミュレータを自分で操作する（＝手を動かす）ことによって、理解度が向上したようです。おそらく心ゆくまでシミュレータの操作を楽しんだものと思われます。
利用者にとって、いささか問題は残るものの、シミュレータ教材を提供するための技術が確立しました。次に確立しなければならないのが、統合型教材の開発コストを下げることです。どこにコストが掛かっているかというと、
- プレゼンデータのFlashへの移植（タイミングは考慮せずに、単純にデータをコピー＆ペーストするのみ）
- 講義映像の編集（ページ毎の切り出し）
- シミュレータの移植（VB6→Java）
- プレゼンデータのタイミング設定
- レーザーポインタの再現
そしてMeSHへ
それらを加味した第6弾がMeSHです。一番肝心な点は、プレゼンテーションツールとしてPowerPointを捨て、Webブラウザを選択しました。また、シミュレータもWebブラウザ上で動作させるようにし、Flash、Java、Silverlightなどの技術を用いて開発します。これによって、教員の操作データを逐次サーバに送り、保存することが可能となりました。さらに、演習室のようにパソコンが並んでいる環境では、サーバに送られた操作データを学生用パソコンにリダイレクトすることで、目前のスクリーンで講義を受けることができます。もちろん、インターネットを通じた別の場所でも受講できるでしょう。さらに、サーバに蓄積された操作データを元に、自学自習用コンテンツに転用することも容易になります。演習室などでの利用形態を下図に示します。
ツイート
0 件のコメント:
コメントを投稿