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

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

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

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

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

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

ウェブ コンテンツを使用するタイミング

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

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

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

2. カスタムタブを使用したアプリ内ブラウジング、またはより高度なユースケース向けの WebView

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

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

Android では、認証情報マネージャーを使用してログイン フローまたは認証フローを構築することが推奨されています。これらの機能で Embedded Web を引き続き使用する必要がある場合は、次のガイダンスに沿って対応してください。

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

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

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