メモ：縦書き 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」
jquery mobileがあれば簡単スマホ対応
いや、本当に。先日も同じことを書いたんだけど、jquery mobileを使えば、ほとんど何も考えることなくスマホ対応できる。スマホアプリと見た目も変わらないんじゃないか、これ。
フレームワークというと、phpだとcakePHPとかsymphonyとか、perlもCatalystとか、定評のあるフレームワークがあって webアプリ開発のコスト軽減になっている。という話。たしかに規則・お作法さえ理解して、その通りにスクリプトを書いていけば、あえて書かなくてもいいことがたくさんあるっぽい。ひとつのことを決めて書けば、それに付随するもろもろまで書いたことになる。
で、この jquery.mobileだ。
先日ちょっと触っただけで、踏み込んだことは言えないんだけど、自作のブログ（https://t2aki.doncha.net/mobile.pl）とお言葉データベース（https://t2aki.doncha.net/mobile_books.pl）をスマホへの移植に使ったレベルで言うと。
これはデザイナーのかわりをしてくれる、デザインのフレームワーク。
わたしは、データをごそごそ加工したり引っ張り出したりする部分に関しては、好きだし面白くて、データをあれこれいじってる時は時間を忘れてやってる、いわばデータヲタク。さらに、シムシティじゃないけど、使う側のことを考えて、サイトの動線やUIを考えて想像するのも楽しい。
サイトを作っていてうんざりするのが、そこから先。
ボタンが1pxズレてる？んなぐらい、いいじゃん。
アイコンがジャギってる？んなの気にしないって。
どうしてロゴの位置はここなの？なんとなくだ。
というのは、まるでダメ。
デザインの神さまは細部に宿るし、デザインはいちいちちゃんと説明できる理屈がある。データとかサイトの動線などとは別のレイヤー・別次元。そこんとこ、苦手なんだよねえ。
漫画でいうと、データを用意する・サイトの動線などの骨格・設計を決めるところは、絵コンテ、下書き。これでは完成してないし、読者は見向きもしてくれない。ここから先、デザインワーク＝ペン入れ、仕上げがあって初めて希求力のあるサイトになる。
同じ情報を画面上に表示しても、1pxにこだわったサイトと、そこがぬるいサイト（たとえば、ページを移動したら1pxだかで画面が揺れるとか）では、「ぱっと見」の印象が違う。この「ぱっと見」は大事で、WEBを見ていて、そのサイトを「読む」に値するかどうかを判断するのは「ぱっと見」（そこまで、こだわるんか、というのは、なにをサイトに要求するのか、てことなので、また別の話。ここでは、そこ、こだわるところだろ、て話）
てことで、jquery.mobileだ。こちらが書いたラフ画を、一気に仕上げまで持って行ってくれるスグレモノで、感謝感動。専属のデザイナーをひとり雇ったようなもの。スクリーンショットのページなんて、わたしはなにもしていない。テキストをセンタリングするために1行～3行ほどcssに書いただけ。これをいちから書いたら、と思うとぞっとする。リストの区切り線とか、ボタンの影とか、テキストの位置とか、こんなのをcssで書けとか言われたら、いらいらしながら一週間がかり。jquery.mobileのおかげで、移植は各々実質1日で、なおかつ、スマホネイティブアプリのような画面のできあがり、となる。
で、javascirpt は、油断してたらすっかり主流でこんなことまでできるのか！？という存在感。クライアント側でなにをやったところで、信用できないし、結局はサーバー側でやるよね、と思ってたわたしが悪かったすまんかった。
html5になると、web storageとか。javascript がデータベースまで手に入れてるらしい。すごく今さらだけど、javascriptも勉強しなきゃいけないんだなあ。うううむ。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
ajaxを強制終了する
名セリフ集、というともっともらしいけど。感想文が苦手で、ダ・カーポや、お楽しみはこれからだ、のように、読んだ本の印象に残ったフレーズを抜書きするようにしている。抜けがあったり、サボってたりしつつも、データとして蓄積されてるのが400弱。当然ながら、アマゾンに問い合わせにいって、書影など書誌情報詳細を引っ張ってくるスクリプトにしてある。
んだけど。アマゾンへの問い合わせが帰ってくるのを待つ時間が冊数分必要で、検索などで多数の本をリクエストすることになると、フリーズしたんか、ハングしたんか、というぐらい待つことになる。
なので、
著者名で検索の場合、とりあえず登録されているタイトルだけ別のコンテナに表示して、そのタイトルをクリックしたら、その一冊だけの分を表示するようにしよう。
と考えた。
１．著者名検索で、まずajaxでアマゾンに問い合わせにいく。
２．時間がかかるので、別コンテナに、ajaxでウチのDBに問い合わせてタイトルだけ表示する。
３．１がまだ終わってなくて、２で表示されたタイトルで気になったのをクリック。
新たに ajaxでアマゾンに問い合わせに行く。
４．一冊だけなので、すぐにアマゾンからの返答があって、メインエリアに表示される。
５．しばらく眺めてると、１でアマゾンに行ってたのが帰ってきて、メインエリアが書き換わる
６．びっくりする。
びっくりするのは困るので、３で別コンテナのタイトルをクリックしたら、まだ終わってない１の問い合わせを強制終了させたい。
という要件。
グーグルで検索して解決。ありがとうございます。
var req
req = $.ajax()
としておいて、ajaxで問い合わせるときに、
req.abort();
で、今、走ってるajaxの強制終了となる。
強制終了させて、新たに ajaxを走らせたら、その結果は success ではなくて、error で受け取る。これで、とりあえず問題解決。
そんなこんなの小説名セリフ集のページは こちら
ちなみに、こんなフレーズを抜粋。ときどき眺めてはニンマリしております。
歩き去っていく男に、ぼくは呼びかけた。
「あなたは神を信じていますか？」
男は立ち止まって、しばらくじっとぼくを見つめた。その質問になにか裏がないか、疑っているかのように－－ぼくがこの教区民に雇われて、男の信仰の深さを調べてでもいるかのように。もしかすると男はただ、深夜に町の広場にすわって、赤の他人に信仰の確証を乞うほど絶望的になっている人間を、如才なくあしらおうとしていただけかもしれない。
男はかぶりをふった。
「子どものころは信じてた。だが、いまは違う。神ってのは、なかなかいい思いつきだが……まるで意味をなさん」
男はまだぼくの動機をはかりかねるように、疑い深げな目でこちらを見ていた。ぼくはきいた。
「では、生きることがつらすぎはしませんか？」
男は笑って、「四六時中ってわけじゃないさ」
[06/01 10:37:49]
そういや。きちんと考えずに作っていったもんだから、気がついたらajaxだけのページ遷移のないページになってしまった。
SEOを考えるとまずいので、ECサイトなんかだとこんな作りは却下。
集客に関しては、googleさま yahooさまから一見さんを拾い集めるのがセオリー。この名セリフ集は検索エンジンから見ると1ページだけの存在で、ユーザーにとって価値は低い、と判断される。外部リンクもないし。
ajaxについては、流れを追うのがけっこう面倒で、デバッグしにくい、という面と、ページをいちいち作る必要がなくてラクチン、という面が、作る側にはあって、無問題に大歓迎とは言い切れない。でも、使う側から見ると。スマホな感覚というか、そのページの中だけで済むので、ページ全体が書き換わるのを待つ必要がなく、コンテンツを読み込む間にほかのコンテンツを眺めてればいい。錯覚かもしれないけど、待たされないってことで、疲れない・ストレスが少ないページになるような気がする。
» ローカル環境で電子書籍を作る、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」
個人情報をちょっと防衛
クラウドだWEBサービスだ、これが便利、意識の高い人間ならこれだ！みたいなこと言っちゃってる記事もあるけど、わたしはグーグルだろうがアマゾンだろうが、ネット企業は信用しない。ていうか、ネットの生い立ちからすると、ネット上にプライベートな場所などありえない。
なので、漏れると困るような情報は、ローカルPCか手帳。WEBにあげるなんてとんでもない、と思ってる。
とはいえ。WEBで営業するとか、自分宣伝するとか、通販するとか。そういった場合に、続きはWEBで、というわけにはいかない。メールアドレス、住所、電話番号などをWEBサイトに掲載する必要が出てくる。具体的に言うと、特定商取引にもとづく表示は、連絡先、電話番号の表示が決められている（ネット上で販売してたり、サービス提供して金銭のやりとりが生じるのに、特定商取引の表示がないようなサイトは、法律違反）
提供しているものを求める顧客に情報を開示するのは当然だし、むしろそれが目的だからいい。問題が、ロボットや名簿収集業者による地引網的な情報収集。
このブログのプロフィールや、 創作文芸見本誌会場HappyReading の特定商取引にもとづく表示といった個人情報は、現時点で、簡単にコピペできない、ロボットによる自動収集ができないように小細工してある。
個人情報防衛策Tipsってやつだ。
その０．
ページに表示するのは ajax 経由。
その１．
javascriptがONになっていていないと表示しない。
その２．
jQueryを利用して、コピーできなくする。
その３．
ajaxで呼び出されるスクリプト側でリファラやbotなどのチェック。など、ロジックをいれて、ページ表示をコントロール。
これだけで、少なくとも現時点では、クローラによる収集を回避。ひとを使った収集も、コピペができないので面倒になっている。
やり方次第で、無防備無自覚に、個人情報をばら撒くことは避けられるので、プロバイダなどに問い合わせてもいいかも。
» ローカル環境で電子書籍を作る、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」
