携帯サイト開発で考慮すること

PCサイトの作成経験者が初めて携帯サイトを作るときには、どのような所に違いがあるのかをまず認識しなければなりません。PCサイトの場合ブラウザの数も限られており、またそれぞれの動作も大きくは異なりませんが、携帯サイトではキャリアはもちろん機種ごとにも動きが変わってきてしまいます。そして携帯サイトはPCと違い、ブラウザのバージョンアップができません。そのため広く使ってもらうサイトを作るには古い機種にも対応しなければならず、多種多様な仕様の端末を想定して開発をしていく必要があります。そのため開発の前にどのような点に気をつけなければならないかをきちんと認識しておく必要があります。

携帯サイトの開発において、最初のポイントは「携帯端末で画面を正しく表示すること」です。PCサイトと同じように携帯サイトを作成すると、画像が表示されなかったり、画面レイアウトが崩れたりといった現象が起こってしまいます。まずは携帯サイトを正しく表示することから始めてみましょう。

サイトを作る前の前提知識

携帯サイトを作る前にまず気をつけるポイントを見ていきましょう。1つめが「画像の形式」です。PCサイトの場合、gif、jpg、pngといったさまざまな画像形式が利用できますが、携帯サイトは機種によってjpgやgifが利用できないといったことがあります。事前にきちんとチェックしておく必要があります。

各端末の表示幅や高さにも注意が必要です。現在発売されている端末では横幅240pxが多いですが、中には横幅120px程度の物や、はたまた480pxのものもあります。1つの画像を同じように画面に出していたのでは表示されなかったり、画面に対して小さくしか表示されなかったりします。そのため対応している画面サイズはもちろん、容量なども合せて、各端末ごとにプログラムで調整して出力するなどの工夫が必要になります。

次に気をつけるポイントは「画面の記述方法」についてです。画面を表現するために用いる記述方法を最初の段階で決定しておく必要があります。携帯端末はそれぞれに応じて記述方法がいくつかあり、HDML、CHTML、MML、HTML、XHTMLなど混在している状況です。そのため作りたい画面のレイアウトなどを考慮に入れマークアップする言語を決定する必要があります。

3つ目はページ容量です。携帯サイトは表示できる容量が小さいため、気をつけていないとすぐにサイズオーバーしてしまいます。最近発売されている端末では1ページ当たり100Kほど使えるようになってきており安心ですが、古い端末の場合そこまでの容量を利用することはできません。またau機の端末では、1ページあたり100Kといえど、テキスト部分は9Kまでにするといった縛りがあります。そのため画像を抜いたテキストの部分で考えた場合、かなりスリムに書かないと「表示できません。」と行ったエラーになってしまいます。

まずはこれらのことを考慮に入れれば、簡単な携帯サイトを作れることになります。逆に言えば「必要最低限のHTMLタグしか使わない」「⁠小さい容量しか作らない」「⁠見られない端末は切り捨てる」くらいのサイトであれば、特に意識する必要もなく、PCサイトと同じような感覚で作ってもよいと言うことになります。

次はHTMLとXHTMLの違いについてみていくことにしましょう。

HTMLとXHTMLでできること

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

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

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

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

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

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

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

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