【正社員】還元率83%【フリーランス】マージン一律5万円で案件をご紹介させていただきます。 詳細はこちら

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

【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が使えるシーンの例

  1. アプリ内でニュース記事やブログページを表示
    例)ニュースアプリで、特定の記事をアプリ内で直接開く
    → アプリ内で操作が完結するので、わざわざ別のブラウザを開かなくて済む
  2. 支払い処理や外部サービスを組み込む
    例)ECアプリでクレジットカード決済のページを表示
    → 決済処理や会員ログインなど、外部サービスのページをそのままアプリ内に埋め込むことができる
  3. 独自のウェブコンテンツを提供する
    例)アプリ独自の情報ページやFAQページをWebViewで表示
    → アプリのデザインに合わせたウェブページを表示することで、統一感を持たせることができる

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が読み込まれます。

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

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

アプリ画面で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")

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

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

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

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

まとめ

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

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

すだ

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

弊社テックブログをご愛読いただきありがとうございます。
当テックブログを運用している株式会社メモリアインクは、
【正社員】還元率83%
【フリーランス】マージン一律5万円で案件のご紹介
と、エンジニアの皆様に分かりやすい形で稼げる仕組みを構築し提供させていただいております。詳しくは弊社お問い合わせページ、プロフィールのQRコードを読み取り、LINEメッセージでお問い合わせいただけますと幸いです。

コメント

コメント一覧 (1件)

コメントする

目次