どうも、むつたくです。
今回はKotlinのWebViewについて紹介していきます。
AndroidでWebアプリを作るとしたら間違いなくWebViewを使用すると思いますので、覚えておきたい1つです。

 

今回やること

1. WebViewについて
2. WebViewを使ってみる
3. WebViewで最低限設定しておきたい2つのこと
• インターネット通信の許可
• Javascriptの有効化
4. 番外編：ブラウザを起動する

 

Android Developersのページはこちらです。
WebView でのウェブアプリの作成

 

開発環境

• Android Studio 3.6.2
• Kotlin 1.3.61
• Xperia5 (Android10 / APIレベル29)

 

1. WebViewについて

Android#Viewクラスの拡張クラスになります。
表示する際は、レイアウトにWebページを埋め込むようなイメージになります。HTMLではインラインフレームとかでしょうか。
ただ、完全なWebページではなく、アドレスバーなどが表示されない簡易的なものになります。

 

2. WebViewを使ってみる

では、実際にコードを書いていきましょう。
まずは、XMLにWebViewを追加します。

 

activity_main.xml

[cc_kotlin]

[/cc_kotlin]

 

次はkotlinコードでWebページを表示します。

 

MainActivity.kt

[cc_kotlin]
class MainActivity : AppCompatActivity() {

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

// ここから追加
val webView: WebView = findViewById(R.id.webView)
webView.loadUrl(“https://swallow-incubate.com/”)
// 追加ここまで
}

}
[/cc_kotlin]

 

Webページを表示するのに必要なのは WebView.loadUrl になります。
引数に表示したいWebページのURLを渡します。
こんな感じで表示されていればOKです。

 

 

WebViewで最低限設定しておきたい2つのこと

この状態では、インターネットと上手く通信されていなかったり、Javascript/jQueryが動かないなんてことがあります。
ちなみに弊社HPをなにも設定せずにWebViewへロードさせた場合、こんな感じになります。

 

 

ここはスクロールすると表示されるコンテンツになっているのですが、スクロールさせてもなにも表示されていない状態です。
また、右上のハンバーガーメニューをタップしても反応しません。
これを回避するために2つのことを設定します。

 

インターネット通信の許可

まずは、インターネットの通信を許可させないといけません。許可していないのに表示できていたのはちょっと謎仕様です。
なのでAndroidManifest.xmlでパーミッションを追加します。

 

AndroidManifest.xml
[cc_xml]

[/cc_xml]

 

５行目の部分を追加します。これでインターネット通信を許可することができます。

 

Javascriptの有効化

次はJavascriptです。これはデフォルトで無効になっているので、Javascriptで動かしている部分が全く動きません。知らないと意外とハマるかもしれないです。
対処は、設定してあげるWebViewの設定を変更します。ここではMainActivity.ktになります。

 

MainActivity.kt
[cc_kotlin]
class MainActivity : AppCompatActivity() {

@SuppressLint(“SetJavaScriptEnabled”)
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val webView: WebView = findViewById(R.id.webView)
webView.settings.javaScriptEnabled = true // ★この行を追加★
webView.loadUrl(“https://swallow-incubate.com/”)
}
}
[/cc_kotlin]

 

これで設定は完了です。再度Webページを表示してみます。

 

 

このようにスクロールさせて表示できていればOKです。右上のハンバーガーメニューもタップするとリストが表示されます。

 

番外編：ブラウザで表示する

Webつながりで、WebViewではなくブラウザを使用して表示したい場合があるかもしれません。
そんな時は「Intent()」を使用します。
実装方法は、アクティビティの遷移と似ています。

 

MainActivity.kt
[cc_kotlin]
class MainActivity : AppCompatActivity() {

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

// ここから追加
val intent = Intent(Intent.ACTION_VIEW, Uri.parse(“https://swallow-incubate.com/”))
startActivity(intent)
// ここまで追加
}
}
[/cc_kotlin]

 

Intentの第二引数に表示したいWebページのURLをURIにパースしてあげることでブラウザを起動することができます。
複数のブラウザがインストールされている場合は起動のタイミングでSnackBarが表示されます。

 

 

---

WebViewを使用したWebページの表示は以上になります。
簡単に実装できますので、ガシガシ使っていきましょう（使うタイミングがあまりないかもしれませんが…）。
それではまたの機会に！