≒ Chromeでaタグに意図しないフォーカスが入っちゃう件の対策

こんな小ネタで結構てこずったのでメモ。
firefoxでは起らない。IEその他は知らん。CanvasとかImgをdragして動かすと、Chromeは周辺のaタグ掴んじゃってみっともない感じになる。
cssで:focusとかいじってみたけど利かなくて、最終的にコードアシストで出た表現で行けた。
[code language=”css”]
a::selection {
background: transparent;
}
[/code]
だけでOK。何でコロン二つ？　しかし、ブラウザ間差異ってまだあるんだね。めんどくせぇ。他にも今回ぶつかったのがfirefoxだとwindow.eventオブジェクトがundeifindだとか。
けどまぁ商売敵同士に商売ネタを共通化しろって言っても自ずと限界はあるよね、という話でもある。もう寝る。

17年11月3日(金)‡06時09分19秒 ‡ ただの自分向けメモ

≒ スマートフォン対応の件

すごく原始的な対応方法で、何ら目新しいことが含まれてないエントリですが、自分向けのメモとして。

このブログはwordpressが対応してくれてるのか、初期設定のままで(もちろんJavaやcanvasは走りませんが)問題なく表示されてるんですが、ドメインのインデックスページが何か変。

様々なサイトを漁りまくって、言われるがままにコードをいろいろ書き直して試行錯誤しても上手く行かず。viewportの記述を加えると変な風に崩れるし、Media Queriesもなぜか期待通りの動作をせず。

結果的に上手く行ったので、やったことを書き残しておきます。

参考：初めてスマートフォン専用ページを作成する際に知っておきたいポイント

1) -webkit-text-size-adjust : none;　を記述。縦横で勝手にフォントサイズを変えさせない。

2)@media screen and (max-width: 480px) {　body {　font-size: 0.7em;　}　}　を記述。フォントを小さくする。

やったことはこれだけw　原始的すぎる。まぁ、そっけないインデックスページなんだから当然なんだけど。

で、ポイントはMedia Queriesの書き方の説明がサイトによってちょっと違うこと。基本を理解してないのが悪いんだけど、間違った書き方で書いちゃって動かなくて試行錯誤w

もう余計なことはしないで、次からはこのやり方で行きます。

12年7月5日(木)‡23時10分18秒 ‡ 未分類

≒ 画像のローディング中の処理の件

就職活動の面談用の資料づくりも必要で、コード演習なら新たな課題｢業務用webアプリ制作｣というのも始めるつもりなのに、気が付いたらECサイトのスクリプトをいじっている。やっぱり細かな処で気に入らないところが残ってるのよねー。

で、トップページの画像ローディング中の画面が酷かった。大分前から判ってたんだけど、手持ちの著作権フリーの画像をそのまま放り込んだだけだったので、最低横800px以上で、中には2000px近くある画像も混じってて、そのサイズでは仕方がないなと放っておいた。参考にAmazon閣下を見ても画像サイズは小さいのを使っておられるようで、実際にECサイトとして運用するなら画像サイズ上限は決めるべきだとも思って、システム側で対処する必然性を感じなかったのです。
しかし、いかんせん酷すぎる。それに画像にしか｢色｣が無いうちのECだと、画像をあまり粗くすると全体的にきちゃなくなるので出来ればそのまま行きたい。では、以下今日の試行錯誤。所要時間4時間。

まずグーグル先生で｢jquery　画像　ローディング中」と質問。いくつか出てきたんだけど、CSSよりのプラグインとかが出てきて、構造は完成しちゃっているうちのサイトを一から作り直すのはいやで却下。そんで見つけたのがここ。すごいなー。プリロード処理のショーケース。こういう風に他人のために情報を整理して提示してくれる人にはほんとに頭が下がる。ありがとうございます。

で、全部のデモページを見て、うちのに合いそうなこれを使うことに決める。ドキュメントを読みだすと、初っ端からアップデートの案内リンクがあって、飛んだ先には｢前のに不具合があったことをなんで皆すぐ言ってくれなかったんだ！｣みたいなことが書いてあって微笑ましい。ドキュメントの通り実装。動かない。コードを読み返す。｢.preload」指定死んでない？と思ってドキュメントを再読するとコメント欄にそのことを文句付けてる人発見。｢あなたはこの部分のスクリプトは他の人のをコピーしたって書いてるけど、『.preload』指定の部分だけコピー抜けてるよ！」だって。この作者は結構コメントに返事返してるんだけど、これはスルー。以降コメント欄に出現せず。修正もされず。仕方がないのでこの部分の引用元に行ってみると。確かに抜けてる。で、直したらちゃんと動いた。このプラグイン作者さんにも当然感謝だけれども、今回すごく助かったのはこのページ。ローディング中表示用のGIFアニメを作ってくれるサイト。すごいの一言。

その結果。相変わらず酷い。ロード中のGIFアニメがガタガタ動いてるっていうだけ。ようするに画像自体のローディング中の表示不具合というより、画像サイズの取得中の各ブロックのサイズが未定義なのでガタガタなのよね。なのでimgタグを包んでる要素にサイズを明示する。anchor-linkにサイズ指定なんて効いたっけ？と思いながら全部指定したらちゃんとなった。あ、そうか。float指定の時にdisplay:blockにしてるからだ。結局最初の「画像サイズがでかいから」という理解は全くの間違いで、floatさせてる要素のサイズ明示が抜けてるから、画面が落ち着かなかったというだけだった。うーん。この手直しも結構勉強になったなー。今後は画像ブロックのfloat時には気をつけよう。あと、altの内容もローディング中にはみ出しちゃってガタガタになるというのも、画像ラッパーのサイズ明示で防げることも判った。最後に細かな手直し。alt文は非表示になるんだけど、そのborder-bottomがFireFoxだと表示される。黒い線がポツポツ。altのcolorを背景色と一緒の白にすると今度はアニメの上にだけ白い線が走る。で、「CSS　文字色　透明」でグーグル先生に聞くと、何でかトップにW3C先生（本物）登場。一応見てみると「CSS3ではtransparentをcolorにも指定して良いんですよー」って優しく書いてある。いつも怒ってばかりの先生が今日は変。で、そのとおり指定すると、おお、白いところは白、黒いところは黒で完璧に消えてる！

以上。試行錯誤メモ。今から面談用資料作ろー。

10年12月10日(金)‡00時51分02秒 ‡ 未分類