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

ウェブ向けの Android の新機能（2023 年）

Adriana Jara

Sebastian Benz

デベロッパーがウェブを Android に移行する理由はさまざまです。たとえば、ウェブウィジェットを Android アプリで再利用したり、ファーストパーティやサードパーティのコンテンツを組み込んだり、ウェブアプリ全体をプラットフォームに組み込んだりできます。Android には、ユースケースが何であれ、それを可能にする多くのツールが用意されています。

各ツールの最新情報をご紹介します。次に例を示します。

WebView での画像ドラッグ&ドロップのサポートなど、プライバシーが向上し、大画面のサポートが強化されました。
カスタムタブで、部分的なカスタムタブがサポートされるようになりました。
PWA 向けの統合された機能（Trusted Web Activity のリッチなインストール UI や Play Billing API など）

詳しく見ていきましょう。

WebView

Android アプリのほとんどは WebView を使用しているため、WebView は Android アプリにウェブコンテンツを埋め込むために最もよく使用される方法です。ネイティブ Android アプリのエクスペリエンスにウェブ UI をシームレスに統合できる優れた方法です。たとえば、広告、ウィジェット、アプリ内ブラウザなど、さまざまなウェブ UI をアプリに埋め込むことができます。WebView の最大の強みの一つは、読み込まれるウェブコンテンツを制御および変更する強力な API です。WebView の新機能

X-Requested-With ヘッダー

まず、プライバシーと X-Requested-With ヘッダーのサポート終了から始めましょう。WebView を使用してウェブコンテンツを埋め込むアプリをユーザーがインストールして実行すると、WebView はサーバーに送信されるすべてのリクエストに X-Requested-With ヘッダーを追加します。このヘッダーの値はアプリの APK 名です。つまり、すべてのリクエストに、ユーザーがウェブコンテンツを利用している状況に関する具体的な情報が含まれ、アプリの ID がオンラインサービスに漏洩します。ユーザーのプライバシーを保護するため、WebView チームはすべての WebView リクエストからこのヘッダーを削除するサポート終了トライアルを開始しました。

しかし、アプリが X-Requested-With ヘッダーに依存している場合はどうすればよいでしょうか。おすすめの方法は、新しいオプトイン API を使用することです。この API を使用すると、リクエストヘッダーを特定の生成元に選択的に送信できます。これにより、両方の長所を活かすことができます。このヘッダーを基に構築された既存の機能を引き続きサポートしながら、それ以外のケースではユーザーのプライバシーが維持されます。既存の動作を維持したい場合は、X-Requested-With Deprecation オリジントライアルに登録することもできます。

WebSettingsCompat.setRequestedWithHeaderOriginAllowList(
    demoWebview.getSettings(), Collections.singleton("https://example.com")
);

WebView のテスト

次のトピックはテストですWebView によるウェブサイトのトラフィックが多いウェブデベロッパーには、次の 2 つのアップデートがあります。

WebView で Chrome オリジントライアルがサポートされるようになりました。オリジントライアルでは、Chrome の新機能や試験運用版の機能をご利用いただけます。一般公開に先駆けて新しい機能を試すことができます。これまでオリジントライアルを利用できるのは、パソコンとモバイルの Chrome のみでしたが、Chrome M110 以降、WebView でもオリジントライアルを利用できます。
WebView（ベータ版）のインストールがはるかに簡単になりました。WebView ベータ版チャンネルを使用してウェブサイトをテストし、今後予定されている WebView バージョンでウェブサイトが適切に動作するか確認することを強くおすすめします。Google Play ストアの WebView ベータ版テストプログラムにご参加いただくと、お使いのデバイスが自動的に登録されます。

WebView ベータ版プログラムに参加するためのウェブサイトのスクリーンショット。

大画面のデバイスのサポート

Google の目標は、WebView を大画面デバイスで適切に動作させることです。その一歩として、WebView で画像のドラッグ&ドロップがサポートされるようになりました。たとえば、分割画面ビューモードでは、WebView から別のアプリに画像をドラッグできます。

WebView にドラッグ&ドロップを追加するのはとても簡単です。AndroidManifest で DropDataProvider を宣言するだけです。

<application...>
     ...
     <provider
         android:authorities="com.example.webviewdemo.DropDataProvider"
         android:name="androidx.webkit.DropDataContentProvider"
         android:exported="false"
         android:grantUriPermissions="true"/>
 </application>

大画面デバイスについて言えば、Android U の Chrome と WebView は、HTML テキスト入力フィールドでの手書き入力と、テキストの削除やスペースの追加のための入力ジェスチャーを完全にサポートします。手書き入力は、S23 Ultra など、One UI 5.1 を搭載したすべての Samsung デバイスですでに利用可能です。Android T を使用するその他のデバイスでは、[開発者向けオプション] で HTML 入力での手書き入力を有効にできます。

Jetpack JavaScript エンジン

