XHTML Mobile Profileを使ったモバイルページの作り方

モバイルページ(携帯電話対応ページ)をCHTMLで作っても、どの携帯電話でも問題なく表示されます。しかし、CHTMLはスタイルシート(CSS)が使えません。CSSを使を使ってモバイルページを作るなら、XHTML Basic か、XHTML Mobile Profileです。

XHTML Mobile Profile 1.0とは

W3C勧告のXHTML Basicに加えて、<b>、<hr>、<small>等のタグやstyleタグ等の拡張タグや属性を加えて、携帯電話向けにWAPフォーラムで仕様化されたものがXHTML Mobile Profileです。

従ってモバイルページを作るのならこちらの方が良いかも知れません。

XHTML Mobile Profile 1.0で書いたモバイルページの例

XHTML Mobile Profile 1.0で書いたモバイルページは1行目で XML文書楽天だということをブラウザに知らせます。普通のXHTMLやSSIの場合はこの記述で問題ありませんが、PHPの場合は先頭の行がエラーとなり表示できません。これは <? で始まるXML宣言が、PHPを省略して書く際の冒頭部分と同じなのでエラーとなる為です。PHPではこの省略を使えないように、.htaccessファイルに次の行を書き加えれば問題はありません。

php_flag short_open_tag Off

htmlタグ内で、XHTML 1.0はlang属性が使えますが、XHTML BasicやXHTML Mobile Profileではlang属性が使えません。 xml:langのみが使えます。

ヘッドタグ内にメタタグでテキスト文字のコードをShift_JISで書いていることを知らせます。当然文字コードはシフトJISで書きます。meta name="description"とmeta name="keywords"はSEO対策です。ページに的確なタイトルを付けて、タイトル(TITLEタグ)を書きます。

link rel="stylesheet" type="text/css" href="mobile.css"と外部CSSファイルの設定をします。ドコモのiモードは外部CSSに対応していないので注意します。

ボディタグ内は人にも検索ロボットにも見易いように、見出し(H1~H6タグ)を付けます。文章に段落を付けて、段落(Pタグ)を使って文章を構成していきます。段落以外は改行をしなくても良いのですが、適度に改行をしたい時は改行(BRタグ)で改行します。リンクをするにはリンク(Aタグ)を使います。

これだけでほぼ普通の文章は作れます。Pタグを使わず文章をタグ無しで書いても問題ありません。

XHTML Mobile Profile 1.0の実際のコード

<?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" xml:lang"ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="description" content="***********" />
<meta name="keywords" content="***,***,***" />
<link rel="stylesheet" type="text/css" href="mobile.css" />
<link rel="alternate" media="handheld" href="http://****.jp/***/***.htm" type="text/html" />
<title>*****</title>
</head>
<body>
<h1>*****</h1>
タグ無しで書いてもOKです。
<p>普通はPタグを使って文章を書きます。</p>
<br />
<a href="***">*****</a>
</body>
</html>

XHTML Mobile Profile 1.0で使えるその他のタグ

上記以外にもXHTML Mobile Profile 1.0で使える主なタグには、次のようなものがあります。

div　位置指定　align="left | center | right"
基本テーブル caption、table、td、th、tr
pre　ベタ書き(ソースをそのまま表示)
ul　リストの指定
li　リストの内容
form　フォーム　action="URL" method="get | post"
input　テキスト入力フィールド、ラジオボタン、チェックボックス
img　画像表示　GIFとJPEG画像は問題なく使えます

XHTML Basicでは使えず、XHTML Mobile Profileで追加されたタグや属性

b、big、hr、i、smallタグ
styleタグとstyle属性
fieldset、optgroupタグ(これらはあまり使われていない)
olタグのstart属性と、liタグのvalue属性

モバイル専用ページであることを検索ロボットに伝える方法

モバイル専用ページであることを検索ロボットに伝えるには、ヘッドタグ内に次のようにlinkタグを書きます。href内にはそのページのurlを書きます。このようにすると、検索ロボットがモバイルページだと認識してくれます。

<link rel="alternate" media="handheld" href="http://****.jp/***/***.htm" type="text/html">

XHTML Mobile Profile 1.0の文法を診断する

モバイルページが完成したら、HTML文法診断ページでXHTML Mobile Profile 1.0の文法チェックをしましょう。普通はかなり厳しい診断結果になりますが、重大なエラーでなければ良しとしましょう。