2013年9月JEPAセミナー「Appleの電子出版：iBookstoreとiBooks Author」

2013年 9月 JEPAセミナー
Appleの電子出版：iBookstoreとiBooks Author
林拓也（ハヤシタクヤ）
1

プロフィール
■ 林拓也（ハヤシタクヤ）
■ Twitter：@HapHands
■ Facebook：takuya.hayashi
■ デジタルコンテンツ受注制作
■ トレーニングインストラクター
■ 書籍執筆
2

今日の内容
■ iBookstoreの現状
■ iBooks用のEPUB制作
■ iBooks Authorでの制作
4

iBookstoreの現状
■ iBookstoreのメリット・デメリット
＊ビジネス面と技術面でメリット・デメリットは必ずしも
一致しない。
◆ 対応OSの少なさ（iOS＆次期MacOSのみ）
→✕販売数／○表示確認
◆ 対応デバイスの少なさ（E-インクデバイスが無い）
→✕販売数（ユーザー層が少ない）／○表示確認
◆ 販売地域の広さ（KDPは11カ国、iBookstoreは51カ国）
→○販売数
6

iBookstoreの現状
◆ ビデオ、音声、スクリプトの利用が可能
→✕iBookstore専用になりがち／○独自性や表現力
◆ iBooksの独自制作仕様
→✕ のトラブル、制作者泣かせ…
◆ iBooksのリーダーアプリとしてのデキの良さ（メ
モ、マーカー、辞書機能、追加フォントなど）
→○利用者増
7

iBookstoreの現状
■ iBookstoreでの取り扱い形式
◆ EPUB（日本語書籍はEPUB 3形式）
◆ .ibooks（iBooks Author形式）
＊ 2013年9月時点で日本語コンテンツは未受付
→しかし「日本語コンテンツが受け付けられない」という
オフィシャルな情報は見当たらない。
→書籍執筆時に試してみた結果、Appleからメッセージが
届く（↓次ページ図）。
8

iBookstoreの現状
★現時点ではEPUB形式のみ。
→遠からず.ibooks形式も扱われるはず！（根拠なし）
縦書き、右開き、ルビなどの実装後？？
iTunes ConnectでのAppleからのメッセージ
9

iBookstoreの現状
■ 配布アカウントとツール類
◆ アカウント
◇ 無料配布用アカウント
◇ 有料販売用アカウント（無料の配布も可）
• 米納税者番号が必要。
★いずれかのアカウントを取得すると、iTunes Connect（Appleの
出版コンテンツ管理サービスサイト）にログインできるようにな
る。
→各種ツール／ドキュメントが入手できる。
とりあえず無料配布用アカウントを作るのがイイかも。
10

iBookstoreの現状
◆ ツール／ドキュメント
◇ Book Proofer（アプリ）
• Macで作成したEPUBファイルをiOSデバイスに転送するためのア
プリ。
• USBケーブルで接続したデバイスに転送する。
• EPUB化する前のフォルダのドラッグ＆ドロップでもOK。
• iTunesやDropBoxなどよりも早くて簡単。
11

iBookstoreの現状
◇ Book Proofer（アプリ）
• Book Prooferのアイコン↓
• 複数のデバイスに同時に転送できる！
ここにEPUBファイル
をドラッグする
12

iBookstoreの現状
◇ iTunes Producer（アプリ）
• 電子書籍をiBookstoreに配信するためのアプリ。
• 電子書籍ファイル、カバーアートスクリーンショット、メタデー
タ、価格、販売地域などの情報を入力し配信する。
• 問題点を結構細かく指摘してくれる（問題の切り分けのために
EPUBチェックは通しておくべき）。
• iTunes Producerのアイコン→

13

iBookstoreの現状
◇ iTunes Producer（アプリ）

起動時情報入力画面
14

