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

Adriana Jara
Sebastian Benz

デベロッパーが ウェブを Android に導入する理由はさまざまです。Android アプリでウェブ ウィジェットを再利用したり、ファーストパーティまたはサードパーティのコンテンツを組み込んだり、ウェブアプリ全体をプラットフォームに移行したりできます。どのようなユースケースでも、Android にはそれを実現するための多くのツールがあります。

これらのツールの最新の更新内容は次のとおりです。例:

  • プライバシーの改善と、大画面のサポートの強化（WebView での画像のドラッグ＆ドロップなど）。
  • カスタムタブで部分的なカスタムタブがサポートされるようになりました。
  • PWA 向けの統合機能（信頼できるウェブ アクティビティのインストール 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 を使用することをおすすめします。つまり、両方の長所を活かすことができます。このヘッダーに基づいて構築された既存の機能を引き続きサポートしながら、他のすべてのケースでユーザーのプライバシーが保護されます。既存の動作を維持する場合は、X-Requested-With のサポート終了オリジン トライアルに登録することもできます。

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

WebView のテスト

次のトピックはテストです。ウェブ デベロッパーで、WebView からウェブサイトに多くのトラフィックが流入している場合は、次の 2 つの更新があります。

  1. WebView で Chrome オリジン トライアルがサポートされるようになりました。オリジン トライアルでは、Chrome の新機能や試験運用版の機能をご利用いただけます。一般公開に先駆けて新しい機能をお試しいただけます。これまで、オリジン トライアルはパソコン版とモバイル版の Chrome でのみ利用可能でしたが、Chrome M110 以降、WebView でも利用できるようになります。

  2. 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 を実行する必要がある場合があります。たとえば、ウェブアプリとモバイルアプリ間でビジネス ロジックを共有する場合などです。これを容易にするため、昨年 新しい 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 ダイレクト レスポンス広告エクスペリエンス。

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

カスタムタブがアプリのメイン コンテンツと並べて表示されている。

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

カスタムタブの 2 つ目の大きな更新は、セッション固有のユーザー エンゲージメントの測定です。ニュースフィードなど、アプリでリンクを含むコンテンツを定期的にユーザーに表示している場合、ユーザーにとって価値のあるリンクとそうでないリンクを区別できれば便利だと思いませんか？この情報は、ユーザーに表示するリンクの優先順位付けに役立ちます。

Chrome チームは、セッション固有の指標の公開設定を Chrome カスタムタブに追加しました。ユーザーがページに滞在した時間に加えて、スクロール距離、スクロール方向、ウェブ コンテンツに対する全体的なエンゲージメントも把握できるようになりました。

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

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

また、ウェブ上で構築してデプロイする、アプリのようなエクスペリエンスを実現する一連のテクノロジーである PWA にも更新が加えられています。

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

PWA の機能はウェブ標準に基づいて構築されており、クロスプラットフォームの互換性に重点を置いています。デベロッパーはウェブアプリを 1 回作成するだけで、ユーザーは任意のデバイスにインストールできます。インストール可能なウェブアプリを作成しても、ネイティブ Android アプリを作成できないわけではありません。また、ネイティブ Android アプリを作成すべきでないというわけではありません。これは、ウェブを Android に導入するもう 1 つの方法です。

インストール可能なウェブアプリを Android で快適に使用するための機能をいくつかご紹介します。

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

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

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

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

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

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

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

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

Trusted Web Activity

ウェブを Android に組み込む別の方法として、Trusted Web Activity（TWA）を使用する方法があります。

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

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

信頼できるウェブ アクティビティは、全画面表示され、URL バーが表示されない点を除き、ユーザーのブラウザに表示されるのとまったく同じように表示されます。つまり、それらのブラウザでサポートされているすべてのウェブ プラットフォーム機能と API がサポートされます。

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

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

ContactsDirect が TWA を使用してユーザーにメリットをもたらし、コンバージョン率を 3 倍に高めた方法について詳しくは、こちらの記事をご覧ください。

まとめ

ここまでに説明したように、ウェブ コンテンツをアプリに埋め込む方法は多数あり、これらのオプションはすべて継続的に改善されています。