埋め込みウェブを使用したアプリ内ブラウジング

アプリ内ブラウザを使用すると、ユーザーはアプリを離れることなく、ウェブの機能をフルに活用できます。Android には、アプリ内ブラウザを実装するための主な API が 2 つあります。 カスタムタブとWebViewです。ウェブページにリンクするリンクや広告がある場合は、アプリ内ブラウザを使用します。図 1 に示すように、アプリ内でそのページを開くことができます。

赤いボックスで囲まれたアプリ内リンクと、カスタムタブで開かれたリンクを示す別の画面を指す矢印。
図 1. アプリ内リンクをクリック（左）し、カスタム タブを使用してアプリ内ブラウザを開く（右）。

カスタム タブと WebView のどちらを選択するかは、開発速度、ユーザー エクスペリエンス、UI の制御度合いに影響する重要なアーキテクチャ上の決定です。

比較早見表

ニーズに合ったツールを選択する際は、次の表を参考にしてください。

機能 WebView カスタム タブ
主なユースケース ウェブをメイン コンテンツまたはサポート コンテンツとして使用するハイブリッド アプリの構築、広告、アプリ内キャンペーン、利用規約ページの表示。 外部ウェブサイト（ニュース記事や商品ページなど）のコンテンツの表示。
UI の制御 フル。任意の場所に配置できる View コンポーネントです。周囲の UI をすべて制御できます。 制限あり。ツールバーの色をテーマ設定したり、カスタム アクションをいくつか追加したりできます。
データとセッション サンドボックス化。Cookie やログイン情報をユーザーのメイン ブラウザと共有しません。 共有。Cookie や保存されたパスワードなど、ユーザーのデフォルト ブラウザのセッションを使用します。
ネイティブ <-> ウェブブリッジ はい。JavaScript ブリッジを使用して、ウェブ コンテンツとネイティブ アプリコード間の双方向のディープな通信を行うことができます。 制限あり。window.postMessage() メソッドを使用して、基本的な文字列の受け渡しを行うことができます。
デベロッパーの労力 多い。ライフサイクル、ナビゲーション、パフォーマンスを自分で管理する必要があります。 少ない。わずか数行のコードで実装できます。

WebView

WebView は、ウェブページをアプリのレイアウトに統合するビューです。 強力な機能ですが、カスタム タブに比べて処理が少し複雑です。

WebView は、リモートまたはローカルのウェブ コンテンツを読み込み、JavaScript を実行し、ウェブ コンテンツとネイティブ アプリコード間の双方向通信を可能にします。機能の詳細については、WebView でできることを ご覧ください。

WebView を使用して、ウェブ アプリケーションを提供したり、アプリの一部としてオンライン ウェブページを表示したりすることもできます。たとえば、定期的に更新する必要があるエンドユーザー契約などです。詳細については、WebView でウェブアプリを構築するをご覧ください。

WebView を選択する理由

WebView が適しているシナリオをいくつか示します。

  • ハイブリッド アプリ: ウェブ コンテンツとネイティブ コンポーネント（ナビゲーション バーやフローティング アクション ボタンなど）が並存するアプリを構築する場合。
  • ファーストパーティ コンテンツ: ウェブ コンテンツが、ドキュメント エディタやデザイン キャンバスなど、アプリ エクスペリエンスの中核となるインタラクティブな部分である場合。
  • UI の完全な制御: ウェブページ自体の内容を変更したり、ネイティブ UI 要素を重ねて表示したりする必要がある場合。
  • 詳細な分析: ウェブビュー内のユーザー エンゲージメントとアクティビティに関する詳細な分析情報が必要な場合。

主なトレードオフ

WebView を使用する際に考慮すべき主なトレードオフを次に示します。

  • パフォーマンス: WebView はメモリを大量に消費する可能性があります。慎重に管理しないと、パフォーマンスの問題や ANR（アプリが応答しないエラー）が発生する可能性があります。
  • セキュリティとメンテナンス: セキュリティの強化とライフサイクルの管理はユーザーの責任です。これには、状態の保存の管理 プロセス再作成時のWebViewCompat.saveState()を使用した、Android の保存状態トランザクションの 1 MB の上限内での維持が含まれます。ただし、WebView のアップデートは Google Play を通じてグローバルにリリースされるため、基盤となるエンジンが古くなる心配はありません。

カスタム タブ

カスタム タブは、外部 URL にユーザーを誘導するのに最適です。高速で安全かつユーザー フレンドリーなブラウザ ウィンドウがアプリの上にスライド表示されます。

カスタム タブを選択する理由

カスタム タブが適しているシナリオをいくつか示します。

  • 外部リンク: ユーザーが所有していないウェブサイトへのリンクをタップすると、カスタム タブはユーザーをアプリのコンテキストにとどめながら、ブラウザの機能をフルに提供します。
  • 統合の容易さ: 埋め込みウェブ エクスペリエンスを起動して実行する最も簡単な方法です。
  • 状態の共有: Cookie をユーザーのデフォルト ブラウザと共有するため、ユーザーはすでにアクセスしたサイトに再度ログインする必要はありません。
  • サードパーティ ログイン: ブラウザが認証情報を安全に処理するため、「Google でログイン」や「Facebook でログイン」などのサードパーティ ログイン フローに適しています。

ほとんどのブラウザがカスタム タブをサポートしていますが、カスタマイズの程度はブラウザによって異なります。詳細については、対応ブラウザをご覧ください。

Jetpack Compose でウェブ コンテンツを使用する

Jetpack Compose でビルドする場合は、カスタム タブと WebView の両方を使用できます。

  • カスタム タブ: カスタム タブは Intent を使用するため、Compose 関数の任意の Context から起動でき、シームレスな統合が可能です。
  • WebView: Compose にはまだネイティブの WebView コンポーザブルがないため、 AndroidView を使用して標準の WebView をレイアウトに埋め込む必要があります。

参考情報

WebView またはカスタム タブ API を使用して Android デバイス向けウェブページを開発するには、次のドキュメントをご覧ください。