Android StudioでWebViewアプリを作成してみる

## はじめに
転職による有休消化期間で何かしたいと思い、Androidで欲しかった機能を作ろうと思い立ちました。
期間は半月程度です。
ほしかった機能はここでは重要ではないので割愛しますが、Androidのローカルファイルへのアクセスが必要な他は特に必須機能がないのでアプリ画面はWebViewなどで簡易に作成することにしました。
Kotlinは未経験でしたが、Javaは経験済みだったため、Kotolinを一から学習するのではなく、JavaでのAndroidアプリをモック的に作成し、Kotlinにリファクタリングする形で差分学習をし、学習効率をあげようと計画しました。

いつもの自分だったら、Kotlinの本などで一通り学習して、アプリの基本設計もして、準備万端な状態で開発に入るのですが、半月という期間でそれでは間に合いません。
また、こちらの本を読んだばかりで、まずモックを作ってしまうというアプローチや学習効率を模索したかったのもあります。（Kindle Unlimitedに入っています）
<a href="https://www.amazon.co.jp/%E3%81%AA%E3%81%9C%E3%80%81%E3%81%82%E3%81%AA%E3%81%9F%E3%81%AE%E4%BB%95%E4%BA%8B%E3%81%AF%E7%B5%82%E3%82%8F%E3%82%89%E3%81%AA%E3%81%84%E3%81%AE%E3%81%8B-%E3%82%B9%E3%83%94%E3%83%BC%E3%83%89%E3%81%AF%E6%9C%80%E5%BC%B7%E3%81%AE%E6%AD%A6%E5%99%A8%E3%81%A7%E3%81%82%E3%82%8B-%E4%B8%AD%E5%B3%B6%E8%81%A1-ebook/dp/B01GPCKJWK?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%AD%E3%82%BD%E3%83%95%E3%83%88+%E3%81%AA%E3%81%9C%E3%81%82%E3%81%AA%E3%81%9F%E3%81%AE&qid=1663068263&sr=8-1&linkCode=li2&tag=cocolonifty00-22&linkId=3bb40e554f0125576d85d70860b8dd3a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B01GPCKJWK&Format=_SL160_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=cocolonifty00-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=cocolonifty00-22&language=ja_JP&l=li2&o=9&a=B01GPCKJWK" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />

とはいえ、モック以前にAndroid開発環境もないので、まずは環境構築をかね、任意のブラウザがアプリ内で表示できることをいったんのゴールとします。

- アプリの仕様：WebView
- IDE：Android Studio
- 言語：Java
- ゴール：ブラウザが表示できること

## IDEのインストール
Android Studioを[ここ](https://developer.android.com/studio?hl=ja)からDLしてインストールします。
Javaなどを個別にインストールしなくて良いので楽です。

## プロジェクトの作成
[File] > [New] > [New Project] を選択します。
テンプレートを選択して、プロジェクト情報を入力します。
ここで、言語の選択もします。

## デバイスの作成
ソースは実機を繋げることもできますが、いったんADV(Android Virtual Device)を作成して、PC上に仮想的な端末環境を作成します。
プロジェクトが開いたら、[View] > [Tool Windows] > [Device Manager]を選択します。

[Create Device]を押下します。
手持ちのAndroid端末をエミュレーターにしたたかったのですが、なかったので作成します。

[New Hardware Profile]を押下します。
Android端末の製品情報を見ながらそれっぽい情報を入力して、[Finish]を押下すると、選択肢に表示されるので選択して[Next]を押下します。
![スクリーンショット 2022-09-12 19.48.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380300/7d6df729-5741-13dc-7161-870d687c66db.png)
参考：[ハードウェア プロファイルのプロパティ](https://developer.android.com/studio/run/managing-avds?hl=ja#hpproperties)

手持ちのAndroid OSに合わせてAPIを選択し、[Next]、[Finish]と押下します。

デバイスマネージャーが閉じ、プロジェクトの上部に洗濯したデバイスが表示されるようになればOK。
![スクリーンショット 2022-09-12 20.01.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380300/f25668c6-0af9-1ec7-7e9d-03700359c8b2.png)

## エミュレーターでアプリを動かしてみる
テンプレートをNone以外にしている場合、サンプルコードが存在しているため、試しに動かしてみます。
[Run] > [Run app]を選択します。
これは、アプリのビルドと起動（と初回はエミュレーターの起動も）を並行しているので結構時間がかかります。
無事起動できると赤枠部分にアプリが表示されます。
![スクリーンショット 2022-09-13 11.06.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380300/17036a78-b720-b80e-19d7-54e31594fd64.png)

## WebViewアプリを実装
まずは、マニュフェストファイルでインターネットのアクセスを許可します。
```xml:app/manifests/AndroidManifest.xml
    <manifest ... >
        <uses-permission android:name="android.permission.INTERNET" />
        ...
    </manifest>
```
次にMainActivityを以下のように編集し、Googleトップを表示するWebViewを作成します。

```java:app/java/com.example.myapplication/MainActivity.java
package com.example.myapplication;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.Window;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private class MyWebViewClient extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            return false;
        }

        @Override
        public void onReceivedError(WebView view, int errcode, String desc, String url) {
            String s = "error:(" + errcode + ")" + desc;
            Toast.makeText(MainActivity.this, s, Toast.LENGTH_LONG).show();
        }
    }

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        // ブラウジングの設定（JavaScriptの使用を許可し、ズームを禁止）
        WebView wv = new WebView(this);
        WebSettings sets = wv.getSettings();
        sets.setJavaScriptEnabled(true);
        sets.setSupportMultipleWindows(false);
        wv.setWebViewClient(new MyWebViewClient());
        setContentView(wv);

        wv.loadUrl("https://www.google.co.jp");
    }
}
```
なお、ソースコードは[こちらの本(Androidの絵本)](https://amzn.to/3RXJcrY)を参考にしていますが、執筆時点のSDKのバージョンがかなり古く、また[Googleのサンプルコード](https://developer.android.com/guide/webapps/webview?hl=ja)ともかなり異なります。
今回は動くのでそのまま記載していますが、のちほど勉強を兼ねてGoogleのサンプルコードにリファクタリングする予定です。

ファイルを保存したら、[Run] > [Run app]を選択します。
Googleの画面が無事表示されました。
![スクリーンショット 2022-09-13 20.05.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380300/30a9624d-5103-4296-f640-e2bf249c5101.png)

検索窓のクリックとキーボード検索もできます。
![スクリーンショット 2022-09-13 20.06.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/380300/f3b445ce-f17b-d920-ef11-b83ec8f2c8d1.png)


## おわりに
Google製品は軽いイメージがあったので、Android Studioが重くてびっくりしました。
手持ち端末のMac Book Airではスペック的にも限界かもしれません。
しかし、Javaなどのインストールが不要なので、ハマらなければすぐにサンプルアプリをエミュレーターで動かすくらいはできるのが良いですね。
（私はAPI 30でなぞのエラーが出てハマったのでアンインストール後、API 33を利用することにしました）

この後は、前述の通り、Googleのサンプルコードへ書き直し、まずはAndroid実装への理解度を測ろうと思います。その後Kotlinで書き直し、Javaとの差分を確認予定です。
その結果で、主要機能（Androidのローカルファイルへのアクセスなど）に関してJava→Kotlinの順で実装するか、直接Kotlinで書き始めてしまうか決めようと思います。

ここまで読んでいただきありがとうございました。