Webishブログ

未経験から海外でweb開発を目標に、必死に勉強している人のブログ

JavascriptInterfaceを使ってみた。

スポンサードリンク

あるアプリの開発にJavascriptを使ったWebページを利用して、アンドロイドのNativeアプリに組み込むということを行なったので、それについて議事録として残しておこうと思います。

 

書いてる人は、プログラミング歴半年も満たないクソザコなので、質問などは受け付けていません・・・。でも、ここをこうしたらいいなどのアドバイスは大歓迎です。

 

 

まずこのアプリの前提として、JavascriptからAndroidへ渡せるのは「文字列」に限られます。

何か処理を行なったものを表示したい時に使うのがメインだと思います。

 

 

SDK:17 を利用しています。

Android Studio環境での開発です。

 

 

利用方法として、文字列をJavascriptの書かれているWebページに送って、それを翻訳APIにて言語変換させ、最後にJavaで読み取れる文字列に変換し、Javaに返し、それをAndroid内で受け取るという処理になります。

 

 まず実際のコードの方を書いてみます。

これだけでいいのです。

public class MainActivity extends AppCompatActivity {

private WebView webView;
private String aa;

public class JavaScriptInterface {
Context con;

public JavaScriptInterface(Context c) {
this.con = c;
}

@JavascriptInterface
public void aa(String ii) { //Javascriptで動かすメソッド
aa = ii;
}
}


@SuppressLint("JavascriptInterface")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

webView = (WebView) findViewById(R.id.web);
webView.getSettings().setJavaScriptEnabled(true); //Javascript有効化
webView.addJavascriptInterface(new JavaScriptInterface(this), "android"); //JavaScriptInterfaceの経由(Javascript内でJavaのメソッドを使うため)
webView.loadUrl("file:///android_asset/hogehoge.html");
}
}

 

aaっていう超分かりにくいメソッド名にしちゃっていますが

このaaというメソッドをJavascript内で実行して、帰ってきた値を、これまた(しかも同名で余計分かりにくい)aaという変数に代入しています。

 

ちなみに、onCreateの中でJavascriptを動かすための処理を書いてます。WebViewを使って、そこで処理を行います。

 

誤解するといけないのですが、初期値の設定でJavaScriptInterfaceを使っていますが、このScriptのSは大文字ですが、これは僕が勝手に命名しただけなので、なんでもいいです。

実際にJavascriptInterfaceのAPIを使う場合は、小文字のsです。

その証拠に、見てもわかるように、アノテーションのSuppressLint内に書かれているのは小文字のsです。ここは任意のものを使ってはいけません。JavascriptInterfaceを使います。

 

webViewの3行目の第2引数で"android"をJavascriptで使える名称にした訳です。

これは任意のもので大丈夫です。popopopoとかにしても大丈夫です。

 

では、実際のHTML内のJavascriptの処理ではどう言う風に書かれるかですが

その前に、まずはassetsフォルダをapp直下に作り、その中にhtmlファイルをコピーして入れてあげます。

そうすることでwebViewの最後の行に書いてある、assetsのパスに繋がり、中のhtmlファイルを読み込み、表示してくれます。

 

android.aa(hogehoge);  //Javaのメソッドを動かす

これをJavascript内にに入れてあげます。

引数としてJavascript内で処理されて、帰ってきた文字列の変数が渡されます。

帰ってきた値は、上のJavaでの処理で最初に定義したようにString型の変数(ここではaa)に代入されるので、この変数を使ってAndroid内のTextViewなどにsetしてあげればそれで表示してくれます。

 

意外とやってみたら簡単ではあったのですが、方法を見つけるまでが少し大変でした。

幸いにも以前同じものを作ったという方が近くにいたので、そのコードを参考にさせていただきました。

 

ちなみに、HTMLの方のJavascripはネットで見つけたjQueryの処理を使わせていただいたので、そちらに関しては僕は書いていません。あくまで文字列を拝借させていただいただけです。

 

以上が、僕が自分でAndroidアプリを作る際に行なった処理でした。

是非、参考にしてもらえたら泣いて喜びますー。