スマートフォンへの対応は、今となっては当たり前になったわけだけど。
モバイルファーストという言葉も登場するくらいには重要なスマホ対応。
ざっくりで３つの方法があるからそれを解説。
１.PC版とスマートフォン版でURLを分ける
一番シンプルな方法。
まず、PCとSPで２種類のURLを用意し、
$(function(){
var ua = window.navigator.userAgent.toLowerCase();
if((ua.indexOf("windows") != -1 && ua.indexOf("phone") != -1)
|| ua.indexOf("iphone") != -1
|| ua.indexOf("ipod") != -1
|| (ua.indexOf("android") != -1 && ua.indexOf("mobile") != -1)
|| (ua.indexOf("firefox") != -1 && ua.indexOf("mobile") != -1)
|| ua.indexOf("blackberry") != -1){
location.href = './smartphone/';
}
});
こんな感じのもの用意して、PC版に貼れば、PC版のURLをスマホで見た時に自動でURLが切り替わるようになる。
aaa.co.jp/bbb.htmlをSPで見たらaaa.co.jp/smartphone/bbb.htmlに自動で変わる。
スマホには、今書いたjsの逆のことをすればいいだけ。省略するけど。
メリット
既存サイトをそのままにして対応できる
別ページを用意するから、既存ページのレイアウトなどは一切変えなくていい。
後で紹介する２つの方法だと、どうしてもソースコードが変わってしまうため、時間もかかるし技術も必要だし、今まで起きてなかった不具合が発生する可能性もある。
実装が簡単
javascriptに貼るだけだからそこまで専用知識なく対応することができる。
実際デザイナーの自分がやれてるわけだし。
実装が簡単であるということはどういうことかというと、メンテナンスだったり修正もしやすいってこともある。
デメリット
PC版をスマートフォンで見た時に最初のアクセス数が２回になる
自動で切り替わるわけだけど、一度PCのサイトにアクセスしてからすぐにSPにアクセスすることになるので、
ユーザーが最初サイトに入る時だけアクセス数が２回になる。
アクセス解析をしっかりしたいということならこのデメリットは大きい。
２.レスポンシブ
最近よく聞くレスポンシブにする。
レスポンシブというのは、PC版とSP版で、内容は同じだけどレイアウトを変えるようなもの。
まあ、厳密にはデバイスの横幅によってレイアウトを変えるんだけど。
グリッドレイアウトとかがわかりやすい。
http://www.nxworld.net/inspiration/japan-grid-layout-web-design-showcase.html
あと、以前紹介したBootstrapのグリッド関係を使えばレスポンシブにすることができる。
メリット
PCとスマホ両方を１つのURLで管理できる
１つで管理できるため、画像やテキスト１つ変えたらPCとスマホどっちで見た時でも変わってるってことができる。
小規模の変更には３つの中で一番対応しやすい。
SEOで有利（とされている）
レスポンシブでは単純にURLが１つになるため、SEO的には有利とされているし、Googleも推奨しているみたい。
http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html
ってかこれが本当なら一番大きいメリットってこれじゃね。
SNSでのシェアで有利
同一のURLになるから、PCで友達にシェアしたものを友達がスマホで見た時に楽に閲覧することができる。
まあ、他の方法でも違和感自体はそんなないからおまけ程度だと思うけど。
デメリット
重くなりやすい
PCの情報量をスマホでも読み込むわけだから、他の手法より重くなる。
通信制限のかかったスマホだと見れなくなる時もある。
ユーザー的にはこれが一番のデメリット。
中規模〜大規模修正には時間と労力が他よりかかる
レスポンシブはソースコードが独特であり、それを作るのにどうしても時間がかかってしまう。
時間がかかるということは、費用もそれなりにかかる（最終的には会社によるけど）。
メンテナンスも、配置を変えたりしようとすると他の手法以上に時間と費用がかかる。
要するにメンテナンスコストが高いってことだね。
不具合が起きやすい
これはコーディングする会社にもよるけど、とにかく不具合は起きやすい。
謎の隙間が生まれたり、テキストが少しはみ出てたりとか。
新しいスマホが出るたびに修正する可能性も生まれやすい。
これもメンテナンスコストか。
３.サーバー側で分ける
１で紹介した手法をサーバーで行う。
サーバーで行うことで、１と違い、URLを統一することができたり、２回アクセス数がカウントされることもなくなる。
やりやすい方法としてはmobifyとか。
メリット
URLを統一できる
２で説明したから省略。ってか２のメリット３つがこれだわ。
運用コストが少ない
運用していくに当たって、不具合が起きたり大規模修正をしない限りは一番メンテナンスが楽。
その分費用も安くなる・・・はず。
デメリット
ミスすると先祖返りが発生する
サーバー側の会社とサイト作成側の２つの会社で管理し続けるため、最悪先祖返り（更新前の状態に戻ってしまう）ことも発生する。
これはしっかりとどの会社が何をするのか明確にすることで回避することもできる。
サービスを利用するなら専用知識が必要
mobifyを利用するならそれの知識なども必要となり、少し学習コストがかかる。
３つの方法のうち、唯一サーバーに関わる方法っていうのが大きい。
少なくとも素人が適当に変えて反映できるものではなくなる。
３つの方法をあげたけど、個人的には３番目が一番いいとは思う。
最終的には、費用だったり、運用方法みたいなところからも考えてベストなのはどれかを選択していけばいいと思った月曜日の朝でした。
サイト朝更新すんのやめてー！