ウェブバンドルのスタートガイド

ウェブサイトを Bluetooth 経由で単一のファイルとして共有し、オリジンのコンテキストでオフラインで実行します

宇都宮雄介
宇都宮雄介
Twitter ホームページ
Kenji Baheux 氏
Kenji Baheux

ウェブサイト全体を 1 つのファイルにまとめて共有可能にすることで、ウェブの新たなユースケースの可能性が広がります。自分が実現できる世界を想像してみましょう。

  • 独自のコンテンツを作成し、ネットワークに制限されることなく、さまざまな方法で配信できる
  • ウェブアプリやウェブ コンテンツを Bluetooth や Wi-Fi Direct で友だちと共有できます
  • サイトを独自の USB で転送することも、独自のローカル ネットワークでホストすることもできます

Web Bundles API は、これらすべてを可能にする最先端の提案です。

ブラウザの互換性

現在、Web Bundles API は、試験運用版フラグが設定されている Chromium ベースのブラウザでのみサポートされています。

Web Bundles API のご紹介

ウェブバンドルは、1 つ以上の HTTP リソースを単一のファイルにカプセル化するためのファイル形式です。このファイルには、1 つ以上の HTML ファイル、JavaScript ファイル、画像、スタイルシートを含めることができます。

ウェブバンドル（正式には Bundled HTTP Exchange）は、ウェブ パッケージング提案の一部です。

ウェブバンドルがウェブリソースのコレクションであることを示す図。
Web Bundle の仕組み

ウェブバンドル内の HTTP リソースは、リクエスト URL によってインデックスに登録されます。また、必要に応じて、リソースを保証するシグネチャを付けることもできます。署名を使用することにより、ブラウザは各リソースの取得元を把握し、確認できるようになります。また、各リソースは真の送信元から生成されたものとして処理されます。これは、単一の HTTP リソースに署名する機能である Signed HTTP Exchange の処理方法と同様です。

この記事では、Web Bundle の概要と使用方法について説明します。

ウェブバンドルの説明

正確に言うと、ウェブバンドルは、（慣例として）.wbn 拡張子を持つ CBOR ファイルであり、HTTP リソースをバイナリ形式にパッケージ化し、application/webbundle MIME タイプで提供されます。詳しくは、仕様のドラフトの最上位の構造のセクションをご覧ください。

ウェブバンドルには複数の独自の機能があります。

  • 複数のページをカプセル化して、ウェブサイト全体を 1 つのファイルにまとめる
  • MHTML とは異なり、実行可能な JavaScript を有効にする
  • HTTP バリアントを使用してコンテンツ ネゴシエーションを行います。これにより、バンドルがオフラインで使用されている場合でも、Accept-Language ヘッダーで国際化が可能になります。
  • パブリッシャーが暗号署名した場合、元のコンテキストで読み込まれます
  • ローカルで提供すると、ほぼ瞬時に読み込まれる

こうした機能により、さまざまなシナリオが可能になります。一般的なシナリオの 1 つは、インターネット接続がなくても簡単に共有して使用できる自己完結型のウェブアプリを構築するというものです。たとえば、友人と東京からサンフランシスコへの飛行機内で移動するとします。機内でのエンターテイメントが好きじゃない。友だちが「PROXX」というおもしろいウェブゲームをプレイしていて、飛行機に乗る前にウェブバンドルとしてゲームをダウンロードしたと言っています。オフラインでも問題なく動作する。Web Bundle が導入される前は、ストーリーはここまでで、友だちのデバイスで順番にプレイするか、時間つぶしの何かを見つける必要がありました。ウェブバンドルでは、次のようなことが可能です。

  1. 友だちにゲームの .wbn ファイルを共有してもらいます。たとえば、ファイル共有アプリを使用してピアツーピアでファイルを簡単に共有できます。
  2. ウェブバンドルに対応しているブラウザで .wbn ファイルを開きます。
  3. 自分のデバイスでゲームをプレイして、友だちのハイスコアを上回りましょう。

このシナリオについては、こちらの動画をご覧ください。

このように、ウェブバンドルにはすべてのリソースを含めることができ、オフラインで動作して瞬時に読み込まれます。

