ひまつぶし雑記帖

一発芸:縦書き段組レイアウトのためにテキストを分割

2015/9/26 [15:38:08] (土) 天気

Firefox41がようやく縦書きに対応したのでこれからは遠慮なく縦書きを使える、すばらしい、というネタの続き。
WEBブラウザでの縦書き表示のあるべき姿について。いや、横書きでいいというひとにとっては意味のないネタ。


縦書きの場合、テキストをそのままブロック要素に流し込むとスクロールとなる。
image
これはありえない。
・文字が切れるのをコントロールできない。
・ページは縦にスクロールして見てるのに、なんでここだけ横スクロール。

ということで、前回も書いたように、縦書きでは段組でレイアウトされるのが正しい。
image
(※どうやら今日時点、Firefoxは縦中横が効かないので「!?」がひっくり返っているけど、ChromeやSafari、IEは問題なし)

で、これがちょっと面倒くさい。
1段落に入る字数と行数によって、どこで次の段落に移動するのかを確認する必要がある。これはやっぱ面倒くさい。
スクリーンショットでいうと「家屋が」で段落が終了して、次の段落が「かしぐ」から始まるというのを判断して段落を分けなきゃいけない。

なもんで、字数行数改行をチェックして文字数を数えて段落単位でテキストを分割するスクリプトを書いた。

[10/02 11:22:44]追記
CSS3のmulti columnを使えばそのまま文字通り段組が実現できる。N字xN行ではなくて、画面幅やテキスト量で柔軟に表示してくれるので、webは本来このCSS3のマルチカラムを使うべき。
版面というかN字xN行のレイアウト表示で見せたい場合にこのスクリプトの出番(css3の完全リフローとは少し違って、N字xN行の箱に入る分のテキストの塊を作るイメージ)


ルビや縦中横に関しては、テキストにHTMLでタグづけされてれば生かす。
でも、わたしは素人のヘタレなので制約はあって。文字数を数えるために。
縦中横の指定のない半角の数字と、半角のアルファベットや記号類は全角に変換。
また、なんちゃって禁則でバグくさいところがある。


http://t2aki.doncha.net/tmp/dangumi-sample.pl
(例によってここは直リンクできないのでこちらからどうぞ)
↑ここでテキストや字詰め行数を入力すると、縦書き段組表示用に分割されたテキスト(縦書き用のスタイルシート付き)のHTMLが手に入ります。

テキトーにテキストを放り込んで試してみてください(わたしはこれで表示の調整をしてました)

縦(字詰め)、横(行数)を確認して縦書きサンプルとして、ブログなどにコピペしてご利用いただければ。

『創作文芸見本誌会場HappyReading』 に登録した立ち読み用のテキストなど、ご自分のサイト、ブログで縦書き表示して読者さんに希求できると思います。
(※HTMLが編集登録できるブログ限定でしょうか)

小説は縦で読んでもらおうず!

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

サンプルの縦書き段組表示

2015/9/23 [10:01:31] (水) 天気

やっとFirefoxが縦書きに対応したことで、すべてのブラウザで縦書きでの表示ができるようなった。
今までは、「サンプルを読む」みたいなリンクをクリックすると、Firefoxの場合は横書き、それ以外のブラウザは縦書きのポップアップウィンドウを表示させていた。苦肉の策。
今後はブラウザ判定して分岐させる必要がなくなったので、以前やってたようにページに縦書き段組のサンプルをajaxで埋め込む方法に変更した。
(とはいえ、新しいバージョンが出たからといってみんなすぐにインストールするとも思えないので、しばらくは必要だと思うけど)

ajaxにしたのは。
サンプルはそれなりに多いんで、ページ表示がひょっとして遅くなっちゃいけないと思ったから。
サンプル以外の表紙やキャッチなんかのいわゆる書誌情報は、とっとと表示してもらいたいということ。WEBで唯一断言できるのが「速さは正義」だ。表示にもたもたしてたらそれだけでそのページは終了だ。
ajaxならまずページは先に表示されるので、体感的なページ表示速度に影響しない。