iBookstoreの現状
◆ iBookstore Publisher User Guide（PDF）
◇ iBookstoreでの配信に関する様々な情報を提供する。
◇ iTunes Connectの利用方法の紹介。
◇ EPUB形式の作成・配信の概要。
◇ .ibooks形式の作成・配信の概要。
15

iBookstoreの現状
◆ iBookstore Asset Guide（PDF）
◇ EPUB形式、.ibooks形式の電子書籍に関する制作ガイド。
◇ EPUBについては、EPUB仕様の理解を前提として
iBookstore向けの独自仕様などが記載されている。
◆ iBookstore Formatting Guide（PDF）
◇ メタデータの記入例（reject対象の例なども）。
◇ カバーアートや電子書籍内のアセットデータに関する規定
など。
16

iBookstoreの現状
◆ Using iTunes Producer 2.9 for Books（PDF）
◇ iTunes Producerの使い方の説明。
◇ 入力項目に関する説明。
※ ドキュメント類は英語版の方が新しい場合があるの
で注意
◆ iBookstore EPUB Example 3.0（EPUB）
◇ リフローEPUBのサンプル
◆ Fixed Layout EPUB Example 3.1（EPUB）
◇ 固定レイアウトEPUBのサンプル（含JavaScript）など。
17

iBooks用のEPUB制作
■ iBooksがサポートするEPUBの意外な(？)仕様
◆ page-listナビゲーション
通常の目次（tocナビゲーション）に加えて目次ファイルに定義す
る、印刷ページ対応用の目次。
nav要素のepub:type属性に「page-list」を設定。
目次の項目として印刷ページの開始位置を指定。
<nav epub:type="page-list" hidden="hidden">
<ol>
<li><a href="text/p-titlepage.xhtml">1</a></li>
<li><a href="text/p-001.xhtml">2</a></li>
<li><a href="text/p-001.xhtml#p004">3</a></li>
：
</ol>
</nav>
記述例）
19


Booksで目次を表示し、下部の
「プリントされたページ番号を
表示するには、タップします」
と書いてある場所をタップする
と、印刷ページの表示モードに
切り替わる。
20


印刷ページの表示モードでは、
目次の項目が印刷ページになる
他、本編の下部ページ表示や行
の上（横書時は左）にページ番
号が表示される。
21

◆ JavaScriptのサポート
◇ リフロー、固定レイアウトともJavaScriptを使用できる。
◇ iBooksで使用するためのApple製JavaScriptライブラリ「ibooks.js」というの
がある。
◇ ibooks.jsは、モバイルデバイスでストレス無く動作することを想定しているの
で、構造はシンプル（らしい）。
◇ ibooks.jsで提供される機能は次のようなもの。
• 遅延適用CSSクラス（HTMLファイルのロード後、指定時間遅れてCSSクラスが適用され
るようにできる）。
• 要素のドラッグ。
• 要素の切り替え（タップする度に「active」クラスの有無が切り替わる）。
• 音声ファイルの再生・停止（独自のボタンが作れる）。
＊ JavaScriptを使用するHTMLはopf内で「properties="scripted" 」の指定
を入れるのを忘れずに。
22

◆ 脚注参照
◇ 脚注へのリンクをポップアップ表示させる仕組み

タップするとポップ
アップが開く
23

◆ 脚注参照
◇ リンク元のa要素にepub:type要素を追加し「noteref」を指定。
◇ リンク先の注釈の要素にはepub:type属性「footnote」を指定。
◇ リンク元、リンク先HTMLファイルにepub名前空間の定義を忘
れないように注意。
・リンク元：
<p>…<a href="ファイル#ID" epub:type="noteref">リンク元</a>…</p>
・リンク先：
<aside id=”ID” epub:type="footnote">
<p>脚注の文言</p>
</aside>
記述例）
<html … xmlns:epub="http://www.idpf.org/2007/ops">
記述例）
24

