DMM.comの、一番深くておもしろいトコロ。
テクノロジー カルチャー

HTML5.2で追加される機能をご紹介

テクノロジー DMM GAMES

HTML5.2で追加される機能をご紹介

f:id:dmmlabotech:20180130155450p:plain

はじめまして

こんにちは！ DMM GAMESでフロントエンドエンジニアをしている山本と申します。 WEBフロントエンドに限らず、技術系の記事を掲載してまいります。

さて、まずは今回ご紹介するのは「HTML5.2」です。

HTML5.2がリリースされました

2017/12/14にHTML5.2は仕様確定についてW3Cより発表がありました。

"Today W3C releases HTML 5.2."
HTML 5.2 is done, HTML 5.3 is coming | W3C Blog
https://www.w3.org/blog/2017/12/html-5-2-is-done-html-5-3-is-coming

新しく追加される機能は、下のリンクにもまとまっています。

HTML 5.2: Changes
https://www.w3.org/TR/html52/changes.html#new-features

原文が英語でかなり長いため、 本記事では追加される機能をピックアップしてご紹介いたします！

追加される機能

HTMLにdialog要素が追加

dialog要素は、"モーダルウインドウ"の代替手段となるHTML Elementです。 これまでプラグインを使ったり、独自にjavascriptを書いて実装していたものがHTMLの仕様として追加されました。

dialog要素をjavascriptで取得し、showModal()やclose()を実行することでモーダルウインドウが操作可能です。

・HTML
<button class="open">Open</button>
 
<dialog class="dialog">
  <h1>dialog window</h1>
  <button class="close">Close</button>
</dialog>
・JavaScript
const dialogElement = document.querySelector('.dialog');
const openButton = document.querySelector('.open');
const closeButton = document.querySelector('.close');
 
openButton.addEventListener('click', function(){
    dialogElement.showModal();
}, false);
 
closeButton.addEventListener('click', function(){
    dialogElement.close();
}, false);

ES Modulesのサポート

script要素でtype="module"がサポートされるようになりました。
これによって、importやexportの機能が使用できるようになります。
例えば、index.htmlでindex..jsを読み込むとします。

このときtype="module"を設定すると、

・index.html
<script type="module" src="index.js"></script>

index.jsの中でimportが使えるようになり、

・index.js
import hello from './hello.js'
hello(); // Hello!

hello.jsをexportしておくことで読み込むことが可能になります。

・hello.js
function hello() {
    return `Hello!`;
}
export default hello;

WAI-ARIA1.1に準拠

WAI-ARIA 1.1をサポートしました。
WAI-ARIAについては、ここではページが足りないため割愛いたします。

Content Security Policyに伴い、link要素にnonce属性が追加

link要素のnonce属性に含まれるワンタイムトークンが、リソース取得時のレスポンスヘッダーに含まれる文字列と一致しない場合、 scriptやstyleの内容が実行されないようになります。

例えば、HTTPレスポンスヘッダによって下記のようにポリシーが送信されていると…

Content-Security-Policy:
    script-src 'nonce-aaaabbbbccccddddeeeeffff' 'strict-dynamic'

下記の script 要素は、トークンの値が一致するため実行されます。
この値が一致しなかったり、値が空の場合は実行されないように処理することができます。

<script
  src="https://example.com/script.js"
  nonce="aaaabbbbccccddddeeeeffff"
>
</script>

iframeにPayment Request APIを使うためのallowpaymentrequest属性が追加

iframeでPayment Request APIの実行を許可する場合に、allowpaymentrequest属性を設定することで利用できるようになりました。
Payment Request APIはweb上でのクレジット決済機能など支払いを行うための機能で、本機能はiframe内でもそれらを実行するためのものになります。

<iframe src="./page.html" allowpaymentrequest></iframe>

iframeのsandbox属性にPresentation APIを利用するためのallow-presentationプロパティが追加

iframeのsandbox属性にPresentation APIを使用するためのallow-presentationというプロパティが追加されました。
Presentation APIは、スマートフォンなどで表示させているページを別のモニタ（chromecastなども使用可能）に出力するためのAPIのようです。 ※このAPIについては、筆者は本記事を書くにあたり初めて知りました

<iframe src="./page.html" sandbox="allow-presentation"></iframe>

link要素のrel属性にcanonicalプロパティが追加

SEOで重複するコンテンツを統合するためのcanonical属性値が正式にサポートされました。
（今まで正式なサポートではなかったことに驚きますね

<link rel="canonical" href="http://games.dmm.com/">

aリンクのrel属性にnoreferrerプロパティ

aリンクのreferrerを制御することが可能になり、リンクごとに設定も可能になります。
referrerとは参照元ページのURLを取得する仕組みとなっており、
例えば、"URL にユーザー名や秘密の ID などを含めざるを得ない時"などに有効です。

<a href="http://games.dmm.com/" rel=noreferrer>リンク</a>

apple-touch-icon が設定可能に

iPhoneでホームに追加する時のアイコンを設定できるようになりました。
すでに実装しているサイトが多いと思われますが、正式にサポートされたということです。

<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png">

navigatorにregisterContentHandler(), isContentHandlerRegistered(), ProtocolHandlerRegistered()が追加

ブラウザーとフィードリーダーサービスを関連付けるメソッドが実装されました。
このメソッドはかなり不遇な扱いを受けており、 ブラウザサポートが芳しくないだけでなく、firefoxなどでは一度サポートした後のバージョンアップ時にサポートから外されたりしてました。

HTML ElementにinnerTextが追加

HTMLElement.innerTextでhtmlタグ内に存在するテキストを取得することができるようになりました。
レンダリングされた内容に準拠しているとのことで、例えばHTMLElement.textContentと比べると余計な改行が出力されないようになります。

<p id="text">
    Hello<br>
    world!
</p>

const textItem = document.getElementById('text');
 
 
console.log(textItem.textContent);
//
//     Hello
//     world!
 
 
console.log(textItem.innerText);
// Hello
// world!

MP4メディアに対応するためabout:html-kindが追加

chromeなどでURLバーなどにも表示されるabout:blankのような識別子でabout:html-kindが追加されました。 こちらはメディアトラック識別子として認識されるみたいです。
※このあたりは知見が足りず、実例を含めてあまり理解できておりません。

Content Security Policyに伴い、インラインで読み込まれるsctiptなどをブロックするか

Content Security Policy (CSP)に伴い、 インラインで読み込まれるscript・styleについてブロックするかどうかの設定の話です。 ※このあたりも知見が足りず、良い説明も見つからなかったため把握できておりません。

バグフィックス & 仕様の変更

こちらもいくつかピックアップします。

main要素がページ内で複数使えるように変更

main要素のページ内に一つという制約が外れました。

<main></main>
<main hidden></main>
<main hidden></main>

上に書いたとおり、不要と判断されるコンテンツはhidden属性を付けて非表示にしておく必要があります。 display: none;やvisibility: hidden;は正しく認識されないため、hidden属性で非表示にすることが正とされています。

body要素内にstyle要素を追加しても問題ないように変更

body要素内にstyle要素を設置しても問題なく処理されるようになりました。
この背景として、コンポーネント指向のUI開発傾向が増加し、関連するhtml要素とともにスタイルを記述し配置するケースが多くなったことが挙げられます。
ただしこの手法はパフォーマンス面でデメリットが多く、例えばレンダリングプロセスにおける再描画が多発する可能性が高まりがちです。
そのため、基本的にはhead要素内に記述するほうがリスクは少ないと考えられるでしょう。

<body> 
    <h1>Hello!</h1>
    <style> h1, h2 { color: blue; } </style>
    <h2>world!</h2>
</body>

legend要素に見出し要素が追加可能に変更

これまでは、fieldset要素内の見出しとしてlegend要素を使用してきました。
legend要素にはプレーンテキストしか入力できませんでしたが、今回h2などの見出し要素を追加できるようになりました。
fieldsetを区分けしたい時などに見出しを付けられるようになったことで便利になったと考えられるでしょう。

<fieldset> 
    <legend><h2>title1</h2></legend>
</fieldset> 
<fieldset> 
    <legend><h2>title2</h2></legend>
</fieldset>

dl要素の子要素としてdiv要素を入力可能に変更

dl要素の子要素としてdiv要素を追加できるようになりました。
アコーディオンなどで状態変更クラスを追加する時など、ちょっとだけ便利になった(？)かもしれません。

<dl>
    <div class="accordion-item accordion-item__isActive">
        <dt></dt>
        <dd></dd>
    </div>
    <div class="accordion-item">
        <dt></dt>
        <dd></dd>
    </div>
</dl>

終わりに

筆者はフロントの実装が多いため、dialog要素の追加とPayment Request APIに関心があります。 皆さんも是非機会があれば取り入れてみてください！

ページトップへ