サービス

ジャンル

職種：エンジニア

職種：ビジネス職

職種：デザイナー

職種：バックオフィス

職種：その他職種

技術

<h2>はじめまして</h2>

<p>こんにちは！ DMM GAMESでフロントエンドエンジニアをしている山本と申します。 WEBフロントエンドに限らず、技術系の記事を掲載してまいります。</p>

<p>さて、まずは今回ご紹介するのは「HTML5.2」です。</p>

<h2>HTML5.2がリリースされました</h2>

<p>2017/12/14にHTML5.2は仕様確定についてW3Cより発表がありました。</p>

<blockquote>
<p>&nbsp;&quot;Today W3C releases HTML 5.2.&quot;<br />
HTML 5.2 is done, HTML 5.3 is coming | W3C Blog<br />
<a href="https://www.w3.org/blog/2017/12/html-5-2-is-done-html-5-3-is-coming" target="_blank">https://www.w3.org/blog/2017/12/html-5-2-is-done-html-5-3-is-coming</a></p>
</blockquote>

<p>新しく追加される機能は、下のリンクにもまとまっています。</p>

<blockquote>
<p>HTML 5.2: Changes<br />
<a href="https://www.w3.org/TR/html52/changes.html#new-features" target="_blank">https://www.w3.org/TR/html52/changes.html#new-features</a></p>
</blockquote>

<p>原文が英語でかなり長いため、 本記事では追加される機能をピックアップしてご紹介いたします！</p>

<h2>追加される機能</h2>

<h3>HTMLにdialog要素が追加</h3>

<p><code>dialog</code>要素は、&quot;モーダルウインドウ&quot;の代替手段となるHTML Elementです。 これまでプラグインを使ったり、独自にjavascriptを書いて実装していたものがHTMLの仕様として追加されました。</p>

<p><code>dialog</code>要素をjavascriptで取得し、<code>showModal()</code>や<code>close()</code>を実行することでモーダルウインドウが操作可能です。</p>

<h5>・HTML</h5>

<pre>
<code>&lt;button class="open"&gt;Open&lt;/button&gt;
 
&lt;dialog class="dialog"&gt;
  &lt;h1&gt;dialog window&lt;/h1&gt;
  &lt;button class="close"&gt;Close&lt;/button&gt;
&lt;/dialog&gt;</code></pre>

<h5>・JavaScript</h5>

<pre>
<code>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);</code></pre>

<h3>ES Modulesのサポート</h3>

<p><strong><span style="color:#dd1500;"><code>script</code></span></strong>要素で&nbsp;<strong><span style="color:#dd1500;"><code>type=&quot;module&quot;&nbsp;</code></span></strong>がサポートされるようになりました。<br />
これによって、<strong><span style="color:#dd1500;"><code>import&nbsp;</code></span></strong>や&nbsp;<strong><span style="color:#dd1500;"><code>export&nbsp;</code></span></strong>の機能が使用できるようになります。<br />
例えば、index.htmlでindex..jsを読み込むとします。</p>

<p>このとき<strong><span style="color:#dd1500;">&nbsp;<code>type=&quot;module&quot;&nbsp;</code></span></strong>を設定すると、</p>

<h5>・index.html</h5>

<pre>
<code>&lt;script type="module" src="index.js"&gt;&lt;/script&gt;</code></pre>

<p>index.jsの中で&nbsp;<strong><span style="color:#dd1500;"><code>import&nbsp;</code></span></strong>が使えるようになり、</p>

<h5>・index.js</h5>

<pre>
<code>import hello from './hello.js'
hello(); // Hello!</code></pre>

<p>hello.jsを<strong><span style="color:#dd1500;">&nbsp;<code>export&nbsp;</code></span></strong>しておくことで読み込むことが可能になります。</p>

<h5>・hello.js</h5>

<pre>
<code>function hello() {
    return `Hello!`;
}
export default hello;</code></pre>

<h3>WAI-ARIA1.1に準拠</h3>

<p>WAI-ARIA 1.1をサポートしました。<br />
WAI-ARIAについては、ここではページが足りないため割愛いたします。</p>

<h3>Content Security Policyに伴い、link要素にnonce属性が追加</h3>

<p><strong><span style="color:#dd1500;"><code>link&nbsp;</code></span></strong>要素の<strong><span style="color:#dd1500;">&nbsp;<code>nonce&nbsp;</code></span></strong>属性に含まれるワンタイムトークンが、リソース取得時のレスポンスヘッダーに含まれる文字列と一致しない場合、&nbsp;<strong><span style="color:#dd1500;">&nbsp;<code>script&nbsp;</code></span></strong>や&nbsp;<strong><span style="color:#dd1500;"><code>style&nbsp;</code></span></strong>の内容が実行されないようになります。</p>

<p>例えば、HTTPレスポンスヘッダによって下記のようにポリシーが送信されていると&hellip;</p>

