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.
EBOOK STRATEGY REPORTPublished: April 19, 2013JAGAT Seminar
Instructional Designer | eBook DesignerYOUJI SAKAI境祐司profile
BOOKSウェブレイアウトの教科書EPUB3スタンダードデザインガイドWebデザイン基礎改訂3版InDesign CS6で作るEPUB 3 標準ガイドブック森 裕司, 境 祐司, 林 拓也, 向井 領治
『速習Webデザイン Flash CS6』(技術評論社)、『InDesign CS6で作るEPUB 3 標準ガイドブック』(共著/翔泳社)、『スマートフォンサイトデザインの基本原則』(共著/MdN)、『EPUB3 スタンダード・デザインガイド』...
community電子書籍メディア論http://www.facebook.com/eBookStrategyデザインの未来http://www.facebook.com/TheFutureDesign
テキスト
EPUB 3とHTML5レスポンシブWebデザインとEPUB3の最新動向日時 2013年4月19日14:00∼16:00日本印刷技術協会 3Fセミナールームhttp://www.jagat.jp/content/view/4835/395/EP...
レスポンシブWebデザインとEPUB3の最新動向本日のテーマはです...第1部「レスポンシブWebデザイン最新動向」は、エル・カミノ・リアル の木寺祥友さんの御講演
レスポンシブWebデザインと電子書籍についてまず最初に...
3年前電子書籍のコミュニティで「デジタル雑誌を異なるスクリーンサイズでどう表現するか」という熱い議論がありました
FLUID IMAGES当時話題になっていた開発アプローチ
2009年4月17日http://unstoppablerobotninja.com/entry/fluid-images/Unstoppable Robot NinjaFLUID IMAGESEthan MarcotteTwitter: @beep
デジタル雑誌のプロトタイプがつくられました2010年→2011年頃まで当時アップロードしたYouTubeのビデオで確認できます(※私がつくったものを2012年再投稿)http://youtu.be/l1aJB5L_0O8 http://yout...
レスポンシブWebデザインを紹介するため2011年に本を書きましたこれは本にしておこう
レスポンシブWebデザインが流行してから2年経ち...2013年スマートリキッドレイアウトハイブリッド・固定ハイブリッド・リフロー
Responsive Web DesignSummit 2013http://environmentsforhumans.com/2013/responsive-web-design-summit/奇しくもRWDサミットが昨日から....Apr...
Webウェブの中の電子書籍ウェブの外側にある電子書籍こういう話もします...
Great Expectations forDigital Publishing withHTML5 and the OpenWeb Platformhttp://youtu.be/sP_FI3KqOuQJeff Jaffe (CEO)ジェフ・ジャ...
EPUB 3とHTML5EPUB 3の最先端 表現技法iBookstoreとEPUB 3、Kindle Format 8とEPUB 3
[1]EPUB 3 とは?[2]EPUB 3 視覚表現について[3]Apple iBookstore[4]Amazon Kindle[5]EPUB 3 AHL[6]最先端事例(新聞)Apps[7]EPUB と電子書籍の未来
EPUB 3 とは?
IDPFInternational Digital Publishing Forumhttp://idpf.orgインターナショナルデジタルパブリッシング・フォーラム
2000 2007 2010 2012.bookXMDF EPUB2.02007年 Kindle 開始OEBPS1.0Open eBook Publication StructureEPUB 3.0Apps2011.10.111999.9Mob...
パッケージドキュメント※とても重要なデータ
ナビゲーションドキュメントパッケージドキュメント
ナビゲーションドキュメントパッケージドキュメント コンテンツドキュメント
HTML5 CSS3 XMLSVG SMIL採用されている標準技術
W3CWorld Wide Web Consortiumhttp://www.w3.orgワールドワイドウェブ・コンソーシアム
インターフェイスインターフェイス電子書籍はコンテンツとUIが完全に分離している
インターフェイスインターフェイス電子書籍はコンテンツとUIが完全に分離しているメタデータ(書誌情報)を持つ構造化されたマシンリーダブルなデータ
EPUBでつくられる電子出版物のタイプ
fixed-layout contentreflowable contentリフロー固定レイアウト
technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4リフロー 固定レイアウト
technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4リフロー・テキストが主体の文芸書など・文字サイズの変更・字体の変更・マージンの変更・背景色の変更・表示方...
technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4固定レイアウト・レイアウトを崩せない雑誌・図版の多い実用書・ページ全体が画像の漫画や絵本、写真集など・リ...
電子書籍を読むためのデバイス
Amazon Kindle, 楽天KoboSony ReaderBookLive LideoiOS, AndroidWindows PhoneiOS, Android,Amazon Kindle FireWindows, Mac OS XWin...
スマートデバイスは多種多様参考:Qik ¦ 対応機種 http://qik.com/phones
technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4リフロー 固定レイアウトMulti Deviceマルチデバイス対応
Kindle無料アプリhttp://amzn.to/S7AbLNAmazon Kindleの場合
Amazon Kindleの場合専用端末スマートフォンパソコンウェブブラウザ※日本はまだ未対応※日本はまだ未対応
電子ブック楽天<kobo>:楽天<kobo>無料アプリhttp://kobo.rakuten.co.jp/application/楽天koboの場合
Android :Google Play ブックスhttp://bit.ly/TaW4biGoogle Play ブックスの場合
iOS :Google Play ブックスhttp://bit.ly/11wnCwbGoogle Play ブックスの場合
Google Play ブックスの場合パソコンでも読める(ウェブブラウザ使用)
Google Play ブックスの場合パソコンでも読める(ウェブブラウザ使用)※固定レイアウトでつくられている 文芸書もある...
iBooksで電子書籍を購入してiOSデバイスで楽しもう。http://www.apple.com/jp/apps/ibooks/Apple iBookstoreの場合
iBooksで電子書籍を購入してiOSデバイスで楽しもう。http://www.apple.com/jp/apps/ibooks/Apple iBookstoreの場合iOSのデバイスのみiPhone, iPad, iPod touch ...
EPUB 3 視覚表現について
technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4リフロー 固定レイアウト
Reading System読書システム電子書籍EPUBの仕様は一つだが実装はさまざま
Default style sheetデフォルトスタイルシート
ブラウザにはページの見栄えを整えるスタイルシートが備わっているDefault style sheet
Appendix D.Default style sheet for HTML 4http://www.w3.org/TR/CSS2/sample.html
Appendix D.Default style sheet for HTML 4http://www.w3.org/TR/CSS2/sample.htmlh1 { font-size: 2em; margin: .67em 0 }h2 { f...
文書の構造化マークアップMarkup
原 稿
440px440px図 版サイズ・解像度
原 稿図 版
<h1>INTRODUCTION</h1>タグ付け
BrowserFirefox Chrome Safari OperaIEGecko WebKit WebKit PrestoTridentrendering engineウェブブラウザのエンジンBlink WebKit(Blink ?)
SafariWebKitデフォルトスタイル
SafariWebKitデフォルトスタイルの一部を上書きする
SafariWebKitデフォルトスタイルの一部を上書きするリフロー処理
SafariWebKitデフォルトスタイルの一部を上書きする上書きしたスタイルデフォルトスタイル
電子書籍も同じ仕組み
Reading System読書システム電子書籍
Reading System読書システム電子書籍HTML, CSSコンテンツ、ナビゲーションなど
Reading System読書システム配信される 電子書籍を読む電子書籍EPUBの仕様は一つだが実装はさまざま
リーディングシステムのデフォルトスタイルを確認する
原 稿図 版
原 稿図 版CSSは無し
iBooks
iBooksiBooksのデフォルトスタイルは読みやすい
iBooksランドスケープモード
Kinoppy
DL Reader
OverDrive
Kobo
KoboデフォルトスタイルKoboスタイル
デフォルトのスタイルを上書きする
上書きしたスタイルデフォルトスタイル
iBooksで試す
iBooksデフォルトスタイル
上書きしたスタイルiBooks
上書きしたスタイルiBooks
DL Reader上書きしたスタイル
OverDrive上書きしたスタイル
kobo上書きしたスタイルkoboスタイルが適用されている
kobo上書きしたスタイルkoboスタイルを無効にした表示
デフォルトのスタイルを上書きしたEPUBを検証する
iBooksiPad(タブレット)で表示
iBooksiPad(タブレット)で表示iPhoneで表示するとどうなる?フロートの指定要素の浮動化
iPhone 4 のiBooks読めない!
iPhone 4 のiBooks図版が切れる浮動ボックス
iPhone 4 のiBooks文字と図版が重なる浮動ボックス
iBooks Mobile SafariページネイションのiBooksでは問題ありスクロールのSafariは問題なしiPhone 4
iBooksをスクロールモードに切り替えると問題なし
iBooksをスクロールモードに切り替えると問題なしiBooksの仕様:横書きなのに横スクロールはおかしいけど...
ページネイションとスクロール図版を含むページの分割をリーディングシステムがどう解釈して実行するか
フロートは非推奨にする例:koboでは非推奨としている(図版が切れてしまうことがあるため)※2013年4月現在
フロートは非推奨にするもしくは...
小さなスクリーンではスタイルを変更する
フロートの指定要素の浮動化小さなスクリーンでは無効にしたい!
スクリーンサイズを条件にしてスタイルを切り替えるには?
The Boston Globehttp://www.bostonglobe.com
タブレットなど(7∼10インチくらい)特定のデバイスを対象にしないこと
スマートフォンなど(3.2∼5.5インチくらい)特定のデバイスを対象にしないこと
2011年9月12日、大規模な商用サイトでは初めてレスポンシブ・ウェブデザインを採用
Media Queries柔軟かつ動的なレイアウトメディアごとに異なるスタイル規則を適用伸縮可能なイメージオブジェクト
Media Querieshttp://www.w3.org/TR/css3-mediaqueries/
EPUB Content Documents 3.0http://www.idpf.org/epub/30/spec/epub30-contentdocs.html#sec-css-media-queries3. EPUB Style Shee...
Media Querieshttp://www.w3.org/TR/css3-mediaqueries/EXAMPLE 5I.e. these are identical:@media all and (min-width:500px) { …...
デモンストレーションdemonstration
デモンストレーションdemonstration
デモンストレーションdemonstration
インタラクティブな電子書籍
VideoAudioMediaOverlaysJavaScript
Apple iBookstore
Apple iBookstoreアプリに近い高度な電子書籍を販売するなら迷わず....VideoAudioMediaOverlaysJavaScriptMulti-Touch books
Apple iBookstore
iBooks2010年4月2日 バージョン1.02010年7月19日 バージョン1.1.1オーディオとビデオに対応2010年12月15日 バージョン1.2固定レイアウトモードの追加2012年1月19日 バージョン2.0.ibooksフォーマット...
Frankenweenie: An Electrifying Book
Frankenweenie: An Electrifying Book768MB ←高画質ビデオの埋め込み
iBooks2010年4月2日 バージョン1.02010年7月19日 バージョン1.1.1オーディオとビデオに対応2010年12月15日 バージョン1.2固定レイアウトモードの追加2012年1月19日 バージョン2.0.ibooksフォーマット...
Read Aloud Kid s Booksテキストと音声の同期
http://bit.ly/ZoE5AlElizabeth CastroThe Monarch Butterfly - An Interactive Picture BookインタラクティブピクチャーブックJavaScriptを使用
iBooks2010年4月2日 バージョン1.02010年7月19日 バージョン1.1.1オーディオとビデオに対応2010年12月15日 バージョン1.2固定レイアウトモードの追加2012年1月19日 バージョン2.0.ibooksフォーマット...
iBooks Authorhttp://www.apple.com/jp/ibooks-author/
iBooks Authorhttp://www.apple.com/jp/ibooks-author/なぜ、EPUB 3 にしなかったのか?なぜ、Pagesをアップデートしなかったのか?
Mike Matas:A next-generation digital bookhttp://www.ted.com/talks/mike_matas.htmlマイク・マタスの次世代デジタルブックPush Pop Presshttp://pu...
iBooks2010年4月2日 バージョン1.02010年7月19日 バージョン1.1.1オーディオとビデオに対応2010年12月15日 バージョン1.2固定レイアウトモードの追加2012年1月19日 バージョン2.0.ibooksフォーマット...
Anomaly
Anomaly612MB 1,106ページ!!超ヘビー級・グラフィックノベル
Apple iBookstoreiBookstore ファイルサイズ上限は「2GB」(1GB未満を推奨).ibooks フォーマットのコンテンツは、iBookstore 以外で販売することはできないApple独自のFairPlay DRM(デジ...
Amazon Kindle電子書籍ストア・電子出版プラットフォーム
http://www.amazon.comKindle Store
Kindle FormatEPUBで入稿・変換
2000 2007 2010 2012.bookXMDF EPUB2.02007年 Kindle 開始OEBPS1.0Open eBook Publication StructureEPUB 3.0Apps2011.10.111999.9Mob...
http://bit.ly/RQhIgWelcome to MobipocketDeveloper CenterMobipocket
http://amzn.to/TOl1stKindle Format 8 OverviewKindle Format 82011年10月に発表
リフロー処理固定レイアウトプリントレプリカPDFベースAZW4パネルビューバーチャルパネルビューテキストポップアップテキストや図版を絶対配置画像化した紙面を配置
http://bit.ly/ScXZffKindleパブリッシング・ガイドラインPDFリンク
http://bit.ly/TOJCj4PDFリンク日本語サポート補足資料
http://bit.ly/TOJCj4PDFリンク日本語サポート補足資料文字色と背景色・body要素のcolor(文字色), background-color(背景色)は読書システムの 調整機能と重複するためスタイルは上書きできない・div,...
KindleGenhttp://amzn.to/WNFFtjKindleの開発ツール
KindlePreviewerhttp://amzn.to/YIL77xKindleの開発ツール
Send to Kindlehttp://www.amazon.com/gp/sendtokindleKindle関連ユーティリティ
Kindleの固定レイアウト
画像サイズリフロー:最大127KB固定レイアウト(コミック以外):最大256KBコミック:最大800KB
画像サイズリフロー:最大127KB固定レイアウト(コミック以外):最大256KBコミック:最大800KB<meta name="book-type" content="children" />記述なし<meta name="book-type"...
Customer DiscussionsKindle Publishing forumKindleGen ExamplesSampleshttp://amzn.to/VnVBkXKindleパブリッシング・フォーラムKF8のサンプル
KindleGen Examples - Samples固定レイアウト - グラフィックノベル・絵本
KindleGen Examples - Samples固定レイアウト - グラフィックノベル・絵本テキストポップアップ
固定レイアウトバーチャルパネルビューダブルタップする
1234固定レイアウトバーチャルパネルビューダブルタップするとモードが切り替わりスワイプでズーム領域をスクロール
ComicsSample パネルビューダブルタップする
ComicsSampleスワイプするパネルビュー
Kindleの固定レイアウト開発ツール
Kindle Comic Creatorhttp://www.amazon.com/kc2サポートしているファイル形式PDF(.pdf)JPEG(.jpg / .jpeg)TIFF(.tif / .tiff)PNG(.png)PPM(.ppm)
Kindle Comic Creatorパネルビューの作成(はい・いいえ)縦置き・横置きアンロック左から右へ右から左へページのサイズデバイスの方向を固定しない基本設定
Kindle Comic Creator基本設定右から左へ 左から右へ
Kindle Comic Creatorタイトル(必須)著者(必須)出版社カバー画像の場所(必須)ファイルの保存場所メタデータとカバー画像
Kindle Comic Creator画像ファイルを読み込む
Kindle Comic Creator必要に応じて空白ページを追加する
Kindle Comic Creator全てを見開きページに設定する
Kindle Comic Creator見開きの設定になる追加した空白ページ
Kindle Comic Creator見開きの設定になる
Kindle Comic Creator Kindle Fire HD の目次目次の項目
Kindle FormatEPUBで入稿・変換Kindle FormatKindle Comic Creatorで作成固定レイアウト
ビデオやオーディオを含むKindle Edition
Nixonland: The Rise of a President and the Fracturing of America [KindleEdition With Audio/Video]http://amzn.to/UuOTLdビデオや...
ビデオやオーディオを含むKindle EditioniOS(iPad, iPhone, iPod touch)Kindle Fire HD対応デバイス:ファイルサイズ:1タイトルの合計サイズは最大600MB※KindleGenが処理できるのは最...
EPUB 3 AHLAdvanced/Hybrid Fixed Layout
Call for Participation:IDPF workshop on Advanced/Hybrid Fixed Layouts in EPUB (July 6 2012, Tokyo)http://idpf.org/news/cal...
IDPF Workshop: Advanced/Hybrid Fixed Layouts in EPUBhttps://code.google.com/p/epub-revision/wiki/TokyoWorshopForAdvancedHy...
Downloads: Advanced/Hybrid Fixed Layouts in EPUBhttps://code.google.com/p/epub-revision/downloads/list
EPUB Adaptive LayoutInformational Document
EPUBAdaptive Layouthttp://www.idpf.org/epub/pgt/Informational Document
EPUB Adaptive Layout http://www.idpf.org/epub/pgt/Informational Document3.1.1. Introduction http://www.idpf.org/epub/pgt/c...
Web StandardsAdobe & HTML JPhttp://html.adobe.com/jp/webstandards/参考:
CSS Regionshttp://html.adobe.com/jp/webstandards/cssregions/参考:雑誌のようなレイアウトをシンプルなCSSで表現リージョンズ
Samplehttp://adobe.github.io/web-platform/samples/css-regions/Road Trip Demohttp://adobe-webplatform.github.io/road-trip/G...
Road Trip Demo http://adobe-webplatform.github.io/road-trip/Google Chrome Canaryクロームカナリ
Road Trip Demo http://adobe-webplatform.github.io/road-trip/Google Chrome Canaryクロームカナリ
Road Trip Demo http://adobe-webplatform.github.io/road-trip/Google Chrome Canaryクロームカナリ
Road Trip Demo http://adobe-webplatform.github.io/road-trip/Google Chrome Canaryクロームカナリ雑誌のようなレイアウトをシンプルなCSSで表現
CSS Exclusionshttp://html.adobe.com/jp/webstandards/cssexclusions/参考:自由なレイアウトに沿ってテキストを流し込むエクスクルージョン
Flowing content with CSS Exclusions: Shape Insidehttp://adobe.github.io/web-platform/samples/css-exclusions/Google Chrome ...
Flowing content with CSS Exclusions: Shape Insidehttp://adobe.github.io/web-platform/samples/css-exclusions/Google Chrome ...
CSS Exclusions: The Ravenhttp://adobe.github.io/web-platform/samples/css-exclusions/Google Chrome CanaryクロームカナリSamplehttp:...
CSS Exclusions: The Ravenhttp://adobe.github.io/web-platform/samples/css-exclusions/Google Chrome CanaryクロームカナリSamplehttp:...
CSS Exclusions: The Ravenhttp://adobe.github.io/web-platform/samples/css-exclusions/Google Chrome CanaryクロームカナリSamplehttp:...
スマートリキッドハイブリッド(リフローと固定レイアウトを切り替える仕組み)(ハイブリッドと高度なリフロー・クラウドサービス連携)
固定レイアウトでは読めない広 い狭い
technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4固定レイアウトリフローKindleのハイブリッド方式
スマートリキッドハイブリッド(リフローと固定レイアウトを切り替える仕組み)(ハイブリッドと高度なリフロー・クラウドサービス連携)
The Boston Globe ePaperスマートフロー最先端事例(新聞)AppsSmartFlowhttp://bit.ly/Z32Dll
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.新聞の紙面そのまま
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.リフローに切り替えSmartFlow
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.リフローに切り替えSmartFlow
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.ランドスケープモード
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.記事を音声で読み上げるListen記事を翻訳Translate
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.記事を音声で読み上げるListen記事を翻訳Translateリフローページなのでクラウドサー...
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.記事を音声で読み上げるListen記事を翻訳Translate
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.記事を音声で読み上げるListen記事を翻訳Translate
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.ランドスケープモード
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.ランドスケープモード
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.新聞の紙面Page View記事を音声で読み上げるListen記事を共有Share記事を印刷P...
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.新聞の紙面Page View記事を音声で読み上げるListen記事を共有Share記事を印刷P...
The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.新聞の紙面Page View記事を音声で読み上げるListen記事を共有Share記事を印刷P...
メールで送られた記事リンクから記事だけのシンプルなページを開くことができる
Page View SmartFlow紙面そのまま リフロー処理
高度なリフロー処理による動的なレイアウトSmartFlow
高度なリフロー処理による動的なレイアウト
EPUB と電子書籍の未来
http://amzn.to/aJAOoGWhispernet
Whispersync for Kindle BooksWhispersync for Personal DocumentsWhispersync for VoiceWhispersync for Amazon Instant VideoWhi...
Whispersync for Voice電子書籍とオーディオブックの同期
電子書籍を購入電子書籍とオーディオブックの同期
同期可能なオーディオブックが表示される電子書籍とオーディオブックの同期
オーディオブックを購入電子書籍とオーディオブックの同期
オーディオブックを聴くKindle Fire HD通勤・通学などで聴く電子書籍とオーディオブックの同期
オーディオブックの続きからKindle Fire HD音声を停止した位置が開く電子書籍とオーディオブックの同期
電子書籍は拡張しない他のメディアと連携しながら本の新しい可能性を実現
電子書籍は拡張しないシンプルな構造データサイズも小さい永続性の高さ電子書籍にビデオや音声を埋め込む等の拡張はしない
電子書籍は拡張しないシンプルな構造データサイズも小さい永続性の高さ電子書籍にビデオや音声を埋め込む等の拡張はしないクラウドサービス他メディアと連携して本の機能を拡張BOOK API
Great Expectations forDigital Publishing withHTML5 and the OpenWeb Platformhttp://youtu.be/sP_FI3KqOuQJeff Jaffe (CEO)ジェフ・ジャ...
WEB WEBWorld Wide Web World Wide Webウェブの外 ウェブの中
WEB WEBWorld Wide Web World Wide Webウェブの外 ウェブの中電子書籍ストアストア専用クライアント
Safari Books Online http://www.safaribooksonline.comパブリッシャー(一部)
Safari Books Online http://www.safaribooksonline.comパブリッシャー(一部)ペイ・フォー・パフォーマンス・モデルpay for performance
Why the EbookSubscription ModelMight Be Right forYour Contenthttp://oreillynet.com/pub/e/2649Friday, April 26, 2013(Sat, A...
WEB WEBWorld Wide Web World Wide Webウェブの外 ウェブの中ダウンロードパッケージの利点とは?ストリーミングクラウドの利点とは?
WEB WEBWorld Wide Web World Wide Webウェブの外 ウェブの中長期的には
まとめ
[1]EPUB 3 とは?[2]EPUB 3 視覚表現について[3]Apple iBookstore[4]Amazon Kindle[5]EPUB 3 AHL[6]最先端事例(新聞)Apps[7]EPUB と電子書籍の未来・リフローと固定レイア...
[1]EPUB 3 とは?[2]EPUB 3 視覚表現について[3]Apple iBookstore[4]Amazon Kindle[5]EPUB 3 AHL[6]最先端事例(新聞)Apps[7]EPUB と電子書籍の未来・JavaScript...
[1]EPUB 3 とは?[2]EPUB 3 視覚表現について[3]Apple iBookstore[4]Amazon Kindle[5]EPUB 3 AHL[6]最先端事例(新聞)Apps[7]EPUB と電子書籍の未来・拡張レイアウト・アダ...
おわりに
いつの時代も、電子書籍について語るのは楽しいものです。これは、HyperCardで作られた電子ブックが登場した1980年代後半からまったく変わりません。
漫画や小説などの人気作品は、新しいテクノロジーと共に復活し、新しい読者を開拓してきました。
ラジオドラマ、テレビアニメ、映画、家庭用ビデオが普及し始めた80年代前半には「ビデオ漫画」(漫画の原稿を使った動的な映像表現)なども作られ、
マルチメディアブームの90年代前半は「CD-ROMコンテンツ」、インターネットが商用化された90年代半ば以降はShockwaveなどの「ウェブ上のデジタルコミック」、
そして、1999年のiモード登場から数年を経て「ケータイコミック」が大きな市場を形成し、国内の2011年度電子書籍市場629億円(インプレスR&D調べ)の76%(480億円)はケータイのコンテンツで占められているという状況。
しかし、そのケータイも現在はスマートフォンに移行しつつあり、市場は縮小し始めています。
音楽や映像とは異なり、再生機を必要としない「書籍」から、テクノロジーに依存した「電子書籍」へ誘導するのは並大抵のことではありません。
ただ、子どもからお年寄りまで、半ば強制的に小さなコンピュータ(スマートフォン)を持たされる時代が目の前に来ています。
配信や課金のサービスがもっと向上し、電子書籍に触れるための敷居が劇的に下がれば、新しい読書スタイルが定着していく可能性があります。
今やらなければいけないことは?
既刊本の電子化電子書籍を売るウェブプロモーション・導線づくり/動線分析柔軟な電子出版ワークフローの構築著者の発掘・支援コンテンツ調達・ディストリビューション
既刊本の電子化電子書籍を売る柔軟な電子出版ワークフローの構築著者の発掘・支援コンテンツ調達・ディストリビューション未来をつくる新しい本のカタチを考え、提案し、具現化していくウェブプロモーション・導線づくり/動線分析
既刊本の電子化電子書籍を売る柔軟な電子出版ワークフローの構築著者の発掘・支援コンテンツ調達・ディストリビューション未来をつくる新しい本のカタチを考え、提案し、具現化していくウェブプロモーション・導線づくり/動線分析(上の3つで忙しいと思いますが...
未来をつくる新しい本のカタチを考え、提案し、具現化していく
Thank you for your attention.ご清聴ありがとうございました
community電子書籍メディア論http://www.facebook.com/eBookStrategyデザインの未来http://www.facebook.com/TheFutureDesign
EBOOK STRATEGY REPORTPublished: April 19, 2013JAGAT Seminar
レスポンシブWebデザインとEPUB3の最新動向/EPUB 3とHTML5
レスポンシブWebデザインとEPUB3の最新動向/EPUB 3とHTML5
レスポンシブWebデザインとEPUB3の最新動向/EPUB 3とHTML5
レスポンシブWebデザインとEPUB3の最新動向/EPUB 3とHTML5
レスポンシブWebデザインとEPUB3の最新動向/EPUB 3とHTML5
Upcoming SlideShare
Loading in …5
×

レスポンシブWebデザインとEPUB3の最新動向/EPUB 3とHTML5

35,934 views

Published on

レスポンシブWebデザインとEPUB3の最新動向
EPUB 3とHTML5 
2013年04月19日(金) 14:00-16:00 
日本印刷技術協会 3Fセミナールーム 
http://www.jagat.jp/content/view/4835/395/

Published in: Technology

レスポンシブWebデザインとEPUB3の最新動向/EPUB 3とHTML5

  1. 1. EBOOK STRATEGY REPORTPublished: April 19, 2013JAGAT Seminar
  2. 2. Instructional Designer | eBook DesignerYOUJI SAKAI境祐司profile
  3. 3. BOOKSウェブレイアウトの教科書EPUB3スタンダードデザインガイドWebデザイン基礎改訂3版InDesign CS6で作るEPUB 3 標準ガイドブック森 裕司, 境 祐司, 林 拓也, 向井 領治
  4. 4. 『速習Webデザイン Flash CS6』(技術評論社)、『InDesign CS6で作るEPUB 3 標準ガイドブック』(共著/翔泳社)、『スマートフォンサイトデザインの基本原則』(共著/MdN)、『EPUB3 スタンダード・デザインガイド』(共著/マイナビ)、『ウェブレイアウトの教科書 PC・スマートフォン・タブレット時代の標準デザイン 』(MdN)、『Webデザイン基礎 改訂3版 (速習Webデザイン) 』(技術評論社)、『電子書籍の作り方』『Webデザイン標準テキスト ―変化に流されない制作コンセプトと基本スタイル』(技術評論社)、『デザイナーなら絶対知っておくべき Webデザイン50の原則』(ソフトバンククリエイティブ)、『速習Webデザイン Flash CS4』(技術評論社)、『Webデザイン&スタイルシート逆引き実践ガイドブック』(ソシム)、『3行レシピブログデザイン』(共著/翔泳社)、『ネタ帳デラックスFlashテクニック』(共著/MdN)『速習WebデザインDreamweaver CS3』『速習Webデザイン FlashCS3』(技術評論社)、『Flash逆引きデザイン事典』(共著/翔泳社)、『スタイルシートデザインのネタ帳』(監修/MdN)、『Makinga Rule for Web Design』(ソーテック)、『CSSビジュアルデザイン・メソッド』(毎日コミュニケーションズ)、『XHTMLマークアップ&スタイルシートリフォームデザインガイドブック』(ソシム)、『改訂新版Webデザイン基礎』(技術評論社)など。BOOKS主な著書※海外版、ムックを含むと60冊ほど
  5. 5. community電子書籍メディア論http://www.facebook.com/eBookStrategyデザインの未来http://www.facebook.com/TheFutureDesign
  6. 6. テキスト
  7. 7. EPUB 3とHTML5レスポンシブWebデザインとEPUB3の最新動向日時 2013年4月19日14:00∼16:00日本印刷技術協会 3Fセミナールームhttp://www.jagat.jp/content/view/4835/395/EPUB 3の最先端 表現技法iBookstoreとEPUB 3、Kindle Format 8とEPUB 3
  8. 8. レスポンシブWebデザインとEPUB3の最新動向本日のテーマはです...第1部「レスポンシブWebデザイン最新動向」は、エル・カミノ・リアル の木寺祥友さんの御講演
  9. 9. レスポンシブWebデザインと電子書籍についてまず最初に...
  10. 10. 3年前電子書籍のコミュニティで「デジタル雑誌を異なるスクリーンサイズでどう表現するか」という熱い議論がありました
  11. 11. FLUID IMAGES当時話題になっていた開発アプローチ
  12. 12. 2009年4月17日http://unstoppablerobotninja.com/entry/fluid-images/Unstoppable Robot NinjaFLUID IMAGESEthan MarcotteTwitter: @beep
  13. 13. デジタル雑誌のプロトタイプがつくられました2010年→2011年頃まで当時アップロードしたYouTubeのビデオで確認できます(※私がつくったものを2012年再投稿)http://youtu.be/l1aJB5L_0O8 http://youtu.be/9AMitjhHddI
  14. 14. レスポンシブWebデザインを紹介するため2011年に本を書きましたこれは本にしておこう
  15. 15. レスポンシブWebデザインが流行してから2年経ち...2013年スマートリキッドレイアウトハイブリッド・固定ハイブリッド・リフロー
  16. 16. Responsive Web DesignSummit 2013http://environmentsforhumans.com/2013/responsive-web-design-summit/奇しくもRWDサミットが昨日から....April 16-April 18, 2013PERFORMANCESTRATEGYTECHNICAL3日間のTRACKパフォーマンスストラテジーテクニカル
  17. 17. Webウェブの中の電子書籍ウェブの外側にある電子書籍こういう話もします...
  18. 18. Great Expectations forDigital Publishing withHTML5 and the OpenWeb Platformhttp://youtu.be/sP_FI3KqOuQJeff Jaffe (CEO)ジェフ・ジャフィー電子出版の国際カンファレンスでW3CのCEOジェフ・ジャフィーは何を語ったか?
  19. 19. EPUB 3とHTML5EPUB 3の最先端 表現技法iBookstoreとEPUB 3、Kindle Format 8とEPUB 3
  20. 20. [1]EPUB 3 とは?[2]EPUB 3 視覚表現について[3]Apple iBookstore[4]Amazon Kindle[5]EPUB 3 AHL[6]最先端事例(新聞)Apps[7]EPUB と電子書籍の未来
  21. 21. EPUB 3 とは?
  22. 22. IDPFInternational Digital Publishing Forumhttp://idpf.orgインターナショナルデジタルパブリッシング・フォーラム
  23. 23. 2000 2007 2010 2012.bookXMDF EPUB2.02007年 Kindle 開始OEBPS1.0Open eBook Publication StructureEPUB 3.0Apps2011.10.111999.9Mobipocketを2005年に買収Kindle Format 8EPUBの歴史
  24. 24. パッケージドキュメント※とても重要なデータ
  25. 25. ナビゲーションドキュメントパッケージドキュメント
  26. 26. ナビゲーションドキュメントパッケージドキュメント コンテンツドキュメント
  27. 27. HTML5 CSS3 XMLSVG SMIL採用されている標準技術
  28. 28. W3CWorld Wide Web Consortiumhttp://www.w3.orgワールドワイドウェブ・コンソーシアム
  29. 29. インターフェイスインターフェイス電子書籍はコンテンツとUIが完全に分離している
  30. 30. インターフェイスインターフェイス電子書籍はコンテンツとUIが完全に分離しているメタデータ(書誌情報)を持つ構造化されたマシンリーダブルなデータ
  31. 31. EPUBでつくられる電子出版物のタイプ
  32. 32. fixed-layout contentreflowable contentリフロー固定レイアウト
  33. 33. technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4リフロー 固定レイアウト
  34. 34. technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4リフロー・テキストが主体の文芸書など・文字サイズの変更・字体の変更・マージンの変更・背景色の変更・表示方式の変更(ページめくり、スクロールなど)・段組みのON/OFF・本文検索・辞書・ハイライト、メモ
  35. 35. technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4固定レイアウト・レイアウトを崩せない雑誌・図版の多い実用書・ページ全体が画像の漫画や絵本、写真集など・リフローでは表現しにくい書籍スマートフォンなどの小さなスクリーンで可読性が極端に低下する実用書で本文検索、辞書ハイライト、メモ機能などが使えない
  36. 36. 電子書籍を読むためのデバイス
  37. 37. Amazon Kindle, 楽天KoboSony ReaderBookLive LideoiOS, AndroidWindows PhoneiOS, Android,Amazon Kindle FireWindows, Mac OS XWindows 8
  38. 38. スマートデバイスは多種多様参考:Qik ¦ 対応機種 http://qik.com/phones
  39. 39. technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4リフロー 固定レイアウトMulti Deviceマルチデバイス対応
  40. 40. Kindle無料アプリhttp://amzn.to/S7AbLNAmazon Kindleの場合
  41. 41. Amazon Kindleの場合専用端末スマートフォンパソコンウェブブラウザ※日本はまだ未対応※日本はまだ未対応
  42. 42. 電子ブック楽天<kobo>:楽天<kobo>無料アプリhttp://kobo.rakuten.co.jp/application/楽天koboの場合
  43. 43. Android :Google Play ブックスhttp://bit.ly/TaW4biGoogle Play ブックスの場合
  44. 44. iOS :Google Play ブックスhttp://bit.ly/11wnCwbGoogle Play ブックスの場合
  45. 45. Google Play ブックスの場合パソコンでも読める(ウェブブラウザ使用)
  46. 46. Google Play ブックスの場合パソコンでも読める(ウェブブラウザ使用)※固定レイアウトでつくられている 文芸書もある...
  47. 47. iBooksで電子書籍を購入してiOSデバイスで楽しもう。http://www.apple.com/jp/apps/ibooks/Apple iBookstoreの場合
  48. 48. iBooksで電子書籍を購入してiOSデバイスで楽しもう。http://www.apple.com/jp/apps/ibooks/Apple iBookstoreの場合iOSのデバイスのみiPhone, iPad, iPod touch ...
  49. 49. EPUB 3 視覚表現について
  50. 50. technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4リフロー 固定レイアウト
  51. 51. Reading System読書システム電子書籍EPUBの仕様は一つだが実装はさまざま
  52. 52. Default style sheetデフォルトスタイルシート
  53. 53. ブラウザにはページの見栄えを整えるスタイルシートが備わっているDefault style sheet
  54. 54. Appendix D.Default style sheet for HTML 4http://www.w3.org/TR/CSS2/sample.html
  55. 55. Appendix D.Default style sheet for HTML 4http://www.w3.org/TR/CSS2/sample.htmlh1 { font-size: 2em; margin: .67em 0 }h2 { font-size: 1.5em; margin: .75em 0 }h3 { font-size: 1.17em; margin: .83em 0 }
  56. 56. 文書の構造化マークアップMarkup
  57. 57. 原 稿
  58. 58. 440px440px図 版サイズ・解像度
  59. 59. 原 稿図 版
  60. 60. <h1>INTRODUCTION</h1>タグ付け
  61. 61. BrowserFirefox Chrome Safari OperaIEGecko WebKit WebKit PrestoTridentrendering engineウェブブラウザのエンジンBlink WebKit(Blink ?)
  62. 62. SafariWebKitデフォルトスタイル
  63. 63. SafariWebKitデフォルトスタイルの一部を上書きする
  64. 64. SafariWebKitデフォルトスタイルの一部を上書きするリフロー処理
  65. 65. SafariWebKitデフォルトスタイルの一部を上書きする上書きしたスタイルデフォルトスタイル
  66. 66. 電子書籍も同じ仕組み
  67. 67. Reading System読書システム電子書籍
  68. 68. Reading System読書システム電子書籍HTML, CSSコンテンツ、ナビゲーションなど
  69. 69. Reading System読書システム配信される 電子書籍を読む電子書籍EPUBの仕様は一つだが実装はさまざま
  70. 70. リーディングシステムのデフォルトスタイルを確認する
  71. 71. 原 稿図 版
  72. 72. 原 稿図 版CSSは無し
  73. 73. iBooks
  74. 74. iBooksiBooksのデフォルトスタイルは読みやすい
  75. 75. iBooksランドスケープモード
  76. 76. Kinoppy
  77. 77. DL Reader
  78. 78. OverDrive
  79. 79. Kobo
  80. 80. KoboデフォルトスタイルKoboスタイル
  81. 81. デフォルトのスタイルを上書きする
  82. 82. 上書きしたスタイルデフォルトスタイル
  83. 83. iBooksで試す
  84. 84. iBooksデフォルトスタイル
  85. 85. 上書きしたスタイルiBooks
  86. 86. 上書きしたスタイルiBooks
  87. 87. DL Reader上書きしたスタイル
  88. 88. OverDrive上書きしたスタイル
  89. 89. kobo上書きしたスタイルkoboスタイルが適用されている
  90. 90. kobo上書きしたスタイルkoboスタイルを無効にした表示
  91. 91. デフォルトのスタイルを上書きしたEPUBを検証する
  92. 92. iBooksiPad(タブレット)で表示
  93. 93. iBooksiPad(タブレット)で表示iPhoneで表示するとどうなる?フロートの指定要素の浮動化
  94. 94. iPhone 4 のiBooks読めない!
  95. 95. iPhone 4 のiBooks図版が切れる浮動ボックス
  96. 96. iPhone 4 のiBooks文字と図版が重なる浮動ボックス
  97. 97. iBooks Mobile SafariページネイションのiBooksでは問題ありスクロールのSafariは問題なしiPhone 4
  98. 98. iBooksをスクロールモードに切り替えると問題なし
  99. 99. iBooksをスクロールモードに切り替えると問題なしiBooksの仕様:横書きなのに横スクロールはおかしいけど...
  100. 100. ページネイションとスクロール図版を含むページの分割をリーディングシステムがどう解釈して実行するか
  101. 101. フロートは非推奨にする例:koboでは非推奨としている(図版が切れてしまうことがあるため)※2013年4月現在
  102. 102. フロートは非推奨にするもしくは...
  103. 103. 小さなスクリーンではスタイルを変更する
  104. 104. フロートの指定要素の浮動化小さなスクリーンでは無効にしたい!
  105. 105. スクリーンサイズを条件にしてスタイルを切り替えるには?
  106. 106. The Boston Globehttp://www.bostonglobe.com
  107. 107. タブレットなど(7∼10インチくらい)特定のデバイスを対象にしないこと
  108. 108. スマートフォンなど(3.2∼5.5インチくらい)特定のデバイスを対象にしないこと
  109. 109. 2011年9月12日、大規模な商用サイトでは初めてレスポンシブ・ウェブデザインを採用
  110. 110. Media Queries柔軟かつ動的なレイアウトメディアごとに異なるスタイル規則を適用伸縮可能なイメージオブジェクト
  111. 111. Media Querieshttp://www.w3.org/TR/css3-mediaqueries/
  112. 112. EPUB Content Documents 3.0http://www.idpf.org/epub/30/spec/epub30-contentdocs.html#sec-css-media-queries3. EPUB Style Sheets3.3. EPUB 3 CSS Profile3.3.7. Media Queries
  113. 113. Media Querieshttp://www.w3.org/TR/css3-mediaqueries/EXAMPLE 5I.e. these are identical:@media all and (min-width:500px) { … }@media (min-width:500px) { … }As are these:@media (orientation: portrait) { … }@media all and (orientation: portrait) { … }
  114. 114. デモンストレーションdemonstration
  115. 115. デモンストレーションdemonstration
  116. 116. デモンストレーションdemonstration
  117. 117. インタラクティブな電子書籍
  118. 118. VideoAudioMediaOverlaysJavaScript
  119. 119. Apple iBookstore
  120. 120. Apple iBookstoreアプリに近い高度な電子書籍を販売するなら迷わず....VideoAudioMediaOverlaysJavaScriptMulti-Touch books
  121. 121. Apple iBookstore
  122. 122. iBooks2010年4月2日 バージョン1.02010年7月19日 バージョン1.1.1オーディオとビデオに対応2010年12月15日 バージョン1.2固定レイアウトモードの追加2012年1月19日 バージョン2.0.ibooksフォーマットの追加2012年3月7日 バージョン2.1Retinaディスプレイに対応
  123. 123. Frankenweenie: An Electrifying Book
  124. 124. Frankenweenie: An Electrifying Book768MB ←高画質ビデオの埋め込み
  125. 125. iBooks2010年4月2日 バージョン1.02010年7月19日 バージョン1.1.1オーディオとビデオに対応2010年12月15日 バージョン1.2固定レイアウトモードの追加2012年1月19日 バージョン2.0.ibooksフォーマットの追加2012年3月7日 バージョン2.1Retinaディスプレイに対応
  126. 126. Read Aloud Kid s Booksテキストと音声の同期
  127. 127. http://bit.ly/ZoE5AlElizabeth CastroThe Monarch Butterfly - An Interactive Picture BookインタラクティブピクチャーブックJavaScriptを使用
  128. 128. iBooks2010年4月2日 バージョン1.02010年7月19日 バージョン1.1.1オーディオとビデオに対応2010年12月15日 バージョン1.2固定レイアウトモードの追加2012年1月19日 バージョン2.0.ibooksフォーマットの追加2012年3月7日 バージョン2.1Retinaディスプレイに対応
  129. 129. iBooks Authorhttp://www.apple.com/jp/ibooks-author/
  130. 130. iBooks Authorhttp://www.apple.com/jp/ibooks-author/なぜ、EPUB 3 にしなかったのか?なぜ、Pagesをアップデートしなかったのか?
  131. 131. Mike Matas:A next-generation digital bookhttp://www.ted.com/talks/mike_matas.htmlマイク・マタスの次世代デジタルブックPush Pop Presshttp://pushpoppress.com/about/2011年
  132. 132. iBooks2010年4月2日 バージョン1.02010年7月19日 バージョン1.1.1オーディオとビデオに対応2010年12月15日 バージョン1.2固定レイアウトモードの追加2012年1月19日 バージョン2.0.ibooksフォーマットの追加2012年3月7日 バージョン2.1Retinaディスプレイに対応
  133. 133. Anomaly
  134. 134. Anomaly612MB 1,106ページ!!超ヘビー級・グラフィックノベル
  135. 135. Apple iBookstoreiBookstore ファイルサイズ上限は「2GB」(1GB未満を推奨).ibooks フォーマットのコンテンツは、iBookstore 以外で販売することはできないApple独自のFairPlay DRM(デジタル著作権理)システムによって保護できる※HTML5 ウィジェットで取り込まれるムービーとオーディオは、DRMで保護できないiTunes でブックを選択し、「ファイル」>「情報を見る」・「購入したブック」→DRMフリーのブック・「保護されたブック」→著作権保護付きのブック
  136. 136. Amazon Kindle電子書籍ストア・電子出版プラットフォーム
  137. 137. http://www.amazon.comKindle Store
  138. 138. Kindle FormatEPUBで入稿・変換
  139. 139. 2000 2007 2010 2012.bookXMDF EPUB2.02007年 Kindle 開始OEBPS1.0Open eBook Publication StructureEPUB 3.0Apps2011.10.111999.9Mobipocketを2005年に買収Kindle Format 8EPUBの歴史
  140. 140. http://bit.ly/RQhIgWelcome to MobipocketDeveloper CenterMobipocket
  141. 141. http://amzn.to/TOl1stKindle Format 8 OverviewKindle Format 82011年10月に発表
  142. 142. リフロー処理固定レイアウトプリントレプリカPDFベースAZW4パネルビューバーチャルパネルビューテキストポップアップテキストや図版を絶対配置画像化した紙面を配置
  143. 143. http://bit.ly/ScXZffKindleパブリッシング・ガイドラインPDFリンク
  144. 144. http://bit.ly/TOJCj4PDFリンク日本語サポート補足資料
  145. 145. http://bit.ly/TOJCj4PDFリンク日本語サポート補足資料文字色と背景色・body要素のcolor(文字色), background-color(背景色)は読書システムの 調整機能と重複するためスタイルは上書きできない・div, span要素で文字色や背景色を指定でき、 読書システムの調整機能を無効にできるが非推奨
  146. 146. KindleGenhttp://amzn.to/WNFFtjKindleの開発ツール
  147. 147. KindlePreviewerhttp://amzn.to/YIL77xKindleの開発ツール
  148. 148. Send to Kindlehttp://www.amazon.com/gp/sendtokindleKindle関連ユーティリティ
  149. 149. Kindleの固定レイアウト
  150. 150. 画像サイズリフロー:最大127KB固定レイアウト(コミック以外):最大256KBコミック:最大800KB
  151. 151. 画像サイズリフロー:最大127KB固定レイアウト(コミック以外):最大256KBコミック:最大800KB<meta name="book-type" content="children" />記述なし<meta name="book-type" content="comic" />最大256KB最大800KB
  152. 152. Customer DiscussionsKindle Publishing forumKindleGen ExamplesSampleshttp://amzn.to/VnVBkXKindleパブリッシング・フォーラムKF8のサンプル
  153. 153. KindleGen Examples - Samples固定レイアウト - グラフィックノベル・絵本
  154. 154. KindleGen Examples - Samples固定レイアウト - グラフィックノベル・絵本テキストポップアップ
  155. 155. 固定レイアウトバーチャルパネルビューダブルタップする
  156. 156. 1234固定レイアウトバーチャルパネルビューダブルタップするとモードが切り替わりスワイプでズーム領域をスクロール
  157. 157. ComicsSample パネルビューダブルタップする
  158. 158. ComicsSampleスワイプするパネルビュー
  159. 159. Kindleの固定レイアウト開発ツール
  160. 160. Kindle Comic Creatorhttp://www.amazon.com/kc2サポートしているファイル形式PDF(.pdf)JPEG(.jpg / .jpeg)TIFF(.tif / .tiff)PNG(.png)PPM(.ppm)
  161. 161. Kindle Comic Creatorパネルビューの作成(はい・いいえ)縦置き・横置きアンロック左から右へ右から左へページのサイズデバイスの方向を固定しない基本設定
  162. 162. Kindle Comic Creator基本設定右から左へ 左から右へ
  163. 163. Kindle Comic Creatorタイトル(必須)著者(必須)出版社カバー画像の場所(必須)ファイルの保存場所メタデータとカバー画像
  164. 164. Kindle Comic Creator画像ファイルを読み込む
  165. 165. Kindle Comic Creator必要に応じて空白ページを追加する
  166. 166. Kindle Comic Creator全てを見開きページに設定する
  167. 167. Kindle Comic Creator見開きの設定になる追加した空白ページ
  168. 168. Kindle Comic Creator見開きの設定になる
  169. 169. Kindle Comic Creator Kindle Fire HD の目次目次の項目
  170. 170. Kindle FormatEPUBで入稿・変換Kindle FormatKindle Comic Creatorで作成固定レイアウト
  171. 171. ビデオやオーディオを含むKindle Edition
  172. 172. Nixonland: The Rise of a President and the Fracturing of America [KindleEdition With Audio/Video]http://amzn.to/UuOTLdビデオやオーディオを含むKindle Edition
  173. 173. ビデオやオーディオを含むKindle EditioniOS(iPad, iPhone, iPod touch)Kindle Fire HD対応デバイス:ファイルサイズ:1タイトルの合計サイズは最大600MB※KindleGenが処理できるのは最大650MB埋め込めるビデオ、オーディオは1タイトル、1,000点以下にする
  174. 174. EPUB 3 AHLAdvanced/Hybrid Fixed Layout
  175. 175. Call for Participation:IDPF workshop on Advanced/Hybrid Fixed Layouts in EPUB (July 6 2012, Tokyo)http://idpf.org/news/call-for-participation-idpf-workshop-on-advancedhybrid-fixed-layouts-in2012年7月6日 - 東京
  176. 176. IDPF Workshop: Advanced/Hybrid Fixed Layouts in EPUBhttps://code.google.com/p/epub-revision/wiki/TokyoWorshopForAdvancedHybridFixedLayouts
  177. 177. Downloads: Advanced/Hybrid Fixed Layouts in EPUBhttps://code.google.com/p/epub-revision/downloads/list
  178. 178. EPUB Adaptive LayoutInformational Document
  179. 179. EPUBAdaptive Layouthttp://www.idpf.org/epub/pgt/Informational Document
  180. 180. EPUB Adaptive Layout http://www.idpf.org/epub/pgt/Informational Document3.1.1. Introduction http://www.idpf.org/epub/pgt/csspgt-20120808.html#s3.1.1
  181. 181. Web StandardsAdobe & HTML JPhttp://html.adobe.com/jp/webstandards/参考:
  182. 182. CSS Regionshttp://html.adobe.com/jp/webstandards/cssregions/参考:雑誌のようなレイアウトをシンプルなCSSで表現リージョンズ
  183. 183. Samplehttp://adobe.github.io/web-platform/samples/css-regions/Road Trip Demohttp://adobe-webplatform.github.io/road-trip/Google Chrome Canaryクロームカナリ
  184. 184. Road Trip Demo http://adobe-webplatform.github.io/road-trip/Google Chrome Canaryクロームカナリ
  185. 185. Road Trip Demo http://adobe-webplatform.github.io/road-trip/Google Chrome Canaryクロームカナリ
  186. 186. Road Trip Demo http://adobe-webplatform.github.io/road-trip/Google Chrome Canaryクロームカナリ
  187. 187. Road Trip Demo http://adobe-webplatform.github.io/road-trip/Google Chrome Canaryクロームカナリ雑誌のようなレイアウトをシンプルなCSSで表現
  188. 188. CSS Exclusionshttp://html.adobe.com/jp/webstandards/cssexclusions/参考:自由なレイアウトに沿ってテキストを流し込むエクスクルージョン
  189. 189. Flowing content with CSS Exclusions: Shape Insidehttp://adobe.github.io/web-platform/samples/css-exclusions/Google Chrome CanaryクロームカナリSamplehttp://adobe.github.io/web-platform/samples/css-exclusions/basic/shape-inside-dynamic.html
  190. 190. Flowing content with CSS Exclusions: Shape Insidehttp://adobe.github.io/web-platform/samples/css-exclusions/Google Chrome CanaryクロームカナリSamplehttp://adobe.github.io/web-platform/samples/css-exclusions/basic/shape-inside-dynamic.html
  191. 191. CSS Exclusions: The Ravenhttp://adobe.github.io/web-platform/samples/css-exclusions/Google Chrome CanaryクロームカナリSamplehttp://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html
  192. 192. CSS Exclusions: The Ravenhttp://adobe.github.io/web-platform/samples/css-exclusions/Google Chrome CanaryクロームカナリSamplehttp://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html
  193. 193. CSS Exclusions: The Ravenhttp://adobe.github.io/web-platform/samples/css-exclusions/Google Chrome CanaryクロームカナリSamplehttp://adobe.github.io/web-platform/samples/css-exclusions/nevermore/index.html自由なレイアウトに沿ってテキストを流し込む
  194. 194. スマートリキッドハイブリッド(リフローと固定レイアウトを切り替える仕組み)(ハイブリッドと高度なリフロー・クラウドサービス連携)
  195. 195. 固定レイアウトでは読めない広 い狭い
  196. 196. technology reviewhttp://www.amazon.com/Technology-Review/dp/B001AHPAX4固定レイアウトリフローKindleのハイブリッド方式
  197. 197. スマートリキッドハイブリッド(リフローと固定レイアウトを切り替える仕組み)(ハイブリッドと高度なリフロー・クラウドサービス連携)
  198. 198. The Boston Globe ePaperスマートフロー最先端事例(新聞)AppsSmartFlowhttp://bit.ly/Z32Dll
  199. 199. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.
  200. 200. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.新聞の紙面そのまま
  201. 201. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.リフローに切り替えSmartFlow
  202. 202. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.リフローに切り替えSmartFlow
  203. 203. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.ランドスケープモード
  204. 204. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.記事を音声で読み上げるListen記事を翻訳Translate
  205. 205. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.記事を音声で読み上げるListen記事を翻訳Translateリフローページなのでクラウドサービスと連携できる
  206. 206. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.記事を音声で読み上げるListen記事を翻訳Translate
  207. 207. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.記事を音声で読み上げるListen記事を翻訳Translate
  208. 208. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.ランドスケープモード
  209. 209. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.ランドスケープモード
  210. 210. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.新聞の紙面Page View記事を音声で読み上げるListen記事を共有Share記事を印刷Print記事をコピーCopy
  211. 211. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.新聞の紙面Page View記事を音声で読み上げるListen記事を共有Share記事を印刷Print記事をコピーCopy
  212. 212. The Boston GlobeePaperhttp://bit.ly/Z32Dll開発: Globe Newspaper Company, Inc.新聞の紙面Page View記事を音声で読み上げるListen記事を共有Share記事を印刷Print記事をコピーCopy
  213. 213. メールで送られた記事リンクから記事だけのシンプルなページを開くことができる
  214. 214. Page View SmartFlow紙面そのまま リフロー処理
  215. 215. 高度なリフロー処理による動的なレイアウトSmartFlow
  216. 216. 高度なリフロー処理による動的なレイアウト
  217. 217. EPUB と電子書籍の未来
  218. 218. http://amzn.to/aJAOoGWhispernet
  219. 219. Whispersync for Kindle BooksWhispersync for Personal DocumentsWhispersync for VoiceWhispersync for Amazon Instant VideoWhispersync電子書籍パーソナルドキュメント(Kindle以外の電子書籍含む)オーディオブック映画・TVドラマなど
  220. 220. Whispersync for Voice電子書籍とオーディオブックの同期
  221. 221. 電子書籍を購入電子書籍とオーディオブックの同期
  222. 222. 同期可能なオーディオブックが表示される電子書籍とオーディオブックの同期
  223. 223. オーディオブックを購入電子書籍とオーディオブックの同期
  224. 224. オーディオブックを聴くKindle Fire HD通勤・通学などで聴く電子書籍とオーディオブックの同期
  225. 225. オーディオブックの続きからKindle Fire HD音声を停止した位置が開く電子書籍とオーディオブックの同期
  226. 226. 電子書籍は拡張しない他のメディアと連携しながら本の新しい可能性を実現
  227. 227. 電子書籍は拡張しないシンプルな構造データサイズも小さい永続性の高さ電子書籍にビデオや音声を埋め込む等の拡張はしない
  228. 228. 電子書籍は拡張しないシンプルな構造データサイズも小さい永続性の高さ電子書籍にビデオや音声を埋め込む等の拡張はしないクラウドサービス他メディアと連携して本の機能を拡張BOOK API
  229. 229. Great Expectations forDigital Publishing withHTML5 and the OpenWeb Platformhttp://youtu.be/sP_FI3KqOuQJeff Jaffe (CEO)ジェフ・ジャフィー
  230. 230. WEB WEBWorld Wide Web World Wide Webウェブの外 ウェブの中
  231. 231. WEB WEBWorld Wide Web World Wide Webウェブの外 ウェブの中電子書籍ストアストア専用クライアント
  232. 232. Safari Books Online http://www.safaribooksonline.comパブリッシャー(一部)
  233. 233. Safari Books Online http://www.safaribooksonline.comパブリッシャー(一部)ペイ・フォー・パフォーマンス・モデルpay for performance
  234. 234. Why the EbookSubscription ModelMight Be Right forYour Contenthttp://oreillynet.com/pub/e/2649Friday, April 26, 2013(Sat, Apr 27th at 2am - Tokyo)Safari Books OnlineAndrew Savikas (CEO)OReilly MediaJoe Wikertアンドリュー・サヴィカスジョー・ウィカートWebcast
  235. 235. WEB WEBWorld Wide Web World Wide Webウェブの外 ウェブの中ダウンロードパッケージの利点とは?ストリーミングクラウドの利点とは?
  236. 236. WEB WEBWorld Wide Web World Wide Webウェブの外 ウェブの中長期的には
  237. 237. まとめ
  238. 238. [1]EPUB 3 とは?[2]EPUB 3 視覚表現について[3]Apple iBookstore[4]Amazon Kindle[5]EPUB 3 AHL[6]最先端事例(新聞)Apps[7]EPUB と電子書籍の未来・リフローと固定レイアウト・マルチデバイス対応・EPUBの仕様は1つだが実装はさまざま・デフォルトスタイル・ページネイションとスクロール
  239. 239. [1]EPUB 3 とは?[2]EPUB 3 視覚表現について[3]Apple iBookstore[4]Amazon Kindle[5]EPUB 3 AHL[6]最先端事例(新聞)Apps[7]EPUB と電子書籍の未来・JavaScript・高画質コンテンツ・Kindle固定レイアウト・ビデオ、オーディオ・テキストと音声の同期
  240. 240. [1]EPUB 3 とは?[2]EPUB 3 視覚表現について[3]Apple iBookstore[4]Amazon Kindle[5]EPUB 3 AHL[6]最先端事例(新聞)Apps[7]EPUB と電子書籍の未来・拡張レイアウト・アダプティブレイアウト・ハイブリッド・スマートリキッド・ウェブの中のEPUB
  241. 241. おわりに
  242. 242. いつの時代も、電子書籍について語るのは楽しいものです。これは、HyperCardで作られた電子ブックが登場した1980年代後半からまったく変わりません。
  243. 243. 漫画や小説などの人気作品は、新しいテクノロジーと共に復活し、新しい読者を開拓してきました。
  244. 244. ラジオドラマ、テレビアニメ、映画、家庭用ビデオが普及し始めた80年代前半には「ビデオ漫画」(漫画の原稿を使った動的な映像表現)なども作られ、
  245. 245. マルチメディアブームの90年代前半は「CD-ROMコンテンツ」、インターネットが商用化された90年代半ば以降はShockwaveなどの「ウェブ上のデジタルコミック」、
  246. 246. そして、1999年のiモード登場から数年を経て「ケータイコミック」が大きな市場を形成し、国内の2011年度電子書籍市場629億円(インプレスR&D調べ)の76%(480億円)はケータイのコンテンツで占められているという状況。
  247. 247. しかし、そのケータイも現在はスマートフォンに移行しつつあり、市場は縮小し始めています。
  248. 248. 音楽や映像とは異なり、再生機を必要としない「書籍」から、テクノロジーに依存した「電子書籍」へ誘導するのは並大抵のことではありません。
  249. 249. ただ、子どもからお年寄りまで、半ば強制的に小さなコンピュータ(スマートフォン)を持たされる時代が目の前に来ています。
  250. 250. 配信や課金のサービスがもっと向上し、電子書籍に触れるための敷居が劇的に下がれば、新しい読書スタイルが定着していく可能性があります。
  251. 251. 今やらなければいけないことは?
  252. 252. 既刊本の電子化電子書籍を売るウェブプロモーション・導線づくり/動線分析柔軟な電子出版ワークフローの構築著者の発掘・支援コンテンツ調達・ディストリビューション
  253. 253. 既刊本の電子化電子書籍を売る柔軟な電子出版ワークフローの構築著者の発掘・支援コンテンツ調達・ディストリビューション未来をつくる新しい本のカタチを考え、提案し、具現化していくウェブプロモーション・導線づくり/動線分析
  254. 254. 既刊本の電子化電子書籍を売る柔軟な電子出版ワークフローの構築著者の発掘・支援コンテンツ調達・ディストリビューション未来をつくる新しい本のカタチを考え、提案し、具現化していくウェブプロモーション・導線づくり/動線分析(上の3つで忙しいと思いますが....)
  255. 255. 未来をつくる新しい本のカタチを考え、提案し、具現化していく
  256. 256. Thank you for your attention.ご清聴ありがとうございました
  257. 257. community電子書籍メディア論http://www.facebook.com/eBookStrategyデザインの未来http://www.facebook.com/TheFutureDesign
  258. 258. EBOOK STRATEGY REPORTPublished: April 19, 2013JAGAT Seminar

×