新春特別企画

2020年のWeb標準

この記事を読むのに必要な時間:およそ 3 分

あけましておめでとうございます,@1000chこと泉水翔吾です。2019年に続いて,2020年のWeb標準技術について寄稿します。今年は,Webコンテンツの配信の形を拡張するWeb PackagingとWebにおける認証の形を変えるWeb Authenticationについて取り上げます。

Web Packagingを使った新たなコンテンツ配信の形

現在Web Packagingという仕様の策定が進んでいます。Web Packagingは,Webのコンテンツの可搬性を高める技術仕様で,コンテンツを配布元が署名して改ざんされていないことを保証したり,複数のリソースを一つにまとめたりすることを実現します。Web Packagingは以下の3つに分類されます。

  • Signed HTTP Exchanges:単一のHTTPリクエストとレスポンスに対して署名する
  • Web Bundles(旧Bundled HTTP Exchanges⁠⁠:複数のHTTPリクエストとレスポンスをまとめる
  • Loading Signed Exchanges:署名されたHTTP Exchangesをロードする

これらのうちLoading Signed Exchangesは,Signed HTTP ExchangesやWeb Bundlesによって署名されてまとめられたコンテンツを,どのようにロードするのかを決める仕様であり,基本的にブラウザの挙動に関わる部分です。この記事では,Web PackagingのユースケースやWeb開発者が関わってくるSigned HTTP ExchangesとWeb Bundlesについて説明していきます。

Signed HTTP Exchanges が解決してくれること

皆さんがWebページを閲覧している時に,HTTPリクエストとレスポンス(すなわちHTTP Exchanges)が繰り返し行われていることは想像できると思います。このHTTPリクエストとレスポンスに対して署名した(Signed)結果が,Signed HTTP Exchanges(SXG)です。この署名において,配布元となるドメインの秘密鍵を用いることで,SXGを再配布した時にその中身が改ざんされていないことを保証できます。また,SXGにはHTTPリクエストとレスポンスの情報が含まれるため,配信されるURLに関わらず,このURLからの配信されたという論理的な情報を持ちます。

例として,この記事をSXGにすることを考えてみましょう。この記事に対するHTTPリクエストおよびレスポンスを,gihyo.jpが保有する秘密鍵を用いて署名した結果,2020-web-standards-prospect.sxgというファイルが生成されたとします。このSXGファイルは改ざんに対して耐性があり,gihyo.jpが作成したコンテンツということが保証されるため,ブラウザにアドレスバーに表示されるURLは,どのドメインから配信されてもhttps://gihyo.jp/design/column/newyear/2020/web-standards-prospectになります。

Signed HTTP Exchangesが活躍するシーンとしてイメージしやすいのはAMP(Accelerated Mobile Pages)です。AMPはページロードの高速化を目的とした技術で,AMP HTMLと呼ばれるHTMLのサブセットを定義してWebページを構築する技術に一定の成約を設けることで,ページロードの最適化をしやすくしています。また,Googleをはじめとした検索エンジンがWebページをクロールする際に,ページがAMP HTMLで構築されていると認識されると,Webページのリソースがキャッシュされます。これによって,検索結果から遷移する時にキャッシュされたリソースをロードするため,高速にWebページを表示できるようになっています。しかし,このAMPの仕組みには,キャッシュの保存先がそれぞれのキャッシュサーバー(ここではGoogleのCDNとします)であるため,URLがGoogleオリジンのURLになってしまうという欠点があります。Googleの検索結果からアクセスしたページのURLをシェアしようとした時に,URLがhttps://google.com/amp/s/…となっていた経験は,皆さんにもあることでしょう。

この問題を解決してくれるのがSigned HTTP Exchangesです。このキャッシュ対象になるリソースを.sxgにできれば,どのサーバーにキャッシュとして保存されて配信されても,ブラウザは論理的なオリジンのURLをアドレスバーに表示してくれます。

Signed HTTP Exchangesは新しい技術ですが,既に実際のプロダクトに導入され始めています。Yahoo! Japanでは,もともとAMP実装のコンテンツが用意されていたYahoo! トラベルをSXGに対応させることで,AMPによる高速なページロードを維持しつつ,前述のURLの課題を解消しています。

著者プロフィール

泉水翔吾(せんすいしょうご)

SIerでのプログラマーを経てWeb業界に転職して以来,Web技術に没頭する日々を送っています。Web標準の動向やアーキテクチャの流行を追いかけつつ,技術啓蒙やOSS活動に励んでいます。共著に『超速! Webページ速度改善ガイド』があります。

Twitter:@1000ch
GitHub:1000ch
URL:https://1000ch.net/