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

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

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

François Beaufort

Jungkee Song

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

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

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

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

アプリのショートカットメニューは、ユーザーのデスクトップのタスクバー（Windows）またはドック（macOS）にあるアプリアイコンを右クリックするか、Android でアプリのランチャーアイコンを長押しすると呼び出されます。

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

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

アプリショートカットメニューは、ユーザーのデスクトップデバイスまたはモバイルデバイスにインストールされているプログレッシブウェブアプリにのみ表示されます。インストール要件については、[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 プロパティを含める必要があります。ウェブアプリマニフェストアイコンとは異なり、image の type は省略可能です。執筆時点では、SVG ファイルはサポートされていません。代わりに PNG を使用してください。

ピクセル単位で正確なアイコンが必要な場合は、48dp 単位で指定します（36x36、48x48、72x72、96x96、144x144、192x192 ピクセルのアイコンなど）。それ以外の場合は、192 x 192 ピクセルの単一のアイコンを使用することをおすすめします。

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

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

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

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

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

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

ベストプラクティス

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

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

アプリのショートカット名を区別する

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

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

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

ブラウザサポート

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

対応ブラウザ

ソース

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

Trusted Web Activity のサポート

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

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

Trusted Web Activity を Android アプリに手動で統合する場合は、Android アプリのショートカットを使用して同じ動作を実装できます。

サンプル

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