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

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

François Beaufort

Jungkee Song

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

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

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

アプリのショートカットを使用すると、ユーザーはウェブアプリで一般的なタスクやおすすめのタスクを簡単に開始できます。アプリアイコンが表示される場所からそれらのタスクに簡単にアクセスできるため、ユーザーの生産性が向上し、ウェブアプリへのエンゲージメントも高まります。

アプリのショートカット メニューは、ユーザーのパソコンのタスクバー（Windows）またはドック（macOS）のアプリアイコンを右クリックするか、Android ではアプリのランチャー アイコンを長押しすると起動します。

アプリのショートカット メニューは、ユーザーのパソコンまたはモバイル デバイスにインストールされているプログレッシブ ウェブアプリにのみ表示されます。インストール要件については、「PWA の学習」モジュールのインストールをご覧ください。

アプリの各ショートカットはユーザー インテントを表し、それぞれがウェブアプリのスコープ内の URL に関連付けられます。URL は、ユーザーがアプリのショートカットを有効にすると開きます。アプリのショートカットの例を以下に示します。

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

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

アプリのショートカットは、必要に応じてウェブアプリ マニフェストで定義します。マニフェストは、ウェブアプリについて、およびユーザーのデスクトップやモバイル デバイスにインストールしたときの動作をブラウザに伝える JSON ファイルです。より具体的には、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 配列の各メンバーは、少なくとも 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 単位をピクセル単位に変換するための式から導出されます）。

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

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

このペインには、アプリのショートカットなど、マニフェストの多くのプロパティが人が読めるバージョンで表示されます。これにより、すべてのショートカット アイコンが正しく読み込まれていることを簡単に確認できます。

プログレッシブ ウェブアプリの更新は 1 日 1 回に限られているため、すべてのユーザーがすぐに使用できるとは限りません。詳しくは、Chrome がウェブアプリ マニフェストの更新を処理する方法をご覧ください。

ベスト プラクティス

アプリのショートカットを優先度で並べ替える

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

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

アプリのショートカットは常に表示されるとは限らないため、アイコンに依存してアプリのショートカットを区別しないでください。たとえば、macOS はホルダーのショートカット メニューのアイコンをサポートしていません。アプリのショートカットごとに異なる名前を使用します。

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

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

ブラウザ サポート

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

Trusted Web Activity のサポート

Trusted Web Activity を使用する Android アプリの作成に推奨されるツールである Bubblewrap は、ウェブアプリ マニフェストからアプリのショートカットを読み取り、Android アプリに対応する構成を自動的に生成します。なお、アプリのショートカットのアイコンは必須で、Bubblewrap では 96 x 96 ピクセル以上にする必要があります。

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

信頼できるウェブ アクティビティを Android アプリに手動で統合するデベロッパーは、Android アプリのショートカットを使用して同じ動作を実装できます。

サンプル

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

関連情報

• MDN
• 仕様
• アプリのショートカットのサンプル | アプリのショートカットのサンプルソース
• Blink コンポーネント: UI>Browser>WebAppInstalls