デベロッパーがウェブを 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 ベータ版テスト プログラムにご参加いただくと、お使いのデバイスが自動的に登録されます。
大画面のデバイスのサポート
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);
…
カスタム タブ
WebView はウェブ UI をアプリに統合するのに適しています。では、アプリ内でユーザーがウェブ コンテンツをブラウジングできるようにするにはどうしたらよいでしょうか。
これはカスタムタブの優れたユースケースです。安全でユーザー フレンドリーな方法で、ユーザーがアプリでウェブ コンテンツを表示できるようになります。大きなメリットは、ユーザーがお気に入りのウェブサイトに再ログインする必要がないことです。これは、ユーザーのデフォルト ブラウザと Cookie が共有されるインスタンスであり、ブラウザが対応しているすべてのウェブ プラットフォーム機能と API が提供されるためです。
また、既定のブラウザが Chrome の場合、カスタムタブは Chrome で開かれ、既定のブラウザが Firefox の場合、カスタムタブは Firefox で開きます。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 は、ダイレクト レスポンス広告でサイズ変更可能なインライン カスタムタブの導入に成功しました。これにより、アプリのオーガニック エクスペリエンスを中断することなく、広告やウェブ コンテンツを操作する新しい方法を実装できました。
では、タブレットやその他の大画面デバイスについてはどうでしょうか。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 倍に増やした事例をご覧いただけます。
おわりに
これまで見てきたように、ウェブ コンテンツをアプリに埋め込むにはさまざまなオプションが用意されており、これらのオプションはすべて継続的に改善されています。