スマホ対応、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」
iPhone Android スマホ対応(?)HTML
なんもしてない困った状態だし、「趣味は読書2」のテコいれでもやるか、と。スマホでも見られるようなページを作ってみた。
グーグルさまで5分ほど調べたところ、どうやら
横幅320pxでレイアウトデザインしておけば、まず大丈夫
らしい。
まあ、ただちにレイアウトが崩れることもなさそうだし、一定のめどがつくまでは320pxで、ということか。すでにデータの出し入れする部分のライブラリは作ってあるんで、そこは使いまわし。表示部分だけを新規に作る、という感じ。ひとつのソースで横幅に応じてレイアウトが変わる、というのが今後は主流だろうと言われてるけど、暑いし蒸すしよくわからないんで、USER_AGENTで振り分ける。
改めて、ケータイサイトとかブログとか、あちこち覗いてみたけど、よくもまあこんな小さな解像度にきちっときれいにレイアウトデザインしてるなあ、と真面目に感心してしまった。
ページ内に飛び先が多いと起点がわからなくなって、そのうちページ移動するのが面倒になる・使いにくいサイトになる。横幅320に詰め込むとそれがますます顕著。なので、見た限り、シンプルで、リンク領域も分かりやすいサイトが多かった。ページ内の情報は、文章なら全部じゃなくて、キャッチのみをまず見せて全容をそこで把握できるようにして、個々の詳細へ誘導する、てな作りか。
といったことを踏まえつつ、どうせなら、流行のHTML5で構成してみた。「趣味は読書2」スマホ版 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」
昨日はバタンキュー(死語)
週末に処方された薬のせいかどうかはともかく、体調がひどくて、昨日はフラフラ眩暈がする上に吐き気も胸元にあって、メシを食ったらもう転がるだけだった。皮膚もかさかさひりひりで、抗生物質がいやな感じで影響してるようなしてないような、だった。久しぶりに、くるくるバタンキュー状態で驚いた。
とりあえず、今日はどうにか昨日ほどではなく。
サイトをいじっていて、はたと気づく、今さら。
アマゾンのデータを使うには、アマゾンへのリンクが規約上必要だった(あやふや)。
そりゃそうだよねえ。無償でデータを提供してくれているワケじゃない。送客しないとダメだろ。てことで、趣味は読書2 https://doncha.net/ のDBに急遽amazonアソシエイトのトラッキングIDを仕込むためのテーブルを追加して、ユーザーさんがアマゾンのアフィリエイトIDを持っていればそれをリンクに、持ってなければわたしのアフィリエイトIDをリンクに仕込むようにした。
アマゾンはこうやって、こんなどうでもいい小さなところからも客を獲得していくんだなあ、と改めてしみじみと。適当な囲い込みとオープンな仕組みのバランスがいいんだろうか。
既知のバグ。IEだとAjax表示のコンテナがうまく高さを親に伝えてくれない。CSSの書き方の問題だと思うんだけど、解決できない。面倒なんでこれもJavascriptで判定を入れて、親を引き伸ばすようにした…ダメなやり方なのは100も承知のすけ。とほほ。
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」
IE8で表示がバグってた
読書SNSの本棚のタブメニューがIE8で表示バグ。いや、気づいてたんだけど、IEなんてもうイラね、と放置。
タブメニューが4つほどあって、その各々でやることが違う=コンテンツ量が違うので、コンテンツ部分のdiv要素の高さが違う。
これをjavascriptで display:block noneを切り替えるわけだが。
FireFox、Safari、IE7は意図どおり、コンテンツ部分の高さに合わせて、親要素の高さを広げてくれるんだけど、IE8はコンテンツ部分の高さを広げてくれない。ケイ囲み(親要素)からべろ~んとコンテンツがはみ出してみっともないったらありゃしない。floatした子要素の高さを親要素に伝えるためのハックをスタイルシートには適用してあるんだけど、なんでやねん、と。ごそごそスタイルシートをいじったりHTMLに直接styleを埋め込んでみても、ちっともいうことを聞きやがらず、すっかり放置だった。
朝から団地の掃除、イトーヨカドーの特売、と地域密着活動の合間を縫って、見直してみた。結果。
javascriptで切り替えるときに、親要素もいじれば意図どおりになった。
id.style.display='none'
id..parentNode.style.display='none'
id..parentNode.style.display='block'
id.style.display='block'
IE8はけっこうまともという話なので、本来こうすべきところ、なのかな。
ちなみに、
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
こんなのヘッダに入れると強制的にIE7互換表示モードにしてくれるんだけど、このIE7互換がいい加減っぽくて、本当のIE7と表示が違ってたりするんで困ったちゃんでした。
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」
スクロールバーでセンタリングがズレる
~butch/zakki/ 以下は同じフレーム同じ雛形なのに、FireFoxで見てると、ページによってはセンタリングがずれてページがピコっと動くことがあって、気持ち悪かった。cssを疑ってピクセル指定しなおしたりしても変わらず。
ググれ、カス。
だった。検索したらあっさり見つかった。
FireFoxなど、タテスクロールが起こる場合にだけスクロールバーが現れるので、スクロールバーの幅の分横幅が変わって、センタリングのやり直しになるから、ズレる。なので、最初からどのページもスクロールバーが出てればいい、らしい。定番は以下。
html {} に、height:100% margin-bottom:1pxを指定して常にスクロールバーを出させる。
いろいろあるもんだ。
- 『おかえりください』サウンドノベルWINDOWS版
- 『おかえりください』本編を加筆修正、6つのバッドエンド分岐シナリオを追加してサウンドノベル化!
音と映像が、血まみれのこっくりさんの惨劇を蘇らせる。 - 【無料体験版】はこちら
» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」