縦書きのポップアップを使わなかったのは。
クリックはコストが高いから。
以前にも書いたかもしれないけど、オンデマンドの動画配信サイトで仕事をしていた頃に何度も(毎日)計測していた。ほとんどのユーザーはランディングページ→離脱。
いや、楽天のチラシのようなフンドシのような長いページをダセエーと思ってるけど、あれは正しい。
ユーザーのクリック誘導がいかに大変かという結果。理由もなくあんなクソみたいなページ構成にしてるわけじゃない、てことだと思う。

また、WEBページで、ページを縦にスクロールしていって、サンプルの縦書きのコンテンツだけ横にスクロールというのは違和感がある、目線の動きとUI的にありえない。
縦書きの文章は段組されて、目線の流れ的に、右上から左に読んで行って、左下端にきたら、下の段の右上端から読むものだ。

てことで(表示速度のリスクとクリックコストと縦横混在混乱を検討して)、縦書き段組を復活させた。
(のはいいけど、Safari、ChromeはともかくIE(ver.10)がまたCSSの解釈が微妙に違ってるぽいなあ)

もちろん不満点はあって。

とにかくWindowsはフォントが汚いんでビックリ。
ディスプレイの設定でマシになるとのことだけど、そんなことを来訪するユーザーに強要するわけにはいかない(昭和のホームページでは「画面1024px以上推奨」とか「フォントサイズ12px推奨」とかあったけど)

ダッシュが繋ってくれない。
これは電子書籍でも苦労してるところだからしょうがないか。

ただ、WEBというかブラウザにあまり多くを求めてもしょうがないんで、現状はこれでOK。
電子書籍を読むなら、それに特化した専用端末か専用アプリを利用するし。


この雑記帖を「縦書き」で検索するとどっさりヒット。2009年とか2004年ぐらいから待望の縦書き実現、というやつ。
やっと、Firefoxありがとう、だ。

image

日野裕太郎の作品紹介ページでサンプルが読めるのでゼヒゼヒ!!
↓このへんからどうぞ
http://t2aki.doncha.net/?id=1362724515

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

Android標準ブラウザでダウンロードできない現象

2014/12/20 [13:32:37] (土) 天気

Android標準(?)のブラウザでPDFやzip、epubファイルのダウンロードができなくて吐血。

PCのブラウザやiphone(iOS)、AndroidでもChrome、Firefoxなどのブラウザだと意図通り問題なくダウンロードできるのに、Android標準(?)のブラウザだとダウンロードできない。というか、なぜか、ページのHTMLをダウンロードしてしまう。

謎な挙動のスマホ標準ブラウザに対応する必要があるのかという、そもそものところはまた別として。
調べてみたら、検索のしかたが悪いのか情報が錯綜していて正解が見えてこない。

スクリプトが吐くヘッダは定型。

このヘッダに続いて、epubファイルが標準出力に吐き出される。ほかのいろんなスクリプトで使っているやりかたで、Androidスマホ以外では問題なく意図通りダウンロードできている。

老眼血眼、しこたま検索しまくって、こちらのサイト
「コンピュータの日々 Android付属ブラウザのファイルダウンロードの動作」

AndroidのブラウザがPOSTメソッドでサーバにリクエストして、サーバからContent-Disposition:attachmentなヘッダを受け取ると、再びGETメソッドで同じURLにリクエストを送信するとのことです。


へ? と思ってアクセスログを見るとAndroidスマホのブラウザ(docomoのスマホ L-05E 、mobile safari)は、確かにPOSTでアクセスしてきた後、なぜかGETでアクセスしている。

ページのHTMLを取得してるので、最初はブラウザのキャッシュを疑ったんだけど、どうやら真相はこいつ。attachmentで渡してるはずのepubファイルではなくて、次のGETでページのHTMLをダウンロードしているご様子だ。

