このページは Cloud Translation API によって翻訳されました。

PWA のタブ形式アプリケーションモード

プログレッシブウェブアプリのタブを使用して、複数のドキュメントを同時に操作する

Thomas Steiner

コンピューティングの世界では、デスクトップメタファーは、ユーザーがコンピュータをより直感的に操作できるように、グラフィカルユーザーインターフェース（GUI）で使用される一連の統一コンセプトであるインターフェースメタファーです。デスクトップのメタファーに沿って、GUI タブは書籍、紙のファイル、カード索引に挿入される従来のカードタブをモデルにしています。タブ付きドキュメントインターフェース（TDI）またはタブは、複数のドキュメントまたはパネルを 1 つのウィンドウに含めることができるグラフィックコントロール要素です。タブは、ドキュメントセットを切り替えるためのナビゲーションウィジェットとして使用されます。

プログレッシブウェブアプリは、ウェブアプリマニフェストの display プロパティによって決まるさまざまな表示モードで実行できます。fullscreen、standalone、minimal-ui、browser のいずれかを指定できます。これらのディスプレイモードは、明確に定義された代替チェーン（"fullscreen" → "standalone" → "minimal-ui" → "browser"）に従います。ブラウザが特定のモードをサポートしていない場合、チェーン内の次のディスプレイモードにフォールバックします。デベロッパーは、必要に応じて "display_override" プロパティを使用して独自のフォールバックチェーンを指定できます。

タブ付きアプリケーションモードとは

これまでこのプラットフォームには、PWA デベロッパーがタブ形式のドキュメントインターフェースをユーザーに提供できる方法がありませんでした。たとえば、同じ PWA ウィンドウで異なるファイルを編集できるようにする方法です。タブ形式のアプリモードでは、このギャップが解消されます。

タブ形式のアプリモードのユースケース

タブ形式のアプリケーションモードを使用するサイトの例としては、次のようなものがあります。

ユーザーが複数のドキュメント（またはファイル）を同時に編集できる生産性向上アプリ。
ユーザーがタブごとに異なる部屋で会話できるコミュニケーションアプリ。
記事のリンクを新しいアプリ内タブで開く読書アプリ。

デベロッパーが作成したタブとの違い

ドキュメントを個別のブラウザタブに配置すると、リソースの分離が実現されます。これは、現在のウェブでは不可能です。デベロッパーが作成したタブは、ブラウザのタブのように数百のタブにスケーリングすることはできません。ナビゲーション履歴、[このページの URL をコピー]、[このタブをキャスト]、[このページをウェブブラウザで開く] などのブラウザのアフォーダンスは、デベロッパーが作成したタブ形式のインターフェースページには適用されますが、選択したドキュメントページには適用されません。

`"display": "browser"` との違い

現在の "display": "browser" にはすでに特定の意味があります。

ユーザーエージェントでハイパーリンクを開くためのプラットフォーム固有の規則（ブラウザのタブや新しいウィンドウなど）を使用して、ウェブアプリケーションを開きます。

ブラウザは UI に関して何でもできますが、"display": "browser" が突然「ブラウザの操作要素はなく、タブ付きドキュメントインターフェースの別のアプリケーション固有のウィンドウで実行」を意味するようになったとしたら、これは明らかにデベロッパーの期待を大きく裏切ることになります。

"display": "browser" を設定すると、アプリケーションウィンドウに表示されることから実質的にオプトアウトできます。

現在のステータス

ステップ	ステータス
1. 説明を作成する	完了
2. 仕様の最初の下書きを作成する	完了
3. フィードバックを収集してデザインを反復する	完了
4. オリジントライアル	完了
5. リリース	完了（ChromeOS）

タブ形式のアプリケーションモードを使用する

タブ形式のアプリモードを使用するには、デベロッパーはウェブアプリマニフェストで特定の "display_override" モード値を設定して、アプリを有効にする必要があります。

{
  "display": "standalone",
  "display_override": ["tabbed"]
}

次に、必要に応じてプロパティ "tab_strip" を使用してタブの動作を微調整できます。使用できるサブプロパティは "home_tab" と "new_tab_button" の 2 つです。"tab_strip" プロパティが存在しない場合、デフォルトは次のオブジェクトになります。

