m_shige1979のときどきITブログ

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

androidでローカルhtmlを表示する

cordovaでも良いかもと思われましたが

なんとなるやりたくなったので調べ直しました。

環境

android2系
エミュレータが新しくなってなんと動くようになっていた

やること

  1. test.htmlを作成してtwitter bootstrapのcssを組み込む
  2. javascriptのイベントをandroid側で実行

です

手順

プロジェクトを作成

f:id:m_shige1979:20160604070801p:plain
※ブランクアクティビティでいいかと

app直下にassetsディレクトリを作成してtest.htmlやtwitterbootstrapのcssなどを配置

f:id:m_shige1979:20160604070901p:plain

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で定義したメソッドを呼び出せる

実行

f:id:m_shige1979:20160604071506p:plain

所感

javaで実装したい部分もあったりする場合はこんな感じでhtmlの処理をjavaで検知できるのはいいかも
cordovaでプラグインを使って行うのとまあ同じ感じはするけど…