iBooksとMoodleの連携
による本当にインタラク
ティブなデジタル教科書
moodle moot japan 2014, 21 Feb, 沖縄国際大学

※Toshioki Soga (Hokkaido Bunkyo
University)

Takahiro Nakahara (Sangensha LLC)
Yasuyuki Nakamura (Nagoya University)
Masanobu Mitani (Chitose Institute of
Science and Technology)

Norihito Kawana (Sapporo International
University)
Post PC時代の教育
LMS
反転授業
スマート学習

MOOCs

e-Learning

Game

間学習

SNS
Post PC時代の教育

❖

教育とインタラクティブ
デールの「経験の円錐形(三角錐)」

❖

Edgar Dale, 1969
デールの「経験の円錐形(三角錐)」
経験
抽象的

抽象度

現実・具体的

言語的シンボル
視覚的シンボル
レコード・ラジオ・写真
映画
テレビ
展示
見学
遠示
劇化された経験
ひながた経験
直接的、目的的経験

デール(E.Dale)による「経験の円錐」, 視聴覚メディアと教育, 山口榮一, p.29(曽我 改)
デールの「経験の円錐形(三角錐)」
抽象的

抽象度

現実・具体的

プリント

言語的シンボル
視覚的シンボル
レコード・ラジオ・写真
映像
映画
テレビ
展示
見学
遠示
実習(demonstration)
劇化された経験
ひながた経験
直接的、目的的経験

デール(E.Dale)による「経験の円錐」, 視聴覚メディアと教育, 山口榮一, p.29(曽我 改)
デールの「経験の円錐形(三角錐)」
抽象的

抽象度

現実・具体的

言語的シンボル
視覚的シンボル
マルチメディア型コン
レコード・ラジオ・写真
ピュータで映像や音楽を
映画
受け身に聴く
テレビ
展示
見学
遠示
劇化された経験
ひながた経験
直接的、目的的経験

デール(E.Dale)による「経験の円錐」, 視聴覚メディアと教育, 山口榮一, p.29(曽我 改)
デールの「経験の円錐形(三角錐)」
抽象的

抽象度

現実・具体的

「学習者が各変数を操作
したり,自ら選択肢を選
んで,能動的にかかわ」る

言語的シンボル
視覚的シンボル
レコード・ラジオ・写真
映画
テレビ
展示
見学
マルチメディア型コン
遠示
ピュータで映像や音楽を
劇化された経験
受け身に聴く
ひながた経験
直接的、目的的経験

デール(E.Dale)による「経験の円錐」, 視聴覚メディアと教育, 山口榮一, p.29(曽我 改)
デールの「経験の円錐形(三角錐)」
抽象的

抽象度

現実・具体的

言語的シンボル
視覚的シンボル
レコード・ラジオ・写真
映画
テレビ
展示
見学
携帯情報端末でインタラク
遠示
ティブに体感する
劇化された経験
ひながた経験
直接的、目的的経験

デール(E.Dale)による「経験の円錐」, 視聴覚メディアと教育, 山口榮一, p.29(曽我 改)
Demo
CSS Transforms: An Interactive Guide

❖

❖

Vicki Murley

❖

( Made for iBooks )
デジタル教科書

❖

テキストを読む:内容の理解
デジタル教科書

❖

テキストを読む:内容の理解

❖

必要に応じて映像による確認:具体的な経験(UsrEx)
デジタル教科書

❖

テキストを読む:内容の理解

❖

必要に応じて映像による確認:具体的な経験(UsrEx)

❖

LMSによる確認テスト:きめ細かな授業
デジタル教科書
我々のこだわり!

リーダーアプリ(iBooks)内で操作が
完結できる(アプリを切替えない)
❖

テキストを読む:内容の理解

❖

必要に応じて映像による確認:具体的な経験(UsrEx)

❖

LMSによる確認テスト:きめ細かな授業
反転授業などで有効
デジタル教科書

❖

担当教諭「ちゃんと予習してきたね」
生徒「はーい」
↓
テキストを読む:内容の理解
担当教諭:LMSの学習履歴で確認

❖

必要に応じて映像による確認:具体的な経験(UsrEx)

❖

LMSによる確認テスト:きめ細かな授業
iBooks Authorとインタラクティブ
“iBooks Author”,
Mac App(Free) to create “Multi-Touch textbooks” for iPad.
and for Mac.

(2013~)

リーダーアプリ iBooks (iPad, Mac)のための
マルチタッチブック制作アプリケーション

誰もが簡単にデジタル書籍の制作が可能
iBooks Author
“.iba”ファイル

“.ibooks”ファイル

共有!
(書き出し)

iBooksへ
iBooks Author
“.iba”ファイル

“.ibooks”ファイル
CSS

zip圧縮!
共有!
拡張子”.ibooks”
(書き出し)

XHTML

iBooksへ
EPUB
EPUB

XHTML

CSS
EPUB

zip圧縮!
拡張子”.epub”
ウィジェット

様々なインタラクティブ要素
を簡単に付加できる機能
ウィジェット
ウィジェット
!
!
!

closed
!
!
!

iBooks (browser)
ウィジェット
internet

open
HTML Widget

iBooks (browser)
Dashboard Widget!
( “.wdgt”)

iBooks Authorの
HTML ウィジェット

周辺のリソースに影響を与え
ない埋込み型の機能拡張
HTML ウィジェット

Dashboard Widget!
( “.wdgt”)

HTML,
CSS,
JavaScript
jQuery
jQuery mobile
…
≒
(Web App)
手軽に(プログラムレス)HTML ウィジェットを生成する
サービス/アプリケーション
❖

Book Widgets: クイズなど教育関連ウィジェットを出力(App)
❖

❖

Bookry: クイズなど教育関連ウィジェットを出力(Web)
❖

❖

https://bookry.com

Hype: HTML5アニメーションを出力(App)
❖

❖

http://www.ibook-widgets.com

http://tumult.com

MotionComposer: HTML5, FLASHアニメーションを出力(App)
❖

http://www.aquafadas.com
手軽に(プログラムレス)HTML ウィジェットを生成する
サービス/アプリケーション formやquiz,
YouTubeへのアク

❖

Book Widgets: クイズなど教育関連ウィジェットを出力(App)
❖

❖

Bookry: クイズなど教育関連ウィジェットを出力(Web)
widgetを生成で
❖

❖

https://bookry.com

Hype: HTML5アニメーションを出力(App)
❖

❖

http://www.ibook-widgets.com

セスなどインタ
ラクティブな

http://tumult.com

きる。!
“BookWidgets”
の例

MotionComposer: HTML5, FLASHアニメーションを出力(App)
❖

http://www.aquafadas.com
手軽にHTML ウィジェットを生成するサービス/アプリ
ケーション
❖

Book Widgets: クイズなど教育関連ウィジェットを出力(App)
❖

❖

Bookry: クイズなど教育関連ウィジェットを出力(Web)
❖

❖

https://bookry.com

Hype: HTML5アニメーションを出力(App)
❖

❖

http://www.ibook-widgets.com

http://tumult.com

MotionComposer: HTML5, FLASHアニメーションを出力(App)
❖

http://www.aquafadas.com
本当にインタラクティ
ブなデジタル教科書

Moodleとデジタル教科書を繋ぐ
+
本当にインタラクティ
ブなデジタル教科書

Moodleとデジタル教科書を繋ぐ

iBooksとMoodleの連携による本当にインタラクティブなデジタル教科書