コードで学ぶスマホサイト制作 第1回 スマホ環境の特徴
まずはスマートフォンの特徴を概観してみましょう。「スマートフォン」と一口にいっても、iOS、Androidなど複数のOSがあり、多くの機種があります。
- カテゴリー
- HTML/CSS >
- HTML/CSSの実践
発行
スマートフォンの特徴を知る
まずは、スマートフォンの特徴を概観してみましょう。「スマートフォン」と一口にいっても、iOS、Androidなど複数のOSがあり、多くの機種があります。
またデスクトップとは異なる環境を持っています。1つめは端末の画面が小さいこと。2つめは搭載されているブラウザのCSS3への対応度が高いこと。3つめは回線の通信速度がデスクトップ環境に比べ大変遅いことです。
スマートフォン環境の特徴
- 画面がデスクトップに比べ小さい
- 標準ブラウザのCSS3への対応度が高い
- 回線の通信速度がデスクトップに比べ遅い
HTMLやCSSをブラウザで表示する仕組みは同じですので、これまでのデスクトップ用のサイト制作ノウハウを流用できる一方で、上記のようにデスクトップとスマートフォンには大きな違いがあります。そのため、スマートフォンに特化した知識や技術が必要になってくるのです。
端末のさまざまな解像度
物理的な解像度も端末によってさまざまです。代表的なものでも4種類ほどあります。
- 320×480（px）
- 480×800（px）
- 480×854（px）
- 640×960（px）
これだけ解像度にバリエーションがあると、どの解像度を基準にデザインするのか迷ってしまいそうです。幅320pxを基準にデザインをしてしまうと、幅640pxの端末では、幅が1/2の状態で表示されてしまうのでは？などと思いがちです。
ピクセルレートという仕組み
通常、画面の大きさが同じであれば、解像度が高くなればなるほど、1ピクセルの大きさは小さくなっていきます。たとえば、幅30px、高さ30pxの画像があったとします。1ピクセルを900個使って描画するのですが、高解像度と低解像度ではピクセルの大きさが違うため、高解像度の画面上ではより小さく、低解像度の画面では、より大きく表示されます。
デスクトップのモニタでは解像度を変更できますので、上記の関係を擬似的に体験することができるでしょう。解像度を低く設定すると、ウインドウやアイコンは大きく表示され、ぼんやりとした画像になります。逆に解像度を高くすると、より小さくなり、文字や画像のエッジがくっきりとしてきます。
800×600にモニタを設定。ダイアログやアイコン類が高解像度に比較すると大きく表示される。
1280×800にモニタを設定。ダイアログやアイコン類が低解像度に比較すると小さく表示される。
もしスマートフォンが、上記のようにデスクトップと同様の仕組みであれば、1つのページが表示される大きさは、端末の解像度によってまちまちになってしまいます。そのままでは、同じような見栄えをキープすることは不可能です。
このような問題を回避するために、スマートフォン端末のWebKit系ブラウザ（iOSのSafari、Androidの標準ブラウザなど）は、devicePixelRatioというプロパティに対応しています。
devicePixelRatioとは、1ピクセルの描画を、デバイス上の何ピクセルで行うかを決定する値です。
| 物理的ピクセル数 | devicePixelRatioの値 | 表示ピクセル数 |
|---|---|---|
| 320px | 1 | 320 |
| 480px | 1.5 | 320 |
| 640px | 2 | 320 |
たとえば上記のようなdevicePixelRatioの値が設定されている場合、4px平方の画像がどのように描画されるか考えてみます。
devicePixelRatioが1の場合は、4pxはピクセル4つ分を使って描画されます（4×4＝16ピクセル）。2の場合は、4pxはピクセル8つを使って描画されます（8×8＝64ピクセル）。1.5の場合はピクセル6つが使われます（6×6=36ピクセル）。
devicePixelRatioによって4pxの描画に使うピクセルの数が変わってくる。
このようにdevicePixelRatioがあることによって、どの端末でも4px平方の画像は、人の目にはほぼ同じ大きさに見えるようになっているのです。ただ、すべてが同じというわけではありません。同じ大きさに見えたとしても、解像度が高い画面の方が、より多くのピクセルを使って描画されていますので、精細な表現が可能になります。
ほとんどのスマートフォン端末に標準搭載されているWebKit系のブラウザでは、JavaScriptでwindow.devicePixelRatioとすると、その端末に設定されている値を取得することができます。
var ratio = window.devicePixelRatio;
document.write("<p>このデバイスのdevicePixelRatioは"+ ratio + "です。</p>");JavaScriptのwindow.devicePixelRatioでWebKit系のブラウザに設定されている値が取得でき、iPhoneのSafariやAndroidの標準ブラウザで読み込むと数値が変化します。対応していないブラウザはundefinedとなります。
320ピクセルを基準にデザイン
以上の理由から、デザインは基本的には320pxを基準に制作すればよいということがわかります。Retinaディスプレイなど高解像度なモニタに対応するために、320pxを基準に、データはその2倍の640pxで作成する手法もありますが、基準となっているのは320pxです。
またデスクトップとの大きな違いとして、1ピクセル未満（0.5ピクセル）の描画も行われる場合もあることに留意しておきましょう。
スマートフォン基礎知識
- デザインは320pxを基準に
- 1ピクセル未満の描画も可能
CSS3の対応度が高い
次に、スマートフォンに搭載されているブラウザの特徴「CSS3対応度が高い」という点を考えてみます。
スマートフォンの代表的なブラウザといえば、iOS用Safari、Androidブラウザがありますが、そのほかにもFirefox、Opera、Dolphin Browserなどのブラウザがあります。MicrosoftのWindows Phone 7には、Internet Explorer 9ベースの専用ブラウザが搭載されています。
これらのブラウザをざっと分類すると、WebKitと呼ばれるレンダリングエンジンを搭載したiOS用Safari、Androidブラウザ、Dolphinブラウザがひとつのメイングループです。それ以外にFirefox、Opera、Internet Explorerがあると考えておくといいでしょう。
どのようなCSSに対応しているのか
具体的には以下のようなCSS3プロパティに対応しています（2012年6月上旬現在）。
rgba()
CSS Color Module Level 3（2011年6月7日付け勧告）
text-shadow
CSS Text Level 3（2012年1月19日付け草案）
background-image、backgrond-size、border-radius、box-shadow
CSS Backgrounds and Borders Module Level 3（2012年4月17日付け勧告候補）
display:flexbox
CSS Flexible Box Layout Module（2012年6月12日付け草案）
linear-gradient
CSS Image Values and Replaced Content Module Level 3（2012年4月17日付け勧告候補）
これらはW3Cで策定、もしくは策定中の仕様に沿ったプロパティですが、このままではWebKit系のブラウザで使用することができません。
というのも、これらのプロパティは「先行実装」という形で、ブラウザに機能が搭載されています。CodeGridでも何度か触れていますが、実験的な先行実装（独自拡張）を行う場合は、原則、ベンダープリフィックスと呼ばれる接頭辞をつける必要があります。
ここで紹介するプロパティのうちいくつかは、以下のようなベンダープリフィックスをつけて記述します。
| W3Cの仕様書 | ベンダープリフィックスあり |
|---|---|
| border-radius | webkit-border-radius* |
| box-shadow | -webkit-box-shadow |
| display:flexbox | display:-webkit-box |
| linear-gradient | -webkit-gradient |
*注：border-radiusのベンタープリフィックス
border-radiusに関しては、Google Chromeではベンダープリフィックスなしで使うことができますが、iOS用Safariではバージョンによって、必要な場合があります。
さらにプロパティによっては、W3Cの記述に単純に、ベンダープリフィックスをつけるだけでなく、プロパティの値の指定方法が異なっている場合があります。これは独自実装であるがゆえの不整合なのですが、一度、ブラウザに実装されてしまえば、例えそれがW3C仕様書と食い違っていたとしても、長期間利用が可能になります。これについては後述します。
スマートフォン環境だから使えるCSS3
CSS3はデスクトップ環境でも実用に耐えうるものばかりですが、デスクトップではCSS3に対応していない、あるいはChromeやSafariに比較すると、対応度が低いInternet Explorerが大きなシェアを占めています。それに対する手当てなしには、すんなりと導入はできません。
現在の状況では、CSS3など新技術をいち早く取り入れられる環境としては、やはりスマートフォン環境に分があります。
次回、これまでピクセルグリッドが実際のスマートフォンサイトを実装する際に、必要があれば使うことの多い、比較的安全なCSS3のプロパティや値を紹介します。
回線速度が遅い
もうひとつ頭に入れておかなければならないのが、回線速度のことです。スマートフォンの回線速度は、デスクトップ環境に比べ、かなり貧弱です。回線の込み具合に影響されますが、docomo Xiを除けば1Mbps程度の速度です。1Mbps程度というのは、現在のデスクトップ環境の10分の1以下の速度です。ADSLなどの2000年代初頭の通信環境を思い浮かべていただくといいでしょう。
あまりにも、容量が大きいページを作ると、表示も遅くなり、それだけでユーザーにストレスを与える結果になります。いかに少ない容量で、必要な情報とそれにふさわしい表現ができるのかをじっくり吟味する必要があります。
以上2点がスマートフォン特有の事情です。次回はこのうち「CSS3への対応度が高い」という点を取り上げて詳しく解説します。