20120121 et研
TRANSCRIPT
◆はじめに 2
プログラムの演習授業で苦手意識を持つ学生が多い
教材コンテンツの提示方法改善・学生端末にスライド表示を行う・自学自習用にビデオ付きスライドを公開
本日の報告内容・開発した技術の概要説明・上記取り組みに対する 無記名アンケートの結果報告
◇ 本日の発表について 3
研究の背景研究の背景
実践内容実践内容
技術詳細技術詳細
まとめまとめ
◆教育の質の向上
事前事後学習対面型授業
質疑応答
学習サイクル
◇ 研究の背景 教育におけるマルチメディア利用 4
◆教育の質の向上
事前事後学習対面型授業
質疑応答
学習サイクル
◇ 研究の背景 教育におけるマルチメディア利用
講義動画像
iTunes U (800大学）
5
YouTube EDU（約 100講義）
◇ 研究の背景 教科書の電子 Book化 6
インタラクティブコンテンツに発展
iBooks Author
iBooksApp Store
◇ 研究の背景 シミュレータによる教育
◆弦の振動
◆膜の振動◆振動音の差異◆一次元共鳴
フーリェ展開
差分近似法
円形振動膜
倍音と音色
篠笛と太鼓
扁平立方体
帯域フィルタ◆フィルタ◆立方体の共鳴
◆減衰振動
分野名 シミュレータの一例
7
◆理工学教育
現象を数理化対象のモデル化
数理に基づく現象解析、把握実験、演習で確認
シミュレータ利用
◇ 研究の背景 シミュレータによる教育
◆弦の振動
◆膜の振動◆振動音の差異◆一次元共鳴
フーリェ展開
差分近似法
円形振動膜
倍音と音色
篠笛と太鼓
扁平立方体
帯域フィルタ◆フィルタ◆立方体の共鳴
◆減衰振動
分野名 シミュレータの一例
授業の様子
8
◆理工学教育
現象を数理化対象のモデル化
数理に基づく現象解析、把握実験、演習で確認
シミュレータ利用
◆研究の背景 MeSHシステム 9
Multimedia e-Learning based on Simulator for Higher education(高等教育のためのシミュレータベースのマルチメディア e-Learning)
学生側MeSH
MeSHサーバ・Webコンテンツ配信・教員操作データ記録・転送
教員側MeSH
◆研究の背景 MeSHシステム 10
Multimedia e-Learning based on Simulator for Higher education(高等教育のためのシミュレータベースのマルチメディア e-Learning)
学生側MeSH
MeSHサーバ・Webコンテンツ配信・教員操作データ記録・転送操作データ
・プレゼン進行・シミュレータ操作・ペンツール
教員側MeSH
◆研究の背景 MeSHシステム 11
Multimedia e-Learning based on Simulator for Higher education(高等教育のためのシミュレータベースのマルチメディア e-Learning)
学生側MeSH
MeSHサーバ・Webコンテンツ配信・教員操作データ記録・転送操作データ
・プレゼン進行・シミュレータ操作・ペンツール 授業の進め方（例）
・理論や現象などを説明・シミュレータによる提示
↓・学生がシミュレータ操作
教員側MeSH
◇ 本日の発表について 12
研究の背景研究の背景
実践内容実践内容
技術詳細技術詳細
まとめまとめ
◆実践内容 対象となる授業 13
科目名：ネットワークプログラミング応用演習（再履修）
本来 4セメスターに開講される演習授業の再履修クラス2コマ（ 180分） ×15週，履修者 18名Java言語を利用， TCPや UDPを利用するプログラミング
ファイル入力ネットワーク（ TCP）グラフィック描画とマウスイベントグラフィックサーバとクライアントオブジェクト指向の考え方ネットワーク（ UDP）
主な授業内容
◆実践内容 受講者について 14
受講者像
プログラミングに苦手意識解説プリントを読まないサンプルプログラムを入力するのみプログラムの流れを読もうとしないコンパイラのエラーを理解できない実行結果から成否を理解できない参考書を買わない
図を多用しての解説を心がける毎回，作成したプログラムの仕様書を作成して提出
受講者に対応するための授業方式
◆実践内容 授業でのスライド提示 15
MeSHの環境を利用して，学習者の端末にスライドを同期表示
教員端末（Webブラウザ） 学生端末（Webブラウザ )
MeSHサーバスライド移動などの操作情報
◆実践内容 自学自習用コンテンツ 16
◆実践内容 自学自習用コンテンツ 17
動画像の時間経過に同期してスライドが進行
◇ 本日の発表について 18
研究の背景研究の背景
実践内容実践内容
技術詳細技術詳細
まとめまとめ
◆技術詳細 コンテンツの構成 19
○モジュールを再利用可能○機能追加や入れ替えが容易
モジュール構成を採用
スライド
ペン
動画像
Webページ
それぞれの機能を iframeで配置し，再利用性を高めると共にシステム構築を容易にしている
◆技術詳細 タグベース通信モジュール Nylon 20
Nylonの特徴
モジュール間の通信を提供送信先を指定しない受信するタグを指定可能Webブラウザ間の同期機能提供送信時に複数のタグを付加可能
MeSHサーバ
教員端末学生端末
"slide"タグを受け取る
"broadcast"ならば転送
◆技術詳細 タグベース通信モジュール Nylon 21
Nylonの特徴
モジュール間の通信を提供送信先を指定しない受信するタグを指定可能Webブラウザ間の同期機能提供送信時に複数のタグを付加可能
MeSHサーバ
教員端末学生端末
"slide"タグを受け取るtag: "slide|broadcast"page: 2
送信
"broadcast"ならば転送
◆技術詳細 タグベース通信モジュール Nylon 22
Nylonの特徴
モジュール間の通信を提供送信先を指定しない受信するタグを指定可能Webブラウザ間の同期機能提供送信時に複数のタグを付加可能
MeSHサーバ
教員端末学生端末
"slide"タグを受け取るtag: "slide|broadcast"page: 2
送信
転送
"broadcast"ならば転送
◆技術詳細 スライドガジェットの規格化 23
スライドガジェット（ iframeで提供）の通信内容を規格化し，相互利用性を向上
現在利用できるスライドガジェット
Google HTML5slideSlippySlideshare (Flash 版）Slideshare (HTML5 版）本研究室で開発しているスライドモジュール
将来的にはGoogle DocsやMS Office Web Appsなどへの採用を目指して規格化し，公開
◇ 本日の発表について 24
研究の背景研究の背景
実践内容実践内容
技術詳細技術詳細
まとめまとめ
◆まとめ 無記名アンケート結果（ 1 月 18日実施） 25
Q. スライド資料は画面とスクリーンのどちらが見やすいか？
画面スクリーン
Q. 今後希望する，授業の主コンテンツはどれか？
参考書プリント画面上
Q. 映像付きスライド教材は必要か？
必要おおよそ必要どちらとも
7(38%)11(62%)
5(27%)5(27%)
6(33%)
3(16%)
14(78%)1(5%)
◆まとめ 26
再履修クラスの演習授業において，資料提示方法として学生端末上にスライド表示
自学自習用にビデオ付きスライドを公開
上記システムを，内部的に再利用性を高め，ガジェットを入れ替えても利用可能とした
学生の習得度は，来週の期末試験で確認予定
他の授業でも利用してシステムの評価を行う
成果物はオープンソースソフトウェアとして公開
今後の予定
NylonNylon
JavaScriptJavaScript
WebブラウザWebブラウザ
プレゼンプレゼン
SilverlightSilverlight JavaJava
シミュレータシミュレータ
FlashFlash
Nylon iframeNylon iframe
ペンペン
◆MeSHのクライアント側モジュール構成
サーバとの通信制御サーバとの通信制御
28
linkシミュレータ（双方向性、リアルタイム処理）
関係スライド（一般解導出過程記述等）
参考動画（ＭＰＥＧ圧縮） 、写真、サウンド
スライドからハイパーリンク
◇ シミュレータベースの教育教材の構造
解説用スライド
29
client = nylon.client.create();c = nylon.iframe_parent.create(
document.getElementById( 'slide' ), 'http://w.mesh.cx' );
Next = function() {client.emit( "slideT", { command : "next" } );client.emit( "pen_clear|broadcast" );
}
初期化
「次へ」ボタンの内容
<iframe id=slide src="slide.html" width="720" height="600" scrolling="no" frameborder=0></iframe>
スライド用 iframeの記述
実際の記述例 30