【Android】WebViewのTips【株式会社ライトコード】

今回はWebViewを使う場合のTipsをいくつか紹介したいと思います

なんでWebView使うの？

ネイティブでモバイルアプリケーションを開発してるエンジニアの多くはWebViewについてはあまり良い印象を持っておらず、

使わなくて良いならなるべく使わないように仕様や設計の調整をしている方が多いと思います。

その中でなぜ使うのかというと、様々なプラットフォームでなるべくUIを統一したいときに使うことが多いのではないしょうか。

利用規約などをWebViewで表示しているのを見受けられますが、あれも同じ考えの認識です。

どのプラットフォームでの統一された表示をしたい！

なら、そもそもクロスプラットフォームのフレームワークを使えばいいじゃんという意見ももちろん賛成で、私としてもそちらを推奨します。

そこまで分かっていてWebView使わなきゃなの？

一例ですが、Android,iOSとネイティブで、同じような機能がWebページとして別々で開発が続けられてきて、一部のUIだけ統一をしたいといった要件は出てくることがあります。

そのときが出番になります。

最終的には全て統一して足掛かりとして一部..という場合はクロスプラットフォームのフレームワークを導入で良いと思います。

本題のTips

Chrome Dev Toolsを使う

これはWebViewを利用した画面開発ではほぼ使う機能かと思います。

WebViewを利用している画面クラスで下記を追加します。

WebView.setWebContentsDebuggingEnabled(true)

その後にアプリを起動してadb接続しているPCのChromeから下記にアクセスします。

chrome://inspect/#devices

接続と起動がうまく行っていれば端末名がリストに表示されるので、そこからinspectしてデバッグできます。

スタイルが当たっているか、スクリプトがエラーになっていないかなどを確認しやすくなります。

もちろんネイティブ側の実装でエラーやコンソールを確認することはできますが、DevToolsを使った方が楽な場合が多いのでおすすめです。

faviconが見つからず404エラーがでる

Stacktraceなんかでもたまに見る事象です。

こちらはWebViewClientCompatを使って解消できます

override fun shouldInterceptRequest(

    view: WebView,

    request: WebResourceRequest

): WebResourceResponse? {

    val url = request.url.toString()

    // faviconのリクエストをフィルタリングして無視

    url.takeIf { it.contains(FAVICON) && request.isForMainFrame.not() }?.let {

        return WebResourceResponse(MINE_TYPE_PNG, null, null)

    }

    /// 割愛

}

リクエストの制御自体ができない場合があるので、来ちゃったら適当に返してあげれば抑制はできます。

JavaScriptなどのフロントエンド向けのライブラリを利用したい

WebViewで表示するコンテンツの多くはモバイルアプリケーション開発メンバーではなく、フロントエンドの方々実装することが多いと思います。

…

記事の続きは下のURLをクリック！

https://rightcode.co.jp/blogs/48857

エンジニア積極採用中です！

現在、WEBエンジニア、モバイルエンジニア、デザイナー、営業などを積極採用中です！

採用ページはこちら：https://rightcode.co.jp/recruit

社員の声や社風などを知りたい方はこちら：https://rightcode.co.jp/blogs?category=life

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。