[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 3 XLグローバル版
SIMフリー 並行輸入品
6.3インチの大画面
背景をぼかすポートレートモード撮影

Anker PowerCore II Slim 10000
Power IQ 2.0搭載
iPhone & Android対応

シェアする

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

フォローする