先日、風邪ログというWebアプリをリリースしました。自分の体調を記録して振り返り、自分がどんなときに体調が悪くなるかを理解できるアプリです。Webアプリですが、Google Playストアでもアプリを見つけてもらえるように、Androidアプリ化できるか試してみました。Androidアプリ化の方法はいくつかありますが、今回は一番さくっとできそうなWebViewを使った方法を試しました。
WebViewで動かしてみる
WebViewを使ってWebアプリを動かす方法を、Android公式の記事を参考に試しました。
https://developer.android.com/guide/webapps/webview?hl=ja
まずはAndroid Studioで新規プロジェクトを作成し、Empty ActivityをTemplateとして選びます。この初期状態でアプリを実行すると、空の画面が表示されます。
まずはactivity_main.xmlにWebViewを記載します。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- 以下のブロックを記載 -->
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>次に、インターネット上で動くWebアプリにアクセスできるよう、AndroidManifest.xmlに許可設定を記載します。
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.isolity.kazelog">
<!-- 以下のブロックを記載 -->
<uses-permission android:name="android.permission.INTERNET" />
<application
android:allowBackup="true"
...最後に、MainActivity.ktにWebViewの設定を記載します。
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// 以降の行を記載
val myWebView: WebView = findViewById(R.id.webview)
// Webアプリ内のリンクをWebView内で開くようにする
myWebView.webViewClient = WebViewClient()
// JavaScriptの有効化
myWebView.settings.javaScriptEnabled = true
// Web Storageの有効化
myWebView.settings.domStorageEnabled = true
// Webアプリの読み込みのため、風邪ログのURLを指定
myWebView.loadUrl("https://kazelog.shoarai.com")
}
}上記のコードでアプリを実行すると、風邪ログのトップページが表示されました。
WebView上でGoogleログインできない
ここでやっかいなのが、以下の処理です。
// Webアプリ内のリンクをWebView内で開くようにする
myWebView.webViewClient = WebViewClient()
風邪ログは、EmailによるログインやGoogleアカウントによるログインをサポートしています。ログインをボタンを押したときに、Googleのログイン画面に遷移することになるんですが、上記の設定を行わないとGoogle ChromeなどのAndroid規定のブラウザでログイン画面が開いてしまいます。上記の設定をするとこで、ログイン画面がWebView内で開くようになります。
さてここで本題なのですが、GoogleはWebView内でのログインをサポートしていません。たとえWebView内でGoogleにログインしようとしても、以下のエラー画面が表示されます。
この件に関する公式のドキュメントを探したところ、以下の記事が見つかりました。やはりWebViewからGoogleログインに必要なOAuthリクエストが許可されなくなるとのことです。
「ウェブビュー」と言われる埋め込みブラウザから Google への OAuth リクエストは許可されなくなります。
https://developers-jp.googleblog.com/2016/09/modernizing-oauth-interactions-in-native-apps.html
ということでWebアプリである風邪ログを、Androidアプリとしてリリースすることはできませんでした。Googleログインを行わないWebアプリであれば、リリースできるかもしれませんね。
