さて以下は、CSSとHTMLの連携に着目した『
縦書き表示簡易マニュアル(暫定版)』のまずますの出来(キホン、自分向けの備忘的な手引き)に気をよくして、こんどは、[→]
いまシゴト(=私事^^;)の一環として鋭意取り組み中の「EPUB2&3による電子出版」準備作業にあたって、この作業における各種「約束事」の整理と、それによる事務的作業の効率化をはかるために、[→]
『だれでも簡単にできるEPUB(2&3)制作マニュアル(仮称)』を作ってみることにしました。
で、その手はじめ、というか、制作プロセスそのものを、このブログ記事で随時加筆訂正しながら更新してゆくスタイルで、
愉しみながら作り上げてゆくことにしました^^;
ということで、当面は見目よさは考慮せずに、(ほかの多くのエントリ同様)メモ書き状態が続きますが、このような、いわば(不特定少数^^;さんへの)“晒しもの”状態が、(あくまで一人相撲でありながらも)自分的には意外と制作の後押しなるので、いずれは満足のゆく完成を迎えるであろう日に向けて、(あちこち道草しながら)マイペースで書きこんでゆきたいと思います^^;
~~~ 以下は『だれでも簡単にできるEPUB(2&3)制作マニュアル(仮称)』作成のためのラフスケッチ ~~~
ePub-package (名称任意の親フォルダ=EPUBパッケージにおけるいわばルートディレクトリ)のなかに
以下の1個の基本ファイル(テキストエディタ等で閲覧可)と
2個のフォルダ(=サブディレクトリ
〔←以下「フォルダ」に統一〕)を置く
★―――↓―――★
mimetype (名称固定/EPUBデータであることを宣言
=このZIPパッケージ全体がEPUBデータであることを〔EPUBシステム提供団体(idpf.org)の〕クライアント(EPUBデータの閲覧者)のサーバに対して告知。なので、ZIP圧縮時もこれは無圧縮な必要がある〔のかな^^? ←機会があれば確認〕)
※コンテンツは以下のとおり(固定)
application/epub+zip
★―――――――★
META-INF (名称固定のフォルダ)内に
container.xml (名称固定/パッケージドキュメント〔
opfファイル〕の場所を示したファイル)
※コンテンツは以下のとおり(
赤文字箇所以外固定)
<?xml version="1.0" encoding="utf-8"?>
<container xmlns="urn:oasis:names:tc:opendocument:xmlns:container" version="1.0">
<rootfiles>
<rootfile full-path="
OEBPS/content.opf" media-type="application/oebps-package+xml" />
</rootfiles>
</container>
★―――――――★
OEBPS (フォルダ〔名称は慣例的に
ほぼ固定化/このフォルダ内に以下のフォルダ&ファイル群を置く/その際、opf以外の2ファイルはtextフォルダに入れてもよい/コンテンツ本体を構成するファイル群
(xhtmlファイルや画像ファイルなど)が多ければなおさら〕)
☆―――↓―――☆
content.opf (名称任意 パッケージドキュメント〔書誌情報等〕を記載したファイル)
※書式の基本スタイルは以下を参照(ただし、縦書きコンテンツを想定したもの)
◎
3点セットのひな型
※※縦書き表示対応のEPUB3では以下の赤文字部分の表記がEPUB2と異なる。言い換えれば、EPUBシステム利用者にとって、2と3は
以下の赤文字箇所のバージョン表記の違いだけ
(のはず←動作等未確認なので要確認)<?xml version="1.0" encoding="UTF-8"?>
<package xmlns="http://www.idpf.org/2007/opf" version="3.0" xml:lang="ja" unique-identifier="jpecode" prefix="ebpaj: http://www.ebpaj.jp/">
<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">
☆―――――――☆
toc.ncx (名称は慣例的に
ほぼ固定/xmlファイル形式で記述した、リーダー/ビューア用ナビゲーション〔目次ベース〕ファイル)
※「meta name="dtb:depth" content="数値"」の数値は目次の階層に応じた数値
例:章、節(大見出し)、小見出しの3階層構成であれば数値は"3"
( ↑ ただし暫定理解。今後の経験で再確認のこと) ※※書式の基本スタイルは以下を参照(ただし、縦書きコンテンツを想定したもの)
◎
3点セットのひな型
☆―――――――☆
nav.xhtml (名称は慣例的に
ほぼほぼ固定/EPUBシステム用目次ファイルとして、ol,liタグを用いた箇条書きスタイルで記述)
※ <nav>タグを用いてそのなかに目次情報を書き込む点で通常のXHTMLファイルと異なる
※※書式の基本スタイルは以下を参照(ただし、縦書きコンテンツを想定したもの)
◎
3点セットのひな型
※※縦書き表示対応のEPUB3では、機器ナビゲーション担当のtoc.ncx(daisy.org)への依存をやめ、nav.xhtml(w3.org & idpf.org)のみで対応(ただし、EPUB2機器向けに併用的にtoc.ncxを置くことも可〔
らしい←後日、独自に要確認〕)
☆―――――――☆
style( フォルダ〔名称任意/ファイル群の格納用/シンプルな表現に徹するのであればCSS制御は1個のファイルで充分〕)
※CSSの基本は以下のサイトなどで確認
◎
CSS HappyLife ZERO ◎
初心者向けCSS(スタイルシート)入門:基本的な書き方を総まとめ! ◎
HTML&CSS入門:イチからWebデザインを習得する講座
※※EPUB3による縦書き表示を扱う場合は以下を参考(の参考)にするとはいりやすい(のでは?
けっきょくブログエントリの本文枠やHPの基本ディレクトリの代わりに、EPUBパッケージ内のOEBPSフォルダ内に、「style/〜.css」「text/〜.xhtml」と(扱うコンテンツファイルが多いので別フォルダに分けて)置いといて、xhtml側で「../style/〜.css」と書いてCSSにパスを通しただけの違いにすぎないし)
◎『
縦書き表示簡易マニュアル(暫定版)』
☆―――――――☆
text (フォルダ〔名称任意/本文等テキストコンテンツの格納用〕)
・カバーページ(cover.xhtml) ★
・タイトルページ(titlepage.xhtml)
・まえがき or 序文(preface.xhtml,foreword.xhtml,maegaki.xhtml,jobun.xhtml)
・目次〔作品の一部としての目次〕(p-toc.xhtml,index.xhtml,mokuji,xhtml)
・本文〔章・節・小見出しを含む〕(p-001.xhtml~、ただしファイル名はまったく任意) ★
・あとがき(afterword.xhtml,atogaki.xhtml)
・電子化による注意書き(caution.xhtml)
・奥付〔上段に「著者プロフィール」を載せることも〕(colophon.xhtml,okuduke.xhtml) ★
・後ろカバー(backcover.xhtml)
※以上はフル装備な書籍スタイルに対応したファイル名の例(★は最低限必要と思われるもの)
※※紙の本のイメージにこだわる者としては、「cover.xhtmlは」一つ上の階層(OEBPS)に置くことにしている。また、「p-001.xhtml」の「p-」はいまは亡き「
緊デジ」スタイルを踏襲したもので、このフォルダ内のファイル名はすべて「p-」からはじめることで、本文データに関わるものであることを明示することにしている。このほうがopfファイルなどの統括ファイルに記入する際(やあとでそれらに修正を加える際)に変更箇所の把握がしやすいので。なお、画像ファイル群の名称も対応するxhtmlのファイル名と(同名か類似の名称を付けて)連携させたほうが、のちのち発生するであろう細かい変更に対応しやすい。
☆―――――――☆
images (フォルダ〔名称任意/画像ファル(ファイル名任意のjpg、pngなど)の格納用〕)
☆―――――――☆
その他のフォルダ(たとえば音声ファイルや動画ファイルなどを格納
※ただし、ここでの扱いは
(現時点では、これ以上ウイングを広げるとアップアップになるので)スルー^^;
でも、電子百科事典といった大掛かりな商業出版だけでなく、個人ベースでの電子出版でも、音声や動画を取りこんだ“個人まりした”電子本こそ“真骨頂”といえるかもしれない(し、もし今後、個人電子出版が興隆するようであればこれがメインストリームになる)かもしれない。
↓↓↓
EPUB_Package フォルダの zip圧縮(ただし、mimetype だけは無圧縮)により
「任意名称.epub」のファイル名を作成することで、EPUB(2 or 3)ファイルのできあがり!
【EPUBパッケージの圧縮作業例】
以下は、
Macのストップ画面上でEPUB用データフォルダ「ePub-package」をZIP(圧縮)して「ePub-package.epub」ファイルをつくる簡単な手順。なお、ホームディレクトリ名は「▽▽▽」。
Macのユーティリティ「ターミナル (Terminal)」の画面上で、以下のコマンドを実行。
cd /Users/▽▽▽/Desktop/ePub-package
zip -0 -X ../ePub-package.epub mimetype
zip -r ../ePub-package.epub * -x mimetype *.DS_Store
cd
(← ホームディレクトリ「▽▽▽」に戻すとき)その際、事前に、テキストエディタで上記4個の処理を「;」でつないで、(下記の例のように)連続した1個の処理としてターミナル画面にコピペし
cd /Users/▽▽▽/Desktop/ePub-package;zip -0 -X ../ePub-package.epub mimetype;zip -r ../ePub-package.epub * -x mimetype *.DS_Store;cd
↓
リターンすれば(=エンターキーを1回押せば) adding: mimetype (stored 0%)
adding: META-INF/ (stored 0%)
adding: META-INF/container.xml (deflated 32%)
adding: OEBPS/ (stored 0%)
adding: OEBPS/content.opf (deflated 75%)
adding: OEBPS/cover.xhtml (deflated 35%)
adding: OEBPS/images/ (stored 0%)
adding: OEBPS/images/001.jpg (deflated 58%)
adding: OEBPS/images/002.jpg (deflated 58%)
adding: OEBPS/images/003.jpg (deflated 51%)
adding: OEBPS/images/004.jpg (deflated 22%)
adding: OEBPS/images/005.jpg (deflated 17%)
adding: OEBPS/images/007.jpg (deflated 44%)
adding: OEBPS/images/008.jpg (deflated 55%)
adding: OEBPS/images/009.jpg (deflated 57%)
adding: OEBPS/images/010.jpg (deflated 59%)
adding: OEBPS/images/119.jpg (deflated 64%)
adding: OEBPS/images/cover.jpg (deflated 62%)
adding: OEBPS/images/titlepage.jpg (deflated 66%)
adding: OEBPS/nav.xhtml (deflated 47%)
adding: OEBPS/style/ (stored 0%)
adding: OEBPS/style/h_bookstyle.css (deflated 70%)
adding: OEBPS/style/h_colophon.css (deflated 50%)
adding: OEBPS/style/h_nav.css (deflated 63%)
adding: OEBPS/style/mybook_h.css (deflated 76%)
adding: OEBPS/text/ (stored 0%)
adding: OEBPS/text/p-001.xhtml (deflated 29%)
adding: OEBPS/text/p-002.xhtml (deflated 29%)
adding: OEBPS/text/p-003.xhtml (deflated 29%)
adding: OEBPS/text/p-004.xhtml (deflated 29%)
adding: OEBPS/text/p-005.xhtml (deflated 29%)
adding: OEBPS/text/p-007.xhtml (deflated 29%)
adding: OEBPS/text/p-008.xhtml (deflated 29%)
adding: OEBPS/text/p-009.xhtml (deflated 29%)
adding: OEBPS/text/p-010.xhtml (deflated 29%)
adding: OEBPS/text/p-aw.xhtml (deflated 29%)
adding: OEBPS/text/p-caution.xhtml (deflated 34%)
adding: OEBPS/text/p-colophon.xhtml (deflated 42%)
adding: OEBPS/text/p-titlepage.xhtml (deflated 27%)
adding: OEBPS/toc.ncx (deflated 68%)と、こんなふうにEPUBパッケージ(〜.epubファイル)が瞬時に生成される
(Linuxでもキホン一緒かな。Windowsには優れたソフトがいろいろあったような)。
なお、上の例は対象フォルダが1個ですが、最後の「cd」のあとにさらに「;」を付けて、デストップ上の別のターゲットフォルダについて、上記の一連の連続コマンド群をさらに連続してつないで、いくつでも同時に(かつほとんど瞬時に)EPUBパッケージを作ることもできます。もちろんそれぞれ、不要な「.DS_Store」のフォルダ内一括削除付きで。
↓↓↓↑↑↑
留意事項/注意事項
以下は、XHTML表記/Cablireでの動作・表示確認/epubファイルのチェックにおいて、遭遇したことや気づいたことなど。
(1)XHTML表記の特徴
・改行タグ「br」は「<br>」ではなく「<br />」に統一
・imgタグの締めの記述が「〜.jpg">」だとこれに続けて「</img>」で締めることを要求されるが、「〜.jpg /">」であれば不要
(2)Cablire(ver 1.48.0
←古い^^;)での動作・表示確認
・段落最終行の文字の並びが、文字数に関わらず、上下の文字間隔を広げて行末まで均等配置されるもよう(少なくとも自分の環境では)。なので、右の行の文字列と横並びが揃うまで文末に全角空白を付加することで、とりあえず対処(ただし、これは固定式では誤摩化せてもリフロー式では段落末に余計な空白行が一行できる場合があるので、CSSでの細かい調整が必要と思われる→ということで現在お勉強&調整中だけど、OSをバージョンアップしないといけない問題かも^^;)。 ↑
(4/18訂正)上記見え消し部分の記述はCablireではなく、
ブログやHPでtableタグを使ったときの不具合だった^^;
・::EBUB3の確認に使えるかどうかについて後日書くこと::
(3)「EPUB Validator (beta)」でのEPUBチェック
・
Message
Invalid prefix '/': must be a valid non-colonized name (aka 'NCName').
ERROR OEBPS/content.opf 2 141 Invalid prefix declaration: URI for prefix 'null' doesn't exist.の指摘からうかがえるように、書誌ファイルで(も)ある「content.opf」の2行目で
<package xmlns="http://www.idpf.org/2007/opf" version="3.0" xml:lang="ja" unique-identifier="jpecode" prefix="ebpaj: http://www.ebpaj.jp/">
の末尾の表記で当初「〜.jpg /">」と半角ブランクがあったことを厳しく咎められ、これがとりもなおさず、同ファイル内6行目以降の
一連のdc設定に対する指摘の山ともなっていたので(Cablireでは問題なく表示できてはいたけれど、機器の表示段階で不具合の元になるかもしれないことから)、空白一つの扱いにも要注意。
(4)その他
・「toc.ncx」の目次表示で扱うファイルのid名は、「content.opf」内の同名ファイルのid名と一致していなくてはならない。
<2019-04-13 記>
上記の「マニュアル」作成にあたって、参考としている主なネット記事 (heartfully thanks!)
[A] EPUB3に関する技術情報
(1)
EPUB3の作り方 - ナレッジエース (2)
電子書籍づくり実践(書誌情報を書く) - 本好きに送る「電子書籍のつくり方」講座 (3)
|| EPUB3テンプレートの使い方 第二版(電書協仕様準拠版) || (4)
EPUB Publications 3.0.1(日本語訳版) (5)
EPUB3サンプル|日本DAISYコンソーシアム
[B] EPUB(2) / XML(XTML)に関する基礎的技術情報
(1)
EPUB で電子書籍を作成する - IBM (2)
XML宣言したXHTMLファイル
(3)
OEBPS Container Format (OCF) 1.0 日本語版
(4)
基礎だけ学ぶ XML講座 [初心者向け・入門] | みるくあいらんどっ! (5)
MIMEタイプってなんだ? - Qiita (6)
EPUBのベストプラクティス EPUB2用の目次NCXの出力はまだ必要か? | 電子書籍、電子出版のCAS-UBブログ[C] 上記の「マニュアル」作成にあたって中間まとめ風に作ってみた一覧表
(随時微修正あり) ◎『
EPUBパッケージ構成一覧表 兼 EPUB作成用簡易マニュアル 』
ちなみに、上掲[A](5)サイトなどで公開のepubファイルをDLして、〜.epub→〜
.zipと拡張子を変更し、解凍ファイルで解凍して得たパッケージフォルダ内の.opfや.ncxや.xhtmlの配置やネーミングや中身を拝見することで、様々な使用実例を観察することもスキルアップに役立ちます(ただし、あくまで研究に徹することを大前提とした“観察”行為でなくてはなりませんが)。
あと、なりゆきで上記[C]表を作ったので、あとはEPUB特有の3点セットなファイル(content.opf、nav.xhtml、toc.ncx
〔←ただしEPUB3専用ならtoc.ncxは不要〕)の汎用サンプルを作れば、『だれでも簡単にできるEPUB(2&3)制作マニュアル(仮称)』は基本できあがり(=原型誕生)って感じでしょうか。
<2019-04-13 記 (2)>
[D] EPUB特有の3点セット・ファイル(content.opf、nav.xhtml、toc.ncx)の汎用サンプル、ではなく、EPUB3ベースの縦書き表示を
前提と想定した「ひな型」を作ってみ(まし)た。
◎
3点セットのひな型ただし、この「ひな型」に対する動作確認等の検証はやっていないので、あくまで、それぞれの一般的と思える書式の控えであり、同時に、自分向けの備忘的な手引きにすぎない(ものです。で、例によって今後も随時微修正あり^^;)。
さてこれで、『だれでも簡単にできるEPUB(2&3)制作マニュアル(仮称)』の原型が、とりあえず調ったってところ(でしょう)か。。。
<2019-04-14 記>
さて、ここ数日間は、ブログ、HPでの縦書き表示の試みからはじまって、いずれどっぷり取り組まなくてはならないEPUB3での縦書き物の出版を前にしてその手順を自分なりにわかりやすくまとめる必要があったので、今回、一気にそのまとめまでいけたのはとてもよかったです^^v
自分的には、以下の3個のファイル群で、EPUB(2&3)の基礎的な理解と縦書き文章を主体としながらも構造的にはシンプルな電子出版物なら制作できる入り口にまで、ほぼほぼたどり着いた(であろう)と思います。
◎『
EPUBパッケージ構成一覧表 兼 EPUB作成用簡易マニュアル 』…… EPUB出版物制作用手引き
→◎『
縦書き表示簡易マニュアル(暫定版) 』…… EPUB3出版物制作用付属手引き<1>
→◎
3点セットのひな型 …… EPUB出版物制作用付属手引き<2>
なので今後は、『だれでも簡単にできるEPUB(2&3)制作マニュアル(仮称)』の制作・出版もシゴトのメニューの一つである【電版】シリーズ(現在、No.3〜No.8が待機中)に加えて、時機がきたら制作に取り組みたいと思います。
なお、ここでお断り。
上記の3セットのhtmlファイルは、いずれもインターネット上の公開情報を自分なりにまとめたものにすぎないので「無条件に著作権フリー」であるとともに、私にとってこれらのファイルは、この分野について学習途上の中間的取りまとめであるため、記載内容等に誤まりがあっても責任は負いかねる旨申し添えます。
<2019-04-14 記(2)>