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

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

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

iOS編です！

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

プロジェクトを作成する

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

webViewを表示するだけなのでsingle view appを選択。

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

ストーリーボードにパーツを設置

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

Main.storyboardを開いて…

Webkit Viewを選択し、画面中央に配置。

次にToolbarを選択肢、画面下部に設置。

Bar button itemをあと2つ追加します。

そして、2個目のItemと3個目のItemの間にFlexible space barを設置します。

制約を設定

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

webViewは4方向すべて0に（下はToolbarを基準）。

Toolbarも4方向を0に（上はwebViewを基準）。

パーツとViewControllerを紐づけ

パーツを設置して制約をつけたら、ViewControllerとの紐づけです。

アシスタントエディターを立ち上げて、各パーツをcontrolを押しながらドラッグアンドドロップします。 webViewと各itemの4点をOutletで接続しましょう。

WKWebViewの箇所で下の画像のようにエラーになると思うので、import UIKitの下に「import WebKit」を追記します。

また、Toolbarのitem3つはActionも登録していきます。

itemの処理も入れるとこんな感じになります。

【ViewController.swift】

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var browserWebView: WKWebView!
    @IBOutlet weak var backButton: UIBarButtonItem!
    @IBOutlet weak var forwardButton: UIBarButtonItem!
    @IBOutlet weak var reloadButton: UIBarButtonItem!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func goBack(_ sender: Any) {
        self.browserWebView.goBack()
    }
    @IBAction func goForward(_ sender: Any) {
        self.browserWebView.goForward()
    }
    @IBAction func reload(_ sender: Any) {
        self.browserWebView.reload()
    }
}

WebKit.frameworkの追加

ここまで作ってビルドしてみると…

AppDelegateでエラーが出ますね。

これは、WebKit.frameworkを読み込んでやると解消します。

アプリ名→TARGETSのアプリ名→General→Linked Frameworks and Librariesから設定します。

これでビルドできます。

ViewControllerに処理を記載

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

【VIewController.swift】

import UIKit
import WebKit

class ViewController: UIViewController {

    @IBOutlet weak var browserWebView: WKWebView!
    @IBOutlet weak var backButton: UIBarButtonItem!
    @IBOutlet weak var forwardButton: UIBarButtonItem!
    @IBOutlet weak var reloadButton: UIBarButtonItem!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // デフォルトのURLを指定
        let urlString = "http://192.168.10.176:7000/"

        // URLの読み込み
        let urlRequest = URLRequest(url: URL(string: urlString)!)

        // 上で読み込んだURLをwebViewで表示
        self.browserWebView.load(urlRequest)
    }

    @IBAction func goBack(_ sender: Any) {
        self.browserWebView.goBack()
    }
    @IBAction func goForward(_ sender: Any) {
        self.browserWebView.goForward()
    }
    @IBAction func reload(_ sender: Any) {
        self.browserWebView.reload()
    }
}

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

動作確認

ビルドしてスマホの画面でrailsアプリが表示されればOKです。

筆者のオススメ技術書

リンク