はじめに
AndroidのWebViewはただページを表示して終わりではありません。
JavaScriptのコードをネイティブ側で書くことで、WebView内の部品をあれこれいじるすることができます！
今回は下記の2つのサンプルコードをご用意しました。
- WebView内の部品を非表示にする
- ネイティブ側で設置したボタンからWebViewの特定の位置にニュルっとスクロールする
なお、筆者はJavaScript一切経験していない人間なので書き方などお見苦しい点があるかと思いますがご容赦ください。
WebView内の部品を非表示にする
Android Developersのヘッダー部分を非表示にする形で試してみようと思います。
修正前はこのような形で、上部にハンバーガーメニューやログインボタンが配置されているヘッダーが存在しています。
まずは該当のWebサイトをChromeの検証ツールなどを用いて開き、非表示にしたい要素を見つけます。
どうやらこのdevsite-top-logo-row-wrapper-wrapperというのがヘッダー部分の要素のようですね。
次に、ネイティブのコード内で下記のようにjsのコードを書き、これをonPageFinished()など任意の場所で呼びます。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding?.root)
val webView = binding?.webview
webView?.settings?.javaScriptEnabled = true
webView?.webViewClient = object: WebViewClient() {
override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)
view?.loadUrl(
"javascript:(function() { " +
"document.getElementsByClassName('devsite-top-logo-row-wrapper-wrapper')[0].style.display = 'none';" +
"})()"
)
}
}
webView?.loadUrl("https://developer.android.com/?hl=ja")
}
通常のJavaScriptの関数だとKotlinのようにfun test(){...}のように書くのですが、loadUrl内で関数を実行する場合は記法が若干異なるので注意が必要です。
（JavaScriptと同じような関数の記法で試したところ正常に動きませんでした）
これを実行すると下記のような形でヘッダー部分が非表示になっています！
ちなみに上記ではstyle.display = 'none'を使用していますが、style.visibility = 'hidden'を使用すると下記のような形でスペースは確保されたまま要素が非表示になります。
ネイティブ側で設置したボタンからWebViewの特定の位置にニュルっとスクロールする
次はサイト下部にあるYouTubeのボタンまでニュルっとスクロールさせてみましょう。
これまでと同じように検証ツールで該当の要素を確認します。
要素名は「devsite-footer-promo」だとわかりましたが、XやLinkedInも同じ要素名になっていますね。
このような場合は、index指定することによって該当の要素を抜き出せます。
今回はX→[0], YouTube→[1], LinkedIn→[2]という形で並んでいるため、[1]を指定します。
肝心のスクロール処理に関してはJavaScriptのelement.scrollIntoViewメソッドを使用します。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding?.root)
val webView = binding?.webview
webView?.settings?.javaScriptEnabled = true
webView?.webViewClient = object : WebViewClient() {
override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url)
view?.loadUrl(
"javascript:document.getElementsByClassName('devsite-footer-promo')[1].scrollIntoView({behavior: 'smooth'});"
)
}
}
webView?.loadUrl("https://developer.android.com/?hl=ja")
}
こうすることで指定の位置までニュルッとスクロールするようになります！
ちなみにニュルッとスクロールさせたくない場合はscrollIntoView()とすればOKです。
所感
フロントエンドのエンジニアの方に依頼しなくてもこのようにネイティブからある程度サイト内を編集することができるのはとても助かるなと思いました。
今回ご紹介したのはほんの一部ですが、JavaScriptのメソッドをそのまま書いているだけなのでやりようによってはかなり色んなことができるのではないかと思います。
一方で、コード内のJavaScript構文は全てダブルクオーテーションで囲まなければならず、補完やコンパイルエラーを検知できないのはなかなか辛いなといった印象です。
この辺りうまいやり方があったら知りたいですね！
ソースコード
こちらに格納しております。
https://github.com/bayastea/EditWebView