1. iBooks Authorでつくる
インタラクティブなデジタルハンドアウト
合同会社三玄舎 中原敬広

2. 前半：iBooks Authorをはじめよう
!
後半：HTMLウィジェットのはなし

3. 自己紹介
中原 敬広
Web : http://www.3strings.co.jp
Facebook : Takahiro NAKAHARA
Twitter : @NakaharaTT
!
趣味 : 料理、三線
!
2011年沖縄で合同会社三玄舎を設立。
Moodleの構築・管理・カスタマイズ・モジュール開発に
加え、デジタル教材制作を中心とし、iOSアプリ開発や
デジタルブック開発など、教育分野におけるICT活用の
お手伝いを日々の仕事としています。
最近は北海道移住を狙っています。

4. デジタルハンドアウト？
•
教科書をつくるのは大変 （検定とかもあるしね）
•
まずは授業で使うプリントの代わりに （気軽に始めよう
•
慣れてきたら教科書にチャレンジも！

5. Tips 1. ツールバーをカスタマイズ

6. Tips 2. レイアウトをカスタマイズ

7. Tips 3. 左から右

8. Tips 4. スペースを恐れない

9. Tips 5. 無料のアイコンを使う

10. Tips 6. Keynoteを活用

11. Tips 7. ウィジェットを使う

12. Tips 8. HTMLウィジェット作成ツール

13. 休憩

14. HTML Widget
後半

15. HTML5 + JavaScript

16. フォルダ名 xxxxx.wdgt

17. Dashcodeで手軽に始める
（始めれるはずだった…）

18. 最小構成
•
info.plist
•
main.html
•
(Default.png)

19. Hello,World.

20. 使えるなもの
•
LocalStorageとCOOKIE
•
iPadのタッチイベント
•
インターネット通信
•
AJAXを使った非同期通信
•
jQuery

21. Bookry.com

22. Book Widget
http://www.ibook-widgets.com/

23. http://html-widgets.com
手前味
ですが…

24. LMS連携

25. Moodle

26. LearningApps.org

27. 今後のLMSとの連携
•
LMS側で少しカスタマイズをしたほうがよい
•
JavaScriptが使えるので、ちゃんとしたAPIとウィ
ジェットを作るのが理想

28. HTMLウィジェット＝拡張性
•
デフォルトのウィジェットの不足を補う
•
JavaScriptのアプリケーションは利用できる可能性大
•
Webサービスやアプリの利用
•
HTML5アニメーション作成アプリとの連携
Adobe Edge Animate,Hype, MotionComposer
Google Web Designer,Animatronなど

29. “電子教科書で何でも出来る。
そう、HTMLウィジェットならね”