メモ：縦書き css3 writing-mode
創作文芸見本誌会場HappyReadingをはじめとして、わたしの作って公開しているサイトのあちこちに、文章を縦書き表示するページがある。いや、やっぱり小説は縦書きじゃなきゃ困る、昭和なもんで。
ブラウザでいえば、IEが以前から独自拡張で縦書き表示ができていた。
2010年ぐらいから、amazon の kindleがくる、すわ黒船来襲か！？というの踊らされ、あちこち見て回ってると、今なお、epub 、電子書籍のための規格決めで紆余曲折中らしい。少子高齢化じゃないけど、「日本語圏」って、世界的にはマイノリティになるんだろうな。
てのはともかく。
今日時点、ざっと検索したところ、webkit系のブラウザは writing-mode を実装していて、日本語の右から左へ流れる縦書きとか、アラブの右から左に流れる横書きなどに対応している（safariとかchromeですね）
わたしのサイトの縦書きは無理やり。幅1emのブロック要素にテキストを流しこんで、それをfloatで右から並べてる。ハイフンやかぎかっこなどは回転させて、句読点は位置を調整している、んだけど、しょせん横書きのフォントを縦に並べてるだけなので、フォントの環境によっては（プロポーショナルフォントなどで表示されてしまうと）全体がふにゃふにゃ波打つし、調整しきれない句読点なんかがハミ出していて、よろしくない。
で、safariで以下のスタイルシートを試したところ
きれいな縦書き表示。縦書きフォントを使ってるので、妙な歪みもないし、iphoneで見ると、ヒラギノ明朝はきれいだし。
ブラウザの対応状況が微妙なので、PC版のサイトでこの表示は難しいけど、スマホ版なら問題なさそう。こっそりスマホ版で試してみる、かな。
右側が今やってる無理やり縦書き、左側がsafariによる縦書き。ガタつきなど、その差は見てわかると思う。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
スマホ対応、IE8対応
この雑記帖。こないだは、IEはもう止め止め、ここはHTML5の実験にする、とか言ったんだけど、現実的にはIE8はまだまだ全然主流で、どこかの記事では、日本でのシェアは60%程度で、圧勝。ここのような辺境のブログのアクセスログを見ても、IE8は無視できないのでありました。
てことで、検索してみたら、ぞろぞろ出てくる、HTML5のIE8対策。WEB制作会社などは死活問題。クライアントとか、声のでかいだけの上層部に振り回されて、現場は阿鼻叫喚吐血の図、というのが想像に難くない。心中・胸中お察しします。
とりあえず、ここも対応できるなら対応するに越したことないよね、ということで。
html5で書いたサイトをie8にも対応させる。
スタイルシートで新要素をブロック要素にする。
グーグルのjavascriptを読み込ませる
https://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に対応させることができた、かな。
スマホ対応も探してみた。
https://dev.screw-axis.com/doc/jquery_mobile/
いや、いまどき、スマホのリクエストが多いので、ちょっと勉強も兼ねて、というスケベ心満載。
jquery.mobileというフレームワーク（？）を使えばあっさりさっくり。これ、ほとんどブロック。昔懐かしの電子ブロックのようなもの。用意されている部品をマニュアル通りに書いていけば、PC版のサイトをあっさり短時間でモバイル、スマホ対応にできてしまう。
スマホに搭載されるブラウザに対応イコールwebkit対応なので、なにもこのフレームワークを利用しなくても、HTMLとCSSを書けばいいんだけど、このフレームワークは、いわゆるスマホのお作法・流儀・デザイン・エフェクト・UIを提供してくれてる。専用アプリ同様の風味なのだ。
ここ、すごく大事なところだと思っていて。
PCとスマホなどのモバイルとでは、見ることになる情報が同じでも、ユーザーの距離感が違う。肌感覚とかいうと胡散臭いけど、対デバイスの距離というか。
なので、PC版をそのまま持ってきても違和感がつきまとう。弱ったなあ、と思ってたところにこのフレームワーク。
今日、それこそ2時間ほど眺めてただけで、とりあえずこの雑記帖のスマホ版をでっち上げることができた。細かいところはまだこれからいじるとしても、2時間程度で移植できたということが、このフレームワークの凄さだなあ。
文字数の制限なんか動的にプログラムでごそごそやってたのを面倒みてくれるし、1pxの影なんてcssでうんざりしてたのを面倒みてくれるし、プログラム的なところもデザイン的なところも両方ともフォローしてくれてる。
いやもう、今日、絶賛。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
ブログをhtml5で書き換えてみる
とりあえず。この雑記帖をhtml5で書き換えてみようと思い立つ。いや、仕事を取るのに、html5の案件も増えつつあるのだ。で、この雑記帖。もうかれこれ10年以上使い続けてきていて、ベースがテキスト、というかcsv。気がつけば４Mを超える大きさ。駄文譫言の積み重ね。ついでにこれをデータベースに置き換えることにした。lolipopのmysqlは重くて使い物にならんので、やっぱりsqliteに。
解説ページを見ながら、セクショニングタグとか初耳の単語に戸惑いつつ、エディタでゴリゴリ書いてそこそこの形になったな、クロスブラウザチェックもやるか、とIE8で見て仰天。IE8はhtml5のタグを解釈してくれない。検索して調べてみると、html5をIE8に対応させるためのjavascriptなんてのがある。
またIEだ。うんざり。
どうせ、アクセスの少ない辺境のブログだ。IEなんぞ切って捨ててしまうことにした。
小さなスタートアップが、IEを捨てて10万ドル以上節約した という心温まる記事もある。
とはいえ、日本だとIEのシェアは50％以上あるという記事もある。仕事となるとIEに対応しなきゃいけないので、html5は時期尚早、だろうなぁ。ここは実験場ということで。
まだまだデザインがしょぼいし、作っていない機能もいくつかあるので、試運転中。
[06/08 10:42:56]
html5に書き換える、の続きはこちら↓
スマホ対応、IE8対応 https://t2aki.doncha.net/?id=1338281023
[05/27 23:53:13]
1998年を見ると、司馬遼太郎とかジョージ・ロイ・ヒルとか。相変わらずだなあ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
iPhone Android スマホ対応（？）HTML
なんもしてない困った状態だし、「趣味は読書２」のテコいれでもやるか、と。スマホでも見られるようなページを作ってみた。
グーグルさまで5分ほど調べたところ、どうやら
横幅320pxでレイアウトデザインしておけば、まず大丈夫
らしい。
まあ、ただちにレイアウトが崩れることもなさそうだし、一定のめどがつくまでは320pxで、ということか。すでにデータの出し入れする部分のライブラリは作ってあるんで、そこは使いまわし。表示部分だけを新規に作る、という感じ。ひとつのソースで横幅に応じてレイアウトが変わる、というのが今後は主流だろうと言われてるけど、暑いし蒸すしよくわからないんで、USER_AGENTで振り分ける。
改めて、ケータイサイトとかブログとか、あちこち覗いてみたけど、よくもまあこんな小さな解像度にきちっときれいにレイアウトデザインしてるなあ、と真面目に感心してしまった。
ページ内に飛び先が多いと起点がわからなくなって、そのうちページ移動するのが面倒になる・使いにくいサイトになる。横幅320に詰め込むとそれがますます顕著。なので、見た限り、シンプルで、リンク領域も分かりやすいサイトが多かった。ページ内の情報は、文章なら全部じゃなくて、キャッチのみをまず見せて全容をそこで把握できるようにして、個々の詳細へ誘導する、てな作りか。
といったことを踏まえつつ、どうせなら、流行のHTML5で構成してみた。「趣味は読書２」スマホ版 https://doncha.net/sp/
…レイアウトデザインはやっぱり難しい。データうんぬん、プログラムのところは決め事があるのでそのとおりにやればどうにでもなるけど、「見た目」のところは決め事がないので面倒。HTML5は効果・表現が増えてますます、「見た目」のところにコストがかかりそう。…って、実際は、ただ声がデカイ人間のゴリ押しで決め事ができるんだけど。
[06/29 11:42:38]
てなこと書いてたけど、jquery.mobile を使えば簡単に移植できる。
「jquery mobileがあれば簡単スマホ対応」 https://t2aki.doncha.net/?id=1338631302
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
昨日はバタンキュー（死語）
週末に処方された薬のせいかどうかはともかく、体調がひどくて、昨日はフラフラ眩暈がする上に吐き気も胸元にあって、メシを食ったらもう転がるだけだった。皮膚もかさかさひりひりで、抗生物質がいやな感じで影響してるようなしてないような、だった。久しぶりに、くるくるバタンキュー状態で驚いた。
とりあえず、今日はどうにか昨日ほどではなく。
サイトをいじっていて、はたと気づく、今さら。
アマゾンのデータを使うには、アマゾンへのリンクが規約上必要だった（あやふや）。
そりゃそうだよねえ。無償でデータを提供してくれているワケじゃない。送客しないとダメだろ。てことで、趣味は読書２ https://doncha.net/ のDBに急遽amazonアソシエイトのトラッキングIDを仕込むためのテーブルを追加して、ユーザーさんがアマゾンのアフィリエイトIDを持っていればそれをリンクに、持ってなければわたしのアフィリエイトIDをリンクに仕込むようにした。
アマゾンはこうやって、こんなどうでもいい小さなところからも客を獲得していくんだなあ、と改めてしみじみと。適当な囲い込みとオープンな仕組みのバランスがいいんだろうか。
既知のバグ。IEだとAjax表示のコンテナがうまく高さを親に伝えてくれない。CSSの書き方の問題だと思うんだけど、解決できない。面倒なんでこれもJavascriptで判定を入れて、親を引き伸ばすようにした…ダメなやり方なのは１００も承知のすけ。とほほ。
1億5千万回いっちゃうけど、同じソースを食わして、表示が違うってありえんだろ。ちくそお。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
案の定、IE8のバグだった
アクセスログに残る、404エラー。ありえないURLを要求してくるんだから当たり前。HTMLの一部をブラ下げてるのだ。
などなど。どこをどうすればこんなURLを組み立ててきやがるんだ、と。
いろいろ検索クエリを変えて、「IE8 バグ リクエスト」で、ようやくヒット。
https://bluewatersoft.cocolog-nifty.com/blog/2009/10/ie8-lookahead-d.html
IE8の中途半端な先読み機能がこんなマヌケなことを引き起こす、らしい。なんじゃそりゃ。てか、うんざり。上記記事によるとxhtmlのサイトは軒並み被害に遭いそう。（てのはちょっと違うけど、HTMLの規格で行くという話だ。結局xhtmlって規格企画倒れだったんかなあ）
面倒だから対応しない。仕事でやってるサイトならともかく、辺境の地だ、IEは確認動作環境から外してしまうか。
twitterのタテ表示、たてたったー、が予想以上に面白い、おれ様だ。
ttp://www.holeinthewall.jp/~butch/zakki/tatetatter.pl
スタイルシートを調整してちょっとは見やすくなった、かも。javascriptを使って、記入時にタテ表示の確認ができるなら、面白くなりそうなんだけど、そんなスキルはないのがとても残念。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