ウェブバンドルのビルド

現時点では、go/bundle CLI がウェブサイトをバンドルする最も簡単な方法です。go/bundle は、Go で構築された Web Bundle 仕様のリファレンス実装です。

  1. Go をインストールします。

  2. go/bundle をインストールします。

    go get -u github.com/WICG/webpackage/go/bundle/cmd/...

  3. preact-todomvc リポジトリのクローンを作成し、ウェブアプリをビルドしてリソースをバンドルする準備をします。

    git clone https://github.com/developit/preact-todomvc.git
cd preact-todomvc
npm i
npm run build

  4. .wbn ファイルを作成するには、gen-bundle コマンドを使用します。

    gen-bundle -dir build -baseURL https://preact-todom.vc/ -primaryURL https://preact-todom.vc/ -o todomvc.wbn

お疲れさまでした。TodoMVC はウェブバンドルになりました。

このバンドルには他の選択肢があり、今後さらに増える予定です。go/bundle CLI では、HAR ファイルまたはリソース URL のカスタムリストを使用してウェブバンドルを作成できます。go/bundle の詳細については、GitHub リポジトリをご覧ください。バンドル用の試験運用版 Node.js モジュール wbn を試すこともできます。wbn はまだ開発の初期段階です。

ウェブバンドルの試用

Web Bundle を試すには:

  1. 実行中の Chrome のバージョンを確認するには、about://version に移動してください。バージョン 80 以降を実行している場合は、次の手順をスキップしてください。
  2. Chrome 80 以降を使用していない場合は、Chrome Canary をダウンロードします。
  3. about://flags/#web-bundles を開きます。

  4. [ウェブバンドル] フラグを [有効] に設定します。

    about://flags のスクリーンショット
    about://flags でウェブバンドルを有効にする

  5. Chrome を再起動します。

  6. パソコンの場合は、Chrome に todomvc.wbn ファイルをドラッグ&ドロップします。Android の場合は、ファイル管理アプリでタップします。

すべてが魔法のように機能します。

ウェブバンドルとしてオフラインで動作する TodoMVC の Preact 実装

他のサンプルウェブバンドルを試すこともできます。

  • web.dev.wbn は、2019 年 10 月 15 日時点の web.dev サイト全体のスナップショットです。
  • proxx.wbn: PROXX は、オフラインで動作するマインスイーパーのクローンです。
  • squoosh.wbn: Squoosh は、さまざまな画像圧縮形式を並べて比較できる便利で高速な画像最適化ツールで、サイズ変更と形式変換をサポートしています。

フィードバックを送信

Chrome での Web Bundle API の実装は試験運用版であり、不完全です。すべてが機能しているわけではなく、失敗したりクラッシュしたりする可能性があります。これが試験運用中のフラグですこの API は、Chrome で試してみるのに十分な準備ができています。新しい API の設計には、ウェブ デベロッパーからのフィードバックが不可欠です。ぜひ Web Bundle をお試しいただき、ウェブバンドルの開発者にご意見をお伝えください。

  • 一般的なフィードバックについては、webpackage-dev@chromium.org までお送りください。
  • 仕様に関するフィードバックがございましたら、https://github.com/WICG/webpackage/issues/new にアクセスして新しい仕様の問題を報告していただくか、wpack@ietf.org までメールでご連絡ください。
  • Chrome の動作に問題がある場合は、https://crbug.com/new にアクセスして Chromium のバグを報告してください。
  • 仕様に関するディスカッションやツールへの貢献も歓迎します。仕様リポジトリで詳細をご覧ください。

謝辞

仕様に貢献し、Canary の機能を開発し、この記事をレビューしてくれた、素晴らしい Chrome エンジニアリング チームである坂本久二ひこ、Tsuyoshi Horo、豊島卓、安田紀子、Jeffrey Yasskin の各氏に敬意を表したいと思います。標準化プロセスにおいて、Dan York は IETF の議論の推進に協力してきました。また、パブリッシャーが実際に何を必要としているのか、Dave Cramer も重要なリソースです。また、preact-todomvc の素晴らしい協力とフレームワーク改善への落ち着きのない努力をしてくれた Jason Miller にも感謝します。