注目キーワード
  1. 仕事
  2. 美輪明宏
  3. キリスト教
  4. 哲学
WordPress インポート

Sigli で ePubを作る ワープロ『一太郎』から出力→ 編集のコツ

WordPress インポート

ジャストシステムのワープロ『一太郎』のメリットは、クリック一つで ePub 形式のファイルを出力できる点ですが、そのままでは縦書きに対応しないケースもあり、様々な電子書籍リーダーで正常に表示するには、自分で、ePubファイルを編集して、読みやすい書籍スタイルにアレンジする必要があります。

電子書籍エディタ(実際には、XHTMLエディタ)の Sigli を使えば、比較的簡単に修正することができますので、HTMLタグの経験がある方は、ぜひトライしてください。

ePubファイルの構造を理解する

ePub形式というと、Kindleの mobi ファイルみたいに、得たいの知れない新型ファイル形式を想像する人も少なくないと思いますが、なんてこたーない。

XHTMLファイルと、CSS(スタイルシート)、その他のコンポーネントファイルの詰め合わせです。

インターネット老人会で、ウェブサイトを作成するのに、自分でHTMLタグを打っていた世代には、「なーんだ」って感じですね。

私も、全く新しいファイルかと思って身構えていましたが、実際に Sigli で開いてみて、びっくり。

「IBM ホームページ・ビルダーの世界やん!」

ePubファイルの実体は、XHTMLファイルといっても過言ではありません。

身構えていたインターネット老人会の皆さん、ホッとしたでしょう。

これがePubの中身ですよ。

こちらがファイル構造。

ePubのファイル構造

これがエディタ画面です。

懐かしのホームページ・ビルダー、そのものです (^^)v

Sigli エディタ画面

しかし、一太郎から出力した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のバージョン設定

あとは、エディタ画面、および、プレビュー画面のフォントを指定します。

いずれも、アプリで使用するフォントであり、実際にePubに読み込むフォントとは異なります。

エディタ画面のフォント設定

プレビュー画面のフォント設定

縦書きに合わせたCSSの設定とXHMTLの編集

classを調整する

ここでは、「HTMLのタグ打ちができる」ということを前提に話を進めます。

下記のソースコードを見れば分かるように、内容的にはHTMLファイルとほぼ同じです。

XHTMLにおいて、通用するタグと、通用しないタグがあり、それについては、個別に調べるしかないのですが、Sigli にも独自のチェック機能がありますし、Google ブックスの場合、ファイルエラーも細かく提示してくれるので、一から勉強し直す必要はありません。エラーが出たら、その都度、調べる程度で対応できると思います。

とりあえず、ヘッダーはそのまま。

title タグ、keywords 、content(メタデスクリプション)あたりをしっかり記入しておきましょう。

重要なのは、 body 以降。

class の調整ですね。

XHTMLの修正

一太郎の場合、各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を外部エディタで編集する

初期のCSSでは、大見出し(h1)の設定は下記の通り。

h1.h11b {
-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; を追加すると、ちゃんと左側に余白ができます。

CSSの修正後

また、

font-family: Meiryo;
font-weight: 900;

を追加して、大見出しだけフォントをメイリオ+極太にしてみると、下図のように反映されます。

CSSでフォントスタイルを調整

万事、このように、CSSで調整すれば、見映えのいい ePub を作成することができます。

HTML式のホームページと同じ要領ですね。

フォントは、 『縦書き+明朝体』を重視するなら、遊明朝か、IPA明朝あたりが無難だと思います。

HTMLサイトと異なり、ePubは、リーダーによって、全く見え方も異なるので、凝ったフォントは指定しない方がいいです。

私も最初、リュウミンを使っていましたが、やはり一般のePubリーダーやブラウザでは綺麗に表示されず、遊明朝に変えました。

font-family:”Yu Mincho”,”Arial”,”Osaka”,”IPA Mincho”,”IPAmj明朝”,”Georgia”,”Hiragino Mincho ProN”,”‘Hiragino Kaku Gothic ProN”;

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

シンプルながら、細かなところまでスタイルシートやタグを読み取り、エラーのある箇所を教えてくれます。

「参照」でファイルを指定して、「Validate」(検証)をクリックします。

ePubファイルをチェックする

エラーメッセージが表示されたら、Sigliなどを使って、エラー箇所を確認します。

下図の場合、document2.xhtml の、44行目×130字目と、47行目×99字目に、「不明なid」が記述されているようです。

エラーの箇所を確認する

目次に設定したリンクのIDが間違っているようです。

href=”#u53C2…… の部分です。

一太郎では、文書内に見出しにブックマークを挿入して、目次からブックマークにリンクを挿入した際、上記のような数字+アルファベットのIDが自動的に作成され、それが「ブックマーク」としてファイルに書き込まれるようです。

上記のエラーの場合、「文書内に存在しないブックマークにリンクが貼られている」と理解できます。

何度か見出しや目次を書き替えるうちに、旧いリンクがそのまま残っていたのでしょう。

行数からエラーを確認

あとは一太郎の文書に戻って、もう一度、ブックマークを再設定し、リンクを貼り直せばOK。

再度、ファイルを検証し、Congratulations のメッセージが出れば、完成です。

ファイルが正常であればCongratulations

他にも、ダウンロード式の、pagina EPUB-Checker というソフトウェアもあります。

こちらも性能的にはオンラインと同じで、同じ箇所のエラーが指摘されています。

pagina EPUB-Checker(Freeware)

pagina EPUB-Checker

メッセージの意味が分かりにくいかもしれませんが、一太郎の編集の過程を思い返せば、大体、察しがつくと思います。

あとはCSSの要素で、現在は非推奨のものもありますので (position: absolute など)、面倒ですけど、一つずつ、修正しましょう。

まとめ ・ Sigilは覚えて損はない

上記のような要領で、ePub は案外、簡単に作れます。

一から作成する自信のない人は、『一太郎』、あるいは、ePub 出力機能のあるエディタを使って、ひとまず、ベースとなるePubファイルを作成し、それからSigliで細部を調整するといいと思います。

汎用性の高い ePub を作成するスキルがあれば、どんなプラットフォームでも通用しますし、これからますます需要も高まると思いますので。

とりわけ、インターネット老人会で、「ホームページ作りは20年前に引退した」という、いにしえの戦士にとっても、せっかく身に付けたスキルを再び活かすチャンスです。

興味のある方は、ぜひぜひトライしてください。

一太郎+Sigilで作ったePubの見本

海洋小説 《曙光》 MORGENROOD
ブックカバー
宇宙文明を支える稀少金属ニムロディウムをめぐる企業の攻防と、海洋社会の未来を描く人間ドラマ。心に傷を負った潜水艇のパイロットが、恋と仕事を通して成長する物語です。