【PHPで作る】初めての携帯サイト構築

第1回 PCサイトと携帯サイトの違いを知る

この記事を読むのに必要な時間:およそ 3 分

HTMLとXHTMLでできること

画面の記述方法は前項でも記載したHTMLやXHTML以外にもありますが,現在の多くの端末ではこの2つが主流です。携帯サイトを作る際は基本的にこのどちらかを使うことになります。まず各端末の対応状況は次の通りです。

表2 XHTMLの対応状況

キャリア対応状況
docomo i-mode対応HTML4.0以降のFOMA端末
au WAP2.0ブラウザ搭載端末(WINシリーズは対応)
SoftBankC型, P型:XHTML非対応
W型, 3GC型:XHTML対応

対応端末を確認したら,次にHTML,XHTMLどちらを使うのかを決定します。基本的にXHTMLをオススメしたいのですが,携帯サイトの場合XHTMLへの対応が面倒なので注意が必要です。XHTMLとHTMLとの表現の大きな違いは「divタグを使って任意に背景色が使える」といったところでしょう。逆に言えばそれに対して大きな意味を持たないのであればHTMLで作成しても構いません。通常XHTMLでは外部CSSに定義しデザインと表現の分離などが行えますが,docomoの端末では外部CSSに対応していません。またレイアウトを調整するpaddingやmarginといったボックス系のstyleも基本的に対応していないことが多く,XHTMLであることの恩恵を受けることは少ないと言えるでしょう。XHTMLはHTML以上に各キャリア間で記述方法や対応が異なっています。またタグに記述する量が増えるため,容量を少しでも小さくしなければならない携帯サイトには必ずしも良いことばかりとは言えないのが現状です。表現したいことやデザインしたいことを含め,どちらを利用するのかを決定する必要があります。

XHTMLはW3Cによって勧告されており標準化されていますが,携帯の世界では各キャリアごとに仕様が異なります。キャリアが対応しているXHTMLの仕様は次の通りです。

表3 XHTMLの仕様

キャリア仕様
docomo 「XHTML Mobile Profile」をベースにして,iモード対応HTMLとの互換性を意識して策定したもの
au 「XHTML Basic」をベースにauの独自拡張機能を追加したもの
SoftBank 「XHTML Mobile Profile」をベースに,SoftBankの独自拡張機能を追加したもの

また動的な画面でXHTMLを出力する場合は,HTTPレスポンスのヘッダに注意しましょう。PHPでは何も指定しない場合HTTPのheaderには「Content-Type: text/html」が記述されます。しかしこのままではdocomoにおいてXHTMLが正しく表示されません。XHTMLを利用する場合は画面を出力する際に,HTTPレスポンスヘッダのContent-TypeにXMLであることを伝える必要があります。

HTTPレスポンスのContent-Typeフィールド

header('Content-Type: application/xhtml+xml;');

対象とする端末を決定する

携帯は各キャリア,端末によって対応を変えなければならないことを理解して頂けたかと思います。そのため開発に入る前には「作成する携帯サイトはどのキャリア・どの端末に対応するのか」をきちんと決定しておく必要があります。これを決めずに開発を始めてしまうと「この端末ではきちんとみえない」といったトラブルに発展します。携帯サイトを作る際にはまずその違いを理解し,何を使っていくのかを事前に決定するようにしましょう。

次回は携帯キャリアと端末を判別する方法について説明していきたいと思います。

著者プロフィール

荒木稔(あらきみのる)

京都出身。ホテルマンを経て,基幹システムの開発などに従事した後ウェブクリエイターとして独立。利用者にもっと近いサービスを提供したい想いから,携帯を中心とした企画/開発/執筆/講演活動を行う。近著に「PHP×携帯サイト デベロッパーズバイブル」(ソフトバンククリエイティブ)。家族のための携帯サイト「ファミリーモバイル」(http://www.fmob.jp)を立ち上げ現在に至る。

memokamihttp://memokami.com