20120121 et研

◆ はじめに 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
MeSH サーバ
操作データ
・プレゼン進行
・シミュレータ操作
・ペンツール
教員側 MeSH

学生側 MeSH
MeSH サーバ
操作データ
・プレゼン進行
・シミュレータ操作
・ペンツール
授業の進め方（例）
・理論や現象などを説明
・シミュレータによる提示
↓
・学生がシミュレータ操作
教員側 MeSH

まとめまとめ

◆ 実践内容　対象となる授業 13
科目名：ネットワークプログラミング応用演習（再履修）
本来 4 セメスターに開講される演習授業の再履修クラス
2 コマ（ 180 分） ×15 週，履修者 18 名
Java 言語を利用， TCP や UDP を利用するプログラミング
ファイル入力
ネットワーク（ TCP ）
グラフィック描画とマウスイベント
グラフィックサーバとクライアント
オブジェクト指向の考え方
ネットワーク（ UDP ）
主な授業内容

◆ 実践内容　受講者について 14
受講者像
プログラミングに苦手意識
解説プリントを読まない
サンプルプログラムを入力するのみ
プログラムの流れを読もうとしない
コンパイラのエラーを理解できない
実行結果から成否を理解できない
参考書を買わない
図を多用しての解説を心がける
毎回，作成したプログラムの仕様書を作成して提出
受講者に対応するための授業方式

◆ 実践内容　授業でのスライド提示 15
MeSH の環境を利用して，学習者の端末にスライドを同期表示
教員端末（ Web ブラウザ）
学生端末（ Web ブラウザ )
MeSH サーバ
スライド移動などの
操作情報

◆ 実践内容　自学自習用コンテンツ 16

◆ 実践内容　自学自習用コンテンツ 17
動画像の時間経過に同期してスライドが進行

まとめまとめ

◆ 技術詳細　コンテンツの構成 19
○ モジュールを再利用可能
○ 機能追加や入れ替えが容易
モジュール構成を採用
スライド
ペン
動画像
Web ページ
それぞれの機能を iframe で配置し，
再利用性を高めると共に
システム構築を容易にしている

◆ 技術詳細　タグベース通信モジュール Nylon 20
Nylon の特徴
モジュール間の通信を提供
送信先を指定しない
受信するタグを指定可能
Web ブラウザ間の同期機能提供
送信時に複数のタグを付加可能
MeSH サーバ
教員端末
学生端末
"slide" タグを受け取る
"broadcast" ならば転送

Nylon の特徴
MeSH サーバ
教員端末
学生端末
tag: "slide|broadcast"
page: 2
送信

Nylon の特徴
MeSH サーバ
教員端末
学生端末
tag: "slide|broadcast"
page: 2
送信
転送

◆ 技術詳細　スライドガジェットの規格化 23
スライドガジェット（ iframe で提供）の
通信内容を規格化し，相互利用性を向上
現在利用できるスライドガジェット
Google HTML5slide
Slippy
Slideshare (Flash 版）
Slideshare (HTML5 版）
本研究室で開発しているスライドモジュール
将来的には
Google Docs や MS Office Web Apps などへの
採用を目指して規格化し，公開

まとめまとめ

◆ まとめ　無記名アンケート結果（ 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

20120121 et研

Recommended

Recommended

More Related Content

Similar to 20120121 et研

Similar to 20120121 et研 (20)

20120121 et研