なんでやねん。


以上は、とりあえずのメモ。
これじゃ、スクリプトで吐き出させたんじゃダウンロードしてくれない、ということになる。
ダウンロードしてもらう方法としては、一度サーバーにファイルを書き出して、静的リンクをクリックしてもらうしかない…うーん、ほんまかいな。

スクリプトで直接ダウンロードする方法をもうちょっと調べてみる。たぶん、わたしのスキル不足だと思う(詠み人知らず)
image 

[12/20 21:30:21] 追記。
現状、スマホ標準のブラウザは .epub ファイルにリンクしても、ブラウザが  epub ファイルを開いて表示しやがる。
バイナリを文字化けした文字にしてブラウザにダアアアアッと表示する。なんじゃそりゃ状態。

なもんで、.htaccess で(httpd.confでもいいけど) MIME TYPE を指示(指定)してやる必要がある(epubという拡張子のファイルにアクセスされたらどうするのかの設定)
addType application/octet-stream .epub

…て、epub自体が最近なので、Android標準ブラウザに適切な対応を求めるのは可哀想、というか無理かもしれん。もう意味不明なブラウザを使うのではなくて、Firefoxなり、PCでも使われるブラウザとその挙動を標準にすべきだろう。


[2016/01/03 10:47:38] 追記。
どうやら現状のAndroidの「ダウンロード」(ダウンローダー)はSSLのページや認証が必要なページからはダウンロードできない困った仕様っぽい。

・ブラウザで閲覧→PDFやzipをタップ→ダウンローダーが起動してzipやPDFをダウンロード
という流れだとダウンロードできない。

・ブラウザで閲覧→PDFやzipをタップ→ブラウザがPDFやzipをダウンロード
だとダウンロードができる。Firefoxなどだとダウンロードができる、ということ。


スマホって、なんでまた「ダウンローダー」なんてのを噛ませることになったんだろう。

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

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

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

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

この雑記帖のスマホ版を作ったのは2011年頃だから3年ぐらい前になる。
その頃、スマホ版といえば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版
image
モバイル版(iPhone4S)
image
PC版だと横スクロールバーをマウスで動かすのがありえないインターフェイスなんだけど、モバイルだと指をスライドさせるだけで読めるので、これなら全然OKだった。驚いた。うーん、タッチパネルがページをめくる感じにしてくれるんだな。


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

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

webkitが分裂するのか

2013/4/22 [17:42:15] (月) 天気

Appleとgoogleが中心となって開発、採用してきたレンダリングエンジンのwebkit。今度googleがそのwebkit陣営から分かれて独自のBlinkというレンダリングエンジンの開発、採用するというニュースにびっくり、というかげんなりというか。

この結果、webkitは少数派に転落。今後はBlinkがシェアを握る、とか。
http://ascii.jp/elem/000/000/778/778554/

今まで、WEBサイトを作っていて、表示や動作をチェックするのは
・webkit → chrome safari
・gekko → firefox
・trident → IE
の3つだった(って、IEはもうほとんどノーチェック)のが今後はBlinkが増えて4つでチェックすることになる。

動画配信のECサイトのに在籍していた頃の悪夢が再びみたび。当時はアクセスログからもユーザーの8割はIE。

IEをターゲットに作ってWEB標準に合わせる vs WEB標準で作ってIEを別扱いにする 

どっちにするか議論した結果、開発時点ではWEB標準の firefoxとchromeをターゲットに作って、IE用に別スタイルシート、ということでやっていた。そちらの方があちこちにノウハウもあって断然効率的だった。

同じソースを表示させてなんでこんなに違うんだ、と。IEの素行の悪さに殺意さえ覚えつつ。

webkitもBlinkも、FireFoxのGekkoに代わる?新しいServoも、WEB標準だろうからそんなに酷い違いは出ないと思いたい。