◆ 脚注参照
◇ 注釈の要素をaside要素にすると、電子書籍内の本編で非
表示になる。
◇ 本編で表示させたい場合にはdiv要素などにする。
＊脚注ポップアップではスタイルが無効になるので、表示内
容がシンプルなテキスト情報のみの場合に使いやすい（画
像は表示可能）。
25

◆ 非線形ドキュメント（リフローのみ）
◇ opfファイルのspine要素＞itemref要素のlinear属性を
「no」に設定したドキュメントのこと。
◇ コンテンツの補足資料などで、表示順が関係ないドキュメ
ントを指す（表、図、グラフ、注釈などが代表的）。
◇ 非線形ドキュメントは通常のページめくりでは表示され
ず、本編ページからリンクすることで表示される。
◇ iBooksにおける非線形ドキュメントの表示形態は、別ウィ
ンドウが被さる感じ（↓次ページ図）。
<itemref idref="コンテンツドキュメントID" linear="no" />
記述例）
26

◆ 非線形ドキュメント（リフローのみ）

本編と異なりページめくりもなく、
ユーザーによる文字サイズやフォント
の変更もできない（ボタン類が表示
されない）。
meta要素のviewport設定で表示サイ
ズを変更できる。
左図は下記設定を追加。
<meta name="viewport"
content="width=640" />
非線形ドキュメントではスタイルが
有効、ビデオ、音声、JavaScriptも使
える。
27

■ iBooksの独自仕様
◆ 画像ファイルの画素数制限：320万ピクセル
◇ 以前は200万ピクセル（サイズ例1,600 1,250ピクセル）
以内だったが、2013年8月に320万ピクセルに引き上げら
れた。
恐らくRetina iPadの画素数（2,048 1,536=3,145,728ピ
クセル）を考慮したものと思われる。
28

◆ 独自仕様用のメタデータ
◇ iBooks用の独自仕様にはopfファイルにメタデータを追加
して使用するものがある。
◇ メタデータのプロパティは"ibooks"プリフィックスで始め
るので、opfファイルのpackage開始タグにpreﬁx属性
で"ibooks"プリフィックスを定義する。
◇ その上で、次ページからの設定を使用する。

<package … prefix="ibooks:http://vocabulary.itunes.apple.com/
rdf/ibooks/vocabulary-extensions-1.0/">
記述例）
29

◆ EPUB書籍のバージョン設定（リフロー／固定レイアウ
ト）
◇ EPUB書籍のバージョン管理に使用する。
◇ 新しいバージョンの書籍に更新すると、古いバージョンを購入し
ていた読者はアップデートすることができる。
◇ バージョン番号は「.」で区切って3つの数字まで指定できる。
◇ 1つの数字は4桁まで指定可能。
◇ 有効なバージョン表記の例）
1.0／1.10.2／9999.9999.9999 など

<meta property="ibooks:version">1.0.5</meta>
記述例）
30

◆ CSSでフォント指定を行う場合の指定
◇ 埋め込みフォント使用時を始め、CSSでフォントを指定す
る際には下記指定を追加する。
＊埋め込みフォント使用時には、フォントファイルを
manifest要素に定義するのも忘れないように。
◆ iBooksの表示テーマをスクロールにした場合のスク
ロール方向（リフロー）
◇ 日本語の書籍は、縦書き・横書きに関わらず横方向にスク
ロールする（↓次ページ図）。
<meta property="ibooks:specified-fonts">true</meta>
記述例）
31

◆ iBooksの表示テーマをスクロールにした場合のスクロ
ール方向（リフロー）
◇ 横書き時に縦スクロールにしたい場合には、次ページの指定
を追加する。
縦書き（左）でも横書き（右）でも横向きにスクロールする
32

◆ iBooksの表示テーマをスクロールにした場合のスクロ
ール方向（リフロー）

<meta property="ibooks:scroll-axis">vertical</meta>
記述例）
これで縦スクロールになる。
技術書など、図版の多い書籍は画像
の収まりの問題が解消されるので、
縦スクロールが適している。
33

