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

Android では、アプリ内でウェブの機能を活用できます。そのため、特定の種類のコンテンツを柔軟かつ効率的に表示できます。

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

  • WebView: UI のカスタマイズや更新の柔軟性を高めたい場合に、管理するウェブ コンテンツをインラインで表示します。
  • Custom Tabs: ユーザーがリンクをクリックしたときに、外部ブラウザに移動するのではなく、アプリ内に留めておきたい場合に、ユーザーの デフォルト ブラウザ(ブラウザのサポートを参照)を利用してアプリ内ブラウジングをフルに提供します。ブラウジング エクスペリエンスの多くはすぐに利用できます。
Android アプリが Google Play で開かれ、メインのウェブビューがハイライト表示されている。 Android For Developers のウェブページが開いたカスタムタブがハイライト表示されている。
図 1.`WebView`(左)と `Custom Tab`(右)の概要。

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

アプリにウェブ コンテンツを埋め込むには、次のようなメリットがあります。

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

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

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

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

  • UI のカスタマイズや更新の柔軟性を高めたい場合に、独自のウェブ コンテンツをメイン エクスペリエンスとしてインラインで表示します。
  • 広告、法的条項と規制、その他の第三者のコンテンツなどの他のコンテンツをインラインで、またはアプリ エクスペリエンス内のウィンドウとして表示します。
Google Play が開いている Android アプリ。プライマリ ウェブビューが赤いボックスでハイライト表示されている Android アプリ起動時に、赤いボックスの中にサポート テキストが表示されている。
図 2.`WebView`をメイン コンテンツ(左)とサポート コンテンツ(右)として使用して、アプリ内に埋め込まれたウェブ コンテンツ。

**2. アプリ内ブラウジングCustom Tabsを使用)、または高度な ユースケース向けのWebView

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

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

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

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

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

左側に WebView を使用したアプリ内ログイン フィールド。 右側にカスタムタブが表示されたサードパーティのログイン。
図 4.アプリ内のログイン フィールド(左)と `Custom Tab` で開いたサードパーティのログイン(右)。