ブログの立ち読みサンプルを縦書き段組にする

2016/2/15 [19:21:23] (月)

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編集」の状態で以下を記入する
id="sample-tategumi" data-cols="28" data-lines="20"

赤い部分
<p id="sample-tategumi" data-cols="28" data-lines="20">
のように編集。
・data-colsは一行の字数
・data-linesは一カラムの行数

その5。
以下のコードを立ち読みサンプルの下あたりに貼り付け。
<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-tategumi.js"></script> <script type="text/javascript">sampleTategumi();</script>


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

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


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

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら

一発芸：Kindleサンプル表示セット

2014/4/23 [17:36:34] (水)

KDP用にサンプルチェックをするだけ、というスクリプトを書いたついでに、もう少しそれっぽくサンプルを表示できるようなセットを作ってみたので公開してみます。

https://t2aki.doncha.net/tmp/kindle-sample.html
サンプルと書かれたリンクをクリックするとkindleから公開されているサンプルを取得して、縦書きで表示します（残念ながらFirefoxなどは横書き）例によって一発芸ネタなので投げっぱなしで失礼。

kindleのサンプルを取得するためのCGIファイルと、表示のためのJavascriptとスタイルシート（縦書き）、それとサンプルのHTMLファイルの構成。

やることは以下の３つ。

・cgiファイルを自分のサーバーの実行可能なディレクトリにアップロード
・javascriptとcssを所定のディレクトリにアップロード
・HTMLの各該当部分を編集。

てな感じ。ちょっと面倒くさいです。

表紙画像は自分の作品なら自分で用意しましょう。
実際にAmazonのkindleストアでサンプルをダウンロードして確認してるひとがどのぐらいいるのか不明だけど、少なくともわたしはいきなり買っちゃう。ので、自分のサイトがあるならそこでサンプル表示をして見てもらえるならそれはそれでいいよなあ、ということで思いつき。



中身的には、単純に公開されているサンプルを取ってくるだけで、AWSのOAuth認証なんかも不要だしアフィリエイトタグもいらないので簡単。

公開されているサンプルが使っているタグは（表示に関係してるのは）h1とPタグ程度。
取得した時に全体を「kindle-sample」というクラスをつけたdivで囲んでるので、kindle-sample.cssを適当に書き換えてもらえれば横書きなどもできます。

ソースが汚いのは素人芸だから勘弁してください。


[04/23 17:52:52] 追記。
ちなみに、縦書きなどスタイルのカスタマイズが不要であれば、
ttp://kindleweb.s3.amazonaws.com/content/ASIN/gz_sample.html
このURLのASINの部分を、表示させたいkindleのASINコードにしてインラインフレームでやればそれだけでOKです。

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら

サイトのスマホ・モバイル対応

2014/4/22 [18:30:55] (火)

この雑記帖はスマホ版もあって、アクセスログをみると最近（世間さまのトレンドどおり）スマホ版へのアクセスが増えている。仕事がらみでもスマホ版のリクエストがあったりするだろう、ということで改めて見直し＆調べてみた。

この雑記帖のスマホ版を作ったのは2011年頃だから３年ぐらい前になる。
その頃、スマホ版といえばjQueryMobileというJavascriptのフレームワークを使うのが主流…というかコレはかなりスグレもので、ほとんど何も考えずにデータだけを流せば、ページ遷移などの機能面はもちろん、アイコンや部品などのデザインパーツなども当時流行りのものにしてくれて感謝・感激したものだった。

ところが、今週ちょっと（ほんとうにちょっと、ぐーぐる様小一時間程度）調べたところ、今やモバイル版はHTML5とCSSを駆使したレスポンシブデザインとやらで対応するのが主流。

そこまでのデザインは求めてないけど、どうせサーバー側で出力するデータを制御するわけだし、それに合わせたCSSを作って読み込ませるだけ、というのは魅力的。丸投げできるjQueryMobileに感謝しつつも、ちょっとクセのあるJavascriptの使い方（特にAjaxまわり）は、素人のわたしには難しかった。

てことで、今日は朝からごそごそと午前中をつぶして雑記帖モバイルを作り直した。
USER AGENTで判定して振り分け。モバイル専用のスクリプトへリダイレクトする必要もなく（＝URLが同じ、というのはネットだとポイントが高い）運用できることとなった。

表示系で少しひっかかったのでメモしておくと。

・表示がPC版を縮小しただけに見える
→viewport を device-width に設定すると勝手によろしくやってくれて解決
・イメージがハミ出してレイアウトが乱れる
→ imgに max-width:100% で解決

その他、モバイル用には width をピクセルなどの絶対値指定してあったところを％やemなど相対値で指定するだけでほぼモバイル対応は完了だった。

情報的にはPC版からサイドメニューなど削ったけど、特に問題もなさそう。

jQueryMobileの管理下でうまく動かせなかった（←わたしのスキルが足りなくて）Javascirptも今回のモバイル版ではPC版同様に動かせることとなった。

