androidでwebviewを使う

はじめに

業務でWebViewを用いたアプリ開発に携わっており、ネイティブ側の仕組みを理解したかったので実際に触ってみました。

WebViewとは

スマホアプリを開発する際に、「ネイティブ開発」と「WebView開発」の2つを耳にしたことがあると思います。
ネイティブ開発であれば、Android OS向けのJavaやKotlin、iOS向けのSwiftなどの言語を用いて開発を行います。
対してwbviewは、HTMLやJavaScriptなどWeb開発用の言語を用いて開発を行います。

メリット

WebViewを使用するメリットとしては、以下を上げることができます。

• 開発/運用コストを減らす
• リリースサイクルを短縮化できる

AndroidとiOSの両方に対応するアプリを全てネイティブ開発する場合、中身は同じアプリでも複数の言語を用いて開発を行う必要がでてきます。
もちろん保守する際も、2倍の労力がことになります。

その点、WebViewを用いることで、各OSに依存しない開発を行うことができます。

また、ネイティブ側のアプリリリースを行う際、「Google Play」や「App Store」でのアプリ審査が必要になります。
こちらの申請は長いと2週間ほどかかる上に、規約に違反しているとリジェクトされることもあります。

WebViewであれば上記の審査を行う必要がないので、パッチの適応などを迅速に行うことが可能です。

デメリット

WebViewを使用するデメリットとしては、以下が挙げられます。

• ネイティブとWebViewの連携が難しい
• 個人開発を行う場合、幅広い知識が必要になる

スマホアプリの開発を行う際に、よく使う機能としてカメラや地図アプリ（位置情報） との連携などがあると思います。
ネイティブ言語で開発する場合、比較的容易に実装することが可能ですが、
WebViewでそれらの機能と連携する場合、ひと工夫必要となることが多いです。

また、知識についてのデメリットですが、どのような開発を行うかにもよりますが、
ネイティブ言語に関する知識、ビルドツールに関する知識、webアプリ開発に関する知識と多くの知識を有している必要があります。
レスポンシブ対応も結構大変です...
こういった点はデメリットとして挙げられるでしょう。

実際に使ってみる

準備

1. Android studioのDL
2. FILE ⇒ New ⇒ New Project ⇒ 任意のテンプレートを選択 ⇒　言語は「Java」を選択
※今回のテンプレートは「Empty Activity」を選択しています。

manifestの編集

AndroidManifest.xmlに以下を追加し、インターネットへのアクセスを許可します。

AndroidManifest.xml

<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
</manifest>

MainActivityの編集

アプリ内ブラウザでYahoo! JAPANのトップページを表示してみます。

MainActivity.java

package com.example.webviewapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.Window;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            // モバイル版のyahooの場合、URLに「m.」が付きます
            if ("m.yahoo.co.jp".equals(Uri.parse(url).getHost())) {
                // トップページはアプリ内ブラウザとして表示
                return false;
            }
            // 外部ブラウザとして表示
            Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
            startActivity(intent);
            return true;
        }
    }

    // Android Lint に対して警告をださないように
    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // タイトルバーをなくす
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        //　JavaScriptを有効化
        WebView myWebView = new WebView(this);
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        // WebView が複数のウィンドウを開けるようにする
        webSettings.setSupportMultipleWindows(true);
        myWebView.setWebViewClient(new MyWebViewClient());
        setContentView(myWebView);

        myWebView.loadUrl("https://www.yahoo.co.jp");
    }
}

エミュレーターを起動。

別ページに遷移。
外部ブラウザになった。

終わりに

androidでWebViewを使用する為の、最低限の方法を学んでいきました。
色々なアプリでWebViewが採用されていると思いますが、開発コスト面を考えるとやはりメリットは大きそうです。
今後は、もっとWebViewの開発の深いところも勉強してみたいと思います。

※エミュレータ起動時にエラーが出た場合、下記ページの対処を行ってみてください。
https://stackoverflow.com/questions/73688486/android-studio-error-requires-libraries-and-applications-that-depend-on-it-to-c

参考サイト

• Android　デベロッパーガイド
  https://developer.android.com/guide/webapps/webview?hl=ja#java
• WebViewとネイティブアプリの違い：メリット・デメリットに触れながら解説
  https://iridge.jp/blog/202303/33668/