一太郎2013 玄を使ってepubの縦書き電子書籍を作る

LibreOfficeとwriter2epubを使って縦書き電子書籍を作る」に続いて「一太郎2013 玄」を使ってみます。

 

 テスト環境はWindows7に「一太郎2013 玄 体験版」を使いました。
 体験版は30日間利用できます。

一太郎で縦書き設定にする

 メニューの[書式]>[文書スタイル]を選択

taro_tate1

 [スタイル]タブの[文字組]から[縦組み]を選択

taro_tate2

EPUBで保存

 文章を入力したら、メニューから[ファイル]>[他形式の保存/開く]>[EPUB保存]を選択

taro_epub1

 EPUBファイルのプロパティを設定します。
 タイトルや作成者等を入力します。ここで表紙につかうデータも指定できます。
 種類は「リフロー」と「固定レイアウト」が選べます。今回は「リフロー」を選択します。

taro_epub2

 保存を選択して、ファイル名を指定すれば、EPUBで出力されます。

出力結果は・・・?

 綺麗に縦書きになっています。

taro_epub3

 ウィンドウサイズを変えてやると、ちゃんと改行され、表示行数も変わります。
 単語の検索などもちゃんとできるようです。

taro_epub4

 さすが日本語に特化しているだけあって、epubのソースを見ても綺麗になっており、調整をしたいときも編集が楽そうです。
 Wordからの乗換え版であれば8000円以下で買えるので、海外のツールを使って修正に苦労するのに比べれば、かなりよさそうです。
 文章主体の電子書籍であれば一太郎が今のところ最適かもしれません。

LibreOfficeとwriter2epubを使って縦書き電子書籍を作る

EPUBで縦書き電子書籍を作成するには?」で調べたLibreOfficeとwriter2epubを実際に使ってみました。

    2013/06/23 現在、のバージョンは次のとおり

  • LibreOffice Windows, バージョン 4.0.4,2 日本語 [ダウンロード]
  • writer2epub Ver1系 バージョン1.1.24 [ダウンロード]
  • writer2epub Ver2系 バージョン2.0.0.45(β版) [ダウンロード]

writer2epubはVer2系が開発されているようですが、まだβ版ということで、今回はVer1系でやってみることにします。

LibreOfficeにwriter2epubをインストールする

LibroOffifce Writerを起動したら、メニューから[ツール]>[拡張機能マネージャー]を選択

libre1

拡張機能マネージャーから[追加]ボタンを選択し、先にダウンロードしたファイル「Writer2ePub2.oxt」を選択

libre2

ライセンス条項が表示されるので、下までスクロールしてから[OK]を選択

libre3

拡張機能マネージャーにWriter2ePub2が追加されていることを確認して終了

libre4

Writer2ePub2のボタンが追加されています。

libre5

LibreOfficeWriterで縦書き設定にする

メニューの[書式]>[ページ]を選択

libra縦書き1

[ページ]タブの[文字の選択]で「右から左へ(縦書き)」を選択し、[OK]をクリック

libra縦書き2

epubファイルに変換する

 縦書きの原稿を入力したら、odtファイルとして一度保存します。
 メニューからwrite2epubの左のボタンを選択。
 タイトルや著者名等のメタデータを入力するメニューが表示されるので、必要な情報を入力します。
 ここで右上の[cover]の設定で、epubの表紙の設定ができます。デフォルトでは文書中の最初のイメージを使うようになっているので、画像ファイルが含まれていない場合[OK]ボタンが押せないので適当なものを選択します。
 最後に[OK]をクリック。

libre_epub1

 変換が始まり、問題がなければ結果ログが表示され、odtファイルを保存したフォルダにepubフォルダが作成されています。
 ログウィンドウは閉じてしまって大丈夫です。

libre_epub2

出力結果は・・・?

 出力されたepubをepubを管理・表示できるChrome拡張機能「Readium」から開いてみました。

libreepub3

 たしかに縦書きで出力できています。
 特に指定しなくても、読めるものにはなっているようです。

 しかし、epubをエディターで開いてみると、文章を1文字ずつ分解して、座標指定のようにレイアウトを指定しているようです。
 これでは、文章の検索もできませんし、端末に応じて表示を調整することもできず、epubの利点が生かせません。
 
 ちょっと、配布用としては問題がありそうです。
 次は一太郎で変換をしてみたいと思います。

EPUBで縦書き電子書籍を作成するには?

 

EPUBってなに?

 EPUBは電子書籍の標準規格の一つで、EPUB3から縦書きにも対応したことで、日本
でも普及が進んでいます。
 PDFは固定のレイアウトで、端末によって表示を変えることができませんが、EPUB
では端末の画面サイズに対応して自動的に改行する「リフロー」という機能がありま
す。
 しかし、実際に出版されているEPUBの電子書籍は固定レイアウトのものが多くあり
ます。
 オーサリングソフト等の製作環境がまだまだ整っておらず、ノウハウもこれからな
ので、製作コスト(手間)がかかってしまうのが理由だと思われます。

 固定レイアウトが悪いというわけではなく、写真集や絵本など絵をふんだんに使う
