やりたいこと
NodeJsで作成したWebアプリをAndroidアプリにします。
（サーバサイド（バックエンド）は含みません）
ここでは以下のページで作成したNodeJS + Vite + Phaser 3のテンプレートで試します。
実装
Webアプリの準備
AndroidアプリにするWebアプリを用意します。
上にあるようにここではNodeJS + Vite + Phaser 3の環境を作成し、以下のコマンドを実行しWebアプリを作成しました。
npm run build上記の手順でdistフォルダに以下のようなファイルが作成されます。
dist
| favicon.png
| style.css
| index.html
|
\---assets
bg.png
logo.png
index-C5AljH2-.js
phaser-DJc9ez-r.jsAndroidアプリのプロジェクトの作成
Android Studioを開き新しいプロジェクトを作成します。
Android Studioがインストールされていない場合は、以下のリンクを参照してインストールしてください。
プロジェクトはEmpty View Activityを選択し、Nextをクリックします。
続いて言語(Language)をJavaに変更しFinishをクリックします。
ほかは環境に合わせて好きな値に変更してください。
プロジェクトの準備が行われるのでしばらく待ちます。
(Window右下にプログレスバーが表示されますので非表示になるまでまります。)
以上でプロジェクトの準備は完了です。
レイアウトの修正
WebViewを表示できるようにレイアウトを修正します。
Activity_main.xmlを開きます。
すでにあるHello wordを表示するTextViewを削除し、代わりにWebViewを配置します。
自分の環境では以下の内容になりました。(IDを追加しています。)
<androidx.constraintlayout.widget.ConstraintLayout 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/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>Assetsフォルダの作成
メニューからFile → New → Folder → Assets Folderを選択しAssetsフォルダを作成します。
TargetをきかれたらMainを選択します。
Webアプリの移動
プロジェクトルート¥app\src\mainにassetsフォルダが作成されるので、Webアプリの準備で作成したWebアプリをコピーします。
フォルダ構成は以下のようになります。
\---assets
| favicon.png
| index.html
| style.css
|
\---assets
bg.png
logo.png
index-C5AljH2-.js
phaser-DJc9ez-r.jsMainActivityの修正
MainActivityのonCreate()に以下のコードを追加します。
（Importされていないクラスは適宜インポートしてください。WebViewAssetLoader は androidx.webkit:webkitをDepenencyに追加する必要がある場合があります。）
WebView web_view = ((WebView) findViewById(R.id.webview)); ///レイアウトからwebView取得
WebSettings webSettings = web_view.getSettings(); //WebViewの設定を取得
webSettings.setJavaScriptEnabled(true); //Javascript有効
webSettings.setAllowFileAccessFromFileURLs(false);
webSettings.setAllowUniversalAccessFromFileURLs(false);
webSettings.setAllowFileAccess(false);
webSettings.setAllowContentAccess(false);
final WebViewAssetLoader assetLoader = new WebViewAssetLoader.Builder()
.addPathHandler("/assets/", new WebViewAssetLoader.AssetsPathHandler(this))
.build(); //WebViewAssetLoader の作成 / Assetsフォルダの紐づけ
web_view.setWebViewClient(new WebViewClientCompat() { ///webリクエスト時にassetLoaderが値を返すよに変更
@Override
public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
return assetLoader.shouldInterceptRequest(request.getUrl());
}
@Override
@SuppressWarnings("deprecation") // for API < 21
public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
return assetLoader.shouldInterceptRequest(Uri.parse(url));
}
});
web_view.loadUrl("https://appassets.androidplatform.net/assets/index.html");////assets/index.htmlの読み込み
AssetsのHTMLをロードするには、WebViewAssetLoader を使用せずに以下のコードを使用することが考えられますが動作しません。
web_view.loadUrl("file:///android_asset/index.html");これはModuleのJavaScriptをロードする際にCORSのエラーになるためです。
結果
Viteで作成したWebアプリをAndroid上で動作するアプリにすることができました。
参考にさせていただいたサイト
コメント