しらぎくモバイルシステムFULLでのHTML 5文書の取扱い。

第9.200版(平成21年12月10日)よりサポートを開始した、HTML 5の取扱い方法に関する解説です。

HTML 5は既に大半の要素がほぼ確定の状況となっており、対応に入るのは決して拙速ではないと思われます。

セクション要素とセクショニング内容。

しらぎくモバイルシステムFULLが対応するに当たって、以下の点を先ず明確にします。

セクション要素。

セクション要素とは、仕様書に於いてSectionsの項目に纏められている要素で、主に以下のものが定義されております((※)の表示はHTML 4.0でも既に定義されているものです)。

<body>要素(※)
<section>要素
<nav>要素
<article>要素
<aside>要素
<h○>要素(※)
<hgroup>要素
<header>要素
<footer>要素
<address>要素(※)

セクショニング内容。

一方、セクショニング内容とは、仕様書で定義されているコンテントモデルを成す内容の一つで、以下の要素が該当するものとされております(いずれもHTML 4.0では未定義のものです)。

<section>要素
<nav>要素
<article>要素
<aside>要素

HTML 5での問題点と解決策。(平成21年12月14日更新)

セクショニング内容と見出しの関係。(平成21年12月14日更新)

仕様での扱い。(平成21年12月14日更新)

HTML 5では、セクショニング内容とされる要素に置かれている見出しの等級は、セクション外とは無関係に与えられる事とされております。

但し、常に下位にあるセクショニング内容要素は、上位のセクショニング内容要素に従属する事とされております。

このため、セクショニング内容要素を用いた場合には、様々な見出し等級の付け方が出現し得る事となりますが、

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.

と言う推奨事項に依り、

各セクショニング内容要素に於いては<h1>要素のみを用い、それより下位の見出しが必要なら新たなセクショニング内容を記述する
全セクショニング内容要素の開始タグ及び終了タグを取り除いた結果、適切に見出しの等級が並ぶように等級を定める

のいずれかを採るのが好ましいとされます。

後者は従来のHTML 4.01/XHTML 1.x文書をHTML 5に移行させるのに好都合でしょう。

また、以下の要素(セクショニングルート要素)に於いては、上位要素からの見出しの等級を継承せずに新たなセクションとする事としております。(平成21年12月14日)

<blockqute>要素
<body>要素
<td>要素
<figure>要素…画像などの埋め込みブロック

問題点。

この結果、例えば<h1>要素を取扱う場合、HTML 5をのセクショニング内容要素を認識しないと思われる携帯端末に対して単純に<h1>のまま出力すると、見出しの階層が分からなくなってしまいます。

この事から、セクショニング内容要素の開始タグを認識した場合には、見出し要素の処理を変更するようにする必要があります。

また、言うまでもない事ですが、この問題の処理に際して、従来のHTML 4.01/XHTML 1.x文書の処理に悪影響を与えてもいけません。

しらぎくモバイルシステムFULLで導入した解決策。(平成21年12月14日更新)

しらぎくモバイルシステムFULLでは、処理を容易にするため、推奨事項に従ったマークアップのみを想定して見出しを取扱います。

具体的には、セクショニング内容要素を認識した場合、見出しの取扱いモードを設定します。

見出しの取扱いモードは、以下の二つから撰びます。

等級変換モード: セクショニング内容要素で初めて出現する見出し要素が<h1>要素である場合、セクショニング内容要素の入れ子のレヴェル分見出しの等級を下げるモードです。
詳細は、後述します。
等級従属モード: セクショニング内容要素で初めて出現する見出し要素が<h1>要素以外である場合、そのセクションでは見出しをそのまま取り扱います。
具体例としては、一番外側の<section>要素で初めて現われた見出し要素が<h2>要素の場合、以降そのセクショニング内容要素では見出しはそのままの等級で出力される事となります。

尚、これらのモードは、各セクショニング内容要素ごとに決定される事となっております。

また、セクショニングルート要素開始タグを見出した場合には、上位要素からの見出しを継承せずに新たなセクショニング内容要素が開始されたものとします。(平成21年12月14日)

