XHTML モバイル・プロファイルでのマークアップ例(参考資料)。

ここでは、実際にXHTML モバイル・プロファイルで携帯電話向けコンテンツを書く場合のマークアップの一例を挙げておきます。

但し、HTMLのマークアップの方法をある程度知っている事を前提とします。

従いまして、マークアップが分からない方は、この中にコンテンツをぶち込めばサイトが構築出来ると言うものでは無い事をご承知置き下さい。

あくまでも一例ですので、もっとモバイルで使い易く出来ると言う方は挑戦される事をお奨めします。

現行機の場合、CSSを活用する事で、本文で面倒な物理マークアップをする事無く、自由なデザインが可能になります。

ご注意願いたい事。(平成19年 3月19日 更新)

  • 実際には、モバイルコンテンツの作成に際して推奨される方法があるのですが、一部遵守していないと思われる箇所があり、そのような箇所には注釈を入れております。(平成19年 3月19日)
  • 旧型機の中には、XHTML モバイル・プロファイルで記述すると、却って使い難くなる恐れのある端末もあります。

    このマークアップ例では、一箇所にページ内の終点アンカーを設けており、旧型機では操作性に難点となる恐れもあります。

    この点を考慮した場合は、XHTML モバイル・プロファイルではなく、XHTML 1.0 ストリクトかXHTML 1.0 トランジッショナルでマークアップしなければならないかも知れません。

  • ここでは、一般的なサイト作りを想定して、制作者名とメールアドレスを記述するようにしておりますが、最近ではメールアドレスを迂闊には公開出来ない現状がありますので、安全のためにレンタルのメールフォームへのリンクを連絡先メールアドレスの代わりにするのも良いでしょう(その場合、mailto:スキーム名を書かないようにします)。また、制作者名は余程の理由が無い限りハンドルネームでも良い事は言うまでも無いでしょう。

メニューページのマークアップ例。

メニューページ(いわゆるトップページ)は、各コンテンツへのメニューを<dl>要素で記述する事にします。

この場合、

  • <dt>要素には、コンテンツ名を当該コンテンツへのアンカーとしたものを
  • <dd>要素には、当該コンテンツの概要や更新年月日を

記述するようにします。

また、同様のものを、<link>要素でも記述しておきます。

  • 現行の端末では<link>要素でのナヴィゲーションは全く効果がありません。現状を考えると無理に入れろとは言いませんが、将来対応出来れば依り便利になるのでその事を考えてこのサンプルでは記述しております。
<?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" />

		<title> (サイトの題名) </title>

		<link rel="stylesheet" type="text/css" href=" (スタイルシートのURI) " />

		<link rev="made" href="mailto: (連絡先メールアドレス) " title="ご連絡" />
		<!-- メニューでの項目に合わせて適宜設定する。 -->
		<link rel="next" rev="start" href=" (コンテンツ1のURI) " title=" (コンテンツ1の題名) " />
		    …
		<link rel="next" rev="start" href=" (コンテンツnのURI) " title=" (コンテンツnの題名) " />

		</head>

		<body>

		<h1 id="top"> (サイトの題名) </h1>
		<!-- ここに<p>要素で挨拶を入れる事も出来ますが、余計な挨拶は寧ろ邪魔かも知れません。 -->

		<h2>メニュー</h2>
		<dl class="menu">
		    <dt><a rel="next" rev="start" href=" (コンテンツ1のURI) "> (コンテンツ1の題名) </a></dt>
		    <dd> (コンテンツ1の概要や更新年月日) </dd>
		        …
		    <dt><a rel="next" rev="start" href=" (コンテンツnのURI) "> (コンテンツnの題名) </a></dt>
		    <dd> (コンテンツnの概要や更新年月日) </dd>
		    </dl>

		<hr />

		<ul class="footNavi">
		    <li><a href="#top">ページの先頭</a></li>
		    </ul>

		<hr />

		<div class="footer">
		    <address>(c) <a href="mailto: (連絡先メールアドレス) "> (制作者名) </a></address>
		    </div>

		</body>
		</html>

コンテンツのマークアップ例。(平成19年 3月19日 更新)

各コンテンツについては、決まった形を用意しておきます。

  • なるべく、一貫した方法にしておくと操作し易くなるからです。

ページのヘッダ部(冒頭部)。(平成19年 3月19日 更新)

各コンテンツページの冒頭には、パンくずリスト代わりのナヴィゲーションリストを<ul>要素で記述しておきます。

  • モバイルコンテンツに於いてはナヴィゲーションバーはなるべく小さくすべきとされており、行数を取るリスト形式でのマークアップはあまり宜しくないようです。携帯端末ではスクロールに手間が掛かるからです。(平成19年 3月19日)
    • とは言うものの、一行に書くよりリストにした方が分かり易いと思われるため、直しませんでした。
    • ここでは、ナヴィゲーションをスキップする際の手間を最小限にするため、冒頭にナヴィゲーションリストをスキップするアンカーを設けております。