◆ CSSの画像サイズ指定を優先する（リフロー）
iBooksでは画像のサイズ管理が独特。CSSの指定を優先させる。

・opfファイル：
<meta property="ibooks:respect-image-size-class">クラス名</meta>
・HTMLファイル：
<img class="クラス名" src="画像ファイル" alt="代替テキスト" />
記述例）
どちらの画像にも「height: 1em; width: auto;」のスタイルを適用して
ある。優先設定がないと画像の高さ（大きさ）が変わらない。
優先設定なし優先設定あり
34

◆ 2ドキュメント見開き時の閉じ部分を非表示に（固定レ
イアウト）

<meta property="ibooks:binding">false</meta>
記述例）
通常：中央に閉じ部分の陰影がある設定追加：閉じ部分が消える
35

◆ 1htmlでの見開き（固定レイアウト）
＊ iBooksの独自仕様ではないが関連事項として

<meta property="rendition:spread">none</meta>
記述例）
見た目には分かりにくいが1htmlの見開きこの場合、ページ切り替えがスライドになる
36

■ iBooks用のEPUB制作の注意点
◆ 表示・動作がウェブブラウザと案外異なる
◇ 少し凝ったコンテンツを制作すると、に遭遇することが
多い。
→予算や期間は余裕を持って。
◇ JavaScriptを使ったコンテンツや縦書きコンテンツでに
遭遇するケースが多い。
◆ EpubCheckを通しておく
◇ トラブル時の問題の切り分けがしやすい
37

◆ OSのアップデートに注意
◇ iBooksアプリのアップデートだけでなく、OSのアップデ
ートでも動作仕様が変わることがある。
◇ iBooks／OSのアップデート時には表示確認をする。
◇ 特にJavaScriptを使ったコンテンツではより確認が重要。
◆ Media Overlays(読み上げ)は固定レイアウトのみ
◇ 絵本のような文字(＝読み上げ対象)が少ないものに向いて
いる。
38

iBooks Authorでの制作
■ iBooks Authorの概要
◆ 高品位なコンテンツを制作できる本格的な制作アプ
リ。
◆ しかも無料！
◆ 固定レイアウトのみか、リフロー切り替え可能かで制
作方法が変わる可能性がある。
◆ リフロー切り替えを可能にする場合、「メインのテキス
トフロー」がリフローコンテンツになり、それを意識す
ることが重要。
◆ 安全なインタラクティブコンテンツの制作が可能。
40

◆ 既存の書籍の.ibooks版を作る場合、印刷版とどのよ
うに変えるかの検討が重要。
◇ メインのテキストフロー、インタラクティブ性、最大化表
示、ビデオ・音声データの使用、レイアウト(省スペース
含)など。
◆ HTMLウィジェットを利用することで独自のウィジ
ェットの作成も可能。
◆ 独自ウィジェットではオンラインのリソースにもア
クセス可能。
41

横向き固定レイアウト縦向きリフロー
赤枠がメインのテキストフロー。
メインのテキストフロー外に配置されているオ
ブジェクトの内、最大化表示できるものはリフ
ロー表示時に左カラムに配置される。
メインのテキストフローには、画像・グラフ・
表・図形なども含めることができる。
それらはメインのテキストフローに含めた場
合、最大化できない。
42

■ iBooks Authorのウィジェット
いくつか代表的なものをご紹介
◆ ギャラリーウィジェット
◇ 複数の画像を1ヶ所でスライド表示できる。

表示サイズのままスワイプで写真を切
り替えることもできるし、最大化表示
もできる。
43

◆ インタラクティブウィジェット
◇ 画像の一部分に引き出し線付きのラベルで説明を加える。
◇ ラベルをタップすると拡大表示する。
ラベルの位置や、ラベルタップ時の拡大率などは自由に設定できる。
ちなみに画像中の虫ピンマークは画像の一部。iBooks Authorで追加されたものではない。
初期表示ラベルタップ後の拡大表示
44

