ブログの立ち読みサンプルを縦書き段組にする
Kindleの無料サンプルを縦書き段組にして表示するというのをやってみて、ついでに、「はてな」などのブログ記事掲載のサンプルを縦書き段組にしてみた。
CSS3のマルチカラムは縦書きの段組には(現状)使えないので、段組の一カラムずつの塊を返す（レイアウトデザインを崩さずコントロールするためにはこの方法しかなさそうだ）
百聞は一見に如かず。
「はてな」
https://t2akii.hatenablog.com/entry/2016/02/15/182240
「HTML直書きのサンプルページ」
https://sandbox.doncha.net/sample-tategumi.html
「はてな」を例にしてみると。
その1。
ブログ記事を「編集 見たまま」で作成する。
その2。
表示させたい立ち読みサンプルを、テキストエディタ(sakuraやxyzzy、秀丸、miやcoteditorなどなど)で開いて、コピー。
その3。
「編集 見たまま」で、立ち読みサンプルをペーストする。
そうしたら「HTML編集」に切り替える。
赤い部分がコピペした立ち読みサンプル部分。
その4。
このコピペした立ち読みサンプルの冒頭の「＜p＞ 神さまに会いに行く」の「＜ｐ＞」の部分に「HTML編集」の状態で以下を記入する
赤い部分
<p id="sample-tategumi" data-cols="28" data-lines="20">
のように編集。
・data-colsは一行の字数
・data-linesは一カラムの行数
その5。
以下のコードを立ち読みサンプルの下あたりに貼り付け。
HTMLに書きこまれたテキストを縦書きにするだけなので、立ち読みテキストがグーグルさまなどの検索エンジンにちゃんと拾われるのもお得な感じになった、かも。
HTML的なことをいうと。
idがsample-tategumiの要素の中のテキストを縦書き段組にするので、pタグだけじゃなくてdivタグなんかでもOK。
…にしても、wordpressもはてなも、CMSってのは余計なお世話が多いなあ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
【改良版】kindleの小説無料サンプルを縦書きでブログに貼り付け
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 は削除）
以下のコードを、縦書きでサンプルを表示させたいところに貼り付け。
1行目。
・「ASIN」の部分にサンプルを表示させたい本のASINコードを記入。
・「data-cols」が一行の字数。デフォルト28字
・「data-lines」が一段の行数。デフォルト20行
※「はてな」や「fc2」などのブログサービスでは「HTML編集」で上記のコードを貼り付ける。
現状、電子書籍をブラウザで読む・体験するのには 「BiB/i」 が最適最強。
ただ、WEBはクリックのコスト・ハードルがかなり高い。
サンプルをさらっと読んでもらいたいと思っても、クリックしなきゃ読めないのはツライものがある。前にも書いたけど、楽天のフンドシのような長いページはそれなりの意図意味がある。
ページに着地したら余計なアクション不要でサンプルが目の前に表示されている状態にしたい。
ということでごそごそいじってみた。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
kindleの小説無料サンプルを縦書きでブログに貼り付け
kindleは無料サンプル、試し読みが提供されている。
ttp://kindleweb.s3.amazonaws.com/content/ASIN/gz_sample.html
この「ASIN」の部分をamazonの商品ID、ASINにしてアクセスすると無料サンプルが読める。権利的な問題からかサンプルが用意されていない本もあるけど、KDPの個人出版の場合はおそらく確実に無料サンプルが用意されている。
これを縦書きにしてブログなんかに貼り付けられるようにしてみた。
以前、同じようなことを試して書いた、その改良版(ていうか、やっとfirefoxが縦書きに対応したのでこの手のネタは注釈なしでイケるのがありがたい)
百聞は一見に如かずとか論より証拠とか。
https://sandbox.doncha.net/sample-kindle.html
↑ページはこんな感じ。
「はてな」でも検証確認
以下のコードをHTMLやブログ記事にコピー＆ペーストすると、そこに無料サンプルを縦書きで表示します。
※「はてな」や「fc2」などのブログの場合は「HTML編集」でペーストしてください。
1行目
・data-asin
ここにASIN、kindleの商品コードを記入
・data-column
一段落の高さ(emでの指定になります) デフォルトは20
・data-font-size
フォントのサイズ(%での指定になります) デフォルトは100
data-columnとdata-font-sizeを調整するとそれっぽくページにおさまります。
KDPを利用して自分の作品を公開しているひとにとっては(サンプルなら自分でテキストを持っているので)ほとんど役に立たないシロモノですが、ブログに貼り付ける手間をほんの少しラクチンに。
2016/2/5 [15:15:47]
現状では、このCSS3マルチカラムを使った縦書きの段組が使い物にならないことが判明。
CSS3のマルチカラムを使わないで、縦書き段組を実現する方法についてはこちら
【改良版】kindleの小説無料サンプルを縦書きでブログに貼り付け
https://t2aki.doncha.net/?id=1454652947
縦書きをシンプルに実現するのはまだ難しい。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
創作文芸見本誌会場HappyReadingに書誌情報APIを実装しました
APIといえるかどうかはともかく。
創作文芸同人誌のプレビュー・立ち読みサイトのHappyReadingの作品ページに掲載されている書誌情報をXMLで提供するようにしました。
『創作文芸見本誌会場HappyReading』https://books.doncha.net/happy-reading/
今さらですが、HappyReadingはけっこうな量の入力項目があります。
にも関わらず登録いただいてるので、入力された情報をHappyReading以外（たとえばサークルや個人のサイト）で使えれば、読者さんへの告知の幅も手軽に広げることができるのではないかということでXML。
平たく言っちゃうと、自分のサイトやブログでも紹介したいのにまた同じことを書くのは面倒くさい！ということでXMLでの情報取得のAPIもどきをでっち上げました。
XMLで提供する登録情報は以下
・HappyReadingのページURL
・登録したアカウントID
・本のID
・タイトル
・発売日
・ページ数
・判型
・印刷形式
・頒布価格
・キャッチ
・著者(イラストレーター、編集者、デザイナーなど)
・サークル名
・サイト
・サイトURL
・アマゾンのASIN
・カテゴリ
です。
※表紙画像や立ち読みの情報は提供していません。
https://books.doncha.net/xml.pl?bookid=839
↑このURLにbookidを指定してアクセスすると書誌情報のXMLを返します
(Firefoxなどでアクセスしてもらえるとどんなものか見えます)
https://books.doncha.net/happy-reading/detail.pl?uid=14879977&bookid=839
↑bookidというのはHappyReadingの作品個別ページのURLのbookidのことです。
このXMLを取得してページに合わせて加工することになります。
https://books.doncha.net/happy-reading/detail.pl?uid=14879977&bookid=566
このHappyReadingのページのXMLをperlで取得、アレンジして表示したのが以下です。
https://hino-yutaro.doncha.net/?happyreading=566
※表紙画像と立ち読みは別途用意してます。
phpやperlを使って取得＆加工するのが手っ取り早いですが、javascriptが使えればHappyReadingのXMLを取得できます。
はてなやFC2といったブログの場合は「HTML編集」などにしてページの好きな場所に以下のコードをコピー&ペーストすればXMLを取得してページに表示します。
先頭の「data-book="XXX"」の部分にHappyReadingのbookidを記入。
「はてなブログ」で確認。
・「編集 見たまま」でアップロードした画像を貼り付けたり、記事を作ります。
・「HTML編集」でHappyReadingの登録情報を掲載したい部分に上記のコードを(bookidを記入して)貼り付けます。
・「プレビュー」
素気ないリストでの表示なので、スタイルシートでデザインします。
・id が #happy-reading のリスト(ul)となっていて。
liに「title」「creator」「size」「printing」「pages」「price」「published」「category」「catch」「circle-name」「site-url」「amazon」「to-happy-reading」というクラスをつけてます。
表示or非表示や文字サイズ、色などをCSSでカスタマイズできます。
(わたしはデザイン力がないのでテンプレートを作る気力が…)
ハマったところがあったんでメモ。
Javascript、ajaxで別ドメインにあるXMLを取得するためにはjQuery側とサーバー側で設定が必要だった。
・jQueryのajaxのパラメータ「crossDomain」を true にする。
・サーバー側(今回の場合xml.pl)スクリプトのHTTPヘッダに
「Access-Control-Allow-Origin:*」
「Access-Control-Allow-Headers:Origin, X-Requested-With, Cotent-Type, Accept」
の2行が必要だった。
（スクリプトに付加したヘッダはなにやらセキュリティ的に不穏な感じなので、formデータのチェックを厳密にしておいた）
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
CotEditorからjavascript(JXA)経由でperlへ
CotoEditorで昨日書いたapplescriptと同じことをするjavascript(JXA)を書いたのでメモ。
YosemiteからはOS標準でJavaScript for Automation (JXA)が使えるようになった。
歴史的な流れとしては、HyperCardのHyperTalkからapplescriptへ、applescriptからjavascriptへということらしい。これらは乱暴に理解すると、unixでのシェルスクリプトやWINDOWSのバッチファイルみたいなもの、か。いや、macのことはよく知らない。
こちら、 『JavaScript for Automation (JXA)』鳶嶋工房 がとても参考になった。
これからはjavascriptだというし、初めてでよくわからなかったapplescriptよりは多少いじったこともあるjavascriptの方がたぶん早いだろうと、昨日applescirptで書いたばかりだけど、javascriptで書き直した。
ここんとこいじってるスクリプト、マクロはxyzzyもCotEditorのスクリプトも身も蓋もない言いかたをすると「シェルに渡すためのコマンドライン文字列を生成するだけ」のもの。
実際の作業はperlのスクリプトが担当なのでマクロやスクリプトでは難しいことは何もしていない。
javascirpt(JXA)版スクリプト
CotEditorのスクリプトとして使うには
・ファイル名(拡張子)「.js」
・ファイルの一行め「#!/usr/bin/osascript -l JavaScript」
この2点が必要。
HOMEディレクトリ(のpath)を取得するのに、わざわざstdlib使うのって大袈裟な感じやな、とか思ったりしつつ、アプリをいじるための呪文
var app = Application("CotEditor");
app.includeStandardAdditions = true;
を入れてプロパティを調べるぐらいで、後はほんとJavascript。
わたしの慣れの問題で当たり前の話、applescriptよりJavascirptの方が格段にわかりやすい。わからないところ・書き方などはJXAというかJavascirptで検索すれば情報豊富で解決も早い。
今回、macの「スクリプトエディタ.app」が手軽・便利で大助かりだった。変数に何が入ってるのかを見られたり、エラーチェックできて、こんなアプリがあったとはちょっとした発見＆驚き(今さら感)
ただ、残念なことに、このJavascript版はosascriptで使うと
warning: failed to get scripting definition from /usr/bin/osascript; it may not be scriptable.
という警告が毎回出てしまう。いちいちコンソールが出て警告されるのは鬱陶しいけどしかたがないらしい。
こちらが参考になった→ 『JXAの「Error: A privilege violation occurred」の回避』
せっかくだけど、昨日のapplescriptはお蔵入り・塩漬けだなあ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
縦書き横スクロール
電子書籍のサンプル表示を縦書きで表示させた時に横スクロールとなる。これをせめてページ送りっぽく移動するようにしたのでjQueryというかjavascriptの今さらメモ。
細工なしの横スクロールは、マウスでスクロールバーを摘まんでスクロールさせるんだけど、ふにゃふにゃと今どこを読んでいるのかわかりにくいし、使いにくいだけでありえないUI。まいったなあ、と思ってあちこち見て回って検索。
あちこちに実例があった。
そりゃそうだよなあ。横スクロールの使いにくさは大昔から感じてたことで、ならば先人がすでに解決済みのはず。サイトまわってソースを表示させてjavascriptやcssを覗いて、jQueryのページを見てウチも（やっと）解決。感謝。
クリックで一画面ずつ横スクロールさせてページ送りっぽくなった。こっちの方が断然わかりやすくて使いやすい。
（以下は都合でidの「＃」を漢字表記。ほんとはシャープ記号）
・表示しているコンテナの幅を取得
・コンテナの中でクリックされたX位置を取得
・コンテナの半分の長さを取得
・サンプルの横幅を取得
・右半分で押された戻る
・左半分で押されたら進む
↓たとえばサンプルが本編の50〜60%と長いものもページ送りならストレスは少ない
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
