スマートフォン（以下、スマフォ）勢やタブレット勢の勢力は、なかなかのものです。
パソコンなんて持ってない人はたくさんいたりします。むしろ普通ｗ
パソコンとスマフォに対応する
サイトの製作者側からすると、面倒なものですがｗ
そのままPCサイトを出力すると、デザインが崩れたり、情報量が多すぎる等の問題が生じてしまいます。
よって、ふつうは以下のいずれかで対応をします。
- スマフォとパソコンでページを分ける。
- 面倒なので一緒のページ。見た目（スタイルシート）でなんとかする。
後者は「レスポンシブ対応」なんて呼ばれるものです。
レスポンシブで良いんじゃね？
はい、良いです。
あまり違い（こだわり）がなかったり、大人の都合^^;だったり、急いでたりするときは、レスポンシブがオススメです。
レスポンシブ自体が悪いものでもないですし、選択したからと言って問題ありません。
ただし、作る前にこれだけは考えておく必要があると思ってます。
- スマフォとパソコンのデザインが載るので、一般的にロジック・転送量が増える
- ある程度の違いまでは楽できるが、ある程度を超えるとやたら大変になる（後悔するｗ）
- 混じってるだけに、保守性が下がる
3は、根性で切り抜けられますｗ
ところが、1と2は、根性で切り抜けられない可能性があります。
ちなみに、Google先生も「ちゃんとスマフォ用のサイトを作った方が良いよ」と言ってますｗ
よって、大きなサイトを作りたい、まじめに作りたい、お金は十分もってる、期間も余裕な場合、ちゃんとページ分けをしておく方が無難だと思われます。
・・・前置きが長くなりすぎたので、強引に切り上げますが、今回はレスポンシブではなく、前者のデバイス別にページ分けをしてみたいと思います(; ･`д･´)
パソコン・タブレット・スマフォで別々のページを返すサンプル
パソコンとタブレットとスマフォそれぞれからアクセスされた際に、別々のJSPを呼び出します。
それぞれのJSPに各デバイス用のページを用意しておくことで、デバイス別にページを分離します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class PcTabletSpTestServlet extends HttpServlet { private enum DEVICE_TYPE { SMART_PHONE, TABLET, PC }; @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String jspPath = null; switch(getDeviceType(request.getHeader("user-agent"))) { case SMART_PHONE: jspPath = "/WEB-INF/jsp/sp.jsp"; break; case TABLET: jspPath = "/WEB-INF/jsp/tab.jsp"; break; case PC: jspPath = "/WEB-INF/jsp/pc.jsp"; break; } request.getRequestDispatcher(jspPath).forward(request, response); } private DEVICE_TYPE getDeviceType(String userAgent) { // //スマートフォン系 // //iPhone / iPod if(userAgent.indexOf("iPhone") != -1) { return DEVICE_TYPE.SMART_PHONE; } //Android if(userAgent.indexOf("Android") != -1 && userAgent.indexOf("Mobile") != -1) { return DEVICE_TYPE.SMART_PHONE; } // //タブレット系 // //iPad if(userAgent.indexOf("iPad") != -1) { return DEVICE_TYPE.TABLET; } //Android if(userAgent.indexOf("Android") != -1) { return DEVICE_TYPE.TABLET; } //その他なので、とりあえずPC扱い return DEVICE_TYPE.PC; } } |
実行結果
・iPhone / iPod、Androidスマフォからアクセス
→sp.jspが呼ばれます。
・iPad / Androidタブレットからアクセス
→tab.jspが呼ばれます。
・PCとかその他デバイスからアクセス
→pc.jspが呼ばれます。
サンプルの解説
HTTPヘッダに格納されている「USER_AGENT（ユーザーエージェント）」でどのようなデバイスからアクセスされたか識別しています。
ちなみに、テストはChromeの開発者ツールを使うと簡単にできますよ♪
※今回のサンプルは、そこまで正確な振り分けではないですが、今の世の中では、スマフォ・タブレットなら、iPhoneかAndroid以外を使う人はゼロに近いので、十分だと思います。
