マスク可能なアイコンを使用する PWA のアダプティブ アイコンのサポート

Thomas Steiner
Tiger Oakes

最近の Android スマートフォンにプログレッシブ ウェブアプリ（PWA）をインストールしている場合、 アプリのアイコンの背景が白になります。Android 8.0 で導入 デバイス全体にさまざまな形のアプリアイコンを表示するアダプティブ アイコン 構築できますこの形式を使用しないアイコンの背景は白色です。

<ph type="x-smartling-placeholder">
</ph> Android での白い丸い PWA アイコン
Android では、透明な PWA アイコンが白い丸内に表示されます。

マスク可能なアイコンは、Chrome と Firefox の新しいアイコン形式で、 プログレッシブ ウェブアプリではアダプティブ アイコンが使用されており、アプリの アイコンの外観を設定できます。

<ph type="x-smartling-placeholder">
</ph> 円全体を覆う PWA アイコン（Android）
マスク可能なアイコンが円全体に表示されます。

現在のアイコンを使用する準備はできていますか？

マスク可能なアイコンはさまざまな形状をサポートする必要があるため、マスク可能なアイコンを ブラウザが必要なサイズに切り抜くことができるパディングを含む不透明な画像 あらゆるブラウザやプラットフォームに適した形状とサイズです。

<ph type="x-smartling-placeholder">
</ph>
プラットフォーム固有のさまざまなアイコン形状。

マスク可能なアイコンの仕様には、標準化された "最小セーフゾーン"すべてのプラットフォームが尊重されます。P-MAX キャンペーンの重要な部分は、 アイコンは、中央の円形領域内に存在する必要があります。 半径はアイコン幅の 40% にします。外側の 10% のエッジは、 一部のプラットフォームで切り抜かれます。

Chrome を使用して、アイコンのどの部分がセーフゾーン内にあるかを確認できます DevTools。プログレッシブ ウェブアプリを開いて DevTools を開き、 [Application] パネルで確認できます。[アイコン] で、以下を選択できます。 マスク可能なアイコンの最小セーフエリアのみを表示する。これによりアイコンがトリミングされ、 セーフエリアのみが表示されます。このセーフエリア内にロゴが見える場合は アイコンの準備が整いました

<ph type="x-smartling-placeholder">
</ph> 端が切り抜かれた PWA アイコンが表示されている DevTools の [Applications] パネル
切り抜かれた PWA アイコンが表示された [Applications] パネル。

マスク可能なアイコンをさまざまな Android シェイプでテストするには、Tiger Oakes の Maskable.app。アイコンを開くと、Maskable.app で さまざまな形やサイズを試して、チームとプレビューを共有できます。

マスク可能なアイコンを採用するにはどうすればよいですか？

既存のアイコンに基づいてマスク可能なアイコンを作成するには、 Maskable.app エディタ。アイコンをアップロードし、 画像をエクスポートします

<ph type="x-smartling-placeholder">
</ph> Maskable.app エディタのスクリーンショット
Maskable.app エディタでアイコンを作成する。

マスク可能なアイコンを作成して DevTools でテストした後、 ウェブアプリ マニフェストを編集して新しいアセットを参照します。「 ウェブアプリ マニフェストは、ウェブアプリに関する情報を JSON ファイルで提供します。 icons 配列が含まれている。

purpose フィールドでは、アイコンの使用方法をブラウザに伝えます。デフォルトでは アイコンの目的が "any" であること。Android では、アイコンのサイズは白地の 説明します。

{
  …
  "icons": [
    …
    {
      "src": "path/to/regular_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "path/to/maskable_icon.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable" // <-- New property value `"maskable"`
    },
    …
  ],
  …
}

アイコンをマスク可能にするには、purpose の値を "maskable" に設定して、 使用する必要があります。白い背景が取り除かれ、 を使用すると、アイコンの外観をより詳細に制御できます。複数のゾーンに スペース区切りの目的（例: "any maskable"）を使用 他のデバイスでマスクなしで使用するマスク可能なアイコン。

謝辞

このページは Joe Medley によってレビューされました。