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

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

Thomas Steiner

公開日: 2025 年 5 月 12 日

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

警告: オリジントライアルでは、テストとフィードバックのために、新しい機能や試験運用版の機能に一時的にアクセスできます。Chrome 126 から 143 まで実施された <permission> 要素のオリジントライアルでは、デベロッパーから肯定的なフィードバックが寄せられ、ユーザーエクスペリエンスを大幅に改善できることが実証されました。
この貴重なフィードバックと標準に関する議論に基づいて、Google は当初のコンセプトを進化させています。一般的な 1 つの <permission> 要素ではなく、<geolocation> や <usermedia> など、各機能の個別のターゲット要素を追求しています。このアプローチでは、各機能の柔軟性と明確性が向上します。
つまり、一般的な <permission> 要素のオリジントライアルは Chrome 143 で終了します。<geolocation> や <usermedia> などの後継要素の開発は継続され、<usermedia> 要素は新しいトークンを使用した新しいオリジントライアルに移行されます。関心のあるデベロッパーは、リンク先の説明リポジトリの開発をフォローして、最新情報を入手し、フィードバックを共有することをおすすめします。

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