【Android】railsで作ったwebアプリをスマホのネイティブアプリのように見せる

railsで作ったアプリをスマホアプリ化したいという仕事があったので手順をメモします。

ざっくり言うとwebView設置してデフォルトのURLをrailsアプリのものにするだけです。

Android編です！

iOS編はコチラ↓ oe526.hatenablog.com

プロジェクトを作成する

Android Studioを立ち上げ、Projectを作成します。 ※このときのバージョンは3.4です

webViewを表示するだけなのでEmpty Activityを選択。

その後、アプリの必要情報を入力。

activity_main.xmlでパーツを設置

設定が終わったら必要なパーツを配置していきます。

activity_main.xmlを開いて…

赤枠の箇所をAndroidからProjectに

WebViewを選択し、画面中央に配置します。

制約を設定

パーツの配置が終わったので、制約をつけてパーツを整えていきます。

といっても簡単で、画面いっぱいに広げたいので、webVIewを選択し、Declared Attributesのlayout_widthとlayout_heightに「match_parent」を設定してやるだけです。
（ついでにidもつけてあげましょう）

MainActivityに処理を記載

onCreate()の中にデフォルトURLを設定するコードを記述します。

【MainActivity.kt】

package パッケージ名（自動入力されてる）

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val webView = findViewById(R.id.webView) as WebView
        webView.setWebViewClient(WebViewClient())
        webView.loadUrl("http://192.168.10.176:5000/")
    }
}

WebViewとWebViewClientが赤くなる場合はimportが必要なので、赤くなった文字にカーソルを合わせて「option + Enter」でimportできます。

※ローカルのrailsアプリを読み込む場合は、「rails s -b 0.0.0.0」とやってrailsサーバーを立ち上げると読み込めます（同一のネットワーク上にある場合）

また、アプリがインターネットと通信できるよう許可を出す必要があります。

【AndroidManifest.xml】

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

    <!-- ↓この1行を追加 -->
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

動作確認

ビルドしてみると、ドロイド君がエラーを告げていますね。

webviewでhttpのサイトは見れませんよということです。
暗号化されたhttpsのものなら問題なく表示されます。

httpでも表示できるように

AndroidManifestに1行追加するだけで解決します。

【AndroidManifest.xml】

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

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

    <application
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            <!-- ↓この1行を追加 -->
            android:usesCleartextTraffic="true"
            android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>

これでサイトを表示することができました。

筆者のオススメ技術書

リンク