スマホ最適化でやったこと

On 2011年4月28日, in Android, CSS3, iPhone, JavaScript, jQuery, Web制作, スマートフォンサイト制作, by kosuke

この記事のURLをスマートフォンに送る

※Androidでアクセスされた方は使用感をいただけると幸いです。
（サイトトップ）

先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。

このサイトのPCビュー

同時に、基本的なスマホ最適化もおこなっています。

ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。

ちなみに、このサイト自体はまだまだ作りかけでして…
そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです（笑）
（IE系ではちゃんと表示されません…そのうち手入れします。すみません）

どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。

では、以下にスマホ最適化でおこなったことをまとめてみました。
（ちなみに対象としているスマートフォンはiOSデバイス（iPhone, iPod Touch）、Androidです）

1.PCとスマートフォンの振分け

基本は、CSSとJavaScriptのみでレイアウト変更しています。

PHPではUA判定してスマートフォン用のCSSとJSを読み込む数行を加えた程度で、WordPressのテーマのスイッチなどはおこなっていません。

<link rel="stylesheet" href="http://blog.kaleido-jp.net/wp-content/themes/station2/iLayout/css/iLayout.css">
 <link rel="stylesheet" href="http://blog.kaleido-jp.net/wp-content/themes/station2/css/istyle.css" />
…
<script type='text/javascript' src='http://blog.kaleido-jp.net/wp-content/themes/station2/iLayout/js/iLayout_ui.js?ver=0.1.0'></script>

スマートフォンビュー

HTMLソース的には、上記の3行を変えただけでスマートフォン最適化を実現しています。

場合によっては、WordPressのスマホ用テーマを作って、スイッチしてもいいと思うのですが、今回はその方法は見送りました。

なぜかというと、別のテーマを作るということは、サイトの構成を変えたくなったとき
基本的に2つのテーマを管理・更新しなくてはいけなくなるなーと。

CSSとJSによるレイアウト変更であれば、基本的にPCサイトの要素はそのまま引き継げるので、要素の取捨選択や変更することに集中でき、変更するファイルがCSSとJSのみとなり効率が良いからです。

PHPテンプレートを変更する必要がなくなります。

もちろん、サイトを管理する人が複数いるとか、運用体制に余裕がある場合は、テーマ切替による最適化でもよいと思います。

また、iPhone3GS全盛時代までは、CSSのメディアクエリで振り分けることもできたのですが、今現在横幅が480px以上のAndroid端末がだいぶ多いので、サーバ言語かJSなどでUA判定して振り分けるようにしましょう。

2.viewportの設定

ほとんどお決まりの記述ですね。

1	`<meta` `name="viewport"` `content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">`

これについては、いろんなサイトで情報が出ていますので、説明は割愛します。
下記サイトなどをご覧ください。

3.ホーム画面アイコン（iPhone）、ショートカットアイコンの設定（Android）

1	`<link` `rel="apple-touch-icon"` `href="http://blog.kaleido-jp.net/wp-content/themes/station2/iLayout/Images/WebClipIcon.png">`

ホーム画面アイコンの設定

（アイコンがダサいですがスルーで…）

この記述をおこなうことで、iPhoneならホーム画面に追加する際のアイコン、Androidならショートカットアイコンを設定できます。
（iPhoneは用意した画像に、自動的に磨き処理がかかって、いい感じになります）

余談ですが、「スマートフォン対応しました！」とアピールしているものの、この設定がされてないサイトをたまに見かけます。なんだか、アピールしているだけに惜しい感じが出てしまうので出来るだけ設定しておいた方が良さそうです（笑）

4.横向き時のテキスト拡大の無効化

スマートフォン時のCSSには次の記述をしています。

body {
       …
        -webkit-text-size-adjust: none;
       …
}

デフォルトのまま

拡大表示無効

これを行うことで、横向きしたときのテキストの自動拡大表示を無効にします。最近は拡大をしないのが一般的のようです。拡大表示されちゃうとなんだか不自然な印象を受けます。

比較していただければわかるように、情報量が全く違います。

5.リキッドレイアウト

このサイトはスマートフォン時には、コンテナ要素をwidth:100%としており、内部要素も必要に応じて横向きにした際に横幅が広がるレイアウトを組んでいます。

悪い例：横幅固定にした場合の横向きビューのイメージ

たまに横幅320pxなどとしたサイトを見かけます。別にそれがいけないというわけではないですが、問題はAndroidで閲覧した時です。iPhoneはレイアウトの組み方によっては、横向きにしたときに自動的にフィットしてくれますが、Androidでは純粋にその固定幅で表示されるため、以下のようなイメージになります。

左右に無駄な余白ができてしまい、なんだか不自然な感じになってしまいます。

6.スマートフォンならではのユーザーインターフェースの実装

フリックできるスライドの実装

サイトトップのバナーは、ユーザーがフリック操作が出来るようにしています。
トランジションはCSS3、UIの構築にはjQueryを使って自前プラグイン化してます。

今後いろんなサイトで使い回せるように、実装は下記の1行で済むようなプラグインを作っています。

1	`$('#mainImageArea>#mainImages ul li').flickSlide({target:'#mainImageArea', duration:5000});`

スマートフォンビュー

このUIはけっこう手の込んだことをしています。

スマホサイトは横向き時というのを、念頭においてリキッドレイアウトという大前提で組む必要がありますが、絶対配置（position:absolute）などの要素を使うことになると、かなりハードルが高くなります。今までのPCサイトでのCSSレイアウト術より高度なスキルと発想が求められるのでは〜？と思っています。

後日のエントリでプラグインの説明と配布をおこなうつもりです。

ちなみに、このUIはAndroidでたまーにバグることがあります。どうやらYahooさんのサイトなどを見ると、iPhoneではフリックが有効になっているのに、Androidではフリック無効となっているので、まだまだAndroid向けサイトではフリックの実装はおこなわない方がよいのかも知れません。