電子書籍もまったく同じ。アプリやデバイス、リーディングシステムで見た目が変わるのは勘弁してくれ。

「いつどこでだれが見ても同じものを」というのは紙媒体にはかなわない。
ユーザーに優しいかどうかは別の話になるけどね

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

スマホ対応、IE8対応

2012/5/29 [17:43:43] (火) 天気

この雑記帖。こないだは、IEはもう止め止め、ここはHTML5の実験にする、とか言ったんだけど、現実的にはIE8はまだまだ全然主流で、どこかの記事では、日本でのシェアは60%程度で、圧勝。ここのような辺境のブログのアクセスログを見ても、IE8は無視できないのでありました。
てことで、検索してみたら、ぞろぞろ出てくる、HTML5のIE8対策。WEB制作会社などは死活問題。クライアントとか、声のでかいだけの上層部に振り回されて、現場は阿鼻叫喚吐血の図、というのが想像に難くない。心中・胸中お察しします。
とりあえず、ここも対応できるなら対応するに越したことないよね、ということで。
html5で書いたサイトをie8にも対応させる。

スタイルシートで新要素をブロック要素にする。

グーグルのjavascriptを読み込ませる
http://html5shiv.googlecode.com/svn/trunk/html5.js
こいつは、html5以降の新要素をcreateして認識させる…て、よくわからんので、使い方としては呪文でよろしい。

さらにhtml5とは違うけど css3で追加された角丸などを ie8 に適用するのに
https://github.com/lojjic/PIE/downloads
PIE.htc というのをダウンロードして、サーバーのどこか適当なところに置く(わたしは css と同じ場所に)
そしたら、角丸を使っているところすべてにいちいち

を書いていく。PIE.htcのurlは呼びだされるページからの相対パスか、絶対パス。

以上で、html5とcss3をie8に対応させることができた、かな。

スマホ対応も探してみた。
http://dev.screw-axis.com/doc/jquery_mobile/

いや、いまどき、スマホのリクエストが多いので、ちょっと勉強も兼ねて、というスケベ心満載。
jquery.mobileというフレームワーク(?)を使えばあっさりさっくり。これ、ほとんどブロック。昔懐かしの電子ブロックのようなもの。用意されている部品をマニュアル通りに書いていけば、PC版のサイトをあっさり短時間でモバイル、スマホ対応にできてしまう。

スマホに搭載されるブラウザに対応イコールwebkit対応なので、なにもこのフレームワークを利用しなくても、HTMLとCSSを書けばいいんだけど、このフレームワークは、いわゆるスマホのお作法・流儀・デザイン・エフェクト・UIを提供してくれてる。専用アプリ同様の風味なのだ。
ここ、すごく大事なところだと思っていて。
PCとスマホなどのモバイルとでは、見ることになる情報が同じでも、ユーザーの距離感が違う。肌感覚とかいうと胡散臭いけど、対デバイスの距離というか。
なので、PC版をそのまま持ってきても違和感がつきまとう。弱ったなあ、と思ってたところにこのフレームワーク。
今日、それこそ2時間ほど眺めてただけで、とりあえずこの雑記帖のスマホ版をでっち上げることができた。細かいところはまだこれからいじるとしても、2時間程度で移植できたということが、このフレームワークの凄さだなあ。
文字数の制限なんか動的にプログラムでごそごそやってたのを面倒みてくれるし、1pxの影なんてcssでうんざりしてたのを面倒みてくれるし、プログラム的なところもデザイン的なところも両方ともフォローしてくれてる。
いやもう、今日、絶賛。

 

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

profile

profile

 
doncha.net
名前:
飯田哲章
mail:
t2aki@mrh.biglobe.ne.jp
twitter:
t2akii

WEBサービス制作/電子書籍制作

検索
<<2017/11>>
   1234
567891011
12131415161718
19202122232425
2627282930

