2015年10月16日金曜日

「えーと、画像は全部2倍で作ればOKなんだよね?」を卒業しよう

お疲れ様です、大塚です。
Appleの新製品発表会が間近に迫ってきましたね。新しいiPhoneの発表はもちろんのこと、今年の「One more thing」も楽しみです。
しかしながら、新しいプロダクトにドキドキ・ワクワクしながらも、心のどこか冷静な部分で、
「また新しい解像度が出てきたわ…」
と、新しい苦悩を抱えてしまうエンジニアやディベロッパーの方も多いのではないでしょうか?高解像度ディスプレイを搭載したマルチデバイスへの対応は、なかなか骨が折れる作業ですからね。
…え、仕組みがよくわからないままコーディングしていたって??
そいつぁーまずい。
なぜ、多くのスマートフォンやタブレット向けのWebサイトでは、画像が2倍で作られているのか?
その理由と、ディスプレイや解像度の仕組み、今日ここで覚えていって頂戴。
目次

ディスプレイの仕組み

ぼくたちが普段使用している、PCやスマートフォンのディスプレイは小さな点の集まりでできています。点のことをピクセル(画素)と言い、ディスプレイのピクセルはの3色に光ることができます。いわゆる「RGB」ですね。ディスプレイは、RGBの3色を組み合わせて色を表現し、映像を出力しています。
ディスプレイの広さの単位には「インチ」が用いられ、縦横の長さではなく、対角線で計測します。故に、同じインチ数のディスプレイでも、アスペクト比(縦と横の長さの比率)が違えば、ディスプレイの面積は異なります。
display_inch
ディスプレイ1インチ辺りのピクセルの密度をピクセル解像度と言い、ppi(pixel par inch)で表します。ppiの数値が高いほど、出力される映像は鮮明になります。下の図では、1インチの中に4つのピクセルがあるので、このディスプレイのピクセル解像度は4ppiということになります。
display_ppi
類似の単位で、dpi(dots par inch)がありますが、こちらは1インチ中のドット数のことを指します。じゃあ、ドットとピクセルの違いはなんなんだ?というお話になるかと思います。
ドットとは、ディスプレイの物理的な点のことであり、ピクセルとは、ディスプレイ上で光っている点のことです。後述する、ドットバイドットではないディスプレイの論理解像度基準で考えると、同じディスプレイ上でもドット数とピクセル数が変わってくるので、ppiとdpiが異なることになりますが、実際は1ドット単位で光っているわけですから、ディスプレイ上では同じ値を示していると考えて問題ないです。(印刷のppiとdpiとでは、また話が変わってくるので、ご注意を)


...詳しい情報・続きはこちら >>
http://un-tech.jp/display-resolution/
─情報元:un-Techサイト様─