Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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のみ)
  →✕販売数/○表示確認
◆ 対応デバイスの...
iBookstoreの現状
◆ ビデオ、音声、スクリプトの利用が可能
  →✕iBookstore専用になりがち/○独自性や表現力
◆ iBooksの独自制作仕様
  →✕ のトラブル、制作者泣かせ…
◆ iBooksのリーダーアプリとしてのデ...
iBookstoreの現状
■ iBookstoreでの取り扱い形式
◆ EPUB(日本語書籍はEPUB 3形式)
◆ .ibooks(iBooks Author形式)
* 2013年9月時点で日本語コンテンツは未受付
  →しかし「日本語コン...
iBookstoreの現状
  ★現時点ではEPUB形式のみ。
  →遠からず.ibooks形式も扱われるはず!(根拠なし)
  縦書き、右開き、ルビなどの実装後??
iTunes ConnectでのAppleからのメッセージ
9
iBookstoreの現状
■ 配布アカウントとツール類
◆ アカウント
◇ 無料配布用アカウント
◇ 有料販売用アカウント(無料の配布も可)
• 米納税者番号が必要。
★いずれかのアカウントを取得すると、iTunes Connect(Appl...
iBookstoreの現状
◆ ツール/ドキュメント
◇ Book Proofer(アプリ)
• Macで作成したEPUBファイルをiOSデバイスに転送するためのア
プリ。
• USBケーブルで接続したデバイスに転送する。
• EPUB化する前...
iBookstoreの現状
◇ Book Proofer(アプリ)
• Book Prooferのアイコン↓
• 複数のデバイスに同時に転送できる!
ここにEPUBファイル
をドラッグする
12
iBookstoreの現状
◇ iTunes Producer(アプリ)
• 電子書籍をiBookstoreに配信するためのアプリ。
• 電子書籍ファイル、カバーアートスクリーンショット、メタデー
タ、価格、販売地域などの情報を入力し配信する。...
iBookstoreの現状
◇ iTunes Producer(アプリ)
 
起動時 情報入力画面
14
iBookstoreの現状
◆ iBookstore Publisher User Guide(PDF)
◇ iBookstoreでの配信に関する様々な情報を提供する。
◇ iTunes Connectの利用方法の紹介。
◇ EPUB形式の作成...
iBookstoreの現状
◆ iBookstore Asset Guide(PDF)
◇ EPUB形式、.ibooks形式の電子書籍に関する制作ガイド。
◇ EPUBについては、EPUB仕様の理解を前提として
iBookstore向けの独自仕...
iBookstoreの現状
◆ Using iTunes Producer 2.9 for Books(PDF)
◇ iTunes Producerの使い方の説明。
◇ 入力項目に関する説明。
※ ドキュメント類は英語版の方が新しい場合があるの...
iBooks用のEPUB制作
18
iBooks用のEPUB制作
■ iBooksがサポートするEPUBの意外な(?)仕様
◆ page-listナビゲーション
 通常の目次(tocナビゲーション)に加えて目次ファイルに定義す
る、印刷ページ対応用の目次。
nav要素のepub:...
iBooks用のEPUB制作
◆ page-listナビゲーション
 
Booksで目次を表示し、下部の
「プリントされたページ番号を
表示するには、タップします」
と書いてある場所をタップする
と、印刷ページの表示モードに
切り替わる。
20
iBooks用のEPUB制作
◆ page-listナビゲーション
 
印刷ページの表示モードでは、
目次の項目が印刷ページになる
他、本編の下部ページ表示や行
の上(横書時は左)にページ番
号が表示される。
21
iBooks用のEPUB制作
◆ JavaScriptのサポート
◇ リフロー、固定レイアウトともJavaScriptを使用できる。
◇ iBooksで使用するためのApple製JavaScriptライブラリ「ibooks.js」というの
があ...
iBooks用のEPUB制作
◆ 脚注参照
◇ 脚注へのリンクをポップアップ表示させる仕組み
 
タップするとポップ
アップが開く
23
iBooks用のEPUB制作
◆ 脚注参照
◇ リンク元のa要素にepub:type要素を追加し「noteref」を指定。
◇ リンク先の注釈の要素にはepub:type属性「footnote」を指定。
◇ リンク元、リンク先HTMLファイルに...
iBooks用のEPUB制作
◆ 脚注参照
◇ 注釈の要素をaside要素にすると、電子書籍内の本編で非
表示になる。
◇ 本編で表示させたい場合にはdiv要素などにする。
* 脚注ポップアップではスタイルが無効になるので、表示内
容がシンプル...
iBooks用のEPUB制作
◆ 非線形ドキュメント(リフローのみ)
◇ opfファイルのspine要素>itemref要素のlinear属性を
「no」に設定したドキュメントのこと。
◇ コンテンツの補足資料などで、表示順が関係ないドキュメ
...
iBooks用のEPUB制作
◆ 非線形ドキュメント(リフローのみ)
 
本編と異なりページめくりもなく、
ユーザーによる文字サイズやフォント
の変更もできない( ボタン類が表示
されない)。
meta要素のviewport設定で表示サイ
ズを...
iBooks用のEPUB制作
■ iBooksの独自仕様
◆ 画像ファイルの画素数制限:320万ピクセル
◇ 以前は200万ピクセル(サイズ例1,600 1,250ピクセル)
以内だったが、2013年8月に320万ピクセルに引き上げら
れた。
...
iBooks用のEPUB制作
◆ 独自仕様用のメタデータ
◇ iBooks用の独自仕様にはopfファイルにメタデータを追加
して使用するものがある。
◇ メタデータのプロパティは"ibooks"プリフィックスで始め
るので、opfファイルのpa...
iBooks用のEPUB制作
◆ EPUB書籍のバージョン設定(リフロー/固定レイアウ
ト)
◇ EPUB書籍のバージョン管理に使用する。
◇ 新しいバージョンの書籍に更新すると、古いバージョンを購入し
ていた読者はアップデートすることができる...
iBooks用のEPUB制作
◆ CSSでフォント指定を行う場合の指定
◇ 埋め込みフォント使用時を始め、CSSでフォントを指定す
る際には下記指定を追加する。
* 埋め込みフォント使用時には、フォントファイルを
manifest要素に定義する...
iBooks用のEPUB制作
◆ iBooksの表示テーマをスクロールにした場合のスクロ
ール方向(リフロー)
◇ 横書き時に縦スクロールにしたい場合には、次ページの指定
を追加する。
縦書き(左)でも横書き(右)でも横向きにスクロールする
32
iBooks用のEPUB制作
◆ iBooksの表示テーマをスクロールにした場合のスクロ
ール方向(リフロー)
 
<meta property="ibooks:scroll-axis">vertical</meta>
記述例)
これで縦スクロ...
iBooks用のEPUB制作
◆ CSSの画像サイズ指定を優先する(リフロー)
 iBooksでは画像のサイズ管理が独特。CSSの指定を優先させる。
 
