Embed Size (px)
DESCRIPTION
2013年9月25日開催のJEPAセミナー「Appleの電子出版：iBookstoreとiBooks Author」の資料 【追記】2013年9月25日1:30更新
Citation preview
2013年 9月 JEPAセミナー Appleの電子出版：iBookstoreとiBooks Author
林 拓也（ハヤシ タクヤ）
1
プロフィール
■林 拓也（ハヤシ タクヤ）
■Twitter：@HapHands
■ Facebook：takuya.hayashi
■デジタルコンテンツ受注制作
■トレーニングインストラクター
■書籍執筆
2
今日の内容
3
今日の内容
■ iBookstoreの現状
■ iBooks用のEPUB制作
■ iBooks Authorでの制作
4
iBookstoreの現状
5
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制作
18
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> <li><a href="text/p-001.xhtml#p007">4</a></li> <li><a href="text/p-001.xhtml#p018">5</a></li> ： </ol></nav>
記述例）
19
iBooks用のEPUB制作◆ page-listナビゲーション
Booksで目次を表示し、下部の「プリントされたページ番号を表示するには、タップします」と書いてある場所をタップすると、印刷ページの表示モードに切り替わる。
20
iBooks用のEPUB制作◆ page-listナビゲーション
印刷ページの表示モードでは、目次の項目が印刷ページになる他、本編の下部ページ表示や行の上（横書時は左）にページ番号が表示される。
21
iBooks用のEPUB制作◆ JavaScriptのサポート
◇ リフロー、固定レイアウトともJavaScriptを使用できる。
◇ iBooksで使用するためのApple製JavaScriptライブラリ「ibooks.js」というのがある。
◇ ibooks.jsは、モバイルデバイスでストレス無く動作することを想定しているので、構造はシンプル（らしい）。
◇ ibooks.jsで提供される機能は次のようなもの。
• 遅延適用CSSクラス（HTMLファイルのロード後、指定時間遅れてCSSクラスが適用されるようにできる）。
• 要素のドラッグ。
• 要素の切り替え（タップする度に「active」クラスの有無が切り替わる）。
• 音声ファイルの再生・停止（独自のボタンが作れる）。
＊ JavaScriptを使用するHTMLはopf内で「properties="scripted" 」の指定を入れるのを忘れずに。
22
iBooks用のEPUB制作◆脚注参照◇ 脚注へのリンクをポップアップ表示させる仕組み
タップするとポップアップが開く
23
iBooks用のEPUB制作◆ 脚注参照◇ リンク元の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
iBooks用のEPUB制作
◆脚注参照◇ 注釈の要素をaside要素にすると、電子書籍内の本編で非表示になる。
◇ 本編で表示させたい場合にはdiv要素などにする。
＊ 脚注ポップアップではスタイルが無効になるので、表示内容がシンプルなテキスト情報のみの場合に使いやすい（画像は表示可能）。
25
iBooks用のEPUB制作◆非線形ドキュメント（リフローのみ）◇ opfファイルのspine要素＞itemref要素のlinear属性を「no」に設定したドキュメントのこと。
◇ コンテンツの補足資料などで、表示順が関係ないドキュメントを指す（表、図、グラフ、注釈などが代表的）。
◇ 非線形ドキュメントは通常のページめくりでは表示されず、本編ページからリンクすることで表示される。
◇ iBooksにおける非線形ドキュメントの表示形態は、別ウィンドウが被さる感じ（↓次ページ図）。
<itemref idref="コンテンツドキュメントID" linear="no" />記述例）
26
iBooks用のEPUB制作◆非線形ドキュメント（リフローのみ）
本編と異なりページめくりもなく、ユーザーによる文字サイズやフォントの変更もできない（ ボタン類が表示されない）。
meta要素のviewport設定で表示サイズを変更できる。左図は下記設定を追加。
<meta name="viewport" content="width=640" />
非線形ドキュメントではスタイルが有効、ビデオ、音声、JavaScriptも使える。
27
iBooks用のEPUB制作
■ iBooksの独自仕様◆画像ファイルの画素数制限：320万ピクセル◇ 以前は200万ピクセル（サイズ例1,600×1,250ピクセル）以内だったが、2013年8月に320万ピクセルに引き上げられた。恐らくRetina iPadの画素数（2,048×1,536=3,145,728ピクセル）を考慮したものと思われる。
28
iBooks用のEPUB制作◆独自仕様用のメタデータ◇ iBooks用の独自仕様にはopfファイルにメタデータを追加して使用するものがある。
◇ メタデータのプロパティは"ibooks"プリフィックスで始めるので、opfファイルのpackage開始タグにprefix属性で"ibooks"プリフィックスを定義する。
◇ その上で、次ページからの設定を使用する。
<package … prefix="ibooks:http://vocabulary.itunes.apple.com/rdf/ibooks/vocabulary-extensions-1.0/">
記述例）
29
iBooks用のEPUB制作◆ EPUB書籍のバージョン設定（リフロー／固定レイアウト）◇ EPUB書籍のバージョン管理に使用する。
◇ 新しいバージョンの書籍に更新すると、古いバージョンを購入していた読者はアップデートすることができる。
◇ バージョン番号は「.」で区切って3つの数字まで指定できる。
◇ 1つの数字は4桁まで指定可能。
◇ 有効なバージョン表記の例）1.0／1.10.2／9999.9999.9999 など
<meta property="ibooks:version">1.0.5</meta>
記述例）
30
iBooks用のEPUB制作◆ CSSでフォント指定を行う場合の指定◇ 埋め込みフォント使用時を始め、CSSでフォントを指定する際には下記指定を追加する。
＊ 埋め込みフォント使用時には、フォントファイルをmanifest要素に定義するのも忘れないように。
◆ iBooksの表示テーマをスクロールにした場合のスクロール方向（リフロー）
◇ 日本語の書籍は、縦書き・横書きに関わらず横方向にスクロールする（↓次ページ図）。
<meta property="ibooks:specified-fonts">true</meta>
記述例）
31
iBooks用のEPUB制作◆ iBooksの表示テーマをスクロールにした場合のスクロール方向（リフロー）
◇ 横書き時に縦スクロールにしたい場合には、次ページの指定を追加する。
縦書き（左）でも横書き（右）でも横向きにスクロールする
32
iBooks用のEPUB制作◆ iBooksの表示テーマをスクロールにした場合のスクロール方向（リフロー）
<meta property="ibooks:scroll-axis">vertical</meta>
記述例）
これで縦スクロールになる。技術書など、図版の多い書籍は画像の収まりの問題が解消されるので、縦スクロールが適している。
33
iBooks用のEPUB制作◆ CSSの画像サイズ指定を優先する（リフロー）
iBooksでは画像のサイズ管理が独特。CSSの指定を優先させる。
・opfファイル：<meta property="ibooks:respect-image-size-class">クラス名</meta>
・HTMLファイル：<img class="クラス名" src="画像ファイル" alt="代替テキスト" />
記述例）
どちらの画像にも「height: 1em; width: auto;」のスタイルを適用してある。優先設定がないと画像の高さ（大きさ）が変わらない。
優先設定なし 優先設定あり
34
iBooks用のEPUB制作◆ 2ドキュメント見開き時の閉じ部分を非表示に（固定レイアウト）
<meta property="ibooks:binding">false</meta>
記述例）
通常：中央に閉じ部分の陰影がある 設定追加：閉じ部分が消える
35
iBooks用のEPUB制作◆ 1htmlでの見開き（固定レイアウト）＊ iBooksの独自仕様ではないが関連事項として
<meta property="rendition:spread">none</meta>
記述例）
見た目には分かりにくいが1htmlの見開き この場合、ページ切り替えがスライドになる
36
iBooks用のEPUB制作■ iBooks用のEPUB制作の注意点◆表示・動作がウェブブラウザと案外異なる◇ 少し凝ったコンテンツを制作すると、謎に遭遇することが多い。→予算や期間は余裕を持って。
◇ JavaScriptを使ったコンテンツや縦書きコンテンツで謎に遭遇するケースが多い。
◆ EpubCheckを通しておく◇ トラブル時の問題の切り分けがしやすい
37
iBooks用のEPUB制作◆ OSのアップデートに注意◇ iBooksアプリのアップデートだけでなく、OSのアップデートでも動作仕様が変わることがある。
◇ iBooks／OSのアップデート時には表示確認をする。
◇ 特にJavaScriptを使ったコンテンツではより確認が重要。
◆Media Overlays(読み上げ)は固定レイアウトのみ◇ 絵本のような文字(＝読み上げ対象)が少ないものに向いている。
38
iBooks Authorでの制作
39
iBooks Authorでの制作■ iBooks Authorの概要◆ 高品位なコンテンツを制作できる本格的な制作アプリ。
◆ しかも無料！
◆ 固定レイアウトのみか、リフロー切り替え可能かで制作方法が変わる可能性がある。
◆ リフロー切り替えを可能にする場合、「メインのテキストフロー」がリフローコンテンツになり、それを意識することが重要。
◆ 安全なインタラクティブコンテンツの制作が可能。
40
iBooks Authorでの制作◆既存の書籍の.ibooks版を作る場合、印刷版とどのように変えるかの検討が重要。
◇ メインのテキストフロー、インタラクティブ性、最大化表示、ビデオ・音声データの使用、レイアウト(省スペース含)など。
◆ HTMLウィジェットを利用することで独自のウィジェットの作成も可能。
◆独自ウィジェットではオンラインのリソースにもアクセス可能。
41
iBooks Authorでの制作横向き固定レイアウト 縦向きリフロー
赤枠がメインのテキストフロー。メインのテキストフロー外に配置されているオブジェクトの内、最大化表示できるものはリフロー表示時に左カラムに配置される。メインのテキストフローには、画像・グラフ・表・図形なども含めることができる。それらはメインのテキストフローに含めた場合、最大化できない。
42
iBooks Authorでの制作■ iBooks Authorのウィジェット いくつか代表的なものをご紹介
◆ギャラリーウィジェット◇ 複数の画像を1ヶ所でスライド表示できる。
表示サイズのままスワイプで写真を切り替えることもできるし、最大化表示もできる。
43
iBooks Authorでの制作◆ インタラクティブウィジェット◇ 画像の一部分に引き出し線付きのラベルで説明を加える。
◇ ラベルをタップすると拡大表示する。
ラベルの位置や、ラベルタップ時の拡大率などは自由に設定できる。ちなみに画像中の虫ピンマークは画像の一部。iBooks Authorで追加されたものではない。
初期表示 ラベルタップ後の拡大表示
44
iBooks Authorでの制作◆ メディアウィジェット◇ ビデオウィジェット＆オーディオウィジェット。
◇ ソースデータはドラッグ＆ドロップで自動圧縮される。
◇ ソースデータにはなるべく高品質な状態のものを使う。
オーディオウィジェットのコントローラーはボタン型も選べる。
オーディオウィジェットとビデオウィジェット
45
iBooks Authorでの制作◆ スクロールサイドバーウィジェット◇ メインのテキストフローとは別のコラム的な情報を扱うのに便利。
◇ 内容をスクロールできるので、限られたスペースでも利用できる。
スクロールサイドバーウィジェット スクロールできる
46
iBooks Authorでの制作◆ ポップオーバーウィジェット
◇ スクロールサイドバーウィジェットと同様にコラム的な情報を扱うのに便利。
◇ 画像をクリックしてフキダシ型のポップアップを表示。
◆ HTMLウィジェット◇ 自分で制作した.wdgtファイルを読み込んでウィジェットとして利用する。
◇ .wdgtファイルの制作ツールにはAppleの「DashCode」などがある。
◇ Youtubeなどのオンラインコンテンツも利用可能。
ポップオーバーウィジェット
47
iBooks Authorでの制作
■ iBooks Authorで利用できる便利ツール◆ Bookry（https://bookry.com/widgets/）◇ オンラインの無料カスタムウィジェットサービス
◇ アカウントを作成し、作成したいウィジェットをクラウド上で選択・設定を行いダウンロードできる。
◇ iBooks Author用のテンプレートファイルも配布している（2013年9月時点で2点のみ）
48
iBooks Authorでの制作
◆ Bookry（https://bookry.com/widgets/）
ウィジェット制作トップ ウィジェット選択
49
iBooks Authorでの制作◆ Book Widgets（http://www.ibook-widgets.com/）◇ ウィジェット制作用アプリをダウンロード＆インストール。◇ アプリ内で作成したいウィジェットをクラウド上で選択・設定を行い保存する。
◇ アプリは有料（個人：99ドル/年 他のライセンスもあり）
サイトトップ 制作アプリ
50
iBooks Authorでの制作◆ Hype
(https://itunes.apple.com/jp/app/hype-2/id685096913?mt=12)
◇ タイムラインベースのHTML5サイト／アニメーション制作ツール。◇ iBooks Authorで利用可能な.wdgt形式の書き出しをサポート。◇ 2013年9月現在2,600円
Mac App Store ウィジェット書き出しメニュー
51
iBooks Authorでの制作◆ 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
お知らせ
53
お知らせ■ロクナナワークショップ◆ ハンズオン講座「林拓也の電子書籍講座」
◆ 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
