【改良版】kindleの小説無料サンプルを縦書きでブログに貼り付け

2016/2/5 [15:15:47] (金)

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

現状のCSS3のマルチカラムは縦書きがまともじゃない。
カラムの高さが取得できなくて2段目以降がオーバーフローしてしまうことがある。親要素に高さが伝わらないので、たとえばページの最下部にありがちなフッターを乗り越えて表示したりしてしまうのだ。
またそのせいか、一段の高さと表示段数の計算がわけわかめ状態。CSSで指定した高さになっていなかったりしてうまくコントロールできない。ブラウザごとで解釈がバラバラ。

つまり、現状のCSS3のマルチカラムを使って縦書きにすると。
ページのレイアウトデザインが意図どおりコントロールできない。ブラウザが違うと一段の字数・行数が違ってくる。ということになる。

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

でも、いったいいつになるのか、初老フリーターに残された時間は短い。
てことで、段組表示用に、字数x行数でテキストを区切ってひと塊ずつdiv要素でくるんだものを返すようにした。

CSS3のマルチカラムで起こっていた問題はこれで解決（禁足なんかの判定がバギーだけど…）
意図通りに縦書きで段組されて（＝マルチカラムで）表示されるようになった。

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

でもこれは、CSSのマルチカラムではないので、レスポンシブというか画面の幅に合わせて柔軟に広がったりしない。N字xN行の塊が表示されるだけ。
今どきはスマホファーストでもあるので、それだとなんかアレな感じ。その場しのぎというかスマホでのアクセスの場合、表示する行数をPCの半分にするようにした。

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

iPhone4S

https://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="https://sandbox.doncha.net/sample-kindle.cgi"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script type="text/javascript" src="https://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はクリックのコスト・ハードルがかなり高い。
サンプルをさらっと読んでもらいたいと思っても、クリックしなきゃ読めないのはツライものがある。前にも書いたけど、楽天のフンドシのような長いページはそれなりの意図意味がある。

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

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