JEPAセミナー「『もうひとつの“イプシロン･ザ･ロケット”』 企画･制作･リリースまで一部始終」の林パート資料

1. ｢もうひとつの イプシロン･ザ･ロケット ｣
企画･制作･リリースまで一部始終
フリーランスエンジニア：林 拓也
∼ソニー・ミュージックコミュニケーションズ初の電子出版の軌跡∼
｢もうひとつの イプシロン･ザ･ロケット ｣
の技術的側面
2014.05.30
1

2. 固定レイアウト
2

3. 固定レイアウトEPUBの制作
◆固定レイアウトEPUBを作成するツールが無い
□ EPUB仕様を理解して自分で設定を追加
◆固定レイアウトEPUB制作の概要
□ パッケージ文書（opfファイル）で固定レイアウト
関連のメタ情報を記述
□ コンテンツ文書（xhtmlファイル）でviewポート
の指定を追加
3

4. 固定レイアウトのメタデータ
<package … prefix="rendition: http://www.idpf.org/vocab/
rendition/#" …>
<metadata …>
…
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:orientation">●●</meta>
<meta property="rendition:spread">●●</meta>
…
</metadata>
…
</package>
固定レイアウトの設定
デバイスの向きに応じたコンテンツの表示
見開きに関する設定
4

5. ｢もうひとつの イプシロン∼ ｣の固定レイアウト
◆全面に拡大した画像やビデオを表示する
□ デフォルトの固定レイアウト
は2つのxhtmlファイルで見開
きを構成する
▷ 左右のxhtmlをまたいでコンテンツを配置できない
□ 1xhtmlファイルで見開きを
構成する(紙芝居方式)
▷ rendition:spreadプロパティを
｢none｣にする
左xhtml 右xhtml
1xhtml
5

6. ｢もうひとつの イプシロン∼ ｣の固定レイアウト
◆縦向き時のコンテンツ表示
□ デフォルトの固定レイアウトでは
2縦向き時にコンテンツが回転する
▷ 上下に余白ができる
□ 縦向き時にも回転させない
▷ rendition:orientationプロパティを
｢landscape｣にする
コンテンツ
コンテンツ
6

7. インターフェイス
7

8. サムネイルメニュー方式について
◆技術者的立場からの 藤
□ アプリの操作系とコンテンツの操作系の共存
▷ コンテンツ側の操作がシンプル
□ 利便性･UX向上に繋がるか(iBooksではサムネイル
形式の目次が利用できる)
▷ サンプル版を試したところ結構イイ感じ
□ JavaScriptを使う(汎用性の低下等)
▷ ビデオを利用している時点でほぼiBooks専用
▷ ｢枯れた｣ライブラリを使用(後述)
8

9. サムネイルメニュー方式について
◆lightbox系JSライブラリの使用
□ EPUB仕様に適合しないものが多い
▷ 画像ファイルへの直接リンク
□ 今回使ったのは｢facebox｣というライブラリ
▷ 2011年初頭にiBooks独自の固定レイアウトのサンプ
ルで使用経験があった
▷ プログラムコードがシンプル
▷ デザインも変更しやすい
9

10. サムネイルメニュー方式について
◆faceboxの注意点
□ 全てのコンテンツをxhtml内に組み込んでおく必要
がある(動的にリンク画像を切り替えない)
▷ メモリ不足による問題がないか初代iPadでチェック
□ ビデオを閉じたときに音声が残る
▷ スクリプトを調整
10

11. 実行環境
11

12. 環境の変化
◆iOS7の登場
□ iOS6では、iBooks上で最大化したときに上部の
バーが残っていた
□ iOS7では消えるように
なった
□ 当初フルサイズで作成
→途中でiOS6のサイズ
に最適化
→iOS7への最適化は断念(本質的な問題ではない)
↑この部分
12

13. 環境の変化
◆Mac版iBooksの登場
□ Mac版ではカーソルを左右のエリアに合わせると
ページ遷移できることを
表すマークが表示される
▷ デザイン的に被らない様
注意する必要がある
□ MacとiOSで同じ書体で
も微妙な違いがある
▷ テキストに合わせた絶対配置に注意
←左右にカーソルを合わせると→
案内用のマークが表示
13

14. 付録：iBooks Author
14

15. iBooks Authorとは
◆Mac用の電子書籍制作アプリ
□ 無料！！
□ 固定レイアウト形式(縦向き／横向き)が基本
▷ 横向きは縦向き時にリフローにすることもできる
○ 縦固定レイアウト
○ 横固定レイアウト
○ 横固定レイアウト＆縦リフロー
□ 閲覧環境はiPad用／Mac用のiBooksのみ
▷ iPhone／iPod Touch用は不可
15

16. iBooks Authorとは
◆最近(2014年5月16日？)日本でも販売可能に
□ アプリリリースから2年4ヶ月！！→サンプル
□ ver.2.1.1(以降)のバージョンが必要
◆リッチコンテンツを安全に制作できる
□ オーディオ／ビデオ
□ インタラクティブオブジェクト(ウィジェット)
▷ Hype(Macのみ)／Edge Animate(Mac／Win)などで、独自ウィ
ジェットを制作可能
◆Mac AppStoreでサードパーティ製テンプレートもあ
り
16

17. iBooks Authorの注意点
◆縦書き・ルビ・右開きなどは非対応
◆テンプレートはテキストのフォントが全て欧文
フォントになっている
□ そのままでも日本語は表示できるが、制作時と異
なる見た目で表示される可能性あり
◆リフロー対応は意外に難易度が高い
◆EPUBでは可能なMedia Overlays(テキストに
同期した読み上げ)に相当する機能はない
17

18. セミナー本編に戻ります