◆ メディアウィジェット
◇ ビデオウィジェット＆オーディオウィジェット。
◇ ソースデータはドラッグ＆ドロップで自動圧縮される。
◇ ソースデータにはなるべく高品質な状態のものを使う。

オーディオウィジェットのコント
ローラーはボタン型も選べる。
オーディオウィジェットとビデオウィジェット
45

◆ スクロールサイドバーウィジェット
◇ メインのテキストフローとは別のコラム的な情報を扱うのに便利。
◇ 内容をスクロールできるので、限られたスペースでも利用できる。

スクロールサイドバーウィジェットスクロールできる
46

◆ ポップオーバーウィジェット
◇ スクロールサイドバーウィジェットと同様にコラム的な情報を
扱うのに便利。
◇ 画像をクリックしてフキダシ型のポップアップを表示。
◆ HTMLウィジェット
◇ 自分で制作した.wdgtファイルを読み込んで
ウィジェットとして利用する。
◇ .wdgtファイルの制作ツールにはAppleの
「DashCode」などがある。
◇ Youtubeなどのオンラインコンテンツも
利用可能。
ポップオーバーウィジェット
47

■ iBooks Authorで利用できる便利ツール
◆ Bookry（https://bookry.com/widgets/）
◇ オンラインの無料カスタムウィジェットサービス
◇ アカウントを作成し、作成したいウィジェットをクラウド
上で選択・設定を行いダウンロードできる。
◇ iBooks Author用のテンプレートファイルも配布している
（2013年9月時点で2点のみ）
48

◆ Bookry（https://bookry.com/widgets/）

ウィジェット制作トップウィジェット選択
49

◆ Book Widgets（http://www.ibook-widgets.com/）
◇ ウィジェット制作用アプリをダウンロード＆インストール。
◇ アプリ内で作成したいウィジェットをクラウド上で選択・設
定を行い保存する。
◇ アプリは有料（個人：99ドル/年他のライセンスもあり）

サイトトップ制作アプリ
50

◆ Hype
(https://itunes.apple.com/jp/app/hype-2/id685096913?mt=12)
◇ タイムラインベースのHTML5サイト／アニメーション制作ツール。
◇ iBooks Authorで利用可能な.wdgt形式の書き出しをサポート。
◇ 2013年9月現在2,600円

Mac App Store ウィジェット書き出しメニュー
51

◆ Adobe Edge Animate CC
(http://html.adobe.com/jp/edge/animate/)
◇ タイムラインベースのHTML5サイト／アニメーション制作ツール。
◇ iBooks Authorで利用可能な.wdgt形式の書き出しをサポート。
◇ 2013年9月現在無料メンバーシップで利用可能

Adobeのサイトウィジェット書き出し設定
サンプルファイルダウンロードURL（短縮URL）：http://adobe.ly/16ApcOo
52

お知らせ
■ ロクナナワークショップ
◆ ハンズオン講座「林拓也の電子書籍講座」
◆ http://67.org/ws/workshop/detail/081ebook.html
■ m-School
◆ ハンズオン講座「EPUB3で作る！電子書籍制作レシ
ピ」
◆ http://m-school.biz/course/ebook/epub3.htm
■ Amazon著者ページ
◆ http://www.amazon.co.jp/-/e/B00421WIYO/
54

2013年 9月 JEPAセミナー
Appleの電子出版：iBookstoreとiBooks Author
ご清聴ありがとうございました
55

2013年9月JEPAセミナー「Appleの電子出版：iBookstoreとiBooks Author」

Recommended

Recommended

More Related Content

Similar to 2013年9月JEPAセミナー「Appleの電子出版：iBookstoreとiBooks Author」

Similar to 2013年9月JEPAセミナー「Appleの電子出版：iBookstoreとiBooks Author」 (6)

Recently uploaded

Recently uploaded (8)

2013年9月JEPAセミナー「Appleの電子出版：iBookstoreとiBooks Author」