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

アプリのショートカットで操作をすばやく完了

アプリのショートカットを使用すると、ユーザーが頻繁に必要とするいくつかの一般的な操作にすばやくアクセスできます。

François Beaufort

Jungkee Song

ユーザーの主要なタスクへの再エンゲージメントを促進し、ウェブプラットフォームがアプリのショートカットをサポートするようになりました。ウェブデベロッパーは、ユーザーが頻繁に必要とする、いくつかの一般的な操作にすばやくアクセスできます。

この記事では、アプリのショートカットを定義する方法について説明します。また関連するベストプラクティスについて学習します。

アプリのショートカットについて

アプリのショートカットを使用すると、Google Chat 内で一般的なタスクやおすすめのタスクを簡単に開始できます。できます。アプリアイコンが表示されていればどこからでも簡単にタスクにアクセスできるため、ユーザーのウェブエンゲージメントの向上に役立っています。。

アプリのショートカットメニューは、タスクバーのアプリアイコンを右クリックして呼び出す（Windows）またはドック（macOS）をタップするか、アプリケーションのランチャーアイコン（Android 用）

Android で開いたアプリのショートカットメニューのスクリーンショット — Android でアプリのショートカットメニューを開く

Windows で開いたアプリのショートカットメニューのスクリーンショット — Windows でアプリのショートカットメニューを開く

アプリのショートカットメニューは、次の要件があるプログレッシブウェブアプリの場合にのみ表示されます。インストールされている必要があります設置方法をご確認ください。「Learn PWA」をご覧くださいモジュールへようこそ。

アプリの各ショートカットはユーザーの意図を表現し、それぞれがユーザーの意図とウェブアプリのスコープ内の URL。ユーザーが有効にすると URL が開くクリックします。アプリのショートカットの例は以下のとおりです。

最上位のナビゲーション項目（ホーム、タイムライン、最近の注文など）
検索
データ入力のタスク（メールやツイートの作成、領収書の追加など）
アクティビティ（最も人気のある連絡先とのチャットを開始するなど）

で確認できます。

ウェブアプリマニフェストでアプリショートカットを定義する

アプリショートカットは、必要に応じてウェブアプリマニフェストで定義されます。これは、ブラウザは、ウェブアプリとその動作をインストールされている必要があります具体的には shortcuts 配列メンバーで宣言されます。以下は、ウェブアプリマニフェストの例。

{
  "name": "Player FM",
  "start_url": "https://player.fm?utm_source=homescreen",
  …
  "shortcuts": [
    {
      "name": "Open Play Later",
      "short_name": "Play Later",
      "description": "View the list of podcasts you saved for later",
      "url": "/play-later?utm_source=homescreen",
      "icons": [{ "src": "/icons/play-later.png", "sizes": "192x192" }]
    },
    {
      "name": "View Subscriptions",
      "short_name": "Subscriptions",
      "description": "View the list of podcasts you listen to",
      "url": "/subscriptions?utm_source=homescreen",
      "icons": [{ "src": "/icons/subscriptions.png", "sizes": "192x192" }]
    }
  ]
}

shortcuts 配列の各メンバーは、少なくとも 1 つのテーブルを含む name と url。他のメンバーは省略可能です。

name

アプリのショートカットに付けられる、人が読める形式のラベル。ユーザーに表示されます

short_name（任意）

スペースが限られている場合に使用される、人が読める形式のラベル。おすすめの方法保存されても、省略可。

description（任意）

人間が読める形式の、アプリのショートカットの目的。このドキュメントの作成時点では使用されていませんが、支援技術にさらされる可能性があります使用できます。

url

ユーザーがアプリを有効化したときに開く URL できます。この URL は、ウェブアプリマニフェストのスコープ内に存在する必要があります。もし相対 URL の場合、ベース URL はウェブアプリマニフェストの URL になります。

icons（任意）

画像リソースオブジェクトの配列。各オブジェクトは src プロパティと sizes プロパティが含まれている。ウェブアプリマニフェストのアイコンとは異なり、画像の type は省略可能です。このドキュメントの作成時点では、SVG ファイルはサポートされていません。代わりに PNG を使用してください。

ピクセルパーフェクトなアイコンを使用する場合は、48 dp 単位で指定します（例: 36x36、（48x48、72x72、96x96、144x144、192x192 ピクセルのアイコン）。それ以外の場合は、 192x192 ピクセルのアイコンを 1 つ使用することです

品質の目安として、アイコンはデバイスの理想的なサイズの半分以上 Android は 48 dp です。たとえば、xxhdpi の画面で表示するには、アイコン 72 x 72 ピクセル以上である必要があります（これは dp 単位をピクセル単位に変換する数式）

アプリのショートカットをテストする

アプリのショートカットが正しく設定されていることを確認するには、Google Chat の [Manifest] ペインを使用します。 DevTools の [Application] パネル

DevTools のアプリショートカットのスクリーンショット — DevTools に表示されるアプリのショートカット

このペインでは、マニフェストの多くの情報が人が読める形式で表示されます。プロパティ（アプリのショートカットなど）も参照できます。こうすることで、既存のすべてのルールがショートカットアイコンが提供されていれば、正しく読み込まれます。

プログレッシブはアプリショートカットであるため、すべてのユーザーがすぐにウェブアプリの更新は 1 日 1 回に制限されています。詳細情報: ウェブアプリマニフェストの更新に対する Chrome での処理方法をご覧ください。

ベストプラクティス

アプリのショートカットを優先度順に並べる

ショートカットは、マニフェストで定義した順序で表示されます。アプリのショートカットは優先度順に並べることをおすすめします。表示されるアプリのショートカットの数はプラットフォームによって異なります。Chrome と Edge（オン）たとえば Windows では、Chrome for Education のショートカットの数が 10 個に制限され、 Android はディスプレイ 3 のみ。Android 7 の Chrome 92 より前では、4 つでした。Chrome 92 はサイト設定にショートカットを追加し、利用可能なショートカットの 1 つをスロットを定義します。

個別のアプリショートカット名を使用する

アプリのショートカットを区別するためにアイコンに依存しないでください。アイコンは正しくない場合があります。表示されます。たとえば、macOS は Dock 内のアイコンに対応していませんアクセスできます。アプリのショートカットごとに個別の名前を使用する。

アプリのショートカットの使用状況を測定する

次のように、アプリのショートカットの url エントリにアノテーションを付ける必要があります。分析を目的とした start_url（例: url: "/my-shortcut?utm_source=homescreen"）。

ブラウザサポート

アプリのショートカットは、下記のプラットフォームとバージョンで使用できます。

対応ブラウザ

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

ソース

ChromeOS で開いたアプリのショートカットメニューのスクリーンショット — ChromeOS でアプリのショートカットメニューを開きました

Trusted Web Activity のサポート

バブルラップは、信頼できるウェブアプリケーションを使用する Android アプリを構築するための推奨ツールです。アクティビティで、ウェブアプリマニフェストからアプリのショートカットを読み取り、 Android アプリに対応する構成を生成します。なお、アプリのショートカットは必須で、96 x 96 ピクセル以上バブルラップ。

PWABuilder: プログレッシブウェブアプリを信頼できるアプリに簡単に変換できる優れたツールウェブアクティビティは、アプリのショートカットをサポートしていますが、いくつかの注意点があります。

Trusted Web Activity を Android に手動で統合するデベロッパー向け Android アプリのショートカットを使用して、同じものを実装することもできます。サポートします。

サンプル

アプリのショートカットのサンプルとそのソースをご確認ください。