EPUB(EDUPUB)ビューアアプリケーションと、 ブラウザーアプリケーション(HTML5 Webアプリ etc.)間での、Distributable Objects によるコンテンツ連携の実装について検討してみました。

1. EPUB Distributable Objects
ブラウザーアプリケーションとの連携を検討してみる…
KIMIAKI YAMAZAKI@TEK Software

2. はじめに
• 私は、教育専門ISVに勤務するプログラマーです。
主に小中等向けの教育ソフトウェアの設計開発をお
こなってきました。
• 本スライドをまとめるに至った経緯として、テーマ
は、上智大学 理工学部の 田村恭久 教授よりいただ
きました。

3. 検討してみること
• EPUB(EDUPUB ?)ビューアアプリケーションと、
ブラウザーアプリケーション（HTML5 Webアプリ
etc.）間での、実装を念頭に置いた Distributable
Objects の受け渡しについて
EPUB HTML5
Distributable Objects

4. • EDUPUB関連仕様のひとつ
Open Annotation / Widgets etc. と共に…
• EPUB出版物の カプセル化 / 移動 / 統合 の仕様
• 利用想定： chapter 単位での抽出 etc.
例題とか、販促物ダイジェスト版とか、メディアリ
ソース集とか…
Distributable Objects ？
chapter 1
chapter 2
chapter 3
chapter
3
chapter 3
chapter 6
chapter 8

5. • 既存のEPUBドキュメントの一部を物理的に他のドキュ
メントにコピーするための仕様（リンクじゃない）
Distributable Objects ？
EPUB 元 EPUB 転送先
CSS
♪
読み上げ
音声
ドキュ
メント
メタ
データ
リンク
情報
並び順
ドキュ
メント
CSS
リンク
情報
並び順
メタ
データ
♪
読み上げ
音声
CSS
ドキュ
メント
メタ
データ
リンク
情報
並び順
ドキュ
メント
CSS
リンク
情報
並び順
メタ
データ
♪
読み上げ
音声

6. はじめに検討したこと
✴ Distributable Objects の受け渡しは、何から何へ？
EPUBビューア → Web App.
Web App. → EPUBビューア も？
Web App. ←→ Web App. も？
EPUBビューアは？
ローカルアプリ？
Webアプリ？
Webアプリはどこにある？
EPUBビューア内アプリ？
別実装もの？

7. ✴ Distributable Objects の受け渡しは、何から何へ？
EPUBビューア → Web App.
Web App. → EPUBビューア も？
Web App. ←→ Web App. も？
EPUBビューアは？
ローカルアプリ？
Webアプリ？
Webアプリはどこにある？
EPUBビューア内の一機能？
別実装もの？
← とりあえずコレのみで
← とりあえずコレで
← 実装への影響は少ないかも…
EPUBビューア、
Webアプリの双方が、
オンライン環境で利用
されることを前提に…
はじめに検討したこと

8. ユースケース
✴ EPUBコンテンツの利用者(※A)が、
✴ Distributable Objects を内包したコンテンツの利用時に、
✴ EPUBビューアに搭載された Distributable Objects の転送機能を利用して、
転送する Distributable Objects を選択し、転送手続きをおこなう
(※B)。
✴ EPUBコンテンツの利用者(※A)が、Distributable Objects に対応したWeb
アプリケーションをブラウザーから起動し、
✴ Webアプリケーションの Distributable Objects の読み込み機能を利用し
て、
✴ ※B で手続きしたオブジェクトを、Webアプリケーション画面に貼付ける。

9. ユースケース
これで良い？
※B の手続き、
手順に悩む…
✴ EPUBコンテンツの利用者(※A)が、
✴ Distributable Objects を内包したコンテンツの利用時に、
✴ EPUBビューアに搭載された Distributable Objects の転送機能を利用して、
転送する Distributable Objects を選択し、転送手続きをおこなう
(※B)。
✴ EPUBコンテンツの利用者(※A)が、Distributable Objects に対応したWeb
アプリケーションをブラウザーから起動し、
✴ Webアプリケーションの Distributable Objects の読み込み機能を利用し
て、
✴ ※B で手続きしたオブジェクトを、Webアプリケーション画面に貼付ける。

10. ユースケース検討時の疑問
✴ ワークフローの規定はされてないので考えるしかないのですが…
✴ Distributable Objects を内包したコンテンツを保持しているの
は EPUBビューアなのだから、その転送要求に対し、実際に抽出
作業をおこなうのは、EPUBビューアの仕事になるのではないの
か？
✴ Distributable Objects には、転送過程における一時的な状態と
して「埋め込み型」のフォーマット仕様があるが、では、これを
どこにどのような形で保持すれば良いのか？
また、どのようにそれを受け渡すのか？ → 次ページ…

11. ユースケース検討時の疑問
✴ ワークフローの規定はされてないので考えるしかないのですが…
以下の挿絵をヒントに検討を進める…
クラウド上に一時保
管し、Webアプリケー
ションがそれをロー
ドしたら…
EPUBビューア
Webアプリ

