Android アプリ内でウェブ コンテンツを使用する

Android では、デベロッパーはアプリ内でウェブの機能を活用できるため、特定の種類のコンテンツを表示できる柔軟性と効率性を活用できます。

これにより、既存のウェブ コンテンツをネイティブ Android アプリにシームレスに統合できます。たとえば、ニュースフィードの表示、インタラクティブなチュートリアルの表示、広告の表示、ミニゲームのホスティングなど、すべてをゼロから構築しなくても可能です。アプリ内からインターネットにアクセスできるウィンドウと考えてください。ウェブ コンテンツをアプリに埋め込む方法は 2 つあります。

  • WebView: UI のカスタマイズや更新に高い柔軟性が求められる場所に、インラインで制御するウェブ コンテンツを表示します。
  • カスタムタブ: ユーザーのデフォルト ブラウザ(ブラウザのサポートを参照)を活用した完全なアプリ内ブラウジング エクスペリエンス。ユーザーがリンクをクリックしたときに、外部ブラウザに移動せずにアプリ内に留めておく場合に使用します。ブラウジング エクスペリエンスの多くは、すぐに使用できます。
Google Play に開いた Android アプリ。プライマリ ウェブビューが赤いボックスでハイライト表示されています。 Android 向けデベロッパー ウェブページが開いたカスタムタブ(赤いボックスでハイライト表示)。
図 1. WebView(左)とカスタムタブ(右)が赤色で囲まれている。

ウェブ コンテンツを埋め込む理由

  • 効率性: ウェブサイトの既存のコードを再利用できます。既存のウェブ技術とコンテンツを基盤とする。
  • 統合: アプリ内で、メディアや広告などのサードパーティ プロバイダの外部コンテンツを活用します。
  • 柔軟性: 事前定義された UI に制限されることなく、アプリのアップデートをリリースせずにコンテンツを動的に更新できます。

ウェブ コンテンツを使用する場合

Android アプリでウェブを使用する主なユースケースは次の 3 つです。

1. ウェブ コンテンツをアプリに埋め込む(メイン コンテンツまたは補助コンテンツとして): WebView を使用する

  • UI のカスタマイズや更新に高い柔軟性が求められるプライマリ エクスペリエンスとして、独自のウェブ コンテンツをインラインで表示します。
  • 広告、法的利用規約、その他の規制、その他のサードパーティ コンテンツなどの他のコンテンツを、アプリ内エクスペリエンス内にインラインで表示するか、ウィンドウとして表示します。
Google Play に開いた Android アプリ。プライマリ ウェブビューが赤い枠でハイライト表示されています 赤いボックス内に補足テキストが表示された状態で開いている Android アプリ。
図 2. WebView をプライマリ コンテンツ(左)と補助コンテンツ(右)としてアプリに埋め込んだウェブ コンテンツ。

2. カスタムタブを使用したアプリ内ブラウジング(高度なユースケースの場合は WebView)

  • ユーザーがリンクをクリックしたときに、外部ブラウザに移動せずにアプリ内に留めておくために、アプリ内ブラウジング エクスペリエンスを完全に提供します。
    • 注: タブレットや折りたたみ式デバイスなどの大画面デバイスの場合、アプリが追加のスペースを活用できるようにする追加オプションがあります。
    • アプリは、隣接するマルチ ウィンドウ エクスペリエンスを起動するを使用して、ウェブリンクを分割画面で開くことができます。これにより、ユーザーはアプリとブラウザを同時にマルチタスクできます。または
    • カスタムタブには、同じタスク内で既存のアプリ コンテンツの横に開くことができるサイドパネル オプションがあります。
  • カスタムタブは、カスタムタブをサポートするブラウザの場合、ユーザーのデフォルト ブラウザによって提供されます。
    • WebView を使用して、高度にカスタマイズ可能なアプリ内ブラウジング エクスペリエンスを提供することは可能ですが、カスタムタブを使用すると、デフォルトのブラウザ エクスペリエンスを提供でき、ユーザーがブラウザでウェブリンクを開きたいときにシームレスに遷移できます。
左側にアプリ内リンクが赤いボックスで囲まれたウェブページ、右側にアプリ内ブラウザが表示されています。
図 3. アプリ内リンクをクリック(左)してアプリ内ブラウザを開く(右)。

3. アプリ内のログインフローまたは認証フロー

Android では、認証情報マネージャーを使用してログイン フローまたは認証フローを構築することをおすすめします。これらのエクスペリエンスに引き続き埋め込みウェブを使用する必要がある場合は、次のガイダンスを使用します。

  • 一部のアプリでは、WebView を使用してユーザーにログインフローを提供することがあります。たとえば、アプリ固有のユーザー名とパスキー(またはパスワード)を使用します。これにより、デベロッパーはプラットフォーム間で認証フローを統一できます。
  • サードパーティの ID プロバイダやログイン エクスペリエンス(「… でログイン」など)にリンクする場合は、カスタムタブを使用します。カスタムタブを起動すると、ユーザーの認証情報が保護され、サードパーティのサイトに分離されます。

WebView を認証に活用する方法については、WebView でユーザーを認証するをご覧ください。カスタムタブの起動については、Android カスタムタブの概要をご覧ください。

左側に WebView があるアプリ内ログイン フィールド。 右側にカスタムタブがあるサードパーティのログイン。
図 4. アプリ内ログイン フィールド(左)と、カスタムタブで開いたサードパーティのログイン(右)。