"tab_strip": {
  "new_tab_button": {
    "url": <start_url>,
  },
}

[ホーム] タブ

[ホーム] タブは固定されたタブで、アプリで有効にすると、アプリが開いているときは常に表示されます。このタブは移動しないでください。このタブからクリックされたリンクは、新しいアプリタブで開きます。アプリは、このタブがロックされている URL とタブに表示されるアイコンをカスタマイズできます。

"tab_strip" オブジェクトの "home_tab" メンバーには、アプリケーションの最上位メニューとして機能する特別な「ホームタブ」に関する情報が含まれます。次のメンバーが含まれています。

"scope_patterns": "scope_patterns" メンバーは、マニフェスト URL を基準としたホームタブのスコープを定義する URL パターンのリストです。

新しいタブボタン

"tab_strip" オブジェクトの "new_tab_button" メンバーは、クリックまたは有効化されたときにアプリケーションウィンドウ内に新しいアプリケーションコンテキストを開く UI アフォーダンス（ボタンなど）の動作を記述します。次のメンバーがあります。

"url": "url" メンバーは、処理されたマニフェストのスコープ内にあるマニフェスト URL を基準とした URL を表す文字列です。

処理されたマニフェストの new_tab_button の "url" メンバーがホームタブスコープ外にある場合、アプリには新しいタブボタンがあります。アプリケーションに新しいタブボタンがない場合は、ブラウザはユーザーに対して「新しいタブ」アフォーダンスを利用できないようにします。

サンプルコードの全文

タブ形式のインターフェースを持つアプリの動作を構成する完全な例は次のようになります。

{
  "name": "Tabbed App Example",
  "start_url": "/",
  "display": "standalone",
  "display_override": ["tabbed"],
  "tab_strip": {
    "home_tab": {
      "scope_patterns": [
        {"pathname": "/"},
        {"pathname": "/index.html"}
      ]
    },
    "new_tab_button": {
      "url": "/create"
    }
  }
}

タブ付きアプリケーションモードを検出する

アプリは、CSS または JavaScript で display-mode CSS メディア機能を確認することで、タブ付きアプリケーションモードで実行されているかどうかを検出できます。

@media (display-mode: tabbed) {
  /* Styles to apply in tabbed application mode. */
}

const tabbedApplicationModeEnabled = window.matchMedia('(display-mode: tabbed)').matches;

Launch Handler API との連携

Launch Handler API を使用すると、サイトはアプリの起動を既存のアプリウィンドウにリダイレクトして、重複するウィンドウが開かないようにできます。タブ形式のアプリで "client_mode": "navigate-new" が設定されている場合、アプリの起動時に既存のアプリウィンドウに新しいタブが開きます。

デモ

ChromeOS でタブ付きアプリを試すことができます。

アプリ tabbed-application-mode.glitch.me（ソースコード）をインストールします。
各タブのさまざまなリンクをクリックします。

タブアプリケーションモードのデモ（tabbed-application-mode.glitch.me）。

フィードバック

Chrome チームは、タブ付きアプリケーションモードのご利用状況について、皆様のご意見をお聞かせいただきたいと考えています。

API 設計について

タブ形式のアプリモードで、想定どおりに動作しない点はありますか？作成したウェブアプリマニフェストに関する問題にコメントします。

実装に関する問題を報告する

Chrome の実装にバグが見つかりましたか？new.crbug.com でバグを報告します。できるだけ詳細な情報を含めてください。再現手順も記載してください。[コンポーネント] ボックスに UI>Browser>WebAppInstalls を入力します。Glitch は、簡単な再現ケースを共有するのに適しています。

API のサポートを表示する

タブ形式のアプリモードを使用する予定ですか？公開サポートは、Chrome チームが機能を優先付けするうえで役立ち、他のブラウザベンダーに、その機能のサポートがどれほど重要であるかを示します。

ハッシュタグ #TabbedApplicationMode を使用して @ChromiumDev にツイートを送信し、どこでどのように使用しているかをお知らせください。

役に立つリンク

謝辞

タブ形式のアプリケーションモードは Matt Giuca が検討しました。Chrome での試験運用版の実装は、Alan Cutter によるものです。このドキュメントは Joe Medley によって確認されています。ウィキメディアコモンズの Till Niermann によるヒーロー画像。