12. ちょっと横道に…
✴ クラウド経由でのEPUBオブジェクトのアップロードやダウンロード…
コンテンツによっては大量、もしくは、大容量となるリソースをうまく扱えるの
か？
オフライン利用も可能というEPUBビューアの利点に対し、大容量のリソースを
アップロードするような要件を受け入れてもらえるものか？
EPUB
デジタル教材

13. 検討除外要件
✴ 今回は、以下の要件を検討対象から除外します…
・転送結果として、横書きと縦書きが混在するケースへの対応
・暗号化や難読化されているコンテンツへの対応
・版権処理に関する要件への対応
・余り仕様書でも触れられていませんが、JavaScript コードへの対応
おそらくこれらは、
Distributable Objects 仕様
がそもそも抱える課題
かと…

14. EPUBビューア → Webアプリの
ユースケース
✴ デジタル教材から、その一部をノート型のWebアプリケーションにコ
ピーする とか…
今後、一般的に求められる要件と考えられるため、このケースで検討
を続けてみる…
EPUB
デジタル
教材
HTML5
Note
アプリケーション
Distributable Objects
EPUB

15. EPUBビューア → Webアプリ 転送について
受け側がEPUBビューアではないこと
への検討項目
✴ そもそも、EPUBビューア間で Distributable Objects を受け渡す
イメージは？
Distributable Objects
EPUB
INDEX
chapterの選択
と転送手続き
空のEPUBコンテナ
ドキュメントに
転送されたchapter
が追加される
転送単位は何れにしても
ルートか子かの違いはあれど
chapterかそれに近い単位
販促用の
サンプルが
出来た！

16. EPUBビューア → Webアプリ 転送について
受け側がEPUBビューアではないこと
への検討項目
✴ ならば、ノート型 Webアプリにも「ページの概念」があった方が都合が良いかと…
Webアプリの既存文章内への「差し込み文章」とする要件も考えられるが、実現に
はさらに多くの検討が伴うと予想…
Distributable Objects
EPUB
INDEX
chapterの選択
と転送手続き
ノート型アプリの目次に
転送されたchapter
が追加される
デジタルノート
ドキュメント内のパーツ
単位で扱いたい場合には、
Widgets を検討いただく

17. EPUBビューア → Webアプリ 転送について
受け側がEPUBビューアではないこと
への検討項目
✴ パッケージ型EPUBドキュメントフォーマットへの対応
Webアプリは、EPUBドキュメントの文章構造を持つわけではないの
で具体的にどこにどのように受け取ったEPUBオブジェクトを保持する
のか、もしくは、保持する必要があるのか等の検討が必要…
もっとも、一旦、Webアプリに転送された Distributable Objects を、
再度、他に転送する必要が無いのであれば、検討の必要はないように
思う…

18. EPUBビューア → Webアプリ 転送について
受け側がEPUBビューアではないこと
への検討項目
✴ その他の検討事項
受け取ったEPUBドキュメントに対し、そのCSSをうまく適用することは可能か？
固定レイアウトのコンテンツでも対応が可能か？
音声ナレーションが付属する場合にはどのように対応するのか？
レンダリングされないリソースが付属する場合にはどう対応するのか？
CFI（Canonical Fragment Identifier）情報が付属していたらどう扱うか？
（アノテーションツールによる付加情報 etc.）
アクセスビリティー関係
の機能や情報が消滅してしまう
のは、結構辛いかも…

19. 実装イメージ
✴ EPUBビューア側のアップロード機能は、実装されることを前提とする
（尚、クラウドへのアクセスに際しての認証手続き等に関する要件は未考慮）
埋め込みオブジェクト
情報は、JSONフォーマット
で、NoSQL DB に…
ビデオデータ等の
重量級リソースは
SQL DB に…
EPUBビューア
ユーザー
INDEX
デジタルノート
Webアプリ
アップロード
ダウンロード
アップロード結果
としてアクセス情報
を取得
（URL情報やアクセス
識別子 etc）
取得したアクセス情報
を利用し、ダウンロード
操作を行うと、EPUB
オブジェクトが
挿入される
Distributable Object のコピー → Distributable Object の挿入
ダウンロードした
内容を、どこにどのように
保持するのか？
要検討課題…
EPUB
exchange
server

20. 処理の流れ
EPUB
デジタル教材
Note
Webアプリケーション
EPUB exchange
Server
✴ Note アプリケーションはWebアプリケー
ション故、EPUB パッケージオブジェク
トの生成は行わず、受け取った JSON デー
タよりHTMLやインデックス情報等を適
時生成する想定
✴ マークアップ内のメタデータについては
exchange server に設置のCGIにてDB内
のバイナリデータが随時配信される想定

21. 参考文献
• 「EPUB Distributable Objects 1.0 Draft Specification 15 January 2015」
< http://www.idpf.org/epub/do/ >
• 下川 和男 一般社団法人 日本電子出版協会, イースト株式会社
「デジタル教科書の国際標準化 EDUPUBについて」
< http://www.slideshare.net/eijyo/edupub >
• 村田 真 一般社団法人 日本電子出版協会
「EDUPUB解剖」
< http://www.slideshare.net/JEPAslide/sem012-37064011 >
• 田村 恭久 上智大学 理工学部 情報理工学科 教授
「EDUPUB Phoenix 2015 報告」
< http://www.slideshare.net/JEPAslide/20150311-tamura >