はじめに

Androidでは、WebViewやChrome Custom Tabsを利用して実装することで、ウェブページをアプリ内で表示することができます。

今回はWebViewの利用方法を説明します。

前準備

プロジェクトの作成

Android Studioを起動してください。
起動画面の[Start a new Android Studio Project]をクリックします(図1)。
図1
[Empty Activity]を選択の上、[Next]をクリックします(図2)。
図2
[Name]に"Sample WebView"を入力の上、[Finish]をクリックします(図3)。
図3

これでアプリの前準備は完了です。

パーミッションの追加

今回はWebViewを使うので、アプリのインターネットの権限を有効にする必要があります。
1. [app] > [manifests] > [AndroidManifest.xml]をクリックします(図4)。
2. 以下のコードをAndroidManifest.xmlに追記します(図4)。

<uses-permission android:name="android.permission.INTERNET"/>

f:id:ActivityService:20200623221734p:plain — 図4

これでアプリのインターネットの権限が有効になりました。

レイアウトの追加

画面にWebViewを表示するために、WebViewのレイアウトを設定する必要があります。
1. [app] > [res] > [layout] > [activity_main.xml]をクリックします(図5)。

f:id:ActivityService:20200623222237p:plain — 図5

2. 以下のコードをactivity_main.xmlに追記し編集します(図6)。

<WebView
    android:id="@+id/webView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:ignore="MissingConstraints"
    tools:layout_editor_absoluteX="1dp"
    tools:layout_editor_absoluteY="1dp" />

f:id:ActivityService:20200623222300p:plain — 図6

wrap_contentを指定することで、指定したViewを表示するのに十分なサイズを自動で指定できます。

WebViewの実装

1.　[app] > [java] > [com.example.samplewebview] > [MainActivity.java]をクリックします(図7)。

f:id:ActivityService:20200623223117p:plain — 図7

2.　MainActivity.javaに以下のコードを追記します(図8)。

static final String URL = "https://google.com";
private WebView webView;

3.　onCreate()メソッド内に以下のコードを追記します(図8)。

// Web Viewの初期設定
webView = (WebView) findViewById(R.id.webView);
webView.setWebViewClient(new WebViewClient()); // WebViewを設定する
webView.getSettings().setJavaScriptEnabled(true); // JavaScriptを有効にする
webView.loadUrl(URL); // URLを読み込む

これでMainActivityが呼び出された場合、WebViewが表示されます。

4.　onKeyDown()メソッドを作成し、以下のコードを追記します(図8)。

@Override
public boolean onKeyDown(int keyCode, KeyEvent e){
    if(keyCode == KeyEvent.KEYCODE_BACK){ // 戻るボタンがタップされた時
        if(webView != null && webView.canGoBack()){ // WebViewがNULLでなく、閲覧履歴があるなら
            webView.goBack(); // 一つ前のウェブページを表示する
        }
        return true;
    }else{
        return super.onKeyDown(keyCode, e);
    }
}

これで、端末の戻るボタンがタップされた時に一つ前のウェブページが表示されるようになります。

5.　onResume()メソッドを作成し、以下のコードを追記します(図8)。

@Override
protected void onResume() {
    super.onResume();// バックグラウンドからフォアグランドに戻った時など
    if(webView != null){ // WebViewが空でなければ
        String url = webView.getUrl(); // 現在のウェブページを
        webView.loadUrl(url); // 再表示する
    }
}

f:id:ActivityService:20200623223933p:plain — 図8

これで、バックグラウンドからフォアグランドに戻った時にも正しく表示されるようになります。

動作確認

上部のツールバーでビルド先(端末やエミュレーター)を選択の上、[▶︎]をクリックします(図9)。
図9
ビルド先(端末やエミュレーター)で指定したURLのウェブページが表示されるのを確認できました(図10)。
図10

おわりに

WebViewやChrome Custom Tabsは様々な場面で使われます。例えば、OAuth2.0を使った認可・認証のログイン画面の表示やネットショッピングサイトのアプリ(アプリはWebViewやChrome Custom Tabsのみ実装し、アプリ内でモバイル向けのウェブページを表示するようにしている場合もあるようです。)によく使われています。もちろん、ウェブブラウザアプリなどにも利用されています。

モバイルアプリ開発入門

iOSやAndroidアプリの開発入門者向けブログです。

WebViewを使ってみよう(Android, Java)