スマートフォン・タブレット 4-01
スマートフォン／タブレット対応の最新潮流（後編）

急速に普及するスマートフォンとタブレット端末。Webサイトを構築する際に、もはやこの二つを無視することは不可能な状況となっている。ここでは、Web制作現場におけるスマートフォン／タブレットの流れについて解説する。

制作・文／糟谷博陸（株式会社サイズ）

プログレッシブ・エンハンスメント

全てのブラウザで同じ見た目、同じ機能を提供する「クロスブラウザ」という考え方を元にこれまでのWebサイト制作が行われることが多かった。今でもIE6などのレガシーブラウザも含めて同じ見た目を求められることもある。この考え方だとHTML5やCSS3などの新しい技術が使える高機能なブラウザ（モダンブラウザ）であってもその機能が生かされることがない。レガシーブラウザでは機能としては問題ないレベルのものを提供し、モダンブラウザではよりリッチな見た目、機能を提供しようという考え方が「プログレッシブ・エンハンスメント」である。

プログレッシブ・エンハンスメント事例

（株）カプコンの「カプコンフィギュアービルダー」では、人気ゲームシリーズの魅力を最大限に引き出し、かつユーザーに見やすく使いやすいモバイルサイトを構築するために、スマートフォンでは「CSS3」「jQuery Mobile」を使用して実装。ボリュームが多くなりがちなメニューや複数のサムネイル画像を、ワンタップで表示／非表示にするといった動きをつけている。JavaScriptが使用できない携帯電話からも同様のコンテンツが閲覧可能なように制作し、「プログレッシブ・エンハンスメント」を実現している【01】。

【01】株式会社カプコン：カプコンフィギュアービルダースマートフォン／携帯サイト

リッチインタフェース対応

「プログレッシブ・エンハンスメント」の考え方はHTML5やCSS3に対してだけではない。たとえば、「iPhone」、「iPad」ではFlashを閲覧することができない。そのためFlashの代替処理を行うことは最低限必要なことだ。そこで、JavaScriptを中心としたユーザーインタフェース・テクノロジーを使用することで、よりリッチなユーザーエクスペリエンスを提供するスマートフォンサイトを制作することになる。

現在、有効な手法としてはユーザーインタフェースとコンテンツを分離し、コンテンツはXMLで管理しておく手法である。たとえば、PCサイト用にFlashで制作されたコンテンツをXMLとして管理していれば、HTML5 canvas タグ＋JavaScript やAjax、ネイティブアプリによるユーザーインタフェースを追加することで「iPhone」、「iPad」での表示が可能になる。さらに携帯サイトではFlash Liteのユーザーインタフェースを用意することで表示できる。コンテンツをXML化しておくことにより、必要なユーザーインタフェースを追加すれば、それぞれのデバイスにふさわしいリッチなユーザーエクスペリエンスを提供することができるようになる【02】。

リッチインタフェース対応事例

新光源や光学技術の開発を核に、独自の応用技術を拡げ「光創造企業」へと発展してきたウシオ電機コーポレートサイト。ここでは、スマートフォン対応のリッチインタフェースを体験することができる。トップページのプロモーションエリアをFlashからAjaxに変更することで、iPhone・iPadからでもPCと同じ動きを実現。このAjaxは CMS化されているが、Flash・iPhoneアプリでもユーザーインタフェースとコンテンツXMLを分離していれば同様の手法で構築可能である【03】。

【02】リッチインタフェース対応についてのイメージ。

【03】ウシオ電機株式会社(http://www.ushio.co.jp/jp/)

ワンソース・マルチデバイスへ

スマートフォン専用サイトを追加で制作し、PC・携帯・スマートフォンの3つのサイトをそれぞれバラバラに運用するとなると、高いコストがかかり負荷も上がる。またこれから新しいデバイスが登場するたびに各デバイス用の新しいサイトを制作し、運用する制作手法では膨大なコストが積み重なるという問題が発生する。結論としてはワンソース・マルチデバイスが新しい制作手法の解決策の一つとなる。

コンテントネゴシエーション

コンテントネゴシエーションとは、言語やファイルタイプなど複数の表現形式のファイルをサーバ上に用意しておき、ブラウザからのリクエストに応じてサーバが最適なファイルを自動的に判断してレスポンスを返す仕組みのことである。動的CMSではサーバではなくプログラムで同様のことを行っている。

まずはメインとなるPCのHTMLテンプレートから、スマートフォン用のHTMLテンプレートを制作する。共通で使用するコンテンツは各HTMLテンプレートに合わせて変換を行いコンテントネゴシエーションによるワンソース・マルチデバイスサイトができあがる。新しいデバイスが登場しても、テンプレートを追加することによって運用コストが増加することなく管理できるようになる【04】。

コンテントネゴシエーションのメリットとしては全く違うテンプレートを用意することができるのでコンテンツ内部以外は各デバイスに細かく最適化できる。デメリットとしてはディレクトリとページが各デバイスで完全一致となるため、デバイスごとに構造を変更することができない。最適なファイルを自動的に判断するための設定が必要だ。

コンテントネゴシエーション事例

慶應義塾大学SFCのWebサイトはXMLで全てのコンテンツを管理するCMS（Web Meister）で構築。

CSSでデザインを3つに分けて表示することが可能であり、ユーザーの好みに合わせたクリエィティブを表現。スイッチでデザインを切り替えられる仕組みをコンテントネゴシエーションで実装し話題となった。「CSSレイアウトの利点を目で見える形で示した日本で最初の試みだと言ってもいい。」（注）【05】【06】【07】。

（注）『Web Designing 2011年6月号』（株式会社マイナビ　2011年5月18日発売）より引用

【04】コンテントネゴシエーションについてのイメージ

【05】慶應義塾大学湘南藤沢キャンパス(2004年4月〜2008年12月)

【06】

【07】

[目次に戻る]

【本記事について】
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。

※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。