[Android] WebView でウェブアプリの作成

webページを見たい場合や、ローカルで解説ページをhtmlファイルで作成して表示する場合にWebViewを使うことができます。
あるいはもっと簡単にIntentで既存のBrowser(Chromeなど)に飛ばすことも可能です。
 
webview 01 - [Android] WebView でウェブアプリの作成

Android Studio 3.0.1
Android 8.1.0

 



WebView の設定

 
Webページを見る方法は2通りあります。

  • WebViewを使う
  • 端末の持っているChrome等のBrowserアプリに投げてそれで閲覧するやり方

 

WebView

 
WebViewにはdefaultではJavaScriptやback keyなど通常のブラウザとしての機能は何もついていませんし、Googleは通常のブラウザを使いたいのであればChrome等を使った方がいいと言っています。WebView | Android Developers
 
ではどういったケースでの使用を目的としているのでしょう。
“If your goal is only to display some HTML as a part of your UI, this is probably fine…”
とありますように、アプリのUIの一部として使うということです。例えば、アプリの静的なヘルプ画面をHTML で作成することなどが考えられます。
 
WebViewの設定: 
基本的な使い方は、loadUrlにURLを指定してWebViewを開きます。
 

 
あるいはHTML文を直接読み込むこともできます。
 

 
この他の機能としてJavaScriptを使えるようにしたり、バックキーで戻る操作ができるようにすることもできます。
 

 

 

Browerアプリ起動

 
Full Browseを期待するのであればintentで他のBrowserを起動させた方がいいでしょう。ただし、元のアプリとの連携はとれません。
 
Browserを起動させる場合はIntent.ACTION_VIEWでintentを投げます。

 

サンプルコード

 
両方の方法を試すテストコードです。
MainActivity.java

 
インターネットの使用許可を設定します
android.permission.INTERNET
AndroidManifest.xml

 
activity_main.xml

 
WebView を表示させるxmlファイル
web.xml

 
strings.xml

 

サンプル動画

 
これを見てもらうと分かりますが、WebViewのこの設定ではreurnキーで戻っても、最初のアプリ画面には戻れません。Browserで開いた場合は戻ることが可能です。
 

 
WebViewを使って戻る場合は、WebView専用にActivityを作成してIntentで遷移させると戻ることができます。
 

 
 
References:
WebView | Android Developers
Building Web Apps in WebView | Android Developers
Hardware Acceleration | Android Developers

誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加




アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

オンラインスクールは色々ありますが、以下の3つはAndroidが学習できる老舗スクールです。


TECH ACADEMY
Androidアプリコース


こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約8,000名の受講生と80社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。


Google Pixel 4 / 4 XL
Android 10 搭載


シェアする

  • このエントリーをはてなブックマークに追加

フォローする