制作者の活動(PR)。

堀北真希ちゃんにうさ耳を着けた制作者の創作キャラクタ。次ぎ
主な作品

堀北真希うさぎ(うさ耳女子大生)：平成元年〜平成 3年頃のボシュロム製コンタクト『オプティマ』のCM風にレンズを着ける場面と仮想CM動画

HTML 5の新要素を使うには。

HTML5では、幾つかの新要素が定義されました。

それらの中にはウェブブラウザの実装上の都合からまだ利用出来ないものもありますが、構造化のための要素などは既にごく一部のウェブブラウザを除いて問題なく使えます。

ここでは、平成22年 1月現在利用可能な新要素などを利用するに当たって注意すべき点などを解説いたします。

HTML 5の新要素を使うには・目次。

<canvas>要素。

<canvas>要素は、JAVAスクリプトを用いてヴェクタグラフィックを実現出来る領域です。

ではネイティヴでサポートしておりますが、インターネットエクスプローラ 6.0以降でも、グーグル社が配布しているスクリプトを使う事で多くの機能が利用可能です。

<canvas>要素の使い方など詳細は、スクリプトで絵を描くには〜HTML 5で導入される<canvas>要素の使い方〜をご覧ください。

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

セクショニング内容要素とは、文書をセクション構造化するための要素です。

が、セクショニング内容要素として定義されておりますが、加えて

も文書の一部分をマークアップする要素として利用出来ます。

これらは、HTML 4/XHTML 1では未定義の要素ですが、現行の殆どのウェブブラウザはCSSのセレクタとしてこれらの要素名を用いればスタイリングが可能になります。

しかし、以下のように実装に問題があるウェブブラウザもあります

これらの対策として、以下のような方法があります。

インターネットエクスプローラ

HTML文書のヘッダ内で、未サポート要素をcreateElement()メソッドで発生させると、CSSのセレクタとして認識されるようになります。

例えば、以下のようにする事で、上述の六要素が認識されます。

<head>
    …
    <script type="text/javascript">
        <!--
            var h5=new Array('section', 'nav', 'article', 'aside', 'header', 'footer');
            var i=h5.length;
            while (--i>=0) document.createElement(h5[i]);
            //-->
        </script>
    …
    </head>

実際にはこの他にも幾つかの新要素があるので、必要なら h5 の配列宣言式の右辺に追加すれば良いでしょう。

この処理はHTML 5を用いる限り殆ど全ての文書で必要な処理になるでしょうから、予め纏まったスクリプトとしてもよいでしょう。或いは、<canvas>要素の処理スクリプトと纏めるのも良いかも知れません。

ファイヤーフォックス 2.0

ファイヤーフォックス 2.0に対しては、幾つかの方法があります。

以下、後者の方法について解説しましょう。

HTML 5では、空要素(HTML 5ではヴォイド要素と呼びます)のタグ記述方法として、XHTMLで推奨されている /> で終える方法も認めております。また、在来HTMLでは無効ですが、xmlns="http://www.w3.org/1999/xhtml"属性を任意の要素に当てる事も可能ですので、<html>要素に附与します。

そのうえで、ファイヤーフォックス 2.0に対しては、MIMEタイプを application/xhtml+xml で配信すれば良いでしょう。

<figure>要素に於ける不具合。(平成22年 1月30日 削除)

<figure>要素は、文章に入らない独立した画像などをブロック化する要素です。

従来は画像について、故事付けがましくリスト形式にしたりしておりましたが、<figure>要素とする事でより明確にマークアップが可能になります。

内容モデルとしては、<figure>要素の直下に埋め込みたい画像などを内容にした<dd>要素を一つ記述します。

必要に応じて、<dd>要素の前か後ろに、キャプションを記述した<dt>要素を一つ入れる事も可能です。

例えば、以下のように記述します。

<figure>
    <dd><img alr="" src="HORIKITA_Maki.JPG" width="480" height="640"></dd>
    <dt>アイドル女優・堀北真希ちゃんです。</dt>
    </figure>

このとき、<dt>要素は不要なら省略出来ます。

さて、<figure>要素の実装上の問題点ですが、制作者はやはりと言いますかインターネットエクスプローラ 7.0までで起こる問題に直面しました。

具体的には、

と言う不具合です。

恐らく、インターネットエクスプローラ 7.0まででは、<dt>要素や<dd>要素は<dl>要素直下にしかあり得ないとしてパースしているようですが、その結果<figure>要素直下の<dt>要素か<dd>要素に当てたスタイルが延々と文書末尾にまで適用されてしまい、崩れの原因になってしまうのです。

崩れならまだ良い方で、この<dt>要素または<dd>要素をDOM操作しようとすると、当然文書の末尾にまで影響が出てしまいます。当該要素の内容を全面的に変更した場合、文書の末尾までが書換えの影響で消えてしまいます。

対策としては、HTML読み込み直後に、インターネットエクスプローラに対しては<figure>要素の開始・終了タグを<dl>要素のそれに変換してしまうのが確実でしょう。

インターネットエクスプローラで新要素を認識させるスクリプトに、以下のコードを加えると良いでしょう。

