WebViewとHTML5ウェブアプリを使用してタッチ対応のFire TV対応アプリを構築する方法

<?xml version="1.0" encoding="utf-8" ?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    ...>

    <uses-feature
        android:name="android.hardware.touchscreen"
        android:required="false" />
    ...
</manifest>

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.myapplication"
    tools:ignore="MissingLeanbackLauncher">

    <uses-feature
        android:name="android.hardware.touchscreen"
        android:required="false" />

    <uses-feature
        android:name="android.software.leanback"
        android:required="false" />

    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:banner="@drawable/amazon_firetv"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true">
        <activity
            android:name=".MainActivity"
            android:configChanges="fontScale"
            android:label="@string/player_activity_name"
            android:launchMode="singleTop"
            android:theme="@style/AppTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <uses-library
            android:name="com.amazon.webview"
            android:required="false" />
    </application>

</manifest>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center" />

</FrameLayout>

public class MainActivity extends Activity {

    //オンラインでホストされているウェブアプリのアドレス
    private final String mBaseUri = "https://mysampleapp.com";

    private Context mContext = null;
    private WebView mWebView;
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mContext = this.getApplicationContext();

        //ユーザーが実行できる単一のアクティビティにフォーカスします。
        //Activityクラスは、UIを定義するレイアウトリソースを
         //配置するためのウィンドウを作成します。
        //こちらの例では、activity_main.xmlでレイアウトリソースが定義されています。
        setContentView(R.layout.activity_main);

        //操作する必要があるUI内のWebViewウィジェットを取得します。
        //こちらの例では、WebViewウィジェットはactivity_main.xmlの「web_view」で指定されます。
        mWebView = findViewById(R.id.web_view);

        mWebView.loadUrl(mBaseUrl);
    }
    ...
}

public class MainActivity extends Activity {

    private final String mBaseUrl = "https://mysampleapp.com";

    private Context mContext = null;
    private WebView mWebView;
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
        mWebView = findViewById(R.id.web_view);
        
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        ...

        mWebView.loadUrl(mBaseUrl);
    }
    ...
}

public class MainActivity extends Activity {

    private final String mBaseUrl = "https://mysampleapp.com";

    private WebView mWebView;
    private CustomWebViewClient webViewClient;
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...

        mWebView = findViewById(R.id.web_view);
        
        webViewClient = new CustomWebViewClient();
        mWebView.setWebViewClient(webViewClient);
        ...

        mWebView.loadUrl(mBaseUrl);
    }
    ...
}

class CustomWebViewClient extends WebViewClient {

    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        view.loadUrl(request.getUrl().toString());

        return super.shouldOverrideUrlLoading(view, request);
    }
}

<activity
    android:name=".MainActivity"
    android:configChanges="fontScale"
    android:label="@string/player_activity_name"
    android:launchMode="singleTop"
    android:theme="@style/AppTheme">
    ...
</activity>

public class MainActivity extends Activity {

    ...

    @Override
    public void onConfigurationChanged(final Configuration c) {
        super.onConfigurationChanged(c);

        mWebView.getSettings().setTextZoom((int) (c.fontScale * 100));
    }
}

public class MainActivity extends Activity {

    private final String mBaseUrl = "https://mysampleapp.com";

    private Context mContext = null;
    private WebView mWebView;
    ...

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ...
    }
    
    ...
    
    @Override
    public boolean dispatchKeyEvent(KeyEvent event) {
        Log.d(TAG, "dispatchKeyEvent : KeyCode = " + event.getKeyCode() + " (" + KeyEvent.keyCodeToString(event.getKeyCode()) + ")");

        switch (event.getKeyCode()) {
            //D-Padの戻るボタンを処理します
            case KeyEvent.KEYCODE_BACK:
                Log.d(TAG, "dispatchKeyEvent : mWebView.canGoBack = " + mWebView.canGoBack());
                if (mWebView.canGoBack()) {
                    //WebViewで前に戻ります
                    mWebView.goBack();
                } else {
                    //WebViewに履歴がない場合は、アプリを終了します
                    finish();
                }
        }

        return super.dispatchKeyEvent(event);
    }
}

D/MainActivity: dispatchKeyEvent : KeyCode = 85 (KEYCODE_MEDIA_PLAY_PAUSE)

// https://videojs.com/getting-started/
const player = videojs("video", {...});

//カスタムのキーイベントハンドラー
const moveTime = 10; //秒数分移動します
const handleKeyEvent = (event) => {
    switch(event.code) {
        case "MediaPlayPause":
        case "NumpadEnter":
            //再生が一時停止していることを確認します
            if (player.paused()) {
                videojs.log('handleKeyEvent:', 'Play', player.currentTime());
                //再生を再開します
                player.play();
            } else {
                videojs.log('handleKeyEvent:', 'Pause', player.currentTime());
                //再生を一時停止します
                player.pause();
            }
            break;
        case "MediaRewind":
        case "ArrowLeft":
            //再生時間を10秒戻します
            player.currentTime((player.currentTime() - moveTime) < 0 ? 0 : (player.currentTime() - moveTime));
            videojs.log('handleKeyEvent:', 'Rewind', player.currentTime());
            break;
        case "MediaFastForward":
        case "ArrowRight":
            //再生時間を10秒進めます
            player.currentTime(player.currentTime() + moveTime);
            videojs.log('handleKeyEvent:', 'Fast Forward', player.currentTime());
            break;
        default:
            videojs.log('handleKeyEvent:', 'Unhandled event.code =', event.code);
            break;
    }
}

//Fire TV対応アプリのWebViewからディスパッチされるキーボードイベントをリッスンします
window.addEventListener("keyup", (event) => {
    //押下したキーを離すと背景色がリセットされます
    document.body.style.background = "";

    if (event.key !== undefined) {
        console.log('keyup:', 'event.key =', event.key);
        //KeyboardEvent.keyを使用してイベントを処理します
        handleKeyEvent(event);
    }
});

window.addEventListener("keydown", (event) => {
    //キーを押すと背景色が変わります
    document.body.style.background = "green";
});

public class MainActivity extends Activity {
    
    ...
    
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getActionMasked();

        switch(action) {
            case (MotionEvent.ACTION_DOWN):
                Log.d(TAG,"Action was DOWN");
                return true;
            case (MotionEvent.ACTION_MOVE):
                Log.d(TAG,"Action was MOVE");
                return true;
            case (MotionEvent.ACTION_UP):
                Log.d(TAG,"Action was UP");
                return true;
            case (MotionEvent.ACTION_CANCEL):
                Log.d(TAG,"Action was CANCEL");
                return true;
            case (MotionEvent.ACTION_OUTSIDE) :
                Log.d(TAG,"Movement occurred outside bounds of current screen element");
                return true;
            default:
                return super.onTouchEvent(event);
        }
    }
}

const player = videojs("video", {...});

//Fire TV対応アプリのWebViewからディスパッチされるタッチイベントをリッスンします
//再生／一時停止
let playPauseControl = document.getElementsByClassName('vjs-play-control')[0];
playPauseControl.addEventListener("click touchstart", (event) => {
    videojs.log('playPauseControl', 'touched');
});

//ミュート／ミュート解除
let muteControl = document.getElementsByClassName('vjs-mute-control')[0];
muteControl.addEventListener("click touchstart", (event) => {
    videojs.log('muteControl', 'touched');
});