ジャストシステムのワープロ『一太郎』のメリットは、クリック一つで ePub 形式のファイルを出力できる点ですが、そのままでは縦書きに対応しないケースもあり、様々な電子書籍リーダーで正常に表示するには、自分で、ePubファイルを編集して、読みやすい書籍スタイルにアレンジする必要があります。
電子書籍エディタ(実際には、XHTMLエディタ)の Sigli を使えば、比較的簡単に修正することができますので、HTMLタグの経験がある方は、ぜひトライしてください。
ePubファイルの構造を理解する
ePub形式というと、Kindleの mobi ファイルみたいに、得たいの知れない新型ファイル形式を想像する人も少なくないと思いますが、なんてこたーない。
XHTMLファイルと、CSS(スタイルシート)、その他のコンポーネントファイルの詰め合わせです。
インターネット老人会で、ウェブサイトを作成するのに、自分でHTMLタグを打っていた世代には、「なーんだ」って感じですね。
私も、全く新しいファイルかと思って身構えていましたが、実際に Sigli で開いてみて、びっくり。
「IBM ホームページ・ビルダーの世界やん!」
ePubファイルの実体は、XHTMLファイルといっても過言ではありません。
身構えていたインターネット老人会の皆さん、ホッとしたでしょう。
これがePubの中身ですよ。
こちらがファイル構造。
これがエディタ画面です。
懐かしのホームページ・ビルダー、そのものです。
しかし、一太郎から出力したePubは余計なタグが入り交じっていて、ソースとしては、すっきと美しい部類には入りません。
余計なタグを抜いて、ファイルを軽量化し、class名も分かりやすいものに置き換えた方がいいです。
以下、そのコツについて、ご紹介します。
Sigliのインストール&セットアップ
下記ページから、自身のOSに合ったバージョンをダウンロードします。
概要のページ
https://sigil-ebook.com/
ダウンロードリンク(Github)
https://github.com/Sigil-Ebook/Sigil/releases/tag/1.0.0
通常の手順でインストールしたら、最初に『編集』→『環境設定』を開き、バージョン設定とUIのフォントを設定します。
ePub と CSS のバージョン設定は非常に重要なので、最新版にチェックを忘れずに。
あとは、エディタ画面、および、プレビュー画面のフォントを指定します。
いずれも、アプリで使用するフォントであり、実際にePubに読み込むフォントとは異なります。
縦書きに合わせたCSSの設定とXHMTLの編集
classを調整する
ここでは、「HTMLのタグ打ちができる」ということを前提に話を進めます。
下記のソースコードを見れば分かるように、内容的にはHTMLファイルとほぼ同じです。
XHTMLにおいて、通用するタグと、通用しないタグがあり、それについては、個別に調べるしかないのですが、Sigli にも独自のチェック機能がありますし、Google ブックスの場合、ファイルエラーも細かく提示してくれるので、一から勉強し直す必要はありません。エラーが出たら、その都度、調べる程度で対応できると思います。
とりあえず、ヘッダーはそのまま。
title タグ、keywords 、content(メタデスクリプション)あたりをしっかり記入しておきましょう。
重要なのは、 body 以降。
class の調整ですね。
一太郎の場合、各classは自動的に割り当てられます。
たとえば、大見出し、中見出し、小見出し、本文と続く場合、下記のように出力されます。
一太郎の 「段落スタイルセット』で設定した、大見出し、中見出し、小見出し、本文が、上図のような「見出しタグ」に変換されるわけですね。
このうち、data-ichitaro-para-stylename というのは、一太郎専用のタグなので、ePub には特に必要ありません。
data-ichitaro-para-stylename="大見出し(オートスタイル)"
data-ichitaro-para-stylename="中見出し(オートスタイル)"
data-ichitaro-para-stylename="小見出し(オートスタイル)"
data-ichitaro-para-stylename="本文(オートスタイル)"
特に、段落タグの全てに、data-ichitaro-para-stylename="本文(オートスタイル)" が挿入されて、悪夢のような状況になっています。
こうした、一太郎独自の不要なタグは、プレビュー画面を見ながら削除します。
検索・置換で通常の<P>タグに置き換えたり。
こちらは、荒技になりますが、不要な文字列を削除します。誤って、余計な半角スペースなどを挿入しないように。
これだけでもファイルがだいぶ軽量化されます。
次に、各 classの要素をアレンジします。
OEBPS/stylevertical.css で右クリックして、外部エディタを呼び出します。
他のアプリケーション... で、自分の好きなエディタを登録することができます。
初期のCSSでは、大見出し(h1)の設定は下記の通り。
-epub-break-after: always;
-moz-break-after: always;
-ms-break-after: always;
-o-break-after: always;
-webkit-page-break-after: always;
break-after: always;
margin-right: 12.6em;
padding-bottom: 0.00em ;
padding-top: 4.15em;
page-break-after: always;
}
プレビューは下図のように表示されます。
大見出しと中見出しの間が狭まって、見にくいですね。
そこで、 margin-left:3em; を追加すると、ちゃんと左側に余白ができます。
また、
font-family: Meiryo;
font-weight: 900;
を追加して、大見出しだけフォントをメイリオ+極太にしてみると、下図のように反映されます。
万事、このように、CSSで調整すれば、見映えのいい ePub を作成することができます。
HTML式のホームページと同じ要領ですね。
フォントは、 『縦書き+明朝体』を重視するなら、遊明朝か、IPA明朝あたりが無難だと思います。
HTMLサイトと異なり、ePubは、リーダーによって、全く見え方も異なるので、凝ったフォントは指定しない方がいいです。
私も最初、リュウミンを使っていましたが、やはり一般のePubリーダーやブラウザでは綺麗に表示されず、遊明朝に変えました。
class 名も、自分が管理しやすい名称に置き換えることも可能です。
CSSは横書き用・縦書き用と分けて調整
CSSは、横書き用、縦書き用の二種類が梱包されています。
OEBPS/stylehorizontal.css (横書き)
OEBPS/stylevertical.css (縦書き)
CSSは二種類存在し、どちらも同じように対応しなければならないということです。
また、行間にmargin を取り入れる場合、横書きと縦書きでは、margin-◎ の上下左右の指定も異なります。
訂正は数カ所で済みますが、うっかり忘れていると、横書きの時だけ、文字列の間隔がアンバランスになったりしますので、上下左右の指定を間違えないように。
ちなみに、縦書き指定のclassは、下図のような感じです。
writing-mode: vertical-rl;
設定の仕方は、「CSS 縦書き」で検索すれば、いろんな情報がUPされていますので、個別に調べてみてください。
あと、改ページは、下記の通りです。
-epub-break-after: always;
-moz-break-after: always;
-ms-break-after: always;
-o-break-after: always;
-webkit-page-break-after: always;
break-after: always;
これも、ビューワによって、見え方がまちまちなので、もう少し、共通性が欲しいところです。
ePubが正常に作成されているか、チェックしよう
プレビュー表示だと正常に見えるePubも、厳密にチェックすると、リンクの紐付けが間違っていたりや、現在は使われないスタイル要素が紛れ込んでいたりします。
そこで、おすすめしたいのが、HTMLの記述を検証する、チePubチェッカー。
『ePub Checker Online』『ePub validate Online』 あたりで検索すると、いくつかの無料オンラインサービスにヒットします。
私が利用しているのは、EPUB Validator。
シンプルながら、細かなところまでスタイルシートやタグを読み取り、エラーのある箇所を教えてくれます。
http://validator.idpf.org/
https://www.epubconversion.com/epub-validator/
「参照」でファイルを指定して、「Validate」(検証)をクリックします。
エラーメッセージが表示されたら、Sigliなどを使って、エラー箇所を確認します。
下図の場合、document2.xhtml の、44行目×130字目と、47行目×99字目に、「不明なid」が記述されているようです。
目次に設定したリンクのIDが間違っているようです。
href="#u53C2...... の部分です。
一太郎では、文書内に見出しにブックマークを挿入して、目次からブックマークにリンクを挿入した際、上記のような数字+アルファベットのIDが自動的に作成され、それが「ブックマーク」としてファイルに書き込まれるようです。
上記のエラーの場合、「文書内に存在しないブックマークにリンクが貼られている」と理解できます。
何度か見出しや目次を書き替えるうちに、旧いリンクがそのまま残っていたのでしょう。
あとは一太郎の文書に戻って、もう一度、ブックマークを再設定し、リンクを貼り直せばOK。
再度、ファイルを検証し、Congratulations のメッセージが出れば、完成です。
他にも、ダウンロード式の、pagina EPUB-Checker というソフトウェアもあります。
こちらも性能的にはオンラインと同じで、同じ箇所のエラーが指摘されています。
メッセージの意味が分かりにくいかもしれませんが、一太郎の編集の過程を思い返せば、大体、察しがつくと思います。
あとはCSSの要素で、現在は非推奨のものもありますので (position: absolute など)、面倒ですけど、一つずつ、修正しましょう。
まとめ ・ Sigilは覚えて損はない
上記のような要領で、ePub は案外、簡単に作れます。
一から作成する自信のない人は、『一太郎』、あるいは、ePub 出力機能のあるエディタを使って、ひとまず、ベースとなるePubファイルを作成し、それからSigliで細部を調整するといいと思います。
汎用性の高い ePub を作成するスキルがあれば、どんなプラットフォームでも通用しますし、これからますます需要も高まると思いますので。
とりわけ、インターネット老人会で、「ホームページ作りは20年前に引退した」という、いにしえの戦士にとっても、せっかく身に付けたスキルを再び活かすチャンスです。
興味のある方は、ぜひぜひトライしてください。