var d_onload=window.onload;
window.onload=function () {
    document.body.innerHTML=document.body.innerHTML.
                            split('<figure').join('<dl data-html5="figure"').
                            split('</figure').join('</dl');
    if (d_onload) d_onload();
    }

<dl>要素に data-html5="figure" 属性を与えたのは、DOM処理などを行うスクリプトが<figure>要素だった<dl>要素と判断出来るようにしたものであり、不要なら加えなくてもよいでしょう。

或いは、文書作成時に適切なクラス名を与えておくようにして、クラス名で判断出来るようにしても良いでしょう。

<details>要素。

従来スクリプトで行っていた折り畳みも、<details>要素でネイティヴサポートされる事が決まっております。

<details>要素の内容モデルは、常に表示されている見出し部分となる<dt>要素に続いて、折り畳みの対象となる<dd>要素が続くと言うものです。常に表示されている見出し部分となる<summary>要素に続いて、折り畳みの対象となるフロウ内容が続くと言うものです。

例えば、以下のように記述します。

<details>
    <summary>目次</summary>
    </ul>
        <li><a href="HORIKITA_Maki.html">堀北真希ちゃん</a></li>
        <li><a href="UETO_Aya.html">上戸彩ちゃん</a></li>
            …
        </ul>
    </details>

現状、サポートしているウェブブラウザはまだないようですが、折り畳みのスクリプトを用いれば、ネイティヴサポートがなくても対応可能です。

<video>要素と<audio>要素。

従来、<embed>要素などで埋め込んでいた動画や音声は、<video>要素及び<audio>要素と言う新要素でも埋め込めるようになります。

これらの要素は、従来はプラグインなどに任せていた動画や音声を、<img>要素で静止画像を埋め込むようにウェブブラウザ自身で再生・埋め込みを行うものです。

加えて、従来だと<object>要素, <param>要素或いは<embed>要素などを何行も書かなければならなかったのが、代替コンテンツがなければ一行で書けるようになります。

現状、<video>要素及び<audio>要素はインターネットエクスプローラを除く最新のウェブブラウザではサポートされておりますが、実は大きな問題を孕んでおります。

コーデックの問題

HTML 5を策定しているWHATWGはもじら財団, アップル社そしてオペラ・ソフトウェアの三社が立ち上げましたが、この三社の利害関係に依り、ネイティヴでサポートすべきコーデックが決まらない状況になっております。

以上のような問題から、GIF画像やJPEG画像など、静止画像でのような統一された規格に纏まる事は出来ませんでした。

加えて、実際にサポートされているコーデックについても、三社間でまちまちになってしまい、三社で共通に使えるような動画形式が存在しないと言う状況になってしまいました。

尚、複数の形式に対応するため、<video>要素や<audio>要素には内容として一個以上の<source>要素を入れる事で、対応しているメディアをウェブブラウザが撰ぶ事が出来るようにしているのですが、ファイヤーフォックスなどで選択機能にバグがあるなど、巧くいっていないのが実情です。

マイクロソフトなどの問題

もはやお約束の感がありますが、マイクロソフトは未サポートです。

また、様々な理由から、少し前のブラウザでも対応していないと言うケースがあります。

このような事情から、<video>要素及び<audio>要素の導入には残念ながら時期尚早と考えられます。

どうしてもこれらの要素を用いるのであれば、DOM操作で<embed>要素などに変換する事でエミュレートするのが最も現実的でしょう。

或いは、<video>要素なり<audio>要素なりの内容に<embed>要素などを記述する事で対応することも考えられますが、そうなってしまうと<video>要素なり<audio>要素なりを使う意味があるのか疑念が生じ兼ねません。

蛇足ですが、これらの要素は自動再生するようにしてはいけません。特に<audio>要素については、それだけで音楽を聴きながらウェブを利用するユーザにとって大迷惑以外の何者でもありません。

まとめ。

上述のように、HTML 5で導入予定の多くの新要素はJAVAスクリプトでのDOM操作でエミュレートする事が可能です。

ですが、この事を言い換えると、JAVAスクリプトを無効にしている環境では問題が起こり得ると言う事でもあります。

このため、当面スクリプトが動作しない場合も考慮して利用するべきでしょう。

とは言え、それでも個人的にはセクショニング内容要素や<figure>要素など魅力的な新要素があるので、既にウェブサイト作成入門以外の大半のコンテンツをHTML 5に換えてしまいました(まだHTML 5に相応しいマークアップになっていない部分がありますが…)。

本記事をお読みになれば分かる通り、特にインターネットエクスプローラで問題が多く見られますが、HTML 5を否定する人たちは、このインターネットエクスプローラ 7.0まででの不具合をダシにHTML 5はIEで問題があるからダメだなどと躍起になってネガティヴキャンペーンをやり出すかも知れません。

そう、かつて<font>要素の排除に反対した人たちがネットスケープ 4.xでのCSS処理の不具合をダシにしてCSSを否定したときのように。

参考文献。

HTML5 を IE や Firefox 2 でも使えるようにする方法
HTML5.JP内のコンテンツです。

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

ページ外へのご案内。

marguerite.site@gmail.com