・opfファイル:
<meta property="ibooks:respect-imag...
iBooks用のEPUB制作
◆ 2ドキュメント見開き時の閉じ部分を非表示に(固定レ
イアウト)
 
<meta property="ibooks:binding">false</meta>
記述例)
通常:中央に閉じ部分の陰影がある 設定追加...
iBooks用のEPUB制作
◆ 1htmlでの見開き(固定レイアウト)
* iBooksの独自仕様ではないが関連事項として
 
<meta property="rendition:spread">none</meta>
記述例)
見た目には分...
iBooks用のEPUB制作
■ iBooks用のEPUB制作の注意点
◆ 表示・動作がウェブブラウザと案外異なる
◇ 少し凝ったコンテンツを制作すると、 に遭遇することが
多い。
→予算や期間は余裕を持って。
◇ JavaScriptを使った...
iBooks用のEPUB制作
◆ OSのアップデートに注意
◇ iBooksアプリのアップデートだけでなく、OSのアップデ
ートでも動作仕様が変わることがある。
◇ iBooks/OSのアップデート時には表示確認をする。
◇ 特にJavaScr...
iBooks Authorでの制作
39
iBooks Authorでの制作
■ iBooks Authorの概要
◆ 高品位なコンテンツを制作できる本格的な制作アプ
リ。
◆ しかも無料!
◆ 固定レイアウトのみか、リフロー切り替え可能かで制
作方法が変わる可能性がある。
◆ リフロ...
iBooks Authorでの制作
◆ 既存の書籍の.ibooks版を作る場合、印刷版とどのよ
うに変えるかの検討が重要。
◇ メインのテキストフロー、インタラクティブ性、最大化表
示、ビデオ・音声データの使用、レイアウト(省スペース
含)など...
iBooks Authorでの制作
横向き固定レイアウト 縦向きリフロー
赤枠がメインのテキストフロー。
メインのテキストフロー外に配置されているオ
ブジェクトの内、最大化表示できるものはリフ
ロー表示時に左カラムに配置される。
メインのテキス...
iBooks Authorでの制作
■ iBooks Authorのウィジェット
  いくつか代表的なものをご紹介
