多様化するデバイスへの対応その2：レスポンシブは万能か？

　ただ、上記のUser-Agentに頼ったデバイス対応にはそれぞれ異なるUIを実装しなくてはいけないために、その分、作業工数がかかってしまいます。そこで昨今注目を浴びているのは「レスポンシブ・Webデザイン」と呼ばれる手法です。1つのHTML、CSS群で構成されたページを様々なデバイスでも見やすく表示することを目的としています。

　具体的には、MediaQueriesと呼ばれるCSSの機能を使い、画面の幅などに応じてCSSを変更したり、ブラウザの状態によってレイアウトを動的に変更するFluid Layoutなどを駆使して「レスポンシブ」にします。レスポンシブ・Webデザインに興味を持った方は、現状それに対応するたくさんのCSS Frameworkが公開されているので、利用してみるのもいいでしょう。

　万能そうに見えるレスポンシブ・Webデザインですが、はたしてすべてを解決することができるのでしょうか？　個人的には答えは「NO」です。というのも、レスポンシブ・WebデザインはCSSもしくはJavaScriptでUIの変化を持たせるソリューションなので、一番最初にユーザーがロードするHTMLそのものについては関与できません。なので、どうしても制約があったり、ハック的な実装が必要になったり、描画が遅くなったりと問題が出てきます。

　レスポンシブで対応するか、User-Agentごとに違うHTMLを出力するかはケースバイケースで考えた方がいいでしょう。

Webサービスと連携するアプリの裏側

　ブラウザで閲覧するWebページについて解説をしてきましたが、iOS/Androidアプリについて簡単に仕組みを紹介しましょう。

　Webサービスと連携するタイプのアプリに関しては当然、Webの情報を取得したり、コンテンツを投稿したりする機能が必要です。それを実現するには、Web APIと呼ばれる仕組みを実装しなくてはいけません。

　通常のWebサイトは、クライアントからのリクエストに対してHTMLやCSSなどを返してブラウザで表示することを前提としています。Web APIの場合は、アプリからのリクエストに対してよりプログラム上で扱いやすいJSONやXMLと呼ばれる形式で情報を返したりするのが特徴です。

このXXXっていうURLにリクエストしたらXXXっていう情報の一覧が取得できるよ

　と言ったルールを決めて、モバイルアプリ制作サイドとWeb API側でそのルールを共有し、実装に入っていくことになります。ちなみに「WebView実装」と呼ばれるWebページをアプリ内で呼び出す方法もありますが、長くなるので、今回は詳しい言及を避けておきます。