InDesignからSigil経由のEPUBファイルをInDesignへ。

何を言ってるかわからないと思う。わたしも最初聞いた時は驚いた。

紙で出版されたものが電子書籍として配信されて、今度はその配信されたものを組み直して再び紙印刷本へというお話。

売れっ子グラビアアイドルが、AVに出演した後、温泉街のストリップに流れる、みたいな変遷。逞しい話で、名作(テキスト)は姿形を変えてもしっかり生き残るという良い例だろう(ほんまか)

おそらく元になってるInDesignデータは出せなくて(権利的な話じゃなく、たぶん探すのが面倒、もしくはもうなくなっているので)電子書籍のEPUB3ファイルを元にするしかない。

ということで、そのEPUB3ファイルをバラしてInDesignに流し込みという雇用創出となった。

まだEUPBファイル制作のソフトが出揃ってなかったんだと思う。

ファイルは、一時使われていた縦書きにもできる改造版Sigilで作られているっぽい(EPUBファイルのフォルダ構成やファイルの命名規則がどっかで見たことあるなあと)

でもまあ、青空記法に独自規則のアレンジとかdotBookからのHTMLっぽいデータよりはEPUBファイルの方が扱いやすい。

・組み直しになるので、元のレイアウトにこだわる必要ない。

・小説なので、EPUBファイルから拾い上げるのはルビと圏点、外字程度。

ルビはグループルビのタグがついているし、圏点はsesame(ゴマ)というクラスが指定されている。外字は画像になってるのでそこは「〓」にしておいて校正で対応。

↓InDesignにはタグ付きテキストというのがあって

http://help.adobe.com/ja_JP/indesign/cs/taggedtext/indesign_cs5_taggedtext.pdf

テキストデータにルビや圏点のタグを付けてInDesignに「配置」すればそのままルビも圏点も生かしてくれる。

以下のスクリプトでEPUB3のルビと圏点のタグをInDesignのタグに変換してやれば大丈夫だった。

use strict；
use utf8；
use Encode；
binmode STDOUT=>":utf8"；
my $dir = ’OEBPS/’；
my $xhtml_dir = $dir . ’/Text/’；
opendir(DIR， $xhtml_dir) || die； my @xhtml = grep(/p\-\d+\.xhtml$/， readdir(DIR))； closedir(DIR)；

foreach (@xhtml){
    my ($base) = $_ =~ m!(p\-\d+)\.xhtml!；
    my $text = $base . ’.txt’；
    open(IN， $xhtml_dir . $_) || die；
    open(OUT， ’>’ . $text) || die；
    binmode OUT=>":utf8"；
    print OUT qq{<UNICODE-WIN>\n}；
    my $sw；
    while(<IN>){
        my $line = Encode::decode(’utf8’， $_)；
        $sw = 1， next if $line =~ m!<body!；
        last if $line =~ m!</body>!；
        next if $line =~ m!^\r?\n!；
        if($sw){
            $line =~ s!\r?\n!!；
            $line =~ s!^[ \t]+!!；
            $line =~ s!<p><br /></p>!
!；
            $line =~ s!<ruby>([^<]+)<rt>([^<]+)</rt></ruby>!&ruby({str=>$1， ruby=>$2})!eg；
            $line =~ s!<span class="em-sesame[^>]+>([^<]+)</span>!&goma({str=>$1})!eg；
            $line =~ s!<img[^>]+class="gaiji[^>]+>!〓!g；
            $line =~ s!<[^>]+>!!g；
            $line =~ s!
! !g；
            $line =~ s!___cRuby:1___!<cRuby:1>!g；
            $line =~ s!___cRubyString:([^_]+)___!<cRubyString:$1>!g；
            $line =~ s!___cMojiRuby:0___!<cMojiRuby:0>!g；
            $line =~ s!___cRuby:___!<cRuby:>!g；
            $line =~ s!___cRubyString:___!<cRubyString:>!g；
            $line =~ s!___cMojiRuby:___!<cMojiRuby:>!g；
            if($line){
                print OUT $line . "\n"；
            }
        }
    }
    close(IN)；
    close(OUT)；
}
sub ruby{
    my $args = shift；
    $args->{ruby} =~ s![  ]!!g；
    return "___cRuby:1______cRubyString:$args->{ruby}______cMojiRuby:0___$args->{str}___cRuby:______cRubyString:______cMojiRuby:___"；
}
sub goma{
    my $args = shift；
    return "___cKentenKind:1___$args->{str}___cKentenKind:___"；
}