ものは再現性の高い固定レイアウト。文芸書や技術書、実用書などテキスト主体のも
のは可読性が高い「リフロー」対応と使い分ける必要があるでしょう。
 雑誌等のレイアウトと可読性両方が求められる場合は、両方を切り替えられるハイ
ブリッド型も使われています。
 また、「リフロー」でも高度なレイアウト情報を記述することで再現性を高めるこ
ともできるようです。

 

では、実際にどうやって作るの?

  • 手作業でHTMLやCCSを編集する
  • 手作業でEPUB専用ツール
  • 一太郎等のワープロからEPUB形式で書き出す
  • InDesign等のDTPソフトからEPUB形式で書き出す
  • EPUBに変換してくれるWEBサービスを利用する

 ざっくりとこんなところでしょうか?

 EPUBはHTML、CCS等でできているので、テキストエディタひとつあれば作ることできます。
 しかし、HTMLを直接編集するのは避けたいのでツールをいろいろ調べてみました。

 

FUSEe

 fusee
 現状、Win環境だけですが、日本語での電子書籍作成に一番よさそうなオーサリングソフトだとおもいます。縦書きには最新のVer1.4から対応しています。
 β版の無料提供は終了していますが、製品版がAmazonで買えます。
 電子書籍のβ版公式マニュアルも販売されているようです。

 

Sigil

 fusee
 googleの出している無料のツールもあります。
 現状はEPUB2までの対応で縦書きの編集はできないようです。

 

Blue Griffon

 こちらもEPUB3への対応済みですが、縦書きのプレビューが出来ないなど、日本語対応は不十分そうです。

 2013年6月現在、無償で縦書きの対応のツールは無さそうです。

 DTPソフトからEPUBに変換することもできます。
 現在対応しているのは

     

  • Adobe InDesign CS6
  • Quark XPress 9
  • EDICOLOR 10

 このあたりのようです。しかし、調べてみると変換した後に、まだコードの修正は必要そう・・・

 DTPが敷居が高いという場合はワープロソフトから変換するという方法もあります。
 文章主体のものであれば、こちらのほうが向いているかもしれません。
 対応が確認できたのは次のものです。

  • 一太郎2013玄
  • Word2013(+EPUB出力ユーティリティ)
  • LibreOffice(+EPUB出力ユーティリティ)

 追加するユーティリティは「Word2ePub」などいくつかあるようです。
 「Word2ePub」はWordをそのまま変換してくれて、縦書きなどにも対応できる強力なユーティリティのようですが業務用でかなり高価です。
 それに比べると一太郎が単独で変換もできて、日本語に特化していることもあって、かなり良さそうです。値段も専用ソフトに比べればかなり安い。

(2013/07/01追記)試してみました>「一太郎2013 玄を使ってepubの縦書き電子書籍を作る

他になんとか無償でできる組み合わせがないかと探したところ

 LibreOffice+writer2epub

 の組み合わせが良さそうです。
(2013/07/01追記)試してみました>「LibreOfficeとwriter2epubを使って縦書き電子書籍を作る

 他の方法としては、オンラインサービスを利用してEPUBに変換するというてもあります。
 でんでんコンバーターパブーなどいくつかサービスがありそうです。
 

WordPress に TwitterCards を設定してみた

twitterをみているとURLの詳細が表示されているものが時々あります。

こんなやつ
twittercards

これは「Twitter Cards」という機能で、メタタグを設定して、twitterに申請することで使えるようになります。

WordPressの場合はプラグインを使うと簡単に設定できるので、やってみました。

1 メタタグの設定用プラグイン

 「WordPress SEO by Yoast」をインストールして、有効化
 管理画面の左メニューに追加された「SEO」>「Social」
 下のほうにTwitter Cards設定があるので「Add Twitter card meta data」をチェックして、「Site Twitter Username」にユーザーネームを@抜きでいれます。

 最後に「Save Setting」で完了です。

2 Twitterへの申請

 申請は次のページです。
 https://dev.twitter.com/docs/cards/validation/validator

 開くとCardsのサンプルが表示されるので、適当に選択
 「Validate & Apply」タブを選択して、メタタグを設定したページ(ここでは適当
な記事のページ)を入力して「Go!」を押します。
 メタタグの設定状況がチェックされて、申請がまだの場合は申請するためのボタン
が表示されるので、クリックすると登録する入力フォームがでるので、必要項目を入
力したら申請完了です。
 承認がでるまで時間がかかるようなのでしばらく待ちましょう。

<参考にしたエントリー>

WordPressカスタマイズのメモ

WordPressを少々弄ったので、忘れないようメモを残しておきます。

  1. 各記事にソーシャルボタンを設置
  2. サイドバーにTwitterの投稿を表示
  3. ソースコードの表示を強化
  4. 記事末尾のメタデータを修正

以上の4つです。
プラグインのインストール方法に関しては、マニュアル等を参照してください。以前の記事にも少し書いてあります。

ソーシャルボタン設置

