はじめに
コミケが1週間後に迫っておりますが、皆様いかがお過ごしでしょうか！
なんとか入稿を済ませて無事にコミケを迎えられそうな、
CYBIRDエンジニア Advent Calendar 21日目のcy-mitsukiでございます。
20日目は@MiuraKatsuさんのボクがPhalcon翻訳プロジェクトでやらかしたコトでした。
このようなオープンソースプロジェクトに加わったことないのですが、やっぱ私には怖くて無理ですね（ダメ人間）
しかし開発じゃなくて翻訳のプロジェクトというのもあるんですねぇ。たしかに英語の勉強にもなりそうだし、参加も気軽にできそうで良いですね。
本日の内容
Web制作をする上で意識しなければならないことの1つに「マルチデバイス対応」があります。
その中で絶対出てくるキーワードに「解像度」があります。
この言葉、印刷やカメラの分野でもよく出てくるんですが、色んな使われ方をしてて混乱しませんか？
そんなモヤモヤを解消するために、ちょっとまとめてみましたよ。プログラマ以外の方も是非。
解像度（単位dpi）
「解像度は300dpi以上で入稿してください」
印刷業者の注意事項でよく見かけるこのような表記。
dpi（dots per inch）というのは、1インチ（25.4mm）につき配置されたドット（点）の数を示します。例えば、300dpiというのは1インチあたり300ドットが配置されている状態を指します。
ドットの数が大きいほど密度が高くなり、より精細な表現が可能になります。（実際は出力するハードによって限界があります）
この正確な基準による密度こそが、本来の意味での「解像度」だと思います。
画素(単位px)
画素（ピクセル）は、コンピュータ画面に表示する色情報の最小単位を意味します。
もしA4サイズ（210mm × 297mm）で画像データを300dpiで印刷したい場合、必要な画素数は・・・
(210mm ÷ 25.4mm) × 300 = 2480.31496...
(297mm ÷ 25.4mm) × 300 = 3507.87401...
ということで、2,480px × 3,507pxの画像データを用意すれば良いです。
ちなみにこの画像の総画素数は、約870万画素でした。
2,480px × 3,507px = 8,697,360px
このような縦横の画素数についても「解像度」という言葉が使われることが多いです。
しかし、画素数だけでは密度は分かりません。その画素数をどれだけ細かく表現するかが解像度の本質なのですから。
画質
画質が良いことを「解像度が高い」等ということがありますが、必ずしもそうとは限りません。
解像度が高くても、画質が良くないことがあります。
例えば、ソフトを使って画像を引き伸ばすことで画素数を多くして高解像度を実現できたとしても、元の画質より良くなることはないですよね。
解像度が画質に影響するのは事実ですが、それは画質を判断する要素の1つにしか過ぎないのです。
ただし、解像度が低いと画質が落ちる（ボヤけた感じになる）ことに関しては間違いありません。
この対応に追われるようになったのが、iPhone4の登場によるいわゆる「Retina対応」です。（後述）
画面解像度（単位ppi）
コンピュータ画面上で表現できるドット数には限りがあるため、印刷のようにdpi値を高くすることで解像度を上げることはできません。
（Photoshop等でdpiを上げても、大きくなるのはその画像の画素数のはず）
画面上における解像度を示す単位として、ppiというものがあります。
ppi（pixel per inch）というのは、1インチ（25.4mm）あたりの画素数を表します。画素密度とかピクセル密度といったりもしますね。
ppi値は端末によって異なります。これが厄介なんですよねぇ。
画面解像度（単位px）
コンピュータ画面上に表示できる総画素数についても画面解像度というのが慣用的になっていますよね。ややこしい！
例えばiPhone6 Plusだと1,920px × 1,080px。iMac Retina 5kモデルだと5,120px x 2,880pxです。
デバイスピクセルといったりもします。
先ほども書きましたが、画素の密度は端末によって異なるので、この数値が高いからといって解像度も高いかというと、本当は分からないんですよね。
画面サイズが分かれば、ppi値を計算することができます。
ppi値 = √（横の画素数^2+縦の画素数^2）÷インチ数
画面上に最適な画像を表示させるために
デバイスピクセルにそのままCSSのピクセルを適用させてしまうと、端末によっては小さくなりすぎるなどの問題が発生してしまいます。
しかし、CSS上の値はCSSピクセルという論理的なピクセルで指定しています。
これにより小さくなりすぎてしまう問題は解消されているのですが、デバイスピクセルがCSSピクセルよりも大きいことに変わりはなく、
画像が引き伸ばされて表示されてしまうことで、ボヤけてしまう問題が発生します。
Retina対応
今やAndroidでもデバイスピクセル比が2や3の端末が多数登場しており、Retinaディスプレイに限らずこの対応が必要です。
デバイスピクセルとCSSピクセルの比率を、デバイスピクセル比(device pixel ratio)といい、CSSやJavaScriptで取得することが可能です。
例えば、device pixel ratioが2だったら、縦横のサイズがそれぞれ2倍の画像を表示させるといった処理ができます。
当然ですが、その解像度に対応した画像は新たに用意する必要があります。
まとめ
ひゃー。テキストだけだとこの手の話はちゃんと伝わってるか、自信が持てません(>_<)
解像度って色んな場面で使いたくなってしまいますが、この辺りの知識はしっかりと持っておかないといけないと思ったので書いてみました。
余計に混乱を招いてしまったらすみませんでした。m(_ _)m
これを踏まえた上で、次回はプログラマ向けにMediaQueriesについてきっちり書きたい。書けるかな。
とりあえずコミケ終わってからだな！！！！１１
CYBIRDエンジニア Advent Calendar 22日目は@takeshi_hondaさんです。
「プログラミングがはかどる音楽TOP10」ということで、気になりますね！
私は普段はBABYMETALとかアニソン（I've系と妖精帝國が多い）とかクラブ・ミュージック（BEMANIシリーズ系）とか同人・ニコニコ系音楽（東方ボーカル・ミクトランスとか）をよく聴くんですが、テンション上がる系の曲ばかりで自分で選曲してしまうと全くプログラミングが捗らないので、NsenをBGMにしてることが多いです。
ではでは！