ウェブアプリとモバイルアプリでビジネスロジックを共有する場合など、ウェブコンテンツを表示せずにアプリで JavaScript を実行しなければならない場合もあります。これを簡単に行うため、Google は昨年、新しい JetPack JavaScript エンジンのアルファ版リリースをリリースしました。このライブラリは Chrome の JavaScript エンジン V8 を使用し、WebView インスタンスを作成することなく、アプリケーションで JavaScript や WebAssembly のコードを評価できるようにします。新しい JavaScript エンジンの優れている点は、JavaScript を別のプロセスで実行する点です。これにより、アプリ内で JavaScript を安全かつ安定的に実行できます。必要なリソースも WebView インスタンスより少なくなります。

ListenableFuture<JavaScriptSandbox> jsSandboxFuture =
JavaScriptSandbox.createConnectedInstanceAsync(JavaScriptEngineActivity.this);
JavaScriptIsolate jsIsolate = jsSandboxFuture.get().createIsolate();
final String code =
"function sum(a, b) { let r = a + b; return r.toString(); }; sum(3, 4)";
ListenableFuture<String> resultFuture = jsIsolate.evaluateJavaScriptAsync(code);
…

カスタムタブ

デフォルトのスタイルが設定された Android カスタムタブ。

WebView はウェブ UI をアプリに統合するのに適しています。では、アプリ内でユーザーがウェブコンテンツをブラウジングできるようにするにはどうしたらよいでしょうか。

これはカスタムタブの優れたユースケースです。安全でユーザーフレンドリーな方法で、ユーザーがアプリでウェブコンテンツを表示できるようになります。大きなメリットは、ユーザーがお気に入りのウェブサイトに再ログインする必要がないことです。これは、ユーザーのデフォルトブラウザと Cookie が共有されるインスタンスであり、ブラウザが対応しているすべてのウェブプラットフォーム機能と API が提供されるためです。

また、既定のブラウザが Chrome の場合、カスタムタブは Chrome で開かれ、既定のブラウザが Firefox の場合、カスタムタブは Firefox で開きます。Android の主要なブラウザのほとんどはカスタムタブをサポートしています。デフォルトのブラウザがカスタムタブをサポートしていない場合は、代わりにブラウザアプリが開きます。

カスタムタブの長所は、アプリのデザインに合うようにスタイルを設定できることです。また、アクションを使って独自のインタラクティビティを追加することも、独自のツールバーを使用することもできます。

カスタムカラーテーマとツールバーを使用した Android カスタムタブ。

部分的なカスタムタブ

カスタムタブのカスタマイズがメジャーアップグレードされ、部分的なカスタムタブがサポートされるようになりました。アプリとウェブの間でマルチタスクを行えます。これまでは、カスタムタブを使用する場合、ブラウザタブのオーバーレイは画面全体に表示されていました。カスタムタブオーバーレイの高さを制御できるようになりました。これにより、ユーザーはアプリとウェブコンテンツを同時に操作できます。ユーザーのブラウザが部分的カスタムタブをサポートしていない場合は、サポートされたカスタムタブが全画面表示されます。

必要な作業は、カスタムタブサービスに接続し、セッションを CustomTabsBuilder に渡して、setActivityHeight を呼び出すことだけです。

CustomTabsSession customTabsSession;

// ...

CustomTabsIntent customTabsIntent = new CustomTabsIntent.Builder(customTabsSession)
  .setInitialActivityHeightPx(500)
  .setCloseButtonPosition(CustomTabsIntent.CLOSE_BUTTON_POSITION_END)
  // ...
  .build();

customTabsIntent.launchUrl(context, Uri.parse(url))

YouTube は、ダイレクトレスポンス広告でサイズ変更可能なインラインカスタムタブの導入に成功しました。これにより、アプリのオーガニックエクスペリエンスを中断することなく、広告やウェブコンテンツを操作する新しい方法を実装できました。

部分的カスタムタブを使用した YouTube DirectResponse 広告エクスペリエンス。

では、タブレットやその他の大画面デバイスについてはどうでしょうか。Chrome チームは現在、横向きと大画面のデバイス向けに、カスタムタブを並べて表示する新機能の開発に取り組んでいます。カスタムタブで最大タブ幅をブレークポイントとともに定義すると、カスタムタブでボトムシートオーバーレイと横並びの画面が自動的に切り替わります。この機能はすでに Canary 版で利用可能で、2003 年 7 月頃にリリースされる予定です。試してみたい場合は、Chromium カスタムタブサンプルアプリのソースコードをご覧ください。

アプリのメインコンテンツと並んで表示されるカスタムタブ。

エンゲージメントシグナルの測定

カスタムタブの 2 つ目の大きな更新は、セッション固有のユーザーエンゲージメントの測定です。ニュースフィードなどのリンクを含め、アプリがユーザーにコンテンツを定期的に表示している場合、ユーザーがどのリンクを有益で、どのリンクが有用かを見分けられると便利です。この情報は、ユーザーに表示するリンクの優先順位を決める際に大いに役立ちます。

Chrome カスタムタブにセッション固有の指標が表示されるようになりました。ユーザーがページに滞在した時間だけでなく、スクロール距離、スクロール方向、ウェブコンテンツに対する全体的なエンゲージメントも可視化できるようになりました。

