2011年7月18日月曜日

携帯サイトの作り方

2. XHTMLでベースを作る

PC向けのウェブサイトであれば、記述には HTML4.01 や XHTML1.1 など、いくつかの言語が使えます。 文字コードも SHIFT-JIS や EUC-JP、UTF-8など、様々な規格が使えます。 しかし、携帯端末向けのウェブサイトだと、使える言語や文字コードには制限があります。
記述に使う言語は「 XHTML Mobile Profile 1.0 」

携帯サイトを作るための言語としては、以前は「CompactHTML」や「HDML」などいくつかの規格がありました。 これらは、3大キャリア各社で採用規格や仕様が異なるため、単一ページで3大キャリアすべてに対応させるのは困難です。 また、スタイルシートで装飾が記述できないなど、不便でもあります。

現在発売されている携帯端末では、3大キャリアとも「XHTML」を解釈できるので、XHTMLで記述するのが良いでしょう。 XHTMLにもいくつかの規格がありますが、この記事では「XHTML Mobile Profile 1.0」を使って記述することにします。

「XHTML Mobile Profile 1.0」であれば、3大キャリア共通のページを作成できます。 また、検索エンジンからも「携帯サイト」であると認識されます。
※携帯端末向けのXHTMLとしては「XHTML Basic」がありますが、docomoが必要とするスタイルシートの記述方法が「XHTML Basic」では使えません(詳しくは後述)。 従って、現状で3大キャリア共通のページを作るには、「XHTML Mobile Profile 1.0」が最も良いでしょう。
文字コードは SHIFT-JIS

文字コードは、「SHIFT-JIS」を採用します。理由は、SHIFT-JISしか読まない端末があるためです。 作成したページは、文字コードを「SHIFT-JIS」にして保存して下さい。
※端末によっては、UTF-8やEUC-JPなどの文字コードが読めるものもありますが、SHIFT-JISしか読めない端末も多いため、SHIFT-JISで作成しておくのが良いでしょう。
携帯サイトを作るXHTMLソース(枠組み)

「 XHTML Mobile Profile 1.0 」を使って、文字コード「 SHIFT-JIS 」で記述するXHTMLソースは、以下のようになります。

■1行目:

XML宣言です。XHTMLで記述しているので最初にこの1行を書きます。 文字コードをSHIFT-JIS以外にした場合は、「encoding="Shift_JIS"」の部分を書き換えて下さい。 ただし、現状で携帯端末向けのサイトを作るならSHIFT-JISで作ることをお勧めします。(SHIFT-JISしか読まない機種があるため)

■2行目:

PC向けサイトと同じように、検索エンジン向けに紹介文を書いておきましょう。 必須ではありませんが、何か書いておくことをお勧めいたします。

■8行目:ページタイトル

タイトルは常時表示されない端末が多いですが、閲覧者がブックマークする際や、検索結果に表示される際などに使われます。 短く分かりやすいタイトルを付けておきましょう。

次に、ウェブサーバからMIMEタイプを出力する方法です。

<?xml version="1.0" encoding="Shift_JIS" ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
   <meta http-equiv="Content-Type" content="application/xhtml+xml ; charset=Shift_JIS" />
   <meta http-equiv="Content-Style-Type"  content="text/css" />
   <meta name="description" content="紹介文" />
   <title>ページタイトル</title>
</head>
<body>

(--- 本文 ---)

</body>
</html>