【Android】KotlinでWebViewを完全実装！アプリ内WebViewの基本的な使い方と便利な追加機能について徹底解説

すだ

みなさまこんにちは〜！
メモリアインクのすだです。

本日は、
Kotlinにおけるアプリ内WebViewの表示と、表示処理の便利な追加機能について 実際のコードを用いて解説していきます！

この記事を読んでわかること…
・アプリ内WebViewについて
・WebViewの表示方法
・WebView表示処理に追加できる便利な機能

環境

• Kotlin (ver 1.9.0)
• Android Studio (Giraffe | 2022.3.1 Patch 3)

WebViewとは？

WebView（ウェブビュー）は、Androidアプリの中でウェブページを表示するための「ブラウザ」です。
例えば、通常のChromeやSafariのようなブラウザを開かなくても、アプリの中で直接ウェブページを見ることができます。

WebViewを使うと、HTML（ウェブページの構造）やCSS（デザイン）、JavaScript（動的な動作）などを解釈して画面に表示できます。（これをレンダリング（表示処理）といいます。）

WebViewの表示処理を実装する

それでは早速WebViewを表示してみましょう！

まず、AndroidManifest.xmlにインターネットアクセスの権限を追加します。
（<manifest> タグの直下に追加してください。）

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

続いて、プロジェクトのレイアウトファイル（activity_main.xml）にWebViewタグを配置します。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- WebViewの定義 -->
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

そして、WebViewを利用して簡単なウェブページを表示するコードを書きます。

import android.os.Bundle
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // WebViewの初期化
        val webView: WebView = findViewById(R.id.webView)

        // WebViewで指定したURLを読み込む
        webView.loadUrl("https://memoriainc.com/") // 表示したいURLを設定
    }
}

findViewByIdでXMLで定義したWebViewを取得し、loadUrlメソッドで表示するURLを指定してあげると
画面を操作したときにURLが読み込まれます。

それでは、アプリをビルドして開いてみましょう！

アプリ画面でWebページを表示することができました！

WebViewに追加する便利な機能

それでは続いて、WebViewをさらに便利に使うための設定を追加してみます。

JavaScriptの有効化

一部のウェブページではJavaScript（ウェブ上で動的な操作を可能にするスクリプト）を有効にする必要があります。

webView.settings.javaScriptEnabled = true

これを設定ると、JavaScriptで実装してある機能をアプリ内WebViewで使用できるようになります！

WebView内でリンクやウェブページを開くようにする

通常、WebViewでリンクをクリックすると、そのリンク先のページは デフォルトのブラウザ（ChromeやSafariなど）で開かれます。
これはAndroidの標準的な動作です。

この動作を防ぎ、「リンク先のページもWebView内で開く」ようにするために、webViewClient を設定します。

webView.webViewClient = WebViewClient() // リンク先をWebView内で開く
webView.loadUrl("https://www.memoriainc.com")

webViewClient に WebViewClient のインスタンスを設定することで、
リンク先を外部ブラウザではなく、WebView内で処理するようになります。

それでは画面を操作してみると…

アプリWebView内でWebページの遷移ができるようになりました！

まとめ

おつかれさまでした！いかがでしたでしょうか！

WebViewを表示できると、アプリ制作の幅も広がりますので
ぜひぜひマスターしてくださいね！

すだ

技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
を通じて、
自分の市場価値をさらに向上させてみませんか？

それではまた次の記事でお会いしましょう！