| web creators特別号 |
| スマートフォン・ソーシャルメディア・WordPress Web制作テクニック総特集 |
スマートフォン 02
スマートフォンデザインの基本2 - コーディングのポイント
スマートフォンではCSS3やHTML5などの最新の技術が多く使える反面、 回線やCPUの制限からデリケートなコーディングが求められる。ここではスマートフォンサイトを作成する上でのコーディングテクニックについて解説していこう。
解説／西畑一馬（株式会社まぼろし）
BROWSER iOS Andoroid
スマートフォンサイトのデザインを考えるうえでは、PCサイトと違う点をしっかり理解しておくことが重要だ。たとえば、スマートフォンはPCと比べて画面サイズが小さく、3G回線下では回線が細いためページの読み込みに時間がかかる。CPUも貧弱なため、JavaScriptなどの処理速度も劣ってしまう。
URLスキーム
スマートフォンサイトではPCと比較してURLスキームの活用が重要になってくる。たとえばPCサイトでも、a要素のhref属性に「mailto:nishihata@mdn.jp」と設定しておくとメーラーが起動する。このようにブラウザとほかのアプリケーションを繋ぐのがURLスキームだ。スマートフォンサイトではブラウザ内で完結させようとせず、適切なアプリと連携することでユーザー体験を向上させることができる【01】。メーラーを立ち上げるmailtoプロトコル以外にも、電話アプリを起動して電話をコールするtelプロトコル【02】などが存在する。
Google MapsのURLスキームはiPhoneでは「maps://」、Androidでは「geo://」と異なる。マップを利用するときは「<a href="https://maps.google.co.jp/maps?q=MdN&hl=ja(中略)&z=13">地図を見る</a>」といった具合に、Google MapのWebページに直接リンクを張るのがよいだろう。iPhoneでは地図アプリが、AndroidではGoogle MapのWebページが表示される。
ほかにもTwitter アプリを起動する「twitter://」なども存在するが、ユーザーがどのようなアプリをインストールしているかわかならい状況ではあまり多用しないほうがよいだろう。
【01】iPhoneではメーラーが直接立ち上がり（左）、Androidでは複数のアプリから適切なアプリを選択できる（右）。
【02】電話をコールするtelプロトコル。ハイフン(-)はあってもなくてもよい。
電話番号自動設定機能
iPhoneではtelプロトコルのURLスキームを自動設定する機能がある。たとえば「03-000-000」といった電話番号のように見える文字列に対し、「<a href="tel:03-000-000">03-000-000</a>」というHTMLに自動変換する機能だ。一見便利な機能だが、FAX番号はもちろん、郵便番号、年号といった数字の並びはすべて自動変換してしまうため、意図しない箇所でも電話を発信してしまう場合がある【03】。対策としては、電話番号自動設定機能をmeta要素でOFFにして、telプロトコルで手動で電話番号を設定するのがよいだろう【04】。
【03】copyrightの年数がtelプロトコルで書き換えられる（左）。meta要素の設定で回避可能だ（右）。
【04】format-detectionのmeta要素にtelephone=noを設定することで電話番号自動設定機能をOFFにすることができる。
高速化に必要なこと(1)
ファイルサイズの最適化
スマートフォンサイトの特徴は通勤中や通学中などの移動時に閲覧されることが多い点だ。固定ネットワークと比較して、移動時の3G回線の転送速度は非常に遅い。そのため、スマートフォンサイトでは少しでも軽量化を図る必要がある。もっとも簡単なのが画像を極力使わないことだろう。「01-01 デザインのルール」でも解説したように、グラフィカルな表現には極力CSS3を利用しよう。画像を使う場合でも、ファイルサイズの軽量化は可能な限り行っておくとよい。
MacではImageOptimというソフトでディレクトリを選択するだけで簡単に軽量化を行うことができる【05】。WindowsではPNG Gauntlet（http://pnggauntlet.com/）というフリーソフトがお勧めだ。
同様にCSSファイルやJavaScriptファイルも軽量化を行っておこう。画像の最適化と同様にさまざまな圧縮ツールがあるが、YUI CompressorのOnline版が手軽に利用できる【06】。圧縮したいコードやファイルを指定すれば、不要なスペースを削除したり記述を簡素化してくれるので、簡単にファイル容量を圧縮できる。
【05】ImageOptimで軽量化した画像。大きい物で97.6%、小さいものでも9.9% の軽量化が行なわれたことがわかる。
【06】JavaScript / CSSの圧縮ツールのYUI CompressorのOnline版(http://www.refresh-sf.com/yui/)
高速化に必要なこと(2)
ファイルリクエストを減らす
読み込みを高速化するためには、ファイルの軽量化と同時に、セッション数を減らすことも重要だ。セッションとは、ページを表示する際に読み込む画像やJavaScriptファイル、CSSファイルなどのファイルへのリクエストである。たとえばa.cssとb.cssを読み込もうとすると2セッション発生するが、a.cssとb.cssを結合したab.cssのみを読み込むのであれば1セッションで済む。JavaScriptファイルやCSSファイルは細かく分割せず、結合して読み込んだほうがよいだろう。画像に関してはdata URIスキームを利用する方法がある。data URIではbase64エンコードと呼ばれる方法で画像ファイルをテキストデータに変換して読み込みを行う。通常は【07】のようにimg要素で画像を読み込むが、【08】のようにbase64エンコード化された画像を読み込むことで、画像ファイルのリクエストを減らすことができる。
data URIスキームの書式は【09】のとおりだ。最初に「image/png」や「image/gif」といった値を指定し、次にエンコートタイプであるbase64を指定する。そして最後にbase64エンコード化されたデータの記述を行う。
base64エンコードはdata URL スキーム作成（http://www.webcreativepark.net/labs/dataUrl/）などで手軽に行える。PCサイトでおなじみのCSSスプライトも、セッション数を減らすのに有効だ。【10】は200×200pxの画像を縦に並べた1枚の画像だ。普通に表示すると縦に並んで表示されるが【11】のHTML に【12】のCSSを適用することで、あたかも別の画像のように扱うことができる【13】。これにより通常3回発生するリクエストを1回に減らすことができる。スプライト化とdata URIスキームを併用すれば、画像のためのファイルリクエストは発生させずに済む。
base64エンコードやCSSスプライトはセッション数を減らすことはできるが、ファイルサイズが若干増えてしまう。そのため、あまり大きな画像では利用せず、小さな画像のみに利用するとよいだろう。
【07】通常の画像の読み込み。これにより画像へのリクエストが発生する。
【08】data URIスキームではbase64エンコード化された画像を読み込む。画像はテキストデータなのでリクエストは発生しない。
【09】data URIスキームの書式
【10】CSSスプライト用の画像。複数の画像を1枚の画像に結合している。
【11】CSS スプライトのHTML
【12】CSS スプライトのCSS
【13】CSSスプライトでそれぞれ個別の画像のように表示を行う。
高速化に必要なこと(3)
CSS3の表現を生かす
スマートフォンサイト作成の醍醐味は現状ではPC サイトで使うのが難しいCSS3の多くの機能が利用可能な点だ。CSS3を利用することで、これまで画像で表現せざるを得なかったデザインがCSSのみで表現できるようになった。代表的なデザインは角丸だろう。CSS3のborder-radiusプロパティ【14】を利用すれば、角丸が簡単に表現できる【15】。ただし、border-radiusプロパティで表現された角丸は、Android端末ではアンチエイリアスが効かず、少しジャギーが見える点に注意しよう。
また、CSS3のグラデーションも使い勝手が良い。現在、スマートフォンでは-webkit-gradient()の記述にしか対応していない端末と、新しい書式である-webkit-linear-gradient()にも対応している端末が存在する。そのため、-webkitgradient()、-webkit-linear-gradient()、linear-gradient()の3種類の記述を併記しておくのが安全だ【16】【17】。グラデーションでは単純にグラデーションを書くだけでなく、さまざまな模様を作成することが可能だ。たとえば【18】のコードは縦横に90%の位置までのカラーを白、それ以降のカラーを赤に指定することで、格子状の模様を描画するCSSだ【19】。このように画像を使わなくても、CSS3を使いこなすことで多彩な表現が可能になる。
【14】CSS3のborder-radiusプロパティ。
【15】border-radiusプロパティで表現された角丸。
【16】グラデーションを描画するCSS。
【17】描画されたグラデーション。
【18】グラデーションで格子状の模様を描画するCSS。
【19】グラデーションで描画された格子状の模様。
Viewportのしくみ
もうひとつ、スマートフォンのコーディングで重要なのがViewportだ。スマートフォンサイトではmeta 要素のViewport機能を利用することで、CSS解像度の制御が可能になる。スマートフォンサイトにおける一般的なViewportの記述例は20 のようになる。Viewportのcontent属性にdevice-width（デバイス幅） を指定することで、devicePixelRatioを基準に算出したCSS解像度にもとづいて、サイト幅がデバイスに最適化される（「01-01 デザインのルール」を参照）。
initial-scale=1は読み込み時のズーム率の設定だ。iPhoneではランドスケープ時にページを読み込むとページを1.5倍に拡大して表示する特殊な仕様があるため、これを制御するための記述となる。
maximum-scale=1はページの拡大を抑制している。iPhoneではポートレート状態で読み込んだページでも、ランドスケープに傾けると1.5倍に拡大して表示されるため、この挙動を制御するためによく利用される記述だ。ただしmaximumscale=1を指定しているとユーザーがピンチ操作でページを拡大表示できなくなってしまう点に注意しよう。
このようなiPhone特有の癖を修正できるのが「iOS-Orientationchange-Fix」だ21 。このスクリプトを読み込んでおけば、maximum-scale=1をつけなくてもiPhoneの挙動をAndroidと揃えてくれる。
【20】スマートフォンサイトでよく利用されるViewportの設定。
【21】「iOS-Orientationchange-Fix」の配布サイト
（http://filamentgroup.com/lab/a_fix_for_the_ios_orientationchange_zoom_bug/）。
便利なフレームワーク
スマートフォンサイト制作の効率を向上するソリューションとして注目されているのが、スマートフォン向けフレームワークだ。この種のフレームワークではHTMLやJavaScriptに簡単な記述を加えることでスマートフォンに最適化したサイトデザインを構築してくれる。また、デバイスごとの特性の違いなども吸収してくれるため、制作者は端末の違いを気にせずにスマートフォンサイトを制作できる。いま最も注目を浴びているスマートフォンフレームワークが「jQuery Mobile」だ【22】。詳しくは次項以降で解説されているが、John Resig氏が開発するjQuery Mobileは、HTMLの記述のみでスマートフォンサイトを構築できるように設計されている。知名度が高いため、Adobe DreamweaverやFirefoxに作成アシスト機能が搭載されたり、テーマ作成機能のThemeRoller【23】などの補助機能が多く存在するのも魅力のひとつだ。
なお、そのほかにも代表的なスマートフォンフレームワークとして「iUI」【24】、「jQTouch」【25】、「Sencha Touch」【26】、「jqMobi」【27】などが挙げられる（詳しくは「01-06 スマートフォン向けフレームワークの紹介」で解説する）。 
【22】jQuery Mobile（http://jquerymobile.com/）
【23】テーマ作成機能のThemeRoller （http://jquerymobile.com/themeroller/）
【24】iUi（http://code.google.com/p/iui/）
【25】jQTouch（http://jqtouch.com/）
【26】Sencha Touch（http://www.extjs.co.jp/products/touch/）
【27】jqMob（http://www.jqmobi.com/）
[目次に戻る]
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。
※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。