◆ ギャラリーウィジェット
◇ 複数の画像を1ヶ所でスライド表示できる。
 
表示サイズのままスワイプで写真を切
り替えることも...
iBooks Authorでの制作
◆ インタラクティブウィジェット
◇ 画像の一部分に引き出し線付きのラベルで説明を加える。
◇ ラベルをタップすると拡大表示する。
 ラベルの位置や、ラベルタップ時の拡大率などは自由に設定できる。
ちなみに画...
iBooks Authorでの制作
◆ メディアウィジェット
◇ ビデオウィジェット&オーディオウィジェット。
◇ ソースデータはドラッグ&ドロップで自動圧縮される。
◇ ソースデータにはなるべく高品質な状態のものを使う。
 
オーディオウィジ...
iBooks Authorでの制作
◆ スクロールサイドバーウィジェット
◇ メインのテキストフローとは別のコラム的な情報を扱うのに便利。
◇ 内容をスクロールできるので、限られたスペースでも利用できる。
 
スクロールサイドバーウィジェット ...
iBooks Authorでの制作
◆ ポップオーバーウィジェット
◇ スクロールサイドバーウィジェットと同様にコラム的な情報を
扱うのに便利。
◇ 画像をクリックしてフキダシ型のポップアップを表示。
◆ HTMLウィジェット
◇ 自分で制作し...
iBooks Authorでの制作
■ iBooks Authorで利用できる便利ツール
◆ Bookry(https://bookry.com/widgets/)
◇ オンラインの無料カスタムウィジェットサービス
◇ アカウントを作成し、作成...
iBooks Authorでの制作
◆ Bookry(https://bookry.com/widgets/)
 
ウィジェット制作トップ ウィジェット選択
49
iBooks Authorでの制作
◆ Book Widgets(http://www.ibook-widgets.com/)
◇ ウィジェット制作用アプリをダウンロード&インストール。
◇ アプリ内で作成したいウィジェットをクラウド上で選択・...
iBooks Authorでの制作
◆ Hype
(https://itunes.apple.com/jp/app/hype-2/id685096913?mt=12)
◇ タイムラインベースのHTML5サイト/アニメーション制作ツール。
◇ i...
iBooks Authorでの制作
◆ Adobe Edge Animate CC
(http://html.adobe.com/jp/edge/animate/)
◇ タイムラインベースのHTML5サイト/アニメーション制作ツール。
◇ iB...
お知らせ
53
お知らせ
■ ロクナナワークショップ
◆ ハンズオン講座「林拓也の電子書籍講座」
◆ http://67.org/ws/workshop/detail/081ebook.html
■ m-School
◆ ハンズオン講座「EPUB3で作る!電子...
2013年 9月 JEPAセミナー
Appleの電子出版:iBookstoreとiBooks Author
ご清聴ありがとうございました 
55
Upcoming SlideShare
Loading in …5
×

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

6,648 views

Published on

2013年9月25日開催のJEPAセミナー「Appleの電子出版:iBookstoreとiBooks Author」の資料
【追記】2013年9月25日1:30更新

Published in: Technology

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

  1. 1. 2013年 9月 JEPAセミナー  Appleの電子出版:iBookstoreとiBooks Author 林 拓也(ハヤシ タクヤ) 1
  2. 2. プロフィール ■ 林 拓也(ハヤシ タクヤ) ■ Twitter:@HapHands ■ Facebook:takuya.hayashi ■ デジタルコンテンツ受注制作 ■ トレーニングインストラクター ■ 書籍執筆 2
  3. 3. 今日の内容 3
  4. 4. 今日の内容 ■ iBookstoreの現状 ■ iBooks用のEPUB制作 ■ iBooks Authorでの制作 4
  5. 5. iBookstoreの現状 5
  6. 6. iBookstoreの現状 ■ iBookstoreのメリット・デメリット * ビジネス面と技術面でメリット・デメリットは必ずしも 一致しない。 ◆ 対応OSの少なさ(iOS&次期MacOSのみ)   →✕販売数/○表示確認 ◆ 対応デバイスの少なさ(E-インクデバイスが無い)   →✕販売数(ユーザー層が少ない)/○表示確認 ◆ 販売地域の広さ(KDPは11カ国、iBookstoreは51カ国)   →○販売数 6
  7. 7. iBookstoreの現状 ◆ ビデオ、音声、スクリプトの利用が可能   →✕iBookstore専用になりがち/○独自性や表現力 ◆ iBooksの独自制作仕様   →✕ のトラブル、制作者泣かせ… ◆ iBooksのリーダーアプリとしてのデキの良さ(メ モ、マーカー、辞書機能、追加フォントなど)   →○利用者増 7
  8. 8. iBookstoreの現状 ■ iBookstoreでの取り扱い形式 ◆ EPUB(日本語書籍はEPUB 3形式) ◆ .ibooks(iBooks Author形式) * 2013年9月時点で日本語コンテンツは未受付   →しかし「日本語コンテンツが受け付けられない」という オフィシャルな情報は見当たらない。   →書籍執筆時に試してみた結果、Appleからメッセージが 届く(↓次ページ図)。 8
  9. 9. iBookstoreの現状   ★現時点ではEPUB形式のみ。   →遠からず.ibooks形式も扱われるはず!(根拠なし)   縦書き、右開き、ルビなどの実装後?? iTunes ConnectでのAppleからのメッセージ 9
  10. 10. iBookstoreの現状 ■ 配布アカウントとツール類 ◆ アカウント ◇ 無料配布用アカウント ◇ 有料販売用アカウント(無料の配布も可) • 米納税者番号が必要。 ★いずれかのアカウントを取得すると、iTunes Connect(Appleの 出版コンテンツ管理サービスサイト)にログインできるようにな る。 →各種ツール/ドキュメントが入手できる。  とりあえず無料配布用アカウントを作るのがイイかも。 10
  11. 11. iBookstoreの現状 ◆ ツール/ドキュメント ◇ Book Proofer(アプリ) • Macで作成したEPUBファイルをiOSデバイスに転送するためのア プリ。 • USBケーブルで接続したデバイスに転送する。 • EPUB化する前のフォルダのドラッグ&ドロップでもOK。 • iTunesやDropBoxなどよりも早くて簡単。 11
  12. 12. iBookstoreの現状 ◇ Book Proofer(アプリ) • Book Prooferのアイコン↓ • 複数のデバイスに同時に転送できる! ここにEPUBファイル をドラッグする 12
  13. 13. iBookstoreの現状 ◇ iTunes Producer(アプリ) • 電子書籍をiBookstoreに配信するためのアプリ。 • 電子書籍ファイル、カバーアートスクリーンショット、メタデー タ、価格、販売地域などの情報を入力し配信する。 • 問題点を結構細かく指摘してくれる(問題の切り分けのために EPUBチェックは通しておくべき)。 • iTunes Producerのアイコン→   13
  14. 14. iBookstoreの現状 ◇ iTunes Producer(アプリ)   起動時 情報入力画面 14
  15. 15. iBookstoreの現状 ◆ iBookstore Publisher User Guide(PDF) ◇ iBookstoreでの配信に関する様々な情報を提供する。 ◇ iTunes Connectの利用方法の紹介。 ◇ EPUB形式の作成・配信の概要。 ◇ .ibooks形式の作成・配信の概要。 15
  16. 16. iBookstoreの現状 ◆ iBookstore Asset Guide(PDF) ◇ EPUB形式、.ibooks形式の電子書籍に関する制作ガイド。 ◇ EPUBについては、EPUB仕様の理解を前提として iBookstore向けの独自仕様などが記載されている。 ◆ iBookstore Formatting Guide(PDF) ◇ メタデータの記入例(reject対象の例なども)。 ◇ カバーアートや電子書籍内のアセットデータに関する規定 など。 16
  17. 17. 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
  18. 18. iBooks用のEPUB制作 18
  19. 19. 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
  20. 20. iBooks用のEPUB制作 ◆ page-listナビゲーション   Booksで目次を表示し、下部の 「プリントされたページ番号を 表示するには、タップします」 と書いてある場所をタップする と、印刷ページの表示モードに 切り替わる。 20
  21. 21. iBooks用のEPUB制作 ◆ page-listナビゲーション   印刷ページの表示モードでは、 目次の項目が印刷ページになる 他、本編の下部ページ表示や行 の上(横書時は左)にページ番 号が表示される。 21
  22. 22. iBooks用のEPUB制作 ◆ JavaScriptのサポート ◇ リフロー、固定レイアウトともJavaScriptを使用できる。 ◇ iBooksで使用するためのApple製JavaScriptライブラリ「ibooks.js」というの がある。 ◇ ibooks.jsは、モバイルデバイスでストレス無く動作することを想定しているの で、構造はシンプル(らしい)。 ◇ ibooks.jsで提供される機能は次のようなもの。 • 遅延適用CSSクラス(HTMLファイルのロード後、指定時間遅れてCSSクラスが適用され るようにできる)。 • 要素のドラッグ。 • 要素の切り替え(タップする度に「active」クラスの有無が切り替わる)。 • 音声ファイルの再生・停止(独自のボタンが作れる)。 * JavaScriptを使用するHTMLはopf内で「properties="scripted" 」の指定 を入れるのを忘れずに。 22
  23. 23. iBooks用のEPUB制作 ◆ 脚注参照 ◇ 脚注へのリンクをポップアップ表示させる仕組み   タップするとポップ アップが開く 23
  24. 24. 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
  25. 25. iBooks用のEPUB制作 ◆ 脚注参照 ◇ 注釈の要素をaside要素にすると、電子書籍内の本編で非 表示になる。 ◇ 本編で表示させたい場合にはdiv要素などにする。 * 脚注ポップアップではスタイルが無効になるので、表示内 容がシンプルなテキスト情報のみの場合に使いやすい(画 像は表示可能)。 25
  26. 26. iBooks用のEPUB制作 ◆ 非線形ドキュメント(リフローのみ) ◇ opfファイルのspine要素>itemref要素のlinear属性を 「no」に設定したドキュメントのこと。 ◇ コンテンツの補足資料などで、表示順が関係ないドキュメ ントを指す(表、図、グラフ、注釈などが代表的)。 ◇ 非線形ドキュメントは通常のページめくりでは表示され ず、本編ページからリンクすることで表示される。 ◇ iBooksにおける非線形ドキュメントの表示形態は、別ウィ ンドウが被さる感じ(↓次ページ図)。 <itemref idref="コンテンツドキュメントID" linear="no" /> 記述例) 26
  27. 27. iBooks用のEPUB制作 ◆ 非線形ドキュメント(リフローのみ)   本編と異なりページめくりもなく、 ユーザーによる文字サイズやフォント の変更もできない( ボタン類が表示 されない)。 meta要素のviewport設定で表示サイ ズを変更できる。 左図は下記設定を追加。 <meta name="viewport" content="width=640" /> 非線形ドキュメントではスタイルが 有効、ビデオ、音声、JavaScriptも使 える。 27
  28. 28. iBooks用のEPUB制作 ■ iBooksの独自仕様 ◆ 画像ファイルの画素数制限:320万ピクセル ◇ 以前は200万ピクセル(サイズ例1,600 1,250ピクセル) 以内だったが、2013年8月に320万ピクセルに引き上げら れた。 恐らくRetina iPadの画素数(2,048 1,536=3,145,728ピ クセル)を考慮したものと思われる。 28
  29. 29. iBooks用のEPUB制作 ◆ 独自仕様用のメタデータ ◇ iBooks用の独自仕様にはopfファイルにメタデータを追加 して使用するものがある。 ◇ メタデータのプロパティは"ibooks"プリフィックスで始め るので、opfファイルのpackage開始タグにprefix属性 で"ibooks"プリフィックスを定義する。 ◇ その上で、次ページからの設定を使用する。   <package … prefix="ibooks:http://vocabulary.itunes.apple.com/ rdf/ibooks/vocabulary-extensions-1.0/"> 記述例) 29
  30. 30. iBooks用のEPUB制作 ◆ EPUB書籍のバージョン設定(リフロー/固定レイアウ ト) ◇ EPUB書籍のバージョン管理に使用する。 ◇ 新しいバージョンの書籍に更新すると、古いバージョンを購入し ていた読者はアップデートすることができる。 ◇ バージョン番号は「.」で区切って3つの数字まで指定できる。 ◇ 1つの数字は4桁まで指定可能。 ◇ 有効なバージョン表記の例) 1.0/1.10.2/9999.9999.9999 など   <meta property="ibooks:version">1.0.5</meta> 記述例) 30
  31. 31. iBooks用のEPUB制作 ◆ CSSでフォント指定を行う場合の指定 ◇ 埋め込みフォント使用時を始め、CSSでフォントを指定す る際には下記指定を追加する。 * 埋め込みフォント使用時には、フォントファイルを manifest要素に定義するのも忘れないように。 ◆ iBooksの表示テーマをスクロールにした場合のスク ロール方向(リフロー) ◇ 日本語の書籍は、縦書き・横書きに関わらず横方向にスク ロールする(↓次ページ図)。 <meta property="ibooks:specified-fonts">true</meta> 記述例) 31
  32. 32. iBooks用のEPUB制作 ◆ iBooksの表示テーマをスクロールにした場合のスクロ ール方向(リフロー) ◇ 横書き時に縦スクロールにしたい場合には、次ページの指定 を追加する。 縦書き(左)でも横書き(右)でも横向きにスクロールする 32
  33. 33. iBooks用のEPUB制作 ◆ iBooksの表示テーマをスクロールにした場合のスクロ ール方向(リフロー)   <meta property="ibooks:scroll-axis">vertical</meta> 記述例) これで縦スクロールになる。 技術書など、図版の多い書籍は画像 の収まりの問題が解消されるので、 縦スクロールが適している。 33
  34. 34. iBooks用のEPUB制作 ◆ CSSの画像サイズ指定を優先する(リフロー)  iBooksでは画像のサイズ管理が独特。CSSの指定を優先させる。   ・opfファイル: <meta property="ibooks:respect-image-size-class">クラス名</meta> ・HTMLファイル: <img class="クラス名" src="画像ファイル" alt="代替テキスト" /> 記述例) どちらの画像にも「height: 1em; width: auto;」のスタイルを適用して ある。優先設定がないと画像の高さ(大きさ)が変わらない。 優先設定なし 優先設定あり 34
  35. 35. iBooks用のEPUB制作 ◆ 2ドキュメント見開き時の閉じ部分を非表示に(固定レ イアウト)   <meta property="ibooks:binding">false</meta> 記述例) 通常:中央に閉じ部分の陰影がある 設定追加:閉じ部分が消える 35
  36. 36. iBooks用のEPUB制作 ◆ 1htmlでの見開き(固定レイアウト) * iBooksの独自仕様ではないが関連事項として   <meta property="rendition:spread">none</meta> 記述例) 見た目には分かりにくいが1htmlの見開き この場合、ページ切り替えがスライドになる 36
  37. 37. iBooks用のEPUB制作 ■ iBooks用のEPUB制作の注意点 ◆ 表示・動作がウェブブラウザと案外異なる ◇ 少し凝ったコンテンツを制作すると、 に遭遇することが 多い。 →予算や期間は余裕を持って。 ◇ JavaScriptを使ったコンテンツや縦書きコンテンツで に 遭遇するケースが多い。 ◆ EpubCheckを通しておく ◇ トラブル時の問題の切り分けがしやすい 37
  38. 38. iBooks用のEPUB制作 ◆ OSのアップデートに注意 ◇ iBooksアプリのアップデートだけでなく、OSのアップデ ートでも動作仕様が変わることがある。 ◇ iBooks/OSのアップデート時には表示確認をする。 ◇ 特にJavaScriptを使ったコンテンツではより確認が重要。 ◆ Media Overlays(読み上げ)は固定レイアウトのみ ◇ 絵本のような文字(=読み上げ対象)が少ないものに向いて いる。 38
  39. 39. iBooks Authorでの制作 39
  40. 40. iBooks Authorでの制作 ■ iBooks Authorの概要 ◆ 高品位なコンテンツを制作できる本格的な制作アプ リ。 ◆ しかも無料! ◆ 固定レイアウトのみか、リフロー切り替え可能かで制 作方法が変わる可能性がある。 ◆ リフロー切り替えを可能にする場合、「メインのテキス トフロー」がリフローコンテンツになり、それを意識す ることが重要。 ◆ 安全なインタラクティブコンテンツの制作が可能。 40
  41. 41. iBooks Authorでの制作 ◆ 既存の書籍の.ibooks版を作る場合、印刷版とどのよ うに変えるかの検討が重要。 ◇ メインのテキストフロー、インタラクティブ性、最大化表 示、ビデオ・音声データの使用、レイアウト(省スペース 含)など。 ◆ HTMLウィジェットを利用することで独自のウィジ ェットの作成も可能。 ◆ 独自ウィジェットではオンラインのリソースにもア クセス可能。 41
  42. 42. iBooks Authorでの制作 横向き固定レイアウト 縦向きリフロー 赤枠がメインのテキストフロー。 メインのテキストフロー外に配置されているオ ブジェクトの内、最大化表示できるものはリフ ロー表示時に左カラムに配置される。 メインのテキストフローには、画像・グラフ・ 表・図形なども含めることができる。 それらはメインのテキストフローに含めた場 合、最大化できない。 42
  43. 43. iBooks Authorでの制作 ■ iBooks Authorのウィジェット   いくつか代表的なものをご紹介 ◆ ギャラリーウィジェット ◇ 複数の画像を1ヶ所でスライド表示できる。   表示サイズのままスワイプで写真を切 り替えることもできるし、最大化表示 もできる。 43
  44. 44. iBooks Authorでの制作 ◆ インタラクティブウィジェット ◇ 画像の一部分に引き出し線付きのラベルで説明を加える。 ◇ ラベルをタップすると拡大表示する。  ラベルの位置や、ラベルタップ時の拡大率などは自由に設定できる。 ちなみに画像中の虫ピンマークは画像の一部。iBooks Authorで追加されたものではない。 初期表示 ラベルタップ後の拡大表示 44
  45. 45. iBooks Authorでの制作 ◆ メディアウィジェット ◇ ビデオウィジェット&オーディオウィジェット。 ◇ ソースデータはドラッグ&ドロップで自動圧縮される。 ◇ ソースデータにはなるべく高品質な状態のものを使う。   オーディオウィジェットのコント ローラーはボタン型も選べる。 オーディオウィジェットとビデオウィジェット 45
  46. 46. iBooks Authorでの制作 ◆ スクロールサイドバーウィジェット ◇ メインのテキストフローとは別のコラム的な情報を扱うのに便利。 ◇ 内容をスクロールできるので、限られたスペースでも利用できる。   スクロールサイドバーウィジェット スクロールできる 46
  47. 47. iBooks Authorでの制作 ◆ ポップオーバーウィジェット ◇ スクロールサイドバーウィジェットと同様にコラム的な情報を 扱うのに便利。 ◇ 画像をクリックしてフキダシ型のポップアップを表示。 ◆ HTMLウィジェット ◇ 自分で制作した.wdgtファイルを読み込んで ウィジェットとして利用する。 ◇ .wdgtファイルの制作ツールにはAppleの 「DashCode」などがある。 ◇ Youtubeなどのオンラインコンテンツも 利用可能。 ポップオーバーウィジェット 47
  48. 48. iBooks Authorでの制作 ■ iBooks Authorで利用できる便利ツール ◆ Bookry(https://bookry.com/widgets/) ◇ オンラインの無料カスタムウィジェットサービス ◇ アカウントを作成し、作成したいウィジェットをクラウド 上で選択・設定を行いダウンロードできる。 ◇ iBooks Author用のテンプレートファイルも配布している (2013年9月時点で2点のみ) 48
  49. 49. iBooks Authorでの制作 ◆ Bookry(https://bookry.com/widgets/)   ウィジェット制作トップ ウィジェット選択 49
  50. 50. iBooks Authorでの制作 ◆ Book Widgets(http://www.ibook-widgets.com/) ◇ ウィジェット制作用アプリをダウンロード&インストール。 ◇ アプリ内で作成したいウィジェットをクラウド上で選択・設 定を行い保存する。 ◇ アプリは有料(個人:99ドル/年 他のライセンスもあり)   サイトトップ 制作アプリ 50
  51. 51. 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
  52. 52. 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. 53. お知らせ 53
  54. 54. お知らせ ■ ロクナナワークショップ ◆ ハンズオン講座「林拓也の電子書籍講座」 ◆ 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
  55. 55. 2013年 9月 JEPAセミナー Appleの電子出版:iBookstoreとiBooks Author ご清聴ありがとうございました  55

×