このリストの先頭には、ページの本文へのアンカー(href="#top"属性を与えた<a>要素)を用意して、ナヴィゲーションを飛ばせるようにします。

このため、本文の先頭にはid="top"属性を与えたブロックレヴェル要素を入れる必要があります。

ナヴィゲーションには数字を属性値とするaccesskey属性を与え、ページ内の何処を見ていてもダイヤルボタン一つで関連ページに移動出来るようにします。

  • ナヴィゲーションを敢えてヘッダ部に設けているのは、これが理由です。つまり、関連ページへのダイヤルボタンの番号を予め見せておく事で、ページ内の何処にフォーカスが当てられていてもボタン一つでナヴィゲート出来るようにしたかった訳です。

このときの番号は、最上位となるメニューページを"1"にして、階層に応じて番号を増やしていきます。

但し、"9"は次のページ, "7"は前のページとしますので、都合六段階までとなります。

  • 七段階以上の階層が生じる場合は、メニューページ以外はこのページから見て一番近い階層のものを"6"として、"2"まで一段階づつ下げて行くと言う事も考えられます。実際問題として、七段階以上の階層なんてPC向けのフル規格ウェブでさえ余程の事が無い限り深過ぎるものです。
  • 尚、"7"を前ページ, "9"を次ページとしたのは、ダイヤルボタンの配置から直感的に解り易いと思ったからです。

ナヴィゲーションリストの最後は、当該ページの前ページがあるのであれば、そのページへのアンカーとします。

以上を纏めると、ナヴィゲーションリストは

一番目
本文へのアンカー
二番目〜最後の一つ前
階層にあわせたアンカーの並び
  • 前ページが存在しない場合は最後までこのアンカーが並びます。
最後
前ページへのアンカー(前ページがある場合のみ)

と言う形になる訳です。

  • 勿論、厳密にマークアップするなら、一番目の本文へのアンカーと最後の前ページへのアンカーはナヴィゲーションリストから外した方が良いのですが、特に致命的な不利益が生じ得る訳でもないので、ここではこのようにしております。

ページの本体(本文)。

本文は普通にマークアップすればよいのですが、必ず先頭にid="top"を附与したブロックレヴェル要素を置かなければなりません。

ただ、この場合、やはり見出しが先頭に来るのが順当と思われますので、id="top"属性を与えた<h1>要素で始める事にします。

あとは、普通にマークアップした本文を順次入れて行けば宜しいでしょう。

ページのフッタ部(末尾部)。

ページの末尾には、ページの本文先頭へのアンカーを用意します。

また、次ページがある場合は、そのリンクを用意します。

以上を踏まえてのコンテンツのマークアップ例。

以上を踏まえてのコンテンツページのマークアップ例は以下のようになると考えられます。

<?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" />

			<title> (ページの題名) </title>

			<link rel="stylesheet" type="text/css" href=" (スタイルシートのURI) " />

			<link rev="made" href="mailto: (連絡先メールアドレス) " title="ご連絡" />
			<!-- 存在するページに関するものを適宜設定する。 -->
			<link rel="start" href=" (メニューページのURI) " title=" (メニューページの題名) " />
			<link rel="contents" href=" (このページから見たコンテンツ最上位のページのURI) " title=" (そのページの題名) " />
			<link rel="chapter" href=" (このページから見たコンテンツ第二位のページのURI) " title=" (そのページの題名) " />
			<link rel="section" href=" (このページから見たコンテンツ第三位のページのURI) " title=" (そのページの題名) " />
			<link rel="subsection" href=" (このページから見たコンテンツ第四位のページのURI) " title=" (そのページの題名) " />
			<link rel="up" href=" (このページから見たコンテンツ第四位のページのURI) " title=" (そのページの題名) " />
			<link rel="prev" href=" (前ページのURI) " title=" (前ページの題名) " />
			<link rel="next" href=" (次ページのURI) " title=" (次ページの題名) " />

			</head>

			<body>

			<ul class="headNavi">
			    <li><a href="#top">本文</a></li>
			    <li>[1] <a accesskey="1" rel="nofollow" href=" (メニューページのURI) "> (メニューページの題名) </a></li>
			    <li>[2] <a accesskey="2" rel="nofollow" href=" (このページから見たコンテンツ最上位のページのURI) "> (そのページの題名) </a></li>
			    …
			    <li>[7] <a accesskey="7" rel="prev" href=" (前ページのURI) "> (前ページの題名) </a></li>
			    </ul>

			<hr />

			<h1 id="top"> (ページの題名) </h1>
			…(コンテンツの本文)…

			<hr />

			<ul class="footNavi">
			    <li><a href="#top">ページの先頭</a></li>
			    <li>[9] <a accesskey="9" rel="next" href=" (次ページのURI) "> (次ページの題名) </a></li>
			    </ul>

			<hr />

			<div class="footer">
			    <address>(c) <a href="mailto: (連絡先メールアドレス) "> (制作者名) </a></address>
			    </div>

			</body>
			</html>

しらぎくのウェブサイト作成入門サイトマップ