こんにちは、OneStepです。

スマートフォンサイトのコーディングを行うとき（デザインも含む）に
当方が気をつけていることをいくつかご紹介します。

——————————————-

■ポイントは「HTTPリクエストの最小化」

HTTPリクエストとは……
HTMLファイルが呼び出されるときには、
その画面を構成するために他のCSSファイルや画像ファイルもHTMLの文書に従って呼び出されます。
この呼び出しのことをHTTPリクエストと言います。
（厳密には違いますが、大雑把にはこのような解釈ではないでしょうか）

このHTTPリクエストはPCで呼び出す場合には大した問題にはなりません。
というのもリクエストに対する処理やエラー時の対応がしっかりしているからです。
また大体の場合、インターネット回線自体も最低限ADSLが整っているでしょうし、
ADSLクラスの回線であれば、一般的なWebサイトのダウンロードには困りません。

しかしスマホの場合は話が違います。
光回線やADSLとは違う、不安定な無線接続（３G回線含む）のため、
実際の処理が煩雑になっていたり途切れたりすることが起こりやすいのです。
これはファイルそのものの肥大化よりも性質が悪いと言えるでしょう。

——————————————-

ちょっとしたスマートフォンサイトのコーディングのテクニックとしては、
以下のようなことが挙げられます。

■1.CSSスプライト

一枚の画像の特定範囲を表示させる方法です。
リストマークなどに多様されるCSSの技法ですね。またリンクなどでも使用されることがあります。
読み込む画像が一枚に集約されているため、画像の枚数分だけHTTPリクエストがかかるのではなく、
一回のHTTPリクエストですべての画像が読み込めます。
※ただし画像そのものの肥大化も起こるので、バランスを考えるようにします。

■2.CSSファイル・JavaScriptファイルの枚数の削減

PCサイトではメンテナンス性を重視して数枚のCSSファイルを作成し、
importを使っていることが多いかと思います。

しかしCSSファイルが多数ある場合、CSSファイルの枚数分だけHTTPリクエストが発生します。
これを抑えるためすべてのCSSファイルを統合するか、
どうしてもやむを得ない場合にのみ２枚にする、といった程度にするのがベストでしょう。

ただしJavaScriptはファイルをまとめることにより
コンクリフト（衝突）の可能性が上がります。
こちらは状況を見て判断するのがベストでしょう。

■3.CSS3を利用

IEの対応状況によりまだまだ足並みが揃えられないCSS3ですが、
スマホの場合はIEがない※こともあり、ほとんど気にする必要がありません。
（※Windows phoneの今後の動向により変わることもありえます）

したがってドロップシャドウや角丸、グラデーションなどを利用することで
画像の枚数を減らすことが可能になり、結果としてHTTPリクエストが減少する方向に働きます。

ただしこれらのレンダリングの処理には多大なマシンパワーが要求されると言われており、
２０１３年夏の段階では、一説には角丸・グラデーション・ドロップシャドウすべてを使用すると
２０倍の処理能力を使ったという報告もあります。
著しくCSS３に傾倒するのではなく、状況を見て使用するのがよいと思われます。

——————————————-

つらつらと画像もなく書いてみましたがいかがでしょうか。
もちろんこれらのことは、スマホの能力向上、インターネット回線の技術向上によりまだまだ変わってくることだと思います。

こういった技術のトレンドを総合して、そのときごとに一番よいものをご提供できるよう頑張って参りますので、よろしくお願いいたします。