ヤメ記者SEの徒然なるままに…

アクセスカウンタ

zoom RSS [メモ] Javascript を使った Android WebView と Webページの連携

<<   作成日時 : 2013/07/04 18:00   >>

トラックバック 0 / コメント 0

今回はAndroidというよりはJavascriptの知識不足が原因でしたが、かなり苦労したのでこれもメモ。

求められた機能が、Webページの自動リロードだったのでWebViewクラスをreload()すればいいだろう、と簡単に考えていたら、なぜか、表示対象予定のページが、reloadするとトップページに戻ってしまう。
良くわからないが、いまどきframesetを使ったフレーム形式のサイトで、かつ、javascriptを変に階層を持たせて作ってあって、直接フレーム内のページにアクセスしても何も表示されない、みたいな作りになっていたので、その辺のおかしなつくりが原因だと思われる。(結構大きい組織の公式ページなんだけど、一体どこのWEB屋さんが作ったサイトなんだか

で、いろいろ調べた結果、実はAndroidアプリ内に実装するWebViewは、Javascriptを直接呼び出したりすることができるらしいという情報を発見。

【Android】WebView内のJavaScriptやHTMLと相互連携する方法
http://web-terminal.blogspot.jp/2013/05/androidwebviewjavascripthtml.html

が、こちらをやるもうまく動かず。
JavascriptのAlertを使ってダイアログを表示しながらデバッグしようと思ったけど、そのAlert自体が表示されない。
いろいろメッセージとかを調べた結果わかったのは、このWebViewに対してloadURLでJavascriptを動かす場合でも、UIを操作する系の動きは、メインスレッドから起動しなければいけないと言う、Androidの大原則が適用されると言うこと。
単純にWebView内ではAlert表示してもらえないらしいです…orz

今回やろうとしていたのが自動リロード機能だったこともあり、TimerTaskを使って実装していたのが原因、ということが判明したので、今度はこちらのページを参考に、Handlerを使ってスレッド間の連携をさせる。

Handlerクラスの正しい使い方(Androidでスレッド間通信)Add Star
http://d.hatena.ne.jp/sankumee/20120329/1333021847

いざ実行!
でも、やっぱり動かない…orz
さらにいろいろ調べて出てきた情報が今度はこれ。

WebView逆引き
http://bamleace.jimdo.com/android/webview%E9%80%86%E5%BC%95%E3%81%8D/

このページの中の「JavaScriptのイベントをハックしたい!」という項目を見ると、どうやら、WebViewはそもそもAlertを表示させたい場合には、自分でeventをキャッチして、アプリ側で実装しなければいけないらしい。
まぁ、でも今回はデバッグのために、どんな値が入っているかを見たいだけ、というのと、Toastを表示させようとしたら、これまたサブスレッドで起動することからさらにHandlerが必要になってしまう、などなどいろいろと面倒だったことから、Alertイベントキャッチしたら、messageをToastではなく、Logに出力してLogcat上で確認して済ませた。

これでやっとJavascript自体の呼び出しとAlertがまともに動いていることを確認できた。

で、ここから先はJavascriptの話になっていく。

今回実装しようとしてたのは、画面をreloadする代わりに、ページ上に用意されている「更新」ボタンのclickイベントを強制的に発生させることで、表示するエリアをリロードさせようと言うもの。
Javascriptはあまり得意ではないのでいろいろ調べて、この辺を使えばできそうだと言う目処を付ける。

HTMLエレメントObject指定
http://www.artemis.ac/contents/javascript/javascript11.htm

JavaScriptの動かないコード (中級編) clickイベントを強制的に発生させたい (fireEvent/createEventの使い方)
http://d.hatena.ne.jp/language_and_engineering/20090907/p1

いざ尋常に…


負けました…orz

いくらidを指定しても動いてくれない。
というか、エラーメッセージを見てみると、どうやら、そもそも getElementsById でエレメントが取得できていない様子。
getElementsByClassName に変更してクラス名を指定してみるなど、いろいろ試してみるが全然反応せず。

いろいろ探し回った挙句、原因はこれでした。

frames
http://itpro.nikkeibp.co.jp/article/Reference/20081126/320017/

Javascriptって、フレームの下層にあるエレメント指定するときは、parent.frames[インデックス]. というのを頭に付けなきゃいけないんですね…

ここまで対応して、やっと無事動きました。
2,3時間で終わらせるつもりが、1日丸々つぶれました…
けどまぁ、勉強になったので良しと思うことにします。

それにしても、こんな連携ができるんだったら、本当にWebViewさえあれば、Webサービスがすでに立ち上がっていれば、アプリをリリースして動かすの、簡単だなぁ…。
というか、やっぱりJavascript、jsonあたりはもう少し勉強しなきゃだな。
jQueryとかもほとんど触ったこと無いし。



JavaScript 第6版
オライリージャパン
David Flanagan

amazon.co.jpで買う
Amazonアソシエイト by JavaScript 第6版 の詳しい情報を見る / ウェブリブログ商品ポータル




パーフェクトJavaScript (PERFECT SERIES 4)
技術評論社
井上 誠一郎

amazon.co.jpで買う
Amazonアソシエイト by パーフェクトJavaScript (PERFECT SERIES 4) の詳しい情報を見る / ウェブリブログ商品ポータル





テーマ

関連テーマ 一覧


月別リンク

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
[メモ] Javascript を使った Android WebView と Webページの連携 ヤメ記者SEの徒然なるままに…/BIGLOBEウェブリブログ
文字サイズ:       閉じる