Android[Java]のWebViewで、ローカルHTMLを使用する

久々にJavaのAndroidプログラムを書いたのですが、その際に個人的にちょっとした
発見があったのでメモしておきます。

今回のアプリの要件は

画面の実装はHTML及び、JavaScriptで行いたい
ハードキーをフックして処理を実行したい

というものでした。

当初、1の要件を満たすためにMONACAやReactNativeでの実装を模索したのですが、
2の要件であるハードウェアキーフックの実現方法をパッと見つける事が出来ず。

JavaでのAndroid SDKでのハードウェアキーのフック方法は結構あちこちに文献が…。
でもJava Androidの画面実装はHTMLじゃなくてXML…と思って悩んでいたら、そういえばWebViewがあったなと。

…普通WebViewってURLを指定してインターネットサーバー上のWEBサイトを表示するものだけど、…ひょっとして、アレってローカルのHTMLを参照することも出来たりするんじゃ？？？

と思って、調べてみたらネイティブアプリに内包したローカルのHTMLをWebViewで参照する方法を見つけました。

web-terminal.blogspot.com

ローカルHTML上に実装されたJavaScriptをJava側から呼び出す方法も記載されていたので、Java側でフックしたハードキー操作をHTML側に連携することもできます。
(今回は実装しませんでしたが、HTML側での動作をJavaに伝える方法も記載されてました)

では、具体的な実装です。

■ローカルHTMLを呼び出すWebViewの実装方法

【レイアウト】

XMLレイアウト最低限のWebViewだけを普通に実装。

<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />

【マニフェスト】

マニフェストでインターネット接続を許可する
(ローカルのHTMLからインターネット上のjQuery等を直接参照したかったので)
<uses-permission android:name="android.permission.INTERNET"/>

【MainActivity.java】

・MainActivityのグローバルに以下を追加

// WebView初期化
WebView myWebView = null;

・onCreateにて以下を実施するよう変更

// WebView呼び出し
myWebView = (WebView) findViewById(R.id.webView);
myWebView.setWebViewClient(new WebViewClient());
myWebView.loadUrl("file:///android_asset/index.html"); // ローカルのhtmlファイルを指定

// WebView内のJavaScriptの実行を許可
myWebView.getSettings().setJavaScriptEnabled(true);

…と、ここまではごくごく普通のWebViewの実装方法。

ここからがローカルHTMLの使用のキモです。

【ローカルファイルを指定してWebView描画】

myWebView.loadUrl("file:///android_asset/index.html");

※URLをfile:///android_asset/から始まるファイルPathで指定。

【プロジェクト内に使用するhtmlを配置】

以下のPathに実際に使用するhtml郡を配置

[プロジェクトディレクトリ]\app\src\main\assets

※ここにhtmlや、使用するcss,js,画像等のファイルを配置。ディレクトリを掘ってもよし(html内からの他の各ファイルの参照は当然、相対PATHで)

↓AndroidStudio上で見るとこんな感じ。

f:id:mozikeru:20181110223603p:plain

■WebViewとJava側を相互に連携する

Java側からHTML内のJavaScriptの関数を呼び出して使用したり、逆にJavaScriptの実行結果をJava側に返したりする方法です。

【htmlのJavaScript呼び出し】

Java側の任意の箇所に下記の感じで実装

myWebView.loadUrl("javascript:addCount();"); // index.html内のJavaScript内の関数であるaddCount()を呼び出し

↑今回はこれをJava側のハードキーのフック処理の中で呼び出しました

※index.htmlに限らず、遷移先にaddCount()があればそのまま呼び出せる。
　(現在表示されているhtmlのaddCount()が呼び出される事になる)

ザザッと書きましたが、これでJavaとHTMLでのAndroidネイティブアプリの開発が可能になりました。

mozikeru.com

和歌山在住。２児の父。IoTエンジニア。各種ご相談承ります。