リンク

WINDOWS版サウンドノベル
おかえりください PC WINDOWS版サウンドノベル
『おかえりください』体験版

iPhone電子書籍アプリ
小説同人誌Select iPhone電子書籍アプリ
『小説同人誌Select』

[3 Page] »
1 2 3

TOTAL:2835

2017 (27)
1 (2)
2 (1)
4 (2)
5 (1)
6 (6)
7 (3)
8 (5)
9 (3)
10 (2)
11 (2)
2016 (41)
1 (5)
2 (5)
3 (2)
4 (3)
5 (4)
6 (6)
7 (2)
8 (2)
9 (3)
10 (1)
11 (4)
12 (4)
2015 (99)
1 (11)
2 (12)
3 (9)
4 (6)
5 (8)
6 (8)
7 (3)
8 (5)
9 (16)
10 (6)
11 (1)
12 (14)
2014 (112)
1 (16)
2 (5)
3 (6)
4 (12)
5 (16)
6 (19)
7 (9)
8 (6)
9 (4)
10 (8)
11 (6)
12 (5)
2013 (145)
1 (24)
2 (15)
3 (18)
4 (23)
5 (14)
6 (11)
7 (7)
8 (11)
9 (5)
10 (4)
11 (6)
12 (7)
2012 (103)
1 (1)
2 (1)
3 (4)
4 (3)
5 (7)
6 (26)
7 (17)
8 (5)
9 (8)
10 (10)
11 (11)
12 (10)
2011 (54)
1 (4)
3 (7)
4 (4)
5 (14)
6 (6)
7 (3)
8 (3)
9 (1)
10 (4)
11 (2)
12 (6)
2010 (70)
1 (12)
2 (7)
3 (6)
4 (6)
5 (3)
6 (10)
7 (6)
8 (4)
9 (3)
10 (4)
11 (3)
12 (6)
2009 (144)
1 (15)
2 (12)
3 (12)
4 (6)
5 (15)
6 (6)
7 (10)
8 (9)
9 (17)
10 (12)
11 (14)
12 (16)
2008 (148)
1 (10)
2 (6)
3 (10)
4 (11)
5 (13)
6 (10)
7 (13)
8 (19)
9 (18)
10 (12)
11 (13)
12 (13)
2007 (106)
1 (7)
2 (5)
3 (3)
4 (7)
5 (5)
6 (9)
7 (8)
8 (13)
9 (18)
10 (11)
11 (8)
12 (12)
2006 (158)
1 (28)
2 (28)
3 (25)
4 (7)
5 (9)
6 (7)
7 (12)
8 (13)
9 (10)
10 (7)
11 (6)
12 (6)
2005 (350)
1 (31)
2 (26)
3 (26)
4 (27)
5 (29)
6 (30)
7 (32)
8 (30)
9 (30)
10 (32)
11 (29)
12 (28)
2004 (292)
1 (24)
2 (24)
3 (29)
4 (27)
5 (28)
6 (25)
7 (26)
8 (24)
9 (12)
10 (19)
11 (26)
12 (28)
2003 (318)
1 (22)
2 (25)
3 (21)
4 (28)
5 (28)
6 (28)
7 (28)
8 (29)
9 (26)
10 (29)
11 (28)
12 (26)
2002 (317)
1 (29)
2 (26)
3 (26)
4 (25)
5 (28)
6 (30)
7 (27)
8 (21)
9 (25)
10 (27)
11 (28)
12 (25)
2001 (277)
1 (17)
2 (21)
3 (23)
4 (20)
5 (31)
6 (18)
7 (26)
8 (25)
9 (29)
10 (19)
11 (24)
12 (24)
2000 (53)
6 (9)
7 (4)
8 (2)
9 (3)
10 (1)
11 (15)
12 (19)
1999 (3)
7 (1)
10 (2)
1998 (18)
9 (9)
10 (7)
11 (2)