Portal:siro

ダイレクトマーケティングブログ

HTMLから電子書籍(ePub)を作る方法(備忘録)

雑記

ハウツー記事にしようと思ったんですが、途中から面倒臭くなって備忘録レベルに下げましたごめんなさい。雰囲気で察してください。

すぺしゃるさんくす*1

大佐ちゃん

追記

大佐ちゃんもハウツー書いてた！保存とか置換とかしおり関係とかどう考えても大佐ちゃんのほうがわかりやすいのでぺたり。
人狼ログをSigil+Aldikoで素敵に持ち歩くメモ

要約

1.HTMLをダウンロードする
2.微調整
3.Sigilでまとめる
4.電子書籍ビューワに突っ込む

ごめんなさいちゃんと書きます

例として人狼議事の終了村*2のログを電子書籍変換してみます。

0.諸注意
  1. 人狼議事に限りませんが、人狼のログを一気にダウンロードする行為*3はサーバ負荷が大きいので*4なるべくサーバが軽い時間を狙うのがいいと思います(重要)
  2. 現時点ではAndroidでの閲覧を前提に書いているので背景やCSS等は反映しません。本文とキャラ画像が見えてればいいよという方向けです。*5 *6
  3. 自己責任でどうぞ。手順の最適化はされてません。
1.HTMLをダウンロードします

普通にブラウザで開いて落とすだけです。「名前をつけて保存」.mht形式でなくHTML形式で保存してください。

現在過去村ビューワが死んでいらっしゃるので生ログです。
pretenseさんのほうは最近画像が見れませんが、今回画像は後から適当に挿入することにします。
現在稼働中の鯖の場合は顔画像も保存されるので問題ないかと思われます。

注意点としては、

  • 保存前にフィルタを下に追いやって、畳める場合は全部畳んでおく(後でコメントアウトが楽)
  • 自分のPCのスペックに合わせてほどほどのところでログを分割してダウンロードする*7
  • HTMLのファイルは保存時に日本語にしない、連番にするなどして順序をわかりやすくしておく

ぐらいでしょうか。

ダウンロード終わった状態がこんな感じ。

エピローグ長すぎだろと言わざるをえない。

2.微調整

多分ここが一番めんどい。正規表現とか使えて一括で置換できるエディタ推奨*8
(1)ページ上下にある余計なものを削る
ex.フィルタ、ページNo、諸々。置換や正規表現でごりっと削るのが多分楽ですが、ある場所が決まっているので手作業で消してもいいと思います。
議事のログに限って言えば、

  • scriptタグ　→　削らなくてもいいですがコレは要りません
  • ログインフォーム　→　要りません< form >〜 < /form >までごりっと消せます
  • p class="turnnavi" →　今何日目かの把握にはいるかもしれませんが要りません
  • p class="pagenavi"　→　今何ページ目かの上に同じ
  • フィルタ　→　使えないので要りません


この辺りを全ページ分消します。
途中に余計な物が挟まってても別に気にならないよ？という方はこの作業は省略できます。
タグ削りはよくわかんねーやという人はSigilに読み込んでから削除したほうがいいかもです。


(2)ログの色変換
CSSが反映されていない都合上*9
赤ログを赤色、灰ログを灰色、青ログを青色、というわかりやすい置換をしてみます。　あ、今回は共鳴ログは桃色にします。


大体こんな感じで置換します。(正規表現はEmEditorに合わせて書いています)

赤名前のみ
置換前：【赤】(.*)</h3>
置換後：<font color="#AA5555">【赤】(\1)</font></h3>


赤名前＆発言
置換前：【赤】(.*)</h3>\n<p class="mes_text" style=" width: 442px;">(.*)</p>
置換後：<font color="#AA5555">【赤】\1</font></h3>\n<p class="mes_text" style=" width: 442px;"><font color="#AA5555">\2</font></p>


正規表現が使えないエディタでも【赤】とか【独】とかで検索かけて丁寧に置換掛ければどうにかなると思います。
この作業が終わるとこんな感じになります


