Webページを表示するAndroidアプリ

練習ということで Web サイトを表示するためだけの Android アプリを作った時のお話。

表現が色々間違っているかもしれないのでご注意ください。

はじめに

検索してみたところ、アプリ内ブラウザを実現するためには WebView クラスを使うか、Chrome Custom Web を使うという二択らしいです。

Custom Web のほうが速いらしいが、(あまり時間がなくて)とりあえず WebView を使ってみます。

activity_main.xml

アプリ名は適当、対応する Android バージョンは 4.4 以上、デザインは Empty、Layout File もデフォルトで付けます。

最初に Web ページを表示するために WebView というアイテムを用意します。

<WebView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/webview" />

大きさは画面ぴったりで、WebView には webview という ID をつけておきます。

MainActivity.java

実際のアプリの動作を書いていきます。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

   findView();
    webView.loadUrl("http://mktia-twitter.herokuapp.com");
}

public void findView() {
    //activity_main.xmlで設定したIDをWebViewActivityのWebViewクラスに関連付け
    webView = (WebView) findViewById(R.id.webview);
}

元からある onCreate メソッドに WebView の処理を付け足します。

先ほど付けた ID を引数にするとオブジェクトが返ってくるようなので、インスタンスの作成のイメージ?

その後に loadUrl() で実際に読み込むサイトを指定します。

アプリ内ブラウザで遷移させる

上記だけでも Web サイトの画面は表示されますが、リンクを押すと外部のブラウザで開こうとするのを、内部に留めておきたい。

全てアプリ内のブラウザで処理してほしいときは、URL を呼ぶ手前でクライアントを固定するといいようです。

webView.setWebViewClient(new WebViewClient());

AndroidManifest.xml

ここまでできればあと少し。最後にインターネットに接続する権限を得ます。

許可を得ないで実行すると、次のようなエラーが出ます。

net::ERR_CACHE_MISS
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="[パッケージ名]">

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

    <application

internet permission とコメントを付けた一行を追加するだけで OK !

これでアプリの主な機能としては完成です。ちょっと重い…

戻るボタンで戻りたい

これでアプリ内ブラウザでページ遷移していくアプリにはなりましたが、戻れないのは不便です。

戻るボタンを作ってもいいですが、より直感的に操作できるようにスマホの戻るボタンを押すと戻れるようにしてみます。

ちなみに、現状では戻るボタンを押すとアプリを終了します。

public boolean onKeyDown(int KeyCode, KeyEvent event) {
    if (KeyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) {
       webView.goBack();
       return true;
    }
    return super.onKeyDown(KeyCode, event);
}

このように処理を追加します。

WebView にはページの閲覧履歴を保存して遡る機能、goBack() メソッドがあり、逆に進む機能は goForward() があります。

また、前後に履歴がなければ移動できないので、それを調べるための canGoBack(), canGoForward() メソッドもあります。

onKeyDown() メソッドを使って、スマホの戻るボタンと連動させます。

最後に

アプリを閉じるのに、履歴を遡りきるかホームボタンで戻るしかない、などいろいろ機能は抜けてますが、とりあえずできたということで。サイトで説明してくださっている方々には感謝です。

参考サイト →