Vol.22 電子教材の制作について

http://www.meisho-do.co.jp
Meisho-do Creative Report Vol.22
Aug 01,2013
電子教材の制作について
▲
Webサイトを作成するような感覚でインタラクティブな電子教材が作成でき、
今後の普及が期待されているHTML5やAdobe DPS。
当社ではそれらを使用した教材の研究開発を進めています。
■HTML5とは
HTML5の技術を用いて作成したアプリケーションで
HTMLとはWebページを構築するためのマークアッ
あれば、iPhoneやAndroidなどの端末を問わず動かす
プ言語です。ここが見出し、ここが本文、といったよ
ことができます。そのためハイブリッドアプリケー
うにテキストを視覚化・構造化することを目的として
ションと呼ばれています。また、マークアップ言語で
います。その最新バージョンがHTML5で、より高度
あるHTML5での開発は、難解なプログラミングが必
なWeb上での表現をOSやブラウザに依存しない形で
要だったアプリ制作の敷居を格段に下げました。
実現する技術です。
紙の書籍と同体裁でなくてもかまわないのであれば、
現在も発展途上のHTML5ですが、そもそもの開発
HTML5でハイブリッドアプリケーションとして作成
目的はWebアプリケーション制作ツールを生み出す
するのもひとつの手段です。先にも述べたように、ひ
ことでした。これまでのWebサイトは情報を表示す
とつのソースデータで端末を問わないアプリケーショ
るだけでしたが、HTML5であればユーザーの操作に
ンの開発ができ、さらにWebサイトでの掲載やDVD
応じて結果を返す双方向のWebサイトの構築が可能
での配布など、様々に展開させることができます。
となります。この技術を用いて、スマートフォンやタ
ブレットデバイス用のアプリケーションを作成するこ
■電子教材への応用
ともできるのです。
Adobe DPS（Digital Publishing Suite）はアドビか
ら提供されている、スマートフォンやタブレットデバ
■HTML5で作るハイブリッドアプリケーション
イス向けの電子書籍を開発するための統合開発環境
タブレットデバイスやスマートフォンのアプリケー
で、InDesignで開発を行うのが特長です。InDesignの
ションはOSごとに作られている「ネイティブ・アプリ」
持つ機能だけでも誌面上にスライドショーやビデオを
であり、機種（OS）に依存しています。そのため、
加えることが可能ですし、HTML5で作成されたコン
同じアプリケーションであってもOS毎に別の開発環
テンツを埋め込むこともできるので、双方の技術を用
境 で 個 々 に 作 成 す る 必 要 が あ り ま す。 し か し、
いたより魅力的な電子教材が作成できます。
スマートフォン／タブレットのアプリ開発環境の違い
開発言語／ツール
iOS
Android
特徴
HTML5
○
○
Webサイトをコーディングするような感覚でアプリケーション
を開発することができる。
Adobe Digital Publishing Suite
○
○
開発だけでなくアプリケーション化する所までカバー。InDesign
で開発できるため印刷用データからの移行は比較的容易。
iBooks Auther
○
×
Appleが開発した電子教材開発ツール。非常に優れたツールで
はあるが、iOSにしか対応していない点がデメリット。
objective-c
○
×
iOSネイティブアプリの開発言語。いちからアプリケーション
を開発するためには高度な技術が必要。
Java
×
○
アンドロイドネイティブアプリの開発言語。いちからアプリケ
ーションを開発するためには高度な技術が必要。
1/2
http://www.meisho-do.co.jp
Meisho-do Creative Report Vol.22
Aug 01,2013
■当社作成の電子教材サンプル
アニメーション 挿入イラストにアニメーション効果を付加
解答表示
このサンプルデータは
左のQRコードからア
クセス可能です。
ベースの書籍の解答欄に答えを表示させる
▼下線部をクリックすると解答が
表示され赤フィルターのように学
習できます。
▲選択肢の番号をクリックすると
正解なら「○」
、間違いなら「×」
が表示されます。
このサンプルデータは
左のQRコードからア
クセス可能です。
2/2
このサンプルデータは
左のQRコードからア
クセス可能です。
▲
▲電子の動きのアニメーシ
ョンで電池のしくみを表現
しています。
◀地震が発生する際
のプレートの動きをア
ニメーションで表現。
左上の再生ボタンを
タップすることでイラ
ストが動き出します。
▲植物のからだのしくみをアニメーションで
再現しました。水分と養分の吸収されている
様子が分かりやすく理解できます。