文字コードでちょっとハマった。

InDesignで「配置」する時、文字コードはShift_JISかUTF16じゃないと文字化けしてしまう。

元にするEPUB3ファイルの文字コードはutf8(BOM無し)。

EPUB3のUTF8をShift_JISにすると文字化けを起こす可能性があるような気がするので、とりあえずutf8のまま上記スクリプトでタグ変換して、エディタで開いて文字コードをUTF16に変換した後、配置した。

Adobeのタグ付きテキストのPDFを見ると、かなり細かく制御できるので、ちゃんと探せばこの手のコンバート系でいろんな強力なツールが出てるはず。

でも、たぶん、そんな継続する案件でもなさそうなので、テキトーな使い捨てスクリプトでやっつけ仕事。

しかし、ほんとニッチな需要もあったもんだ。

ガッテンしていただけたでしょうか。

Kindleの無料サンプルを縦書き段組にして表示するというのをやってみて、ついでに、「はてな」などのブログ記事掲載のサンプルを縦書き段組にしてみた。

CSS3のマルチカラムは縦書きの段組には(現状)使えないので、段組の一カラムずつの塊を返す（レイアウトデザインを崩さずコントロールするためにはこの方法しかなさそうだ）

百聞は一見に如かず。

「はてな」

http://t2akii.hatenablog.com/entry/2016/02/15/182240

「HTML直書きのサンプルページ」

http://sandbox.doncha.net/sample-tategumi.html

「はてな」を例にしてみると。

その1。

ブログ記事を「編集 見たまま」で作成する。

その2。

表示させたい立ち読みサンプルを、テキストエディタ(sakuraやxyzzy、秀丸、miやcoteditorなどなど)で開いて、コピー。

その3。

「編集 見たまま」で、立ち読みサンプルをペーストする。

そうしたら「HTML編集」に切り替える。

赤い部分がコピペした立ち読みサンプル部分。

その4。

このコピペした立ち読みサンプルの冒頭の「＜p＞　神さまに会いに行く」の「＜ｐ＞」の部分に「HTML編集」の状態で以下を記入する

 id="sample-tategumi" data-cols="28" data-lines="20"

赤い部分

のように編集。

・data-colsは一行の字数

・data-linesは一カラムの行数

その5。

以下のコードを立ち読みサンプルの下あたりに貼り付け。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="http://sandbox.doncha.net/sample-tategumi.js"></script>
<script type="text/javascript">sampleTategumi()；</script>

HTMLに書きこまれたテキストを縦書きにするだけなので、立ち読みテキストがグーグルさまなどの検索エンジンにちゃんと拾われるのもお得な感じになった、かも。

HTML的なことをいうと。

idがsample-tategumiの要素の中のテキストを縦書き段組にするので、pタグだけじゃなくてdivタグなんかでもOK。

…にしても、wordpressもはてなも、CMSってのは余計なお世話が多いなあ。

Kindleの無料サンプル、試し読みを縦書きにしてブログに貼り付けるというのを、先日やってみたんだけど。

現状のCSS3のマルチカラムは縦書きがまともじゃない。

カラムの高さが取得できなくて2段目以降がオーバーフローしてしまうことがある。親要素に高さが伝わらないので、たとえばページの最下部にありがちなフッターを乗り越えて表示したりしてしまうのだ。

またそのせいか、一段の高さと表示段数の計算がわけわかめ状態。CSSで指定した高さになっていなかったりしてうまくコントロールできない。ブラウザごとで解釈がバラバラ。

つまり、現状のCSS3のマルチカラムを使って縦書きにすると。

ページのレイアウトデザインが意図どおりコントロールできない。ブラウザが違うと一段の字数・行数が違ってくる。ということになる。

ありえなかった。

たぶん、時間が解決してくれる。そのうちCSS3のマルチカラムでも縦書きがちゃんと意図通りに表示される時代がやってくる。