サンプルの表示
PC版

モバイル版（iPhone4S）

PC版だと横スクロールバーをマウスで動かすのがありえないインターフェイスなんだけど、モバイルだと指をスライドさせるだけで読めるので、これなら全然OKだった。驚いた。うーん、タッチパネルがページをめくる感じにしてくれるんだな。


あ。突っ込まれる前に。
特にリンクはスマホに最適化したものではないので使いにくくてUI的にありえない状態です、はい。

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら

word→textからルビをタグに

2013/8/15 [11:19:37] (木)

WORDのルビに関する小ネタ。

ワード文書を直接読み込んで、電子書籍・EPUB3に変換するソフトもあるみたいだけど、一度プレーンテキストに吐き出しておいた方が何かと使い勝手がいい・使い回しが効く。ただ、ワード文書をプレーンテキストに保存すると、文字装飾やレイアウト情報がすっ飛んでしまう。テキストなので当然といえば当然。

でも、せめてルビは残したいのが人情というもの。

ワードの文書をプレーンテキストに保存すると、
・般若心経(はんにゃしんぎょう)
・超新星(スーパーノヴア)
てな感じ。ルビ対象の文字に続けて半角のカッコの中にルビが入っている。これをEPUB3というかHTMLのタグに変換したい。
<ruby>般若心経<rt>はんにゃしんぎょう</rt></ruby> <ruby>超新星<rt>スーパーノヴア</rt></ruby>

以前、何度かこの手のネタで記事に。
『ルビのため perl unicode正規表現』  2013/2/22
『WORD文書（docx）をテキストに』  2013/5/29

このあたりで書いたことは  『EPUB3::かんたん電子書籍作成』  に実装、組み込み済みなんだけど、ルビなどはどこからどこまでがルビ対象なのか・特殊なルビなど、見ながら決めたい。

・東京都千代田区(ちよだく)三崎町
だったら「千代田区」に対してルビがつくし、
・BOZE(ボウズ)バンズ
だったら「BOZE」に対してルビがつく。

ということで、ワードからテキストで保存した場合にエディタで開いて校正しながら
・東京都|千代田区(ちよだく)三崎町
と、ルビの開始位置に半角の「|」を入れておいて、後で一括置換する正規表現が以下。
検索 \|([^\(]+)\(([^\)]+)\) 置換 <ruby>\1<rt>\2</rt></ruby> 置換前 東京都|千代田区(ちよだく)三崎町 置換後 東京都<ruby>千代田区<rt>ちよだく</rt></ruby>三崎町
MacのCotEditorで確認。
WINDOWSのEmEditor や sakuraエディタでもイケるっぽい。→上記の書式中「＼」を「￥」に置き換える。

といいつつ。ワードのルビ付き文書を、一太郎に読み込ませてルビ情報がそのまま生きていれば、たぶんそれがワードからEPUB3への一番簡単な方法だと思う

[08/15 14:51:11] 追記。
元ネタ、というか発端はこちら

[08/15 18:03:46] 追記。
https://hirakun.blog57.fc2.com/blog-entry-214.html
↑こちらはルビにタグをつけるワードのマクロを作成・公開されてます。
マクロがわかればこっちのが便利だ。感謝！

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら

CSSとperlの小ネタめも

2013/5/8 [11:22:31] (水)

電子書籍がらみ。HTMLとCSSでどうやって表示・表現すればいいんだろうと調べたことをメモしておこう。

【横書き】

1M（１メガバイトは）は、２の20乗バイト（220 = 1048576バイト）です。

この文字の右肩に小さくついてる「20」ってどうすんだ、画像にしてくれなきゃ無理だろ、と思わず担当者にメールしようとして思いとどまった。調べた。

右肩に小さくつけたい文字をspanタグで囲み、spanタグにスタイル指定
font-size:0.6em padding-bottom:0em vertical-align:top
フォントサイズを小さくして、下側のpaddingを０にして、表示の基準ラインをトップにする
(padding-bottom は指定しなくて大丈夫っぽいけど…どうして指定してあったんだろう)


【縦書き】

縦中横をperlで一括処理する。

単純に、すべての半角アルファベットに縦中横のタグをつけるのは簡単な正規表現。
このあたりに →  『ルビのため perl unicode正規表現』

縦書きなのにやたら英単語が混じると、単語の長さによって縦中横になったりならなかったり、とても読みにくい。ということで、アルファベットの縦中横について

・アルファベット一文字は縦中横にする
・英単語は縦中横にしない