WP Social Bookmarking Lightプラグインを管理画面からインストールし、幾つかの項目を設定しただけです。実に簡単。
日本の方が作っておられるらしく、国内のSNSにも対応しているのが嬉しいところ。

Twitter投稿表示

プラグインもありますが、今回はTwitterから提供されている公式ウィジェットを利用します。
ブラウザでTwitterにログインし(当然ながら既にTwitterアカウントを持っている必要があります)、設定 › ウィジェット にある新規作成ボタンを押してください。
好みに合わせて設定を選んだのち、「ウィジェットを作成」すると、例えば以下のようなソースが表示されますので、クリップボードにコピーしておきます。
[html]
<a class="twitter-timeline" href="https://twitter.com/ODprject" data-widget-id="******************">@ODprject からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
[/html]
続いてWordPress側の設定を行います。管理画面から、外観 › ウィジェット を開いてください。
そこに「テキスト」という自由に文章を置くためのウィジェットがありますので、これをサイドバーに設置し、先ほどのソースコードをペーストします。
最後にウィジェットを「保存」すれば完了です。

ソースコード表示強化

こちらは「SyntaxHighlighter Evolved」というプラグインを使いました。
様々なプログラミング言語に対応(HTMLやBash、SQLにも!)しているらしく、色々なところで使われているのを目にします。
インストール後、記事の中で該当箇所を[言語名]~[/言語名] で囲みます。例えばHTMLなら、

[html]
<p>
	ある人が変わる力は、何ごとかを「したい」という自分の声に耳をすませることだ。
</p>
[/html]

と書きます。すると、
[html]
<p>
ある人が変わる力は、何ごとかを「したい」という自分の声に耳をすませることだ。
</p>
[/html]
…と、このように表示されます。環境によっては表示されないようですが。
この時、ソースコード部分に関してはHTMLのエスケープをしなくて良いので、そのまま貼りつけることが出来ます。
デザインを変更したり、行番号を非表示にするだけでなく、特定の行をハイライトする機能もあるようです。

記事のメタデータ修正

細かいところですが、各記事の下部にあるメタデータ(カテゴリやタグ、投稿日など)の表示も修正しています。
タグを設定している場合、どうしても横に長くなってしまいがちなので適当なところで改行を入れてみました。
タグ未設定の場合は問題無さそうですのでそのままです。
記事のメタデータの例

調べてみたところ、現在使っているWordPressテーマ「Twenty Twelve」version 1.1では、wp-content/themes/twentytwelve/functions.phpにある twentytwelve_entry_meta() 関数でメタデータ用の表示文字列を生成していることが分かりました。
[php firstline=”323″ highlight=”330″]
/**
* Prints HTML with meta information for current post: categories, tags, permalink, author, and date.
*
* Create your own twentytwelve_entry_meta() to override in a child theme.
*
* @since Twenty Twelve 1.0
*/
function twentytwelve_entry_meta() {

[/php]
さらに読み進めてみると、以下のような処理がありました。
残念ながら英語のままではありますが、__(文字列) という記述になっているのが気になります。
おそらく引数の文字列を元に、言語環境と照らし合わせて該当する翻訳文字列を検索し、あればその文字列を返す、無ければ引数そのまま返す……というような処理をしているのだろう、というのがPHPに無縁な僕でも何となく分かります。

[php firstline=”350″]
// Translators: 1 is category, 2 is tag, 3 is the date and 4 is the author’s name.
if ( $tag_list ) {
$utility_text = __( ‘This entry was posted in %1$s and tagged %2$s on %3$s<span class="by-author"> by %4$s</span>.’, ‘twentytwelve’ );
} elseif ( $categories_list ) {
$utility_text = __( ‘This entry was posted in %1$s on %3$s<span class="by-author"> by %4$s</span>.’, ‘twentytwelve’ );
} else {
$utility_text = __( ‘This entry was posted on %3$s<span class="by-author"> by %4$s</span>.’, ‘twentytwelve’ );
}
[/php]

ならばどこかに対訳ファイルがあるはずです!
探してみたところ、wp-content/languages/themes にそれらしきファイル twentytwelve-ja.po と twentytwelve-ja.mo を発見しました。
先のWordPressテーマファイルとは別のディレクトリなのが曲者です。

*.poがテキストファイルで、*.moはそのキャッシュ(バイナリ)です。
WordPress側は*.moファイルを参照するので、両方を更新する必要があります。

今回、これらを編集するのに、Poeditを使用しました。
Peditを立ち上げ twentytwelve-ja.po の中を覗いてみると、
[html]
カテゴリー: %1$s | タグ: %2$s | 投稿日: %3$s | <span class=\"by-author\">投稿者: %4$s</span>
[/html]
というテキストがありましたので、
[html]
カテゴリー: %1$s | タグ: %2$s |<br/>投稿日: %3$s | <span class=\"by-author\">投稿者: %4$s</span>
[/html]
と、タグのあとに改行を入れてみます。
そのまま保存ボタンを押せば*.moファイルも自動的に更新されるようです。

最後に、この2つをアップロードして終了です。