等級変換モードの詳細。

等級変換モードでは、セクショニング内容要素の入れ子階層とその中で見出された見出しの等級に基づいて、見出しの等級を引き下げます。

等級の引下げ数は、以下のようになります。

当該見出しを処理するまでに、親のセクショニング内容要素(最上位は<body>要素)直下で見出された最も等級の低かった見出しの等級

この場合、親セクショニング内容要素直下にまだ見出しが見出されていない場合には更に上位のセクショニング内容要素での最低等級の見出し等級を採る事になります。

すなわち、等級変換モードが続く限りは、<body>要素から等級の引下げ数は継承されていく事となります。

継承されない場合は以下の場合です。

途中で等級従属モードを採ったセクショニング内容要素があった場合: 等級従属モードは等級変換を行わないため、親要素での引下げ数は子要素には継承させず、自らの最低等級の見出し等級を継承させる事になります。
等級引下げ数が 5を超えた場合: HTML 4.01/XHTML 1.xの制約に依り、見出しの等級は 6までとなっております。従って、引下げ数が 5を超えた場合、下位のセクショニング内容要素で等級変換モードを採ると全ての見出しが<h6>要素となってしまいます。

尚、見出しの引下げ数の基準となる親要素での見出し等級は、あくまでも当該見出しの処理時点で判明している値となります。

従って、後刻上位要素で新たに等級の低い見出しが処理されると、同じ階層レヴェルでも等級が変わってしまう事になります。

例えば、以下の文書での<h1>内部の見出し</h1>はどの等級に変換されるでしょうか。

<DOCTYPE html>
					<title>HTML 5の文書</title>
					<h1>上の見出し</h1>
					<section id="MAIN">
					    <section id="CHAPTER1">
					        <h1>内部の見出し</h1>
					        <p>…</p>
					        </section>
					    </section>

この場合、

最上位の<body>要素では<h1>上の見出し</h1>のみを処理しており、これが最も等級の低い見出しとなっております。
従って親セクショニング内容要素である<section id="MAIN">要素は開始時に、等級引下げ数として 1を得る事になります。
また問題の見出しがある<section id="CHAPTER1">要素開始時には親要素にはまだ見出しが直下に見出されなかったため、等級引下げ数は変動せず、従って引下げ数は 1となります。

以上より、<h1>内部の見出し</h1>要素は等級が 1引き下げられ、<h2>内部の見出し</h2>要素に変換される事になります。

分かり易く言えば、

全てのセクション内容要素直下の見出しを<h1>要素に統一すれば、セクショニング内容要素の階層に合わせて自動的に適切な等級に変換される

と言う事です。

<hgroup>要素の処理。(平成21年12月15日)

HTML 5の仕様に依り、<hgroup>要素は内部にある見出し要素のうち、最も高い等級の見出し要素として位置付けます。

例えば、以下のようなHTMLがあったとします。

<DOCTYPE html>
				<title>HTML 5の文書</title>
				<hgroup>
				    <h1>タイトル</h1>
				    <h2>～サブタイトル～</h2>
				    <hgroup>

				<section id="MAIN">
				    <h1>内部の見出し</h1>
				    <p>…</p>
				    </section>

このとき、冒頭の<hgroup>要素には<h1>要素と<h2>要素が内容に含まれておりますが、その場合この<hgroup>要素は最も高い等級の<h1>要素として処理されます。

従って、<section id="MAIN"> 要素に入るまでの最下等見出し等級は 1と言う事になり、<section id="MAIN"> 内で初めて現われる見出し要素である <h1>内部見出し</h1> 要素は等級変換モードでの処理に依り<h2>要素と見なされる事となります。

セクション要素などHTML 4.01/XHTML 1.xで定義されていない要素の扱い。(平成22年 1月30日更新)

これはHTML 4.01/XHTML 1.xでは未知の要素をどうするかと言う問題です。

第0.9255版(平成22年 1月30日)以降、以下のように取扱っております。

セクション要素などHTML 4.01/XHTML 1.xでは未定義のブロック系要素

