Android FragmentにローカルHTMLファイルからWebViewを表示（Kotlin）

#はじめに
３つのNavigation Buttonがあり、それぞれをFragmentで作ってるとする。
そのうちの１つのFragmentに、ローカルHTMLファイルから読み込んだWebViewを表示する。

イメージはこんなん。**日本地図の部分はみなさんが好きなHTMLファイルを用意してください。**
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">FragmentにローカルHTMLファイルを読み込んで、WebViewを表示できた。。。<br>どこにHTMLファイルを設置するのかが、ほんと分からなかった。。。 <a href="https://t.co/2XHm9Us4tQ">pic.twitter.com/2XHm9Us4tQ</a></p>&mdash; げん げんと (@gento34165638) <a href="https://twitter.com/gento34165638/status/1269526589676519425?ref_src=twsrc%5Etfw">June 7, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

３つのNavigation Buttonをどうやって作るかは、:point_down:をみてね！
[Android Fragmentの中にタブ付きスワイプビューを作る（kotlin）](https://qiita.com/kokogento/items/383afccd6eef2b029ecd)

#HTMLファイルを設置する
何気にこれが苦戦した・・・・

どこに入れるのかが分からんかった。。。

##「assets」の名前でフォルダを作成
そこにhtmlファイルを入れる。僕の場合は`japan`というフォルダ内にhtmlファイルを入れたので、`assets/japan/index.html`となる
<img width="911" alt="スクリーンショット 2020-06-07 16.20.50.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/ff327ceb-bd43-80b4-0c24-16a6550a5d44.jpeg">

Android Studioで見ると、こんな感じ。
<img width="434" alt="スクリーンショット 2020-06-07 16.21.26.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/95df04f8-9be2-33fa-55fb-26ddab846f6d.jpeg">

**余談だが、Android Studioで`japan`フォルダを、`assets`フォルダ内にドラッグ&ドロップで追加しようとしても、うまくいかないのだが、、、、**
追加できるのはファイルだけ？？

#WebViewを表示するFragmentを編集

##XML
特定のFragmentのxmlを開く。僕の場合は`fragment_first.xml`

```xml:fragment_first.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".FirstFragment">

    <WebView
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>
```

<img width="786" alt="スクリーンショット 2020-06-07 16.31.17.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/8a7d0123-9a22-b732-1640-25767a717a23.jpeg">


##Kotlin

```kotlin:FirstFragment.kt
package com.example.myapplication

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.webkit.WebView
import androidx.appcompat.app.AppCompatActivity

/**
 * A simple [Fragment] subclass.
 */
class FirstFragment : androidx.fragment.app.Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val view: View = inflater.inflate(R.layout.fragment_first, container, false)

        //xmlのWebViewで指定したid
        val myWebView: WebView = view.findViewById(R.id.map)
       
       //javascriptがデフォルトで無効なので、有効にする
        myWebView.settings.javaScriptEnabled = true

        //設置したhtmlファイルへのパス
        myWebView.loadUrl("file:///android_asset/japan/map.html")
        return view
    }

}
```

普通のwebサイトの場合、`loadUrl`はこうなる。

```kotlin
myWebView.loadUrl("http://www.example.com")
```

ただし、今回はプロジェクトフォルダ内に設置したHTMLファイルなので、

```kotlin
myWebView.loadUrl("file:///android_asset/japan/map.html")
```

みたいな形となるみたい。