組める人はマクロ組んだほうが早いかもしれない。
勿論【赤】とか【灰】とかついてりゃ色なんて分かれてなくても読めるからへーきよって人はこの作業も飛ばしておｋ

(3)書式の除去
議事国のPL発言( / * がついている発言)がビューワによってはうまく読めないので削ります。
「/*」の直前のをコピーして、これを置換を使って消去してください。
今回は<　em style="display: inline; "　>こんなんだったので、ごりっとごりっと。
終了タグのも忘れず消しましょう。


(4)顔画像の表示
これはSigilで並行作業しながらやります。
ちなみに「顔画像？いらないや」って人は。この作業も省略……というかHTML保存時に携帯モードで読み込んだほうが絶対に楽ですし早いです……。

3.Sigilでまとめ

http://code.google.com/p/sigil/からSigilをダウンロードしてインストールします。
英語だけどなんとかなるなる。Donateとか書いてありますが、要するに「気に入ったらお金払ってね！」ってヤツなので、ダウンロード＆使用は無料でできます。ご安心を。


そんでもってFile>Openでとりあえずプロローグを読み込みます。

こんな感じになります。
*10

※この画面はくそ重いのでなるべくならコードビューのほうがいいかもしれません
重すぎると感じたら任意の場所でCapter Breakを挟んでHTMLを分割しましょう

で、2の(4)ですが
顔画像の部分が「./保存ファイル名/c60.jpg」みたいになってるので「../Images/c60.jpg」みたいに置換します。

プロローグ以降のログも全部テキストエディタで置換してから読み込みます。がー。


ざっと見て色指定とか問題なさそうなら保存します。
色指定が間違ってる場合は読み込んだHTMLを削除→元HTMLを修正して再読込かけたほうがいいと思います。(Sigil側でコードが最適化されてしまうので後から直すのめんどい)

最終的にこんな感じに。
……やたらHTMLが多いのはこれがEFBだからであって、普通のRP村だったらもっと少なくなると思われます…。*11


そんで保存します。2.35MBになりました。後はこれを電子書籍ビューワで読むだけです。
わーログがカラフルですねー(棒

Aldiko＠HTC Desireで読むとこんな感じ。初回読み込みはすごく時間かかりますが、問題はないです。*12


おまけ

なんか文字列の端が切れる
→marginとかpuddingとかwidthの設定を直すなり消すなりしてください

文字化けする
→議事国のHTMLならデフォで入ってるので不要なんですが、lang=jaの設定をどこかに突っ込めば文字化けしなくなるらしいです。

灰のPL発言が化ける
→emタグを削ってください

重い
→分割しましょう


労力は多少掛かりますが、ネット環境の無いところでも村ログを読むのには向いてるんじゃないかな！とか！*13
あと、鯖落ちてても読めますしね！！！

と　いう　わけで　ヤマアラシとEFBが出勤中に読みきれますように……。神曲も読んでるんですけどね…へへへ。

追記

だ、そうです！！

*1:おしえてくれて＆ブログ転載許可ありがとう

*2:今回は僕が読み途中のEFBにします

*3:勿論人狼以外でも大量ダウンロードが絡めば当然そうですが

*4:と、昔人狼輪廻の管理人さんに聞きました

*5:CSSとかもPDF変換噛ませたりあれやそれや上手くやればいけるとは思うのですが、どうせAndroidの小さい画面に持ち込んだ時点でずれるので。んまい方法があればどなたかお願いします

*6:あと手間が増えすぎるとそれはそれでその時間でログ読めばよくねとなって本末転倒感ががが

*7:特に大体の村でエピローグはくそ長いので、エピローグは分割まじおすすめ

*8:Sigilでもできるけど多分テキストエディタのほうが早い

*9:工夫すればきっと反映できるけどめんどくｓ

*10:画像は後から入れるので表示されてないとか気にしないでください。現行鯖の村ログの場合は表示されているはずです

*11:実際、僕が最初に作ったヤマアラシ村が1.05M、大佐ちゃんが作ったIoMが2M↑だったとか

*12:どうしても気になるようだったら上巻・下巻みたいに分割するのがよいかも

*13:特に僕みたいな地下鉄出勤組