2011年10月06日(木)文字列の書き方を変えてみる

「ネットの隆盛全体から見れば携帯電話などからのアクセスは3パーセント程度と極僅か。極僅かの為に対応するのは費用対効果の面から適切ではない」。 
「元々このサイトはクロスブラウザへの対応が課題。異なる機械ブラウザ表示を経て対応する事は喫緊(きっきん)の課題と認識したので対応を行った」。 
「対応の必要性を説明する為に、あるいはどのデバイスで見れば異なる表示になったのか、とする経緯を説明する為に最近はスマートフォンの話題を多めに出した」。

結論1:スマートフォン自体は軽視して問題なし。むしろパソコンからのアクセスによる他ブラウザの表示崩れへの対応の方が緊急度は高かった。(過去形)。

[ 動作速度・画素数が向上…iPhone4S ] アップルは5日、東京・銀座の直営店で報道陣にアイフォーン4Sを公開した。(ゴミ売り 10月6日 8時01分)

「ドットピッチが小さくなる高精細画面、従って1pxを1pxと解釈しては細い線などは表示しきれずに潰れてしまう事になる。従ってdevicePixelRatioの数字を増やす」。 
「問題なのは増える事ではなくAndroidとiPhone4で異なる数字を採用している事。Androidは1.5、iPhone4は2.0と異なる数字を採用している事の方が問題」。

iPhone4SはiPhone4と同じインチ数に同じ解像度を採用している。数字を上げる必要性は薄い。従って「2.0のままである」と予測している。

「何故問題になるのかと言えば両方のアクセスに対応しなければならないから。主に画像の面において。画像を張り付けてサイトを装飾する事は
サイト作りにとってもはや当たり前の様な状況。フォントサイズの大きさも異なって見えると言う課題も含めて、表示の異なるデバイスにどう対応していくのか」。

…むしろ「今語るべき内容」なのはこれ。「スマートフォンでインターネットを見たら画像が滲んで見えるよ?」と言う疑問に「明確な回答」を出す必要は「今」ある。

課題1:devicePixelRatio(1pxを何pxにレンダリングするか?とする解釈の違い)を踏まえて「画像の大きさ」を幾つにリサイズするべきか。

devicePixelRatioとはWebKit系のブラウザで定義されているプロパティ。従ってWebKitを採用していないブラウザでは定義されていない。
Android内蔵ブラウザもiPhone4内蔵ブラウザのSafariも「WebKit系のブラウザ」。従って「定義されている」側の方に入る。
スマートフォン界隈ではWebKit系のブラウザが多数派を占めている。従って「対応しなければならなくなる」とした展開が発生する。

思考1:画像の一辺の長さが「1.5」と「2.0」の両方で割り切れる事。縦一辺の長さで2回、横一辺の長さで2回、合計「4回」計算を行う事。 
思考2:「1.5」を2倍して「3.0」と解釈。「2と3の最小公倍数は6」。従って6の倍数で一辺のpxの長さを考える。例えば「360x240」で画像を作る。

devicePixelRatio「1.5」 → 360/1.5 = 240、240/1.5 = 160 → 360の横を「width=240」、240の縦を「height=160」としたソースを出せばクッキリと表示される。 
devicePixelRatio「2.0」 → 360/2.0 = 180、240/2.0 = 120 → 360の横を「width=180」、240の縦を「height=120」としたソースを出せばクッキリと表示される。

結論2:画像の見える大きさを気にしなければソースの段階で書き換えた方が素早く対応する事が出来る。

課題2:サイトをデザインする都合上などで「360x240」で画像を見せる必要がある場合に「元々の画像の大きさ」を幾つに作成するべきか。

devicePixelRatio「1.5」 → 360*1.5 = 540、240*1.5 = 360 → 360の横を「540」、240の縦を「360」、つまり「540x360」で画像を作ればクッキリと表示される。 
devicePixelRatio「2.0」 → 360*2.0 = 720、240*2.0 = 480 → 360の横を「720」、240の縦を「480」、つまり「720x480」で画像を作ればクッキリと表示される。

結論3:画像を複数作る必要がある。iPhone向けの方が画像が大きくなり、ファイルサイズも肥大化するので回線が重くなる理由の1つになりやすくなる。

「この違いを考慮していない」。それがインターネット界隈の多数の状況。従って「スマートフォンの側による解釈の違いで画像が滲んで見える」事になる。

…さて、これまでの事はどうでもいい。問題なのは「どうやったらこの違いを乗り越えてAndroid OSであろうがiOSであろうが対応する事が出来るのか」だから。

対応1:サイト管理者自前で用意する事が出来る画像(PNGで生成したアイコンなど)は複数の画像サイズを用意して対応した方が無難。

1−1:CSSのmedia queryによる切り換えだけで対応出来る。 
1−2:サイトのデザインを画像の縦横の縮尺で雰囲気を統一する為にはデバイスによって表示後の画像サイズが変化してしまっては困る。

対応2:顧客が自分で用意する画像(写真をアップしました♪)など、は顧客にデバイスの違いを意識させない様HTMLソースの方で対応する。つまり縮小表示。

2−1:画像が多少小さくなってしまう訳だが「この機械ではこう見えるんだ」ぐらいの意識しか普通の顧客は有しない。従って小さくなる事はあまり気にならない。
2−2:画像が滲んで表示されてしまう事の方が問題で、そうした細かい違いを顧客割と良く気付く事が多い。

従って「画像が投稿されたその経路」によって判断を変化させた方が無難とする。

…本当に画像が滲んでるの?と思う人。「マルチタッチ(複数本の指で同時に画面を触る)」してピンチイン(拡大表示)を掛けたままの状態。
すなわち2本以上の指を画面にタッチしたままの状態で画像をよく見ていれば滲んでいない状態が現れてくる事になる。それを見て確認をすればいい。

「マルチタッチをしている間:画像は滲まない(1pxを1pxとして表示する)」、「マルチタッチをしていない間:画像は滲む(1pxを1.5pxとして表示する)」。

それがAndroid内蔵ブラウザの特徴。

2011年10月06日(木)08時46分06秒