エンゲージメントシグナルは Chrome 114 以降でご利用いただけます。androidx.browser:browser:1.6.0-alpha01 サポートライブラリ以降が必要です。詳しくは、エンゲージメントシグナルのスタートガイドをご覧ください。

プログレッシブウェブアプリ（PWA）

また、PWA にもアップデートがあります。PWA は、ウェブ上に構築、デプロイされる、アプリに近いエクスペリエンスの作成を可能にする一連のテクノロジーです。

Android で PWA を使用すると、ウェブアプリをインストールできるようになります。ウェブアプリは、他のプラットフォームアプリと一緒に、ホーム画面、ランチャー、設定、その他のサーフェスに表示されます。

PWA 機能はウェブ標準に基づいて構築されています。クロスプラットフォームの互換性に重点を置いているため、デベロッパーはウェブアプリを 1 回だけ構築できるツールを提供し、ユーザーは任意のデバイスにインストールできます。インストール可能なウェブアプリを構築したからといって、ネイティブの Android アプリがない、またはあるべきではないわけではありませんが、ウェブを Android に取り込むための別の選択肢です。

インストール可能なウェブアプリを Android で使いやすくするための機能をいくつか確認しましょう。

Google では、ユーザーが最も重視しているウェブサイトをインストールできるようにしたいと考えました。最初のステップは、Android と Chrome にインストールする際の要件である Service Worker のフェッチハンドラを削除することでした。また、フェッチハンドラが空の場合、Chrome は Service Worker の起動をスキップします。Chrome では、ユーザーがインストールを利用できるようにするためのテストを実施します。今後の情報にご注目いただき、フィードバックをお寄せください。

Service Worker の要件は、デベロッパーが他の Android アプリと一貫したユーザーエクスペリエンスを実現するためでした。オフライン時にアプリを使用できなかったことをユーザーに通知するページの作成に使用できます。

私たちは、開発者の作業負荷を軽減し、これらのアプリが最初から優れたインストールエクスペリエンスを提供できるようにできることに気付きました。そのため、Chrome にデフォルトのオフラインエクスペリエンスを追加しました。この画面にはアプリのアイコンが表示され、オフラインであることをユーザーに示せます。デベロッパーによる追加の作業は必要ありません。

もちろん、Service Worker API は引き続き、カスタムのオフラインエクスペリエンスの構築や、パフォーマンス向上のためのキャッシュ保存などの機能の実装に使用できます。

洗練されたウェブアプリのエクスペリエンスを Android にもたらすその他の機能には、豊富なインストール UI があります。description フィールドと screenshots フィールドをウェブマニフェストに追加すると、ユーザーは、アプリストアでアプリの説明として表示されているものに近いインストールエクスペリエンスを提供できます。

ショートカットもあります。ユーザーがアプリで頻繁に行うクイックアクションのセットを表す shortcuts という配列を追加すると、ユーザーはアプリのアイコンを長押しすることで、これらのアクションにアクセスできるようになります。

Web Share API と Web Share Target API を使用すると、アプリは他のプラットフォームアプリと同様に他のアプリと連携できます。アプリは共有シートのオプションとなり、写真、テキスト、その他のファイルを共有および受信できます。

企業がこれらのテクノロジーをどのように活用しているかについて詳しくは、I/O の講演「ウェブ: 成長のためのプラットフォーム」をご覧ください。

信頼できるウェブアクティビティ

ウェブを Android に取り込むもう 1 つの方法は、Trusted Web Activity（TWA）を使用することです。

TWA は、自社のウェブコンテンツをアプリで全画面表示するための最適な方法です。ウェブアプリを Android アプリとしてラップしたり、ウェブサイトの一部としてアプリを使用したりするデベロッパーにとって理想的なソリューションです。

TWA は PWA に厳密に関連しているように見えますが、そうではありません。はい。TWA を使用すると、インストール可能なウェブアプリを Google Play に公開できます。また、ウェブ上でアクティビティを 1 つ作成し、Android アプリに含めることもできます。

Trusted Web Activity は、ユーザーのブラウザでレンダリングされるのとまったく同じ方法でユーザーのブラウザにレンダリングされます。ただし、全画面で実行され、URL バーが表示されない点が異なります。つまり、ブラウザでサポートされているすべてのウェブプラットフォーム機能と API がサポートされます。

TWA を使用してウェブアプリをラップする利点は次のとおりです。

Google Play に公開: アプリは Google Play で公開、配信できるようになります。Play Billing API へのアクセス。これにより、デベロッパーはアプリ内でデジタル商品の販売を管理し、アイテム、販売、定期購入などを簡単にセットアップできるようになります。通知と位置情報の利用許可をウェブサイトではなく Android アプリに委任する。

こちらの記事では、ContactsDirect が TWA を使用してユーザーにメリットをもたらし、コンバージョン率を 3 倍に増やした事例をご覧いただけます。

おわりに

これまで見てきたように、ウェブコンテンツをアプリに埋め込むにはさまざまなオプションが用意されており、これらのオプションはすべて継続的に改善されています。