ごあいさつ
初めましての方も、お久しぶりの方も、こんにちは。
なのくろですん。フロントエンドエンジニアです。先月までドワンゴでお世話になりました。
この記事は「第二のドワンゴAdventCalendar2017」の21日目です。
今年のQiitaアドベントカレンダーもドワンゴ枠が最速で埋まっていて素晴らしいですね。
ドワンゴはとても素敵な会社なので、興味のある方はこちらも御覧ください！
HTML5の標準化
Qiita読者の皆様に於かれましては、恐らくHTML5の説明は必要ないと思うので割愛します。
少なくともWeb開発に携わる方であれば頻繁に読み書きするであろうマークアップ言語ですが、そのHTML5の最新の仕様を常に追っているという方はあまり多くはないかなと思っています。
(こんな記事を書いておきながら、私自身詳しく知りません...)
HTML5の標準化はW3Cという団体が行っていて、2008年に草案が発表、2014年に勧告がなされました。
(標準化については後述するWHATWGという団体も絡んできますが、本題ではないので割愛します。)
それ以降も仕様のマイナーアップデートは行われており、つい先日の2017年12月14日にHTML5.2が勧告されました。
本記事ではHTML5.2での変更点について紹介してみようと思います。
付け焼き刃の知識で書いたので、嘘書いてたらごめんなさい🙇
マサカリは大歓迎ですので、修正PRお待ちしております...!
W3Cに変更点を纏めたページがありますので、こちらを順番に見ていきます。
https://www.w3.org/TR/html52/changes.html
New features
dialog要素の追加
The dialog element.
<dialog> 要素が増えました。
名前の通りダイアログであることを示すタグのようですね。
JavaScriptから操作でき、HTMLDialogElementにはshow(),close(),showModal()みたいなメソッドがあるみたいです。
モーダル表示はありがちなUIなので、各ブラウザの実装が待ち遠しいです。
JavaScriptモジュールの統合
Integration with the JavaScript module system of [ECMA-262].
<scripts>要素のtype属性にmoduleを指定すると、JavaScriptのモジュールとして扱えるようになるみたいですね。
Webpack や Browserify(最近だとparcelとか)でバンドルしなくてもいい世界はまだ先かなー。
Referrerポリシーの追加
Referrer policy [REFERRERPOLICY].
リファラーを送るかどうかのポリシーを指定できるようになりました。
対応するのは<a>,<area>,<iframe>,<img>,<link>の各要素です。
指定できるのは以下の通り。
enum ReferrerPolicy {
"",
"no-referrer",
"no-referrer-when-downgrade",
"same-origin",
"origin",
"strict-origin",
"origin-when-cross-origin",
"strict-origin-when-cross-origin",
"unsafe-url"
};
それぞれ origin が同じ場合と異なる場合で、referrer を送る、送らない、一部送るみたいな違いがあるようです。
WAI-ARIA1.1への対応
Update ARIA reference to [wai-aria-1.1], which introduces new features to improve accessibility.
WAI-ARIA(ウェイアリア)はアクセシビリティを良くするための属性仕様です。
aria-*属性はかなり種類があるので把握しきれていませんが、例えばブラウザの音声読み上げ機能などに対して効果があるようですので、少しずつでも対応していけると良い気がします。
link要素 / nonce属性の追加
The nonce attribute for link as used in Content Security Policy [CSP3].
<link>要素にnonce属性が追加されたみたいです。
これはコンテンツセキュリティーポリシーに関する属性で、既に<script>要素にはHTML5.1で追加されているものです。
nonce属性を指定すると、リソース取得時のレスポンスヘッダーに含まれるnonce-***みたいな文字列と一致していない場合、読み込まれたスクリプトの実行を防ぐことができるらしいです。
iframe要素 / allowpaymentrequest属性の追加
The allowpaymentrequest attribute of iframe, for integration with the Payment Request API [PAYMENT-REQUEST].
iframe要素にallowpaymentrequest属性が追加されたみたいです。
確かブラウザの共通UIで支払フローを実現できる(自分で決済フォームとか作らなくていい)PaymentRequestAPIっていうのがあって、この属性はiframe要素内部でこのAPIを呼び出していいか指定するための属性みたいです。
sandbox属性の属性値にしなかったのは何故なんでしょう？(そこまでは調べてない)
iframe要素 / sandbox属性にallow-presentation属性値を追加
The allow-presentation value for the sandbox attribute of iframe, for integration with the Presentation API [PRESENTATION-API].
iframe要素のsandbox属性にallow-presentationという属性値が追加されたらしいです。
PresentationAPIはページを別のスクリーンに表示して操作したりするためのAPI(知らなかった)で、それらの機能をiframe内部で許可するか選択できるようになったということみたいです。
link要素 / rel属性にcanonical属性値を追加
The canonical value for the rel attribute of links.
SEOあたりで度々登場するcanonical指定のことだと思います。
異なるURLが同一のコンテンツを指している場合に、検索ロボットに適切なインデックスを伝えることができます。
link要素 / rel属性にnoreferrer属性値を追加
The noreferrer link type value for [SECURE-CONTEXTS].
link要素でもリファラーを送るかどうか選択できるようになったということだと思います。
link要素 / rel属性にapple-touch-icon属性値を追加
The apple-touch-icon value for the rel attribute to allow the use of the size attribute in the link element.
WebClip(スマートフォンのホーム画面にWebサイトのショートカット置けるやつ)のアイコンのサイズ指定に使うんだと思います。
apple-touch-iconってことはiPhoneの為の値な気がしますけど、普通に標準化されるんですね。
navigatorオブジェクトにメソッドを追加
The registerContentHandler(), isContentHandlerRegistered() and isProtocolHandlerRegistered() methods.
window.navigatorオブジェクトに以下の各メソッドが追加されたみたいです。
registerContentHandler(protocol, uri, title)isContentHandlerRegistered()isProtocolHandlerRegistered()
registerContentHandler()はプロトコルとURLを紐付けるためのメソッドらしく、第一引数で指定したプロトコルのリンクを選択したときに、第二引数で指定したURLが開くのだそう。
第二引数の文字列には%sというプレースホルダーを指定可能で、押されたリンクのURLに置き換えできるみたいです。
HTMLElement に innerTextを追加
The innerText IDL attribute for HTMLElement.
HTMLElement.innerText でDOM要素の中身がテキストで取得できるようになりました。
似たやつにtextContentがいます。どちらもテキストを返しますが、innerTextはブラウザでレンダリングされた状態に近い形で(つまりCSSでスタイルが適応された状態に寄せて)テキストが出力される点において大きく異なります。
about URLスキーマに html-kind を追加
Define the about:html-kind URL for MP4 media track integration.
特別な状態を表すabout:URLスキーマに仲間が増えたんだと思います。
空白のページである状態を表すabout:blankはたまに使いますよね。
about:html-kindはメディアトラックの識別子として使用されるとのこと。
(ググってもいまいち使用例がなかった)
コンテンツセキュリティポリシーの適用
Integrate the Should element be blocked a priori by Content Security Policy? of [CSP3]
ごめんなさい、あまりちゃんと理解できませんでした🙇
インラインで読み込まれたスクリプトをセキュリティ的にブロックするみたいなことを言っている・・・？
https://w3c.github.io/webappsec-csp/#should-block-inline
Googleのコンテンツセキュリティーポリシーについて書かれたドキュメント読むことにします。
https://developers.google.com/web/fundamentals/security/csp/
Features removed
keygen, menu, menuitem 要素の廃止
The keygen, menu and menuitem elements.
<keygen>,<menu>,<menuitem>の各要素がHTML5.2では廃止されたようです。
人気なかったんでしょうかね？主観ですが確かにあまり見た記憶がないです。
input要素 / inputmode, dropzone 属性の廃止
The inputmode attribute for textual input elements, and the dropzone attributes.
input要素にはそんな属性があったんですね(廃止されたものを覚えても仕方ない)。
showModalDialog の廃止
The showModalDialog method.
windowオブジェクトからshowModalDialogが廃止されました。
そんなのもあったんですね（以下略
Plugin API の廃止
The Plugin API has been marked as obsolete.
さらばFlash...（以下略
HTML Living Standard
W3Cとは別にWHATWGという団体もHTML5の仕様策定を行っています。
こちらは「HTML Living Standard」と呼ばれており、内容は頻繁に更新されている様子です。
WHATWGの策定やブラウザの実装が先行し、追ってW3Cの標準化がなされていくようなので、最新の動向を知るには Living Standard にアンテナを張っておくのが良さそうです。
またHTML5.2勧告と同時に、HTML5.3草案も公開されていますので、合わせて確認すると良いかもしれません。
良いお年を！
あと数日で2017年が終わってしまう・・・だと・・・！？
今年のWebフロントエンドも覚えることが多かった気がしますが、まだまだ知らないことは沢山ありそうです。
来年もゆるふわに頑張りましょう、皆様良いお年を（ ＾ω＾）