スマホアプリを作る上でWebViewを抜きには作ることができません。
ゲームやツール系の場合はアプリで実装する必要がありますが、ウェブサービスとの連動を行う場合は、WebViewで作った方が便利だったりします。（androidやiosでの出し分けも不要だったりするので）
ただ、アプリ→WebViewやWebView→アプリといったデータの受け渡しが必要になると思います。
例）WebViewのボタンを押すとアプリ内課金の画面が表示される、一覧はwebViewで詳細はアプリ側で表示など
それでは簡単に実装をしていきましょう
アプリからWebViewを実装する
MainActivity.kt|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
class MainActivity : AppCompatActivity() { val tag = "MainActivity" @SuppressLint("SetJavaScriptEnabled") override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val mWebView: WebView = findViewById(R.id.webView) // JavaScriptを有効にする mWebView.settings.javaScriptEnabled = true // WebViewClientを設定 mWebView.webViewClient = object: WebViewClient() { override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) { super.onPageStarted(view, url, favicon) } override fun onPageFinished(view: WebView?, url: String?) { super.onPageFinished(view, url) } override fun shouldOverrideUrlLoading( view: WebView?, url: String ): Boolean { // falseを返すとWebView内に表示する val components = url.split(":").toTypedArray() // webViewから[scheme://alert]が来たらアプリ側で処理を行う if(url == "scheme://alert"){ Log.d(tag,"アプリ呼び出し") return true } return false } } val url: String = "https://xxxxx.com/" mWebView.loadUrl(url) } } |
最低限シンプルなWebViewです。
JavaScriptを有効にしているのと、
WebView側は以下の通りです。
BootStrap+jqueryを使ってますが、ここは何でもよいです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <title>Hello, WebView</title> </head> <body> <div class="container"> <h1>Hello, WebView</h1> <button class="btn btn-primary" id="buttonAppli">アプリ連動ボタン</button> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script> $(function(){ //なにかしらの処理 $("#buttonAppli").on('click', function(){ // [scheme://alert]を叩く location.href="scheme://alert"; }); }); </script> </body> </html> |
画面にボタン1つ設置し、クリックすると[scheme://alert]へ移動するスクリプトを仕込んでます。
WebView上で[scheme://alert]に移動しようとするとアプリ側でURLをキャッチし、[scheme://alert]だった場合は処理を止め、それ以外は通常のリンクを行います。
引数などは?aaa=1などのパラメータをつけてから受け取ることもできるので、ここからアプリ側で処理を入れるのがよいと思います。
また、これを応用すると、外部リンクの場合はChrome Custom Tabsで開き、内部リンクの場合はWebViewで開くなどができるので便利です。
（昔のようにintentを使ってブラウザを呼び出そうとするとリジェクトされる場合があります）
今回はAndroidの場合ですが、WebViewはiOS版と共通で使うことがほとんどなので、同じ挙動でiOSでも同じ事ができるようにする必要がありますね。