英単語をとりあえず別形式にエンコードして保護しておく。
「tab+アルファベットの10進数」
タブだったら原稿に混じり込む可能性は少ない。タブ＋数字というのはまず出てこないだろう。
$line =~ s!([a-zA-Z][a-zA-Z]+)!&encode_alpha_words($1)!eg; sub encode_alpha_words{ my $args = shift; my $ret; foreach (split(//, $args)){ $ret .= sprintf qq{\t%s}, ord($_); } return $ret; }
一文字のアルファベットに縦中横を定義したクラスを指定。
$line =~ s!([a-zA-Z])!<span class="tcy">$1</span>!g;
タブ＋10進数にしておいたアルファベットの英単語を元に戻す
$line = &decode_alpha_words($line); sub decode_alpha_words{ my $args = shift; $args =~ s/\t([0-9]+)/pack("C",$1)/eg; return $args; }
（上記、正規表現のところをいじれば、アルファベット２文字までは縦中横にする、３文字以上の単語はそのままにする、なんてことも出来る。でも、中途半端な設定は読みにくくなるだけ）

ていうか、そもそも、アルファベットの英単語や数字が入り乱れる「実用書」なんて縦書きである必要は感じない。底本が縦書きであっても、電書にする時には横書きで十分。縦書きの底本は全角半角アルファベットがその時々で別々。正直とても読みにくい。小説でもないのになんでまた縦書きにしたんだろう。謎だ。

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら

web小ネタ：コピー禁止など

2013/3/20 [10:09:04] (水)

kindleやibooksの新刊・既刊情報を掲載、表紙画像をそれなりの大きさで表示しようと思った時に、まんまimgタグで表示させるのはちょっと無造作すぎるなあ、と。自分で描いたイラストならともかく、お願いしたりいただいたりしたイラストだ。

そこで「画像コピー禁止」を検索して見つけた下記の方法で細工。

・画像の上で右クリック禁止伝統技
「onContextMenu="return false"」

・画像を簡単にドラッグ＆ドロップできないように。
　表示する画像はcssで背景に指定して、表側のimgタグには透過gifを表示。
HTML <img src="space.gif" width="640" height="480" alt="表紙画像" style="background-image:url(https://hyoushi.jpg);" class="image" /> CSS .image{ background-repeat:no-repeat; background-position:center center; }
この方法を見つけたときは、よく思いつくなあ、なるほどなぁと呆れつつ感心。webなんて表示しているものはどうやったって取得されちゃうんでこの方法もその場しのぎ（例えばhttpでソースを取得しちゃえば画像ファイルのありかはわかる）

また、コピーされたくないテキストは以前に書いた 「個人情報をちょっと防衛」 のように。
・コンテキストメニューで右クリックは禁止
・ajaxを使って呼び出されるスクリプトでリファラなどをチェックして表示するorしないを制御
・表示してもjQueryで 「.bind("copy", function () { return false})」コピー禁止
にしておく。
マウスの右クリックもできず、キーボードショートカットでのコピーもできない状態になる。
右クリックできるように、とJavascriptを切ると当然ながらAjaxが効かないので、表示すらしない。

WEBは性善説を根拠にフリーであるべき（お金・対価がタダという意味ではない）と思うんだけど、残念ながらなかなかそうもいかないようで、ちょっとだけ。

ついでに。

ここんとこ雑記帖が重い＝表示が遅いのでイラっとしていた。ここで何度も言うけど「WEBは早さが唯一の絶対正義」そんな状態なのに、各記事にカテゴリをつけるため、データベースにカテゴリ用テーブル、カテゴリと記事のリレーション用テーブルを追加。そりゃまた当然遅くなる。

SQLを改めて見てみたらば、indexをつけてたと思ってたテーブルの（いろんなSQL文の where句で最もよく使う）カラムにindexがついてないのに気づいて慌ててつけた。
結果、それまで体感で表示まで５〜７秒かかっていたのが３〜５秒に短縮された。
それでも遅いんだけど。これ以上の短縮はキャッシュで中間コードを保存するとか、静的ページを生成するとかになる。スクリプトの書き換えや運用も含めて考えなきゃいけないかな。
もしくはajaxのコンテナだらけにする…って、ajaxにすると検索エンジンが拾えないので却下だ。


サイトの細工やチューニングは、考え出すと・やりだすと面白いもんです。

[03/20 18:27:21] 追記。ということで、一部のパーツ単位で生成しておいて、DBからデータを取るのではなく、静的パーツを呼び出すだけにした。ほんの少し早くなった、ような気がする。


[2013/12/30 09:54:31] 追記。
直リンク禁止の定番も。
.htaccessで制御する（Apache）
SetEnvIf Referer "^http//example.com" is_ok order deny,allow deny from all allow from env=is_ok
.htaccess を置いたディレクトリ以下に適用される
・リファラをチェックして、自サイトからのアクセスなら 「is_ok」を設定。
・この指定の優先順位は、１）拒否 ２）許可。
・すべてのアクセスを拒否する
・is_ok が環境変数に設定されていれば許可する


[2014/01/13 12:38:03]追記。
.htaccess でキャッシュコントロール
<FilesMatch ".(css|js|png|jpe?g|gif)$"> Header set Cache-Control "max-age=604800" </FilesMatch> <FilesMatch ".(pl|cgi|php)$"> Header unset Cache-Control </FilesMatch>
・cssやJavascript、画像などは1週間キャッシュする
・perlやphpはキャッシュしない

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら