はじめまして
こんにちは! 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
に関心があります。
皆さんも是非機会があれば取り入れてみてください!