androidでローカルhtmlを表示する
cordovaでも良いかもと思われましたが
なんとなるやりたくなったので調べ直しました。
環境
android2系
エミュレータが新しくなってなんと動くようになっていた
手順
プロジェクトを作成
※ブランクアクティビティでいいかと
buildファイルを修正
app/build.gradle
apply plugin: 'com.android.application' android { compileSdkVersion 22 buildToolsVersion "22.0.1" defaultConfig { applicationId "jp.mshige1979.app.samplelocalhtml1" minSdkVersion 15 targetSdkVersion 22 versionCode 1 versionName "1.0" } buildTypes { debug { debuggable true } release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } sourceSets{ main{ assets.srcDirs = ["assets"] } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:22.2.1' }
※sourceSetsを追加してassetsディレクトリを指定しておく
MainActivityを修正
package jp.mshige1979.app.samplelocalhtml1; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.util.Log; import android.webkit.JavascriptInterface; import android.webkit.WebView; import android.widget.Toast; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Webbiewを生成 WebView oWebView = new WebView(getApplicationContext()); // javascriptを有効にする oWebView.getSettings().setJavaScriptEnabled(true); // ローカルのhtmlを読み込む oWebView.loadUrl("file:///android_asset/test.html"); // コールバック用クラスを定義 class MyJavaScriptInterface { /** * アラートを表示します。 * * @param message メッセージ。 */ @JavascriptInterface public void showAlert( String message ) { // アラート表示処理 ... Log.d("test", "hogehoge start"); Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show(); Log.d("test", "hogehoge end"); } } MyJavaScriptInterface obj = new MyJavaScriptInterface(); oWebView.addJavascriptInterface(obj, "appJsInterface" ); // ビューを設定する setContentView(oWebView); } }
app/assets/test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Twitter Bootstrap Sample</h1> <button type="button" class="btn btn-primary" id="btn1">btn1</button> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> $(function(){ $("#btn1").on("click", function(){ appJsInterface.showAlert(String((new Date()))); }); }); </script> </body> </html>
※appJsInterface.showAlert(String((new Date())));でJavaで定義したメソッドを呼び出せる
実行