Monkeyish Studio’s methods and best practices

EPUB 3 を「教育」コンテンツのフォーマットにする

〜制作の敷居を下げる・EPUBの永続性を保持する・危険な電子書籍をつくらせない〜

EPUB 3とJavaScriptとアクセシビリティ

2013年11月18日(月)午後6時30分〜8時30分


資料およびサンプルについて:
終了後にスライド資料のURLをお知らせします。
デモンストレーションについても、スクリーンショットを撮って、手順などを掲載していますので、後日、実際に試すときに参考にしてください。

EPUB 3(+JS)のメリット・デメリットや制作の流れが理解できるよう0のEPUBサンプルを用意しました(一部、ビデオも含む)。今回はすべてこちらで作成していますので、社内や学内等での二次使用、資料作成時の素材として使用していただいてもかまいません。


レポート編:

[1]静的なEPUB 3 と動的なEPUB 3

  • 電子書籍ストアを活用した商業出版は、静的な電子書籍フォーマットが使われる
  • 辞書や図鑑などのユーティリティやインタラクティブな教材、児童向け学習コンテンツは、アプリとして開発される
  • 静的な電子書籍フォーマットとアプリが主流
  • 動的なEPUB 3 の事例(日本、米国、韓国、ロシアなど)
  • アプリと動的なEPUB 3 の違い

[2]電子書籍のアクセシビリティ

  • ウェブ標準の技術を採用しているEPUB 3はアクセシブルなデータ
  • 商業出版ではビジネスの仕組み上、DRMを適用したり、ストア専用クライアントに限定しなければいけない
  • 広告モデルで無料公開されるウェブコンテンツと比較するのは難しい
  • EPUB 3 のアクセシビリティ
  • EPUB Media Overlays 3.0 は高齢者や視覚障碍者のための仕様ではない
  • 電子書籍の「アクセシビリティ対応」を特別な作業にしないために

[3]スクリプトを含むEPUB 3 は必要か?

  • そもそも動的なEPUB 3に対応した読書システムはあるのか?
  • 開発ツールはあるのか?
  • 制作の難易度が高くなるのでは?
  • 悪意のあるコードを埋め込まれる危険性があるのでは?
  • アプリでよいのでは?
  • Adobe InDesignで作成できるDPS(Adobe Digital Publishing Suite)がある
  • Apple限定だが、iBooks Authorによる優れたオーサリング環境がある

[4]動的なEPUB 3 で可能になること

  • マルチデバイス対応の作業が容易になる
  • ウェブサービスやソーシャルメディアと連携したコンテンツを作成しやすい
  • ライトウェイトなアプリ(例:クイズなどの小さなアプリ)と同等のコンテンツをEPUBフォーマットで作成可能になる
  • アプリのようにOSのアップデートで発生する更新作業はほとんど必要ない(静的なEPUB 3をベースにして作成することで、永続性を保つことが可能)
  • 「電子書籍」のプレミアム版、インタラクティブ版といったバージョン化で活用できる
    ※例:Appleの仕様(Fixed-Layout mode)に従えば、iBookstoreで販売できる

実践編:

[1]教育コンテンツについての予備知識:

  • LMS(Learning Management System)
    受講者の進捗や履修状況、教材の管理などを実行するシステム
  • SCORM(Sharable Content ObieCt Reference Model)
    eラーニング教材の国際標準規格
  • CSCL(Computer supported Collaborative Learning)
    ウェブと活用した協調学習
  • ブレンディッドラーニング
    対面授業と組み合わせて利用する

[2]EPUB 3(+JS)のワークフローについて

  • EPUBに組み込むコアコンテンツをどのように作成するか?
  • 開発ツールの種類
  • 開発ツールに費用はかかるのか?
  • 大まかな手順
  • JavaScriptの知識なしでどこまで可能か?

[3]動的なEPUB 3 による学習コンテンツを作成する流れ

※JavaScriptの知識は必要ありません
※終了後、実際に試すことができるように素材をすべて用意しています

準備:

  • 開発ツールを準備しよう(HTML5オーサリングツール、エディター、画像圧縮ツール、ウェブブラウザ)
    ※体験版もありますので、すべて無償で作業を進められます
    ※Windows、Macどちらの環境でも使用できるツールにしています
  • Readium を準備しよう
  • Readium をGoogle Chromeにインストールする
  • ReadiumJS Viewer について(タブレットやスマートフォンで利用するため)

設計:

  • アクセシビリティ指針を決めよう
  • レスポンシブデザインについて、大まかに理解しておこう
  • 対象とする環境を決めよう
  • OS(Windows、Mac OS、iOS、Androidなど)
  • デバイス(パソコン、タブレット、スマートフォン)
  • 必要な素材を確認しておこう

モックアップの作成:

  • ※素材はすべて提供いたしますので、流れだけ確認してください
  • STEP-01(提供素材のフォルダ名「step01」)
  • STEP-02(提供素材のフォルダ名「step02」)
  • STEP-03(提供素材のフォルダ名「step03」)
  • STEP-04(提供素材のフォルダ名「step04」)
  • STEP-05(提供素材のフォルダ名「step05」)
  • STEP-06(提供素材のフォルダ名「step06」)
  • STEP-07(提供素材のフォルダ名「step07」)
  • STEP-08(提供素材のフォルダ名「step08」)
  • STEP-09(提供素材のフォルダ名「step09」)
  • STEP-10(提供素材のフォルダ名「step10」)

検証:

  • WindowsとMac OSのデスクトップで確認しよう(Readium:Google Chrome)
  • iOSとAndroidのタブレットで確認しよう(ReadiumJS Viewer)

プロトタイプの作成:

  • ※素材はすべて提供いたしますので、流れだけ確認してください
  • STEP-01(提供素材のフォルダ名「step01」)
  • STEP-02(提供素材のフォルダ名「step02」)
  • STEP-03(提供素材のフォルダ名「step03」)
  • STEP-04(提供素材のフォルダ名「step04」)
  • STEP-05(提供素材のフォルダ名「step05」)
  • STEP-06(提供素材のフォルダ名「step06」)
  • STEP-07(提供素材のフォルダ名「step07」)
  • STEP-08(提供素材のフォルダ名「step08」)
  • STEP-09(提供素材のフォルダ名「step09」)
  • STEP-10(提供素材のフォルダ名「step10」)

検証:

  • WindowsとMac OSのデスクトップで確認しよう(Readium:Google Chrome)
  • iOSとAndroidのタブレットで確認しよう(ReadiumJS Viewer)

公開:

  • パッケージ(EPUBファイル)で公開する
    ※セキュリティポリシーがない場合はあまり推奨できない
  • クラウド(ウェブブラウザ)で公開する

[4]動的なEPUB 3 の今後

  • 開発ツールについて
  • 企業が提供するソリューションについて
  • 電子書籍ストアを利用した電子出版以外のビジネスについて
  • 教育分野の草の根活動について
  • クリエーターやアーティストなどの個人出版について
  • EPUBの活用範囲を広げることで「教育」のフォーマットに