｢もうひとつの“イプシロン･ザ･ロケット”｣ 企画･制作･リリースまで一部始終

フリーランスエンジニア：林 拓也

～ソニー・ミュージックコミュニケーションズ初の電子出版の軌跡～

｢もうひとつの“イプシロン･ザ･ロケット”｣ の技術的側面

2014.05.301

固定レイアウト

2

固定レイアウトEPUBの制作◆固定レイアウトEPUBを作成するツールが無い □EPUB仕様を理解して自分で設定を追加

◆固定レイアウトEPUB制作の概要 □パッケージ文書（opfファイル）で固定レイアウト関連のメタ情報を記述

□コンテンツ文書（xhtmlファイル）でviewポートの指定を追加

3

固定レイアウトのメタデータ<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

｢もうひとつの“イプシロン～”｣の固定レイアウト

◆全面に拡大した画像やビデオを表示する □デフォルトの固定レイアウトは2つのxhtmlファイルで見開きを構成する ▷左右のxhtmlをまたいでコンテンツを配置できない

□1xhtmlファイルで見開きを構成する(紙芝居方式) ▷ rendition:spreadプロパティを ｢none｣にする

左xhtml 右xhtml

1xhtml

5

｢もうひとつの“イプシロン～”｣の固定レイアウト

◆縦向き時のコンテンツ表示 □デフォルトの固定レイアウトでは2縦向き時にコンテンツが回転する ▷上下に余白ができる

□縦向き時にも回転させない ▷ rendition:orientationプロパティを ｢landscape｣にする

コンテンツ

コンテンツ

6

インターフェイス

7

サムネイルメニュー方式について◆技術者的立場からの葛藤 □アプリの操作系とコンテンツの操作系の共存 ▷コンテンツ側の操作がシンプル

□利便性･UX向上に繋がるか(iBooksではサムネイル形式の目次が利用できる) ▷サンプル版を試したところ結構イイ感じ

□JavaScriptを使う(汎用性の低下等) ▷ビデオを利用している時点でほぼiBooks専用 ▷ ｢枯れた｣ライブラリを使用(後述)

8

サムネイルメニュー方式について◆lightbox系JSライブラリの使用 □EPUB仕様に適合しないものが多い ▷画像ファイルへの直接リンク

□今回使ったのは｢facebox｣というライブラリ ▷2011年初頭にiBooks独自の固定レイアウトのサンプルで使用経験があった

▷プログラムコードがシンプル ▷デザインも変更しやすい

9

サムネイルメニュー方式について◆faceboxの注意点 □全てのコンテンツをxhtml内に組み込んでおく必要がある(動的にリンク画像を切り替えない) ▷メモリ不足による問題がないか初代iPadでチェック

□ビデオを閉じたときに音声が残る ▷スクリプトを調整

10

実行環境

11

環境の変化◆iOS7の登場 □ iOS6では、iBooks上で最大化したときに上部のバーが残っていた

□ iOS7では消えるようになった

□当初フルサイズで作成→途中でiOS6のサイズ　に最適化→iOS7への最適化は断念(本質的な問題ではない)

↑この部分

12

環境の変化◆Mac版iBooksの登場 □Mac版ではカーソルを左右のエリアに合わせるとページ遷移できることを表すマークが表示される ▷デザイン的に被らない様注意する必要がある

□MacとiOSで同じ書体でも微妙な違いがある ▷テキストに合わせた絶対配置に注意

←左右にカーソルを合わせると→ 案内用のマークが表示

13

付録：iBooks Author

14

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

□閲覧環境はiPad用／Mac用のiBooksのみ ▷ iPhone／iPod Touch用は不可

15

iBooks Authorとは◆最近(2014年5月16日？)日本でも販売可能に □アプリリリースから2年4ヶ月！！→サンプル □ver.2.1.1(以降)のバージョンが必要

◆リッチコンテンツを安全に制作できる □オーディオ／ビデオ □インタラクティブオブジェクト(ウィジェット) ▷Hype(Macのみ)／Edge Animate(Mac／Win)などで、独自ウィジェットを制作可能

◆Mac AppStoreでサードパーティ製テンプレートもあり

16

iBooks Authorの注意点◆縦書き・ルビ・右開きなどは非対応 ◆テンプレートはテキストのフォントが全て欧文フォントになっている □そのままでも日本語は表示できるが、制作時と異なる見た目で表示される可能性あり

◆リフロー対応は意外に難易度が高い ◆EPUBでは可能なMedia Overlays(テキストに同期した読み上げ)に相当する機能はない

17

セミナー本編に戻ります