でも、いったいいつになるのか、初老フリーターに残された時間は短い。

てことで、段組表示用に、字数x行数でテキストを区切ってひと塊ずつdiv要素でくるんだものを返すようにした。

CSS3のマルチカラムで起こっていた問題はこれで解決（禁足なんかの判定がバギーだけど…）

意図通りに縦書きで段組されて（＝マルチカラムで）表示されるようになった。

↑28字x20行のカラムごとに表示している。

でもこれは、CSSのマルチカラムではないので、レスポンシブというか画面の幅に合わせて柔軟に広がったりしない。N字xN行の塊が表示されるだけ。

今どきはスマホファーストでもあるので、それだとなんかアレな感じ。その場しのぎというかスマホでのアクセスの場合、表示する行数をPCの半分にするようにした。

各々一段10行表示となる。

Android

iPhone4S

http://sandbox.doncha.net/sample-kindle.html

↑表示のサンプルページはこちら

（ちなみに、無料サンプルについてくる「目次」toc は削除）

以下のコードを、縦書きでサンプルを表示させたいところに貼り付け。

<div id="sample-kindle" data-asin="ASIN" data-type="dangumi" data-cols="28" data-lines="20" data-url="http://sandbox.doncha.net/sample-kindle.cgi"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="http://sandbox.doncha.net/sample-kindle.js"></script>
<script type="text/javascript">sampleKindle()；</script>

1行目。

・「ASIN」の部分にサンプルを表示させたい本のASINコードを記入。

・「data-cols」が一行の字数。デフォルト28字

・「data-lines」が一段の行数。デフォルト20行

※「はてな」や「fc2」などのブログサービスでは「HTML編集」で上記のコードを貼り付ける。

現状、電子書籍をブラウザで読む・体験するのには「BiB/i」が最適最強。

ただ、WEBはクリックのコスト・ハードルがかなり高い。

サンプルをさらっと読んでもらいたいと思っても、クリックしなきゃ読めないのはツライものがある。前にも書いたけど、楽天のフンドシのような長いページはそれなりの意図意味がある。

ページに着地したら余計なアクション不要でサンプルが目の前に表示されている状態にしたい。

ということでごそごそいじってみた。

昨日1/31は例年通り年初のイベント、コミティアに参加。

実際の数字はわからないけど、いつもの年初のコミティアよりも人が多かったような気がする。ウチの新刊既刊も多くのかたに手にとってもらえた。本当にありがとうございます。

「新刊ください」のリピーターのかたや「まとめ買い」のかたがいらっしゃるのは、ずっと続けてきた結果、かな。

今回ビックリしたのが。

たぶん中東系の男性とヨーロッパ系の女性カップルがやってきて、女性の方がニッコリ微笑んでこんにちはと。

新刊のTL(ティーンズラブ小説)を手にとってパラパラ読み始めてビックリ。で、フィアンセだマリッジだと英語で内容を男性に説明しだしてまたビックリ。マンガじゃ昔からの光景だけど小説で初めてだった。バイリンガルかっこええな。ていうか、文芸も国際化・グローバル化の波が来てるのか（大袈裟）

体調不良のせいか、当日明け方までゲロってへろへろだったんだけど、楽しい一日だった。

旧知の永山薫（@Kaworu911）さんとも久しぶりの雑談。年金や介護の話で盛り上り…という歳だなあ。いろいろ具体的な話で参考になった。

出版、商業誌の不景気な話もごにょごにょとしてたんだけどここに書くようなことでもないのでバッサリ削除。

本は「そこにあるから買う」のが基本だ。

注文してまで買う「濃い本読み」の層はいるけど、ほとんどの場合、そこにあるから気づいて、ありゃこれは面白そうと思ってもらえて買ってもらえるものだ。

以前から何度も何度も同じことを書いてるけども。

日野裕太郎の場合も、同人誌の即売会に参加してそこに本を並べてきたから手に取ってもらえるようになったわけだし、機会があって出した商業誌はもちろん、わたし(doncha.net)がやってる電子書籍の個人出版でも同じ、「読者の前に並べてナンボ」だ。

http://hino-yutaro.doncha.net/

↑商業誌・同人誌・電子書籍で出してる日野裕太郎の書籍一覧

