お仕事で、とあるWEBサイトの内容修正を手伝った。
スマホと PC で同じ html で動作して、それぞれの環境にあった見栄えになるように作られている。
いわゆるレスポンシブデザイン。
ところが、スマホで表示すると、本来画像が出るはずの部分で消えてしまうという。
僕への依頼は、このバグを解消することだった。
PC の Chrome には、開発者モードがあって、表示中の html などを調べたり書き換えたりできる。
また、この際スマホをエミュレートするモードがある。
スマホの時だけうまくいかない、というので PC 用のページとスマホ用ページを見比べる。
同じ html のはずなのに、読み込んでいる画像のファイル名が違う。
でも、「ファイル名が間違っていて読み込めない」とかではない。読み込みエラーは出ていない。
画像に対する style 指定で、width:0px が指定されていた。
なるほど、画像は表示されているけど、小さすぎて見えないのか。
いったいどこでそんなことをしているのか…
と、読み込んでいる複数の javascript プログラムを探してみると、見つけた。
スマホでは「物理ピクセル」と「論理ピクセル」が一致していない。
文字の大きさとして 12px と指定された文字は、24px で美しく描画される。
というのも、初期の iPhone などでは、12px は 12px だったのだ。
Retina ディスプレイが搭載され、解像度が2倍になった時に、過去との互換性のために「解像度は2倍だが文字の大きさは変わらない」仕組みがとられた。
そのため、12px は 24px で描画される。
横方向が 120px の画像があれば、240px に引き伸ばして描画されることになる。
解像度をあえて落とす表示だ。
問題となるプログラムでは、この問題を解消するために、画像サイズを半分にして表示しようとしていた。
そのために、画像サイズの半分のピクセル数で表示するように、style 指定を行う。
ここにバグがあり、必ず 0px になってしまうようだった。
まぁ、WEB プログラム経験がある人なら「画像のサイズを半分にして設定」でどんなミスをしたかわかるだろう。
問題のプログラムでは、jQuery を使い、$(document).ready イベントで画像の width を指定していた。思った通りだ。
WEB ページは、まず HTML が読み込まれる。
読み込まれた後でタグの内容などの「解釈」が行われ、img タグがあれば、その src を読み込む。
読み込み終われば、img 部分を読み込んだ画像サイズに整え、ページ全体を配置し、表示する。
もっと細かな話もあるが、これが大まかな流れだ。
そして、$(document).ready は、「HTML を読み込み終わり、まだ画像など関連ファイルは読み込み終わっていない」段階でプログラムを動かす。
関連ファイルの読み込みって遅いから、遅い作業を待たずに必要な処理を始めることで、全体の速度を上げるためのものだ。
もうわかると思うが、元のプログラムでは、「画像サイズを半分に設定」しようとする時点で、画像がまだ読み込まれていない。
画像サイズの半分を設定するが、そもそも画像がないので 0 になってしまう。
解決方法は簡単で、$(document).ready ではなく、$(window).load を使えばいい。
前者は、HTML を読み込み終わったら実行されるが、後者はページに関連するすべてのファイルを読み込み終わったら実行される。
プログラムでは、スマホか PC かを見分けて、違う画像を読み込ませる仕組みも用意されていた。
…と、説明しようと思っていい例がないか探したら、こちらのページで紹介されているプログラム、ほぼそのままだった。
HTML を読み込んだら、画像を読み込む前にファイル名を加工してしまう。
違う画像にしたい場合に与える class まで同じだ。
こちらはうまく動いている、と思ってたのだけど、検索してコピペしただけだったのか。
…あー、なんかわかった。わかっちゃった。
「画像サイズを半分にするプログラム」も、これと同じだと思って改造したんだな。
だから、$(document).ready をそのまま使っていて、$(window).load なんてそもそも知らなかったのか。
ところで、プログラムでは、半分サイズにしたい画像を指定できるようになっていた。
画像の class として、 harf という文字列を与えておけばよい。
…半分にするのだから half じゃないかと思うのだけど、プログラムは harf と指定していた。
そして、HTML 内にも当然のように harf という class が大量に…
もうね、この時点で「このプログラムは信用できない」と考えていいと思うよ。
この class 名は、「なんだっていい」ので、綴りをミスしたこととプログラムは関係ない。
でも、こんな単純な単語を綴りミスして、人様から見える HTML 内に大量に書き込んでいるという時点で、かなり注意力の低い人であることがわかる。
「些細なミス」だけど、バグというのはもともと些細なミスなのだ。
些細なミスを残す人のプログラムというのは、些細なバグもいっぱい残っているに違いない。
とりあえず、この仕事は「１時間程度で解決できないようなら保留で」と言われたくらい締め切りが短かったので、他の部分は見なかったけど。
（余計な仕事が増えそうなので見たくもない）
同じテーマの日記(最近の一覧)
別年同日の日記
申し訳ありませんが、現在意見投稿をできない状態にしています。 |