# Android向けの実装

# 基本実装

プレイヤーの基本的な機能を使用するために必要な実装を行います。本章内の以降のアプリの実装例は、基本実装がされている前提とします。

  1. AndroidManifest.xmlでのパーミッションの設定

    <uses-permission android:name="android.permission.INTERNET" />
    
  2. WebView関連

    WebViewインスタンスに必要な設定をしたうえで、プレイヤーを配置するWebページを表示します。

実装例は以下の通りです。

// WebViewのインスタンスを取得する。
WebView webView = findViewById(R.id.webView);

// JavaScriptを有効にする。
webView.getSettings().setJavaScriptEnabled(true);

// プレイヤーを配置するWebページを表示する。
webView.loadUrl("https://host/path/playerpage.html");

# フルスクリーン

WebView上のプレイヤーでフルスクリーン表示する際の拡大方式に 'native' を指定している場合、フルスクリーンボタンが反応しません。反応させるには、アプリに以下の実装を行います。

  1. WebChromeClientインスタンスの設定

    以下2. 〜 3. のコールバックメソッドをオーバーライドしたWebChromeClientインスタンスをWebViewに設定します。

  2. WebChromeClient#onShowCustomView() メソッド

    フルスクリーン表示する際にコールされます。第一引数でフルスクリーン状態のViewが渡されるので、Viewを見える状態にします。

  3. WebChromeClient#onHideCustomView() メソッド

    フルスクリーン表示を解除する際にコールされます。フルスクリーン状態のViewを削除します。

実装例は以下の通りです。

// 本実装例の外でViewGroup rootViewを宣言している。

// WebChromeClientインスタンスをWebViewに設定する。
webView.setWebChromeClient(new WebChromeClient() {
    View fullscreenView;

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        // フルスクリーン状態で行いたい処理を書く。
        // アクションバーや画面の向きの調整等

        // フルスクリーン状態のviewを被せて見える状態にする。
        rootView.addView(view);
        fullscreenView = view;
    }

    @Override
    public void onHideCustomView() {
        // 非フルスクリーン状態で行いたい処理を書く。
        // アクションバーや画面の向きの調整等

        // フルスクリーン状態のviewを削除する。
        rootView.removeView(fullscreenView);
        fullscreenView = null;
    }
};

# リニア広告

Webページ内のリンクを開く際にWebView内で遷移する設定の状態において、WebView上のプレイヤーでリニア広告の再生中に広告のWebページへ遷移するリンクを開くとWebView内に表示します。ブラウザで遷移先のWebページを開くには、アプリに以下の実装を行います。

  1. マルチウィンドウの設定

    マルチウィンドウを許可します。

  2. WebChromeClientインスタンスの設定

    以下3. のコールバックメソッドをオーバーライドしたWebChromeClientインスタンスをWebViewに設定します。

  3. WebChromeClient#onCreateWindow() メソッド

    ブラウザで遷移先のWebページを開く際にコールバックされます。WebページのURLを取得するために別のWebViewインスタンスを生成し、以下4. のコールバックメソッドをオーバーライドしたWebViewClientインスタンスを設定します。また、4. のメソッドがコールバックされるために必要な設定を、生成したWebViewインスタンスに対して行います。

  4. WebViewClient#onPageStarted() メソッド

    遷移先のWebページの読み込みを開始した際にコールバックされます。第二引数からWebページのURLを取得し、ブラウザを起動します。

  5. Webページ内のリンクを開く際にWebView内で遷移する設定

    以下6. のコールバックメソッドをオーバーライドしたWebViewClientインスタンスをWebViewに設定します。

  6. WebViewClient#shouldOverrideUrlLoading() メソッド

    別のWebページへ遷移する際にコールバックされます。親クラスの同メソッドをコールするとWebView内で遷移します。1. 〜 4. を実装している場合、広告のWebページへ遷移するリンクを開いても本メソッドはコールされません。

実装例は以下の通りです。

// マルチウィンドウを許可する。
webView.getSettings().setSupportMultipleWindows(true);

// WebChromeClientインスタンスをWebViewに設定する。
webView.setWebChromeClient(new WebChromeClient() {

    @Override
    public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
        // 別のWebViewインスタンスを生成する。
        WebView targetWebView = new WebView(getApplicationContext());
        targetWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                // WebページのURLを設定した暗黙的インテントを使用してアプリ間遷移します。
                Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                startActivity(intent);
            }
        });

        // onPageStarted()がコールバックされるために必要な設定を行う。
        WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj;
        transport.setWebView(targetWebView);
        resultMsg.sendToTarget();

        return true;
    }
});

// Webページ内のリンクを開く際にWebView内で遷移させる。
webView.setWebViewClient(new WebViewClient() {
      @Override
      public boolean shouldOverrideUrlLoading(WebView view, String url) {
          return super.shouldOverrideUrlLoading(view, request);
      }
});

# ポスター画像

WebView上のプレイヤーでポスター画像を指定しない場合、WebViewデフォルトのポスター画像が表示されます。ブラウザ上で動作させる場合と振る舞いを合わせるには、アプリに以下の実装を行います。なお、当該実装を行う場合でもポスター画像を指定していればポスター画像を表示します。

  1. WebChromeClientインスタンスの設定

    以下2. のメソッドをオーバーライドしたWebChromeClientインスタンスをWebViewに設定します。

  2. WebChromeClient#getDefaultVideoPoster() メソッド

    Webページをロードする際、ポスター画像が指定されていない場合にコールバックされます。ファーストフレームが見えるように透明な画像を返却します。

実装例は以下の通りです。

// WebChromeClientインスタンスをWebViewに設定する。
webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public Bitmap getDefaultVideoPoster() {
        // 透明な画像を返却する。
        return Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888);
    }
});

# ビューポート

Webページに記述するビューポート設定 <meta name="viewport" content="..."> を有効にするには、アプリに以下の実装を行います。

  1. ビューポートの設定

    Webページに記述するビューポート設定を有効にします。

実装例は以下の通りです。

// Webページに記述するビューポート設定を有効にする。
webview.getSettings().setUseWideViewPort(true);