プロモーションとかプロデュースとかいろいろなことが言われるけど「使える販路は可能な限りすべて使って読者の前に本を並べる」というのが確実に正しい唯一の方法だ。

てなことを、年初のコミティア参加して改めて実感した次第。

いや、手売りで一冊ずつ、ひとりずつやりとりがあるのはやっぱ刺激になりますです、はい。

[2016/02/02 08:23:53] 追記。

もうひとつ、プロモで有効だと確実に言えるのは「新刊」を出し続けること。

（電子書籍の個人出版の場合、というかECサイトの場合は特に「NEW!」で露出が増える）

ネットで作家自身のプロモーション、プロデュースなども必要かもしれないけど、実体以上に膨らませても・ネット芸者したところで続かないだけ。

まずは「読者の前に本を並べる」「新刊を出し続ける」を着実・確実に、だ。

次回は5月の文学フリマ東京とコミティア116。少し時間の余裕があるので電子書籍に原稿を回してもらわなきゃ、だなあ。

同人誌、商業誌、電子書籍と作品発表の場所というか販路が多岐に渡るので、発行した書籍をまとめてチェックできるサイトを作った。

日野裕太郎の本::駄文の王様

http://hino-yutaro.doncha.net/

宣伝力が弱点の個人作家（…「個人作家」て変な言葉だな）なので、作家名で検索されるようなことも少ないだろうけど、そんな希少で貴重な機会は大切にしたい。

現状はSEOが断然格段圧倒的に強いAmazonの日野裕太郎作品一覧ページが検索結果上位に来る。それはそれでいいんだけど、ウチはAmazonだけで販売してるわけではない。

電子書籍はibooks、kobo、BOOKWALKERでも販売しているし、同人誌はコミケやコミティア、文学フリマなどのイベントで手売りあるいは委託販売している。そちらの情報も掲載したサイトを用意して検索してきた読者のかたにお知らせできるようにしておきたい。

というのが今回サイト制作するにあたっての動機。

わたしの雑記帖に混じってたんじゃ検索にも引っかからないし、URLを新たに作っていろいろと散らばっている情報を集積、掲載することにした。

・手元で作ってあった情報

・Amazonにある書誌情報

・HappyReadingにある同人誌情報

ただ、これらからネタ（掲載情報）をそのまま引っぱってくるだけだと、サテライトサイトみたいなもんでgoogle先生に嫌われる。

オリジナル情報、付加情報が必要。

・日野裕太郎の公式ブログRSS

・エゴサーチしておいたblogやtwitterでのクチコミ

・無料サンプルというか試し読み、立ち読み

このために、ここ2回ほどの雑記帖のネタ。

その1 同人誌情報を取得するために

「創作文芸見本誌会場HappyReadingに書誌情報APIを実装しました」

その2 kindleの無料サンプル（試し読み）を縦書きでページに貼り付けるために

「kindleの小説無料サンプルを縦書きでブログに貼り付け」

となった（商業誌の紙印刷本に関してはアマゾンに無料サンプルがないので諦め）

そしてできた以下のページたち。

商業誌の紙印刷本のページ

『強引執着溺愛ダーリン あきらめの悪い御曹司』

http://hino-yutaro.doncha.net/?asin=4801906095

電子書籍のページ

『夏煉喧騒曲』

http://hino-yutaro.doncha.net/?book=12

『道化の沈む夢』

http://hino-yutaro.doncha.net/?asin=B00MQL0EIE

同人誌のページ

『うそつき、祈祷師になる』

http://hino-yutaro.doncha.net/?happyreading=756

トップページには新刊・既刊情報に同人誌即売会イベント参加情報なども入れてみた。

http://hino-yutaro.doncha.net/

一応、スマホにも対応したけど、サンプルの縦書き表示でスマホのChromeが高さをうまく判定できないようで、スマホの場合はサンプル表示を諦めた。うーん、なんでだろ。

titleタグやaltタグはしっかり入れる、Ajaxは使わないなどそれなりにSEOを考慮。

xmlだのRSSだの、LWPでリクエストだの、なんか久しぶりにサイトを作ったような気がする。

やっぱごそごそとサイトを作るのは面白いなぁ。