みなさまこんにちは〜!
メモリアインクのすだです。
本日は、
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が使えるシーンの例
- アプリ内でニュース記事やブログページを表示
例)ニュースアプリで、特定の記事をアプリ内で直接開く
→ アプリ内で操作が完結するので、わざわざ別のブラウザを開かなくて済む - 支払い処理や外部サービスを組み込む
例)ECアプリでクレジットカード決済のページを表示
→ 決済処理や会員ログインなど、外部サービスのページをそのままアプリ内に埋め込むことができる - 独自のウェブコンテンツを提供する
例)アプリ独自の情報ページや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が読み込まれます。
それでは、アプリをビルドして開いてみましょう!
アプリ画面で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エンジニアを目指すなら【ユニゾンキャリア】
自分の市場価値をさらに向上させてみませんか?
それではまた次の記事でお会いしましょう!
コメント
コメント一覧 (1件)
[…] […]