具体的には、以下の要素が該当します。

<section>要素…一般のセクション
<nav>要素…ナヴィゲータセクション
<article>要素…主記事セクション
<aside>要素…関連の薄いセクション
<header>要素…文書或いはセクションのヘッダ部分
<footer>要素…文書或いはセクションのフッタ部分
<figure>要素…画像などのブロック
<figcaption>要素…<figure>要素に与えられているキャプション

これらの要素については、全て<div>要素とし、CSSを利用している状況でのWAP 2.0端末では、元の要素名の前に半角のアンダスコアを付けたクラス名をclass属性として附与する事で、CSSでのスタイリングを可能にしております。

例えば、以下のようなHTMLがあったとします。

<figure>
			    <figcaption>堀北真希ちゃん&#9825;</figcaption>
			    <img alt="" src="HORIKITA_Maki.JPG" width="240" height="320" />
			    </figure>

このHTMLは以下のように変換されます(▼印は出力対象端末で有効なハートの絵文字を表わす記述)。

<div class="_figure">
			    <div class="_figcaption">堀北真希ちゃん▼</div>
			    <img alt="" src="HORIKITA_Maki.JPG" width="240" height="320" />
			    </div>

尚、平成22年 1月29日まで、HTML 5の仕様草案では<figure>要素の内容モデルは

キャプションとなる<dt>要素(任意・ある場合は内容の先頭か末尾)
埋め込みの対象である<dd>要素(一個のみ必須)

とされておりましたが、平成22年 1月30日の草案改訂で

キャプションとなる<figcaption>(任意・ある場合は内容の先頭か末尾)
埋め込み対象となるインライン要素

に変更されたため、従来の仕様に従ったHTMLでは、<figure>要素直下の<dt>要素及び<dd>要素をいずれも上記と同様のクラス名を与えた<div>要素に変換する事で対応しております。

つまり、従来の仕様に従った記述も引続き適切に処理されます。但し、処理結果は従来の版と異なりますのでご注意ください。

HTML 4.01/XHTML 1.xでは未定義のフレージング内容要素(≒インライン要素)

現時点では、以下の三つの要素をサポートしております。

<mark>要素…目立たせたフレーズ
<time>要素…日時
<meter>要素…数量

これらの要素は、以下のように扱います。

WAP 2.0 端末(CSS利用時)

<b>要素とします。更にclass属性がない場合に限り、元の要素名(小文字)の前に半角のアンダスコアを付けたクラス名が附与されます。

例えば、

<mark>要素は <b class="_mark"> 要素に
<time class="createdTime"> 要素は <b class="createdTime"> 要素に

変換されます。

その他の環境

設定ファイル内にハッシュ変数 $color{'要素名'} 及び $bgcolor{'要素名'} で表示色を指定する事で、適切な前景色および背景色を与える事が出来ます。

cHTMLでは前景色のみ有効となります。また、WAP 1.0端末に対しては効果はありません(国内には該当端末は既にありません)。
これらのHTML 5で加えられた新要素に関する設定文は「KConfig.pl」内には記述がない場合がありますので、必要に応じて追記してください。尚、要素名は全て小文字で指定してください。

現時点で未対応の問題。(平成22年 1月19日)

現時点ではHTML 5の仕様に完全には対応しておりません。

その件に関しては、HTML 5の未対応状況をご覧ください。

余談。

HTML 5はフル規格ブラウザ向けの仕様であり、HTML 5の勧告後にモバイル向けの記述言語として簡略化したものが導入されるか否かは分かりません。

勿論、HTML 5を策定しているオペラ社やアップル社は、携帯端末のフル規格対応を目指しているのですが、日本ではミニ規格のHTMLに依るモバイルウェブ文化が独自の進化を遂げており、完全にフル規格に置き換わる事は難しいと思われます。

とは言え、携帯電話会社も独自にHTML 5をベースにした記述言語を導入しないとも限らないので、状況を見てしらぎくモバイルシステム VIでもHTML 5対応をすべきか検討したいと思っております。