<pre>
<code>Content-Security-Policy:
    script-src 'nonce-aaaabbbbccccddddeeeeffff' 'strict-dynamic'</code></pre>

<p>下記の script 要素は、トークンの値が一致するため実行されます。<br />
この値が一致しなかったり、値が空の場合は実行されないように処理することができます。</p>

<pre>
<code>&lt;script
  src="https://example.com/script.js"
  nonce="aaaabbbbccccddddeeeeffff"
&gt;
&lt;/script&gt;</code></pre>

<h3>iframeにPayment Request APIを使うためのallowpaymentrequest属性が追加</h3>

<p><strong><span style="color:#dd1500;"><code>iframe&nbsp;</code></span></strong>で<strong><span style="color:#dd1500;">&nbsp;<code>Payment Request API&nbsp;</code></span></strong>の実行を許可する場合に、<strong><span style="color:#dd1500;">&nbsp;<code>allowpaymentrequest&nbsp;</code></span></strong>属性を設定することで利用できるようになりました。<br />
<strong><span style="color:#dd1500;"><code>Payment Request API&nbsp;</code></span></strong>はweb上でのクレジット決済機能など支払いを行うための機能で、本機能はiframe内でもそれらを実行するためのものになります。</p>

<pre>
<code>&lt;iframe src="./page.html" allowpaymentrequest&gt;&lt;/iframe&gt;</code></pre>

<h3>iframeのsandbox属性にPresentation APIを利用するためのallow-presentationプロパティが追加</h3>

<p><strong><span style="color:#dd1500;"><code>iframe&nbsp;</code></span></strong>の<strong><span style="color:#dd1500;">&nbsp;<code>sandbox&nbsp;</code></span></strong>属性に<strong><span style="color:#dd1500;">&nbsp;<code>Presentation API&nbsp;</code></span></strong>を使用するための<strong><span style="color:#dd1500;">&nbsp;<code>allow-presentation&nbsp;</code></span></strong>というプロパティが追加されました。<br />
<strong><span style="color:#dd1500;"><code>Presentation API&nbsp;</code></span></strong>は、スマートフォンなどで表示させているページを別のモニタ（chromecastなども使用可能）に出力するためのAPIのようです。 ※このAPIについては、筆者は本記事を書くにあたり初めて知りました</p>

<pre>
<code>&lt;iframe src="./page.html" sandbox="allow-presentation"&gt;&lt;/iframe&gt;</code></pre>

<h3>ink要素のrel属性にcanonicalプロパティが追加</h3>

<p>SEOで重複するコンテンツを統合するための<strong><span style="color:#dd1500;">&nbsp;<code>canonical&nbsp;</code></span></strong>属性値が正式にサポートされました。<br />
（今まで正式なサポートではなかったことに驚きますね</p>

<pre>
<code>&lt;link rel="canonical" href="http://games.dmm.com/"&gt;</code></pre>

<h3>aリンクのrel属性にnoreferrerプロパティ</h3>

<p>aリンクの<strong><span style="color:#dd1500;">&nbsp;<code>referrer&nbsp;</code></span></strong>を制御することが可能になり、リンクごとに設定も可能になります。<br />
<strong><span style="color:#dd1500;"><code>referrer&nbsp;</code></span></strong>とは参照元ページのURLを取得する仕組みとなっており、<br />
例えば、&quot;URL にユーザー名や秘密の ID などを含めざるを得ない時&quot;などに有効です。</p>

<pre>
<code>&lt;a href="http://games.dmm.com/" rel=noreferrer&gt;リンク&lt;/a&gt;</code></pre>

<h3>apple-touch-icon が設定可能に</h3>

<p>iPhoneで<code>ホームに追加</code>する時のアイコンを設定できるようになりました。<br />
すでに実装しているサイトが多いと思われますが、正式にサポートされたということです。</p>

<pre>
<code>&lt;link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png"&gt;</code></pre>

<h3>navigatorにregisterContentHandler(), isContentHandlerRegistered(), ProtocolHandlerRegistered()が追加</h3>

<p>ブラウザーとフィードリーダーサービスを関連付けるメソッドが実装されました。<br />
このメソッドはかなり不遇な扱いを受けており、 ブラウザサポートが芳しくないだけでなく、firefoxなどでは一度サポートした後のバージョンアップ時にサポートから外されたりしてました。</p>

<h3>HTML ElementにinnerTextが追加</h3>

<p><strong><span style="color:#dd1500;"><code>HTMLElement.innerText&nbsp;</code></span></strong>でhtmlタグ内に存在するテキストを取得することができるようになりました。<br />
<strong><span style="color:#dd1500;"><code>レンダリングされた内容に準拠している</code></span></strong>とのことで、例えば<strong><span style="color:#dd1500;">&nbsp;<code>HTMLElement.textContent&nbsp;</code></span></strong>と比べると余計な改行が出力されないようになります。</p>

<pre>
<code>&lt;p id="text"&gt;
    Hello&lt;br&gt;
    world!
&lt;/p&gt;</code></pre>

<pre>
<code>const textItem = document.getElementById('text');
 
 
console.log(textItem.textContent);
//
//     Hello
//     world!
 
 
console.log(textItem.innerText);
// Hello
// world!</code></pre>

<h3>MP4メディアに対応するためabout:html-kindが追加</h3>

<p>chromeなどでURLバーなどにも表示される<strong><span style="color:#dd1500;">&nbsp;<code>about:blank&nbsp;</code></span></strong>のような識別子で<strong><span style="color:#dd1500;">&nbsp;<code>about:html-kind&nbsp;</code></span></strong>が追加されました。 こちらはメディアトラック識別子として認識されるみたいです。<br />
※このあたりは知見が足りず、実例を含めてあまり理解できておりません。</p>

<h3>Content Security Policyに伴い、インラインで読み込まれるsctiptなどをブロックするか</h3>

<p>Content Security Policy (CSP)に伴い、 インラインで読み込まれる<code>script</code>・<code>style</code>についてブロックするかどうかの設定の話です。 ※このあたりも知見が足りず、良い説明も見つからなかったため把握できておりません。</p>

<h2>バグフィックス &amp; 仕様の変更</h2>

<p>こちらもいくつかピックアップします。</p>

<h3>main要素がページ内で複数使えるように変更</h3>

<p>main要素のページ内に一つという制約が外れました。</p>

<pre>
<code>&lt;main&gt;&lt;/main&gt;
&lt;main hidden&gt;&lt;/main&gt;
&lt;main hidden&gt;&lt;/main&gt;</code></pre>

<p>上に書いたとおり、不要と判断されるコンテンツはhidden属性を付けて非表示にしておく必要があります。<strong><span style="color:#dd1500;">&nbsp;&nbsp;<code>display: none;&nbsp;</code></span></strong>や<strong><span style="color:#dd1500;">&nbsp;<code>visibility: hidden;&nbsp;</code></span></strong>は正しく認識されないため、hidden属性で非表示にすることが正とされています。</p>

<h3>body要素内にstyle要素を追加しても問題ないように変更</h3>

<p>body要素内にstyle要素を設置しても問題なく処理されるようになりました。<br />
この背景として、コンポーネント指向のUI開発傾向が増加し、関連するhtml要素とともにスタイルを記述し配置するケースが多くなったことが挙げられます。<br />
ただしこの手法はパフォーマンス面でデメリットが多く、例えばレンダリングプロセスにおける再描画が多発する可能性が高まりがちです。<br />
そのため、基本的にはhead要素内に記述するほうがリスクは少ないと考えられるでしょう。</p>

<pre>
<code>&lt;body&gt; 
    &lt;h1&gt;Hello!&lt;/h1&gt;
    &lt;style&gt; h1, h2 { color: blue; } &lt;/style&gt;
    &lt;h2&gt;world!&lt;/h2&gt;
&lt;/body&gt;</code></pre>

<h3>egend要素に見出し要素が追加可能に変更</h3>

<p>これまでは、fieldset要素内の見出しとしてlegend要素を使用してきました。<br />
legend要素にはプレーンテキストしか入力できませんでしたが、今回h2などの見出し要素を追加できるようになりました。<br />
fieldsetを区分けしたい時などに見出しを付けられるようになったことで便利になったと考えられるでしょう。</p>

<pre>
<code>&lt;fieldset&gt; 
    &lt;legend&gt;&lt;h2&gt;title1&lt;/h2&gt;&lt;/legend&gt;
&lt;/fieldset&gt; 
&lt;fieldset&gt; 
    &lt;legend&gt;&lt;h2&gt;title2&lt;/h2&gt;&lt;/legend&gt;
&lt;/fieldset&gt;</code></pre>

<h3>dl要素の子要素としてdiv要素を入力可能に変更</h3>

<p>dl要素の子要素としてdiv要素を追加できるようになりました。<br />
アコーディオンなどで状態変更クラスを追加する時など、ちょっとだけ便利になった(？)かもしれません。</p>

<pre>
<code>&lt;dl&gt;
    &lt;div class="accordion-item accordion-item__isActive"&gt;
        &lt;dt&gt;&lt;/dt&gt;
        &lt;dd&gt;&lt;/dd&gt;
    &lt;/div&gt;
    &lt;div class="accordion-item"&gt;
        &lt;dt&gt;&lt;/dt&gt;
        &lt;dd&gt;&lt;/dd&gt;
    &lt;/div&gt;
&lt;/dl&gt;</code></pre>

<h2>終わりに</h2>

<p>筆者はフロントの実装が多いため、<strong><span style="color:#dd1500;">&nbsp;<code>dialog&nbsp;</code></span></strong>要素の追加と<strong><span style="color:#dd1500;">&nbsp;<code>Payment Request API&nbsp;</code></span></strong>に関心があります。 皆さんも是非機会があれば取り入れてみてください！</p>


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

シェア