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

提案された要素の機能強化

Thomas Steiner

公開日: 2025 年 5 月 12 日

提案されている HTML <permission> 要素は、Chrome チームが最初のオリジントライアルで構築された基盤に基づいて改良しているため、まだオリジントライアル中です。この記事では、ウェブアプリケーション内で権限をリクエストする際の柔軟性と制御性を高めることを目的とした機能強化について説明します。<permission> 要素の導入とその初期機能の包括的な概要については、以前の記事「新しい HTML <permission> 要素のオリジントライアル」を参照してください。

フォールバック UX のコンテンツサポート

<permission> 要素は、Chrome 136 までコンテンツのない空要素として定義されていました。Chrome 137 以降ではコンテンツがサポートされるため、開始タグと終了タグでマークアップすることが必須になりました。

<permission>
  <!-- optional content -->
</permission>

この変更により、要素のコンテンツ内にフォールバックユーザーインターフェースを含めることができます。これらのフォールバックは、<permission> 要素をサポートしていないブラウザで表示されるか、サポートされていない type 属性が指定されている場合に表示されます。これにより、さまざまなブラウザ環境でよりスムーズな機能低下とユーザーエクスペリエンスの向上が実現します。

<!-- Invalid `type` attribute value -->
<permission type="not-supported">
  <p>Your browser does not support the specified <code>type</code>.</p>
</permission>

より詳細なプログラマティック機能の検出

特定の権限タイプのサポートを判断できるように、静的メソッド isTypeSupported() を導入しました。

HTMLPermissionElement.isTypeSupported('geolocation');

このメソッドは、指定された権限タイプがサポートされているかどうかを示すブール値を返します。既存の機能検出 typeof HTMLPermissionElement !== 'undefined' と組み合わせることで、<permission> 要素のサポートと特定の権限タイプのサポートの両方をプログラムで確認できるようになりました。

複数の権限タイプをスペースで区切って渡すこともできます（例: "camera microphone"）。その場合、文字列全体が有効な "type" 値であるかどうかが返されます。たとえば、次のパラメータを指定して isTypeSupported() を呼び出すと、次の結果が返されます。

"camera" → true
"geolocation" → true
"camera geolocation" → false（型は個別にサポートされていますが、組み合わせはサポートされていません）。

更新されたイベント名

Chrome 136 では、以前のイベントに代わる 2 つの新しいイベントが導入されました。

onpromptdismiss（ondismiss に代わるもの）
onpromptaction（onresolve に代わるもの）

これらの新しいイベントは、より明確なセマンティクスを提供し、要素の動作とより適切に連携します。古いイベントは Chrome 138 で非推奨になるため、イベントハンドラを適宜更新することをおすすめします。

アイコンのサポート

Chrome 138 を目標に、<permission> 要素内でのアイコンのサポートを有効にするよう取り組んでいます。この機能を使用すると、権限タイプに対応する事前定義されたアイコンを、色やサイズの調整などの限られたスタイル設定オプションとともに表示できます。API の正確な詳細はまだ最終調整中です。

次の例は、デフォルト、塗りつぶしの色を変更した場合、塗りつぶしの色なしで黒いアウトラインを表示した場合を示しています。

デフォルトのスタイル設定

アイコンのデフォルトの色は、権限要素のテキストの色と同じです。

変更されたスタイル

次の例は、デフォルトのスタイル設定の変更例を示しています。

アイコンの色の変更

::permission-icon {
  fill: black;
}

アイコンの輪郭の変更

::permission-icon {
  fill: white;
  stroke: black;
  stroke-width: 20px;
}

アイコンを無効にする

リリースされると、アイコンはデフォルトで有効になります。アイコンを無効にする場合は、次の CSS を使用します。

::permission-icon {
  display: none;
}

スタイルガイドライン

ベストプラクティスや制限事項など、<permission> 要素のスタイリングに関する包括的なガイダンスについては、<permission> スタイリングガイドラインをご覧ください。このリソースでは、アプリケーション内の要素を効果的にスタイル設定するための詳細な手順について説明します。

プラットフォームと機能のサポートの拡大

<permission> 要素で、次のプラットフォームと機能がサポートされるようになりました。

Android のサポート: この要素が Android デバイスで機能するようになり、さまざまなユーザープラットフォームでの適用範囲が広がりました。
位置情報サポート: preciselocation ブール値属性を追加した <permission> 要素を使用して、type="geolocation" 権限をリクエストできるようになりました。preciselocation 属性はプロンプトの文言にのみ影響しますが、今後のアップデートで、おおよその位置情報と正確な位置情報の権限を区別できるよう積極的に取り組んでいます。

まとめ

<permission> 要素の強化は、権限リクエストを効率化し、ウェブでのユーザーエクスペリエンスを向上させるための継続的な取り組みの一環です。ぜひこれらの新機能をお試しいただき、フィードバックをお寄せください。この機能の改善と進化に役立てさせていただきます。