いわゆるガワネイティブというやつです。
iOSアプリのView構築に疲れたのでElmでViewを作れればいいんだという思いつきで試してみました。
iOSでHTMLを読み込んで表示する
iosプロジェクト内にHTMLファイルがあればWKWebViewを利用して画面を表示することが出来ます。
以下のようなプロジェクト構造を想定します。
project/
elm-app/
public/
js/
main.js
index.html
iOS側ではHTMLのコードをロードすればその内部にあるスクリプトが実行されるのでElmから生成したjsが動作します。
final class ViewController: UIViewController {
// HTML内のリソース指定がアクセスするためのベースURL
private let baseURL: URL = {
let basePath = Bundle.main.path(forResource: "elm-app/public", ofType: nil)!
return URL(fileURLWithPath: basePath)
}()
// HTMLファイルの文字列を取得
private let contents: String = {
let htmlPath = Bundle.main.path(forResource: "elm-app/public/index", ofType: "html")!
return try! String(contentsOfFile: htmlPath, encoding: .utf8)
}()
self.webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
// WKWebViewをルートViewにセット
self.setWebView()
// WKWebViewにHTMLを読み込む
self.webView.loadHTMLString(self.contents, baseURL: self.baseURL)
}
private func setWebView() {
let webConfiguration = WKWebViewConfiguration()
self.webView = WKWebView(frame: .zero, configuration: webConfiguration)
self.view.addSubview(self.webView)
self.webView.translatesAutoresizingMaskIntoConstraints = false
self.view.addConstraints([
self.webView.topAnchor.constraint(equalTo: self.webView.superview!.topAnchor),
self.webView.leftAnchor.constraint(equalTo: self.webView.superview!.leftAnchor),
self.webView.rightAnchor.constraint(equalTo: self.webView.superview!.rightAnchor),
self.webView.bottomAnchor.constraint(equalTo: self.webView.superview!.bottomAnchor)
])
}
}
JSからiOSへの通信
WKWebViewで生成したブラウザ内部ではwebkit.messageHandlersというプロパティを通してブラウザ側のイベントを受け取ることが出来ます。
受け取るイベントはiOS側で予め設定する必要があります。
WKWebViewを生成するときに、JS側から受け取るイベントをWKUserContentControllerを利用して設定します。
selfに指定したインスタンスはWKScriptMessageHandlerというProtocolに準拠する必要があります。
let contentController = WKUserContentController();
contentController.add(self, name: "increment")
contentController.add(self, name: "decrement")
let webConfiguration = WKWebViewConfiguration()
webConfiguration.userContentController = contentController
self.webView = WKWebView(frame: .zero, configuration: webConfiguration)
WKScriptMessageHandlerに準拠したインスタンスにuserContentController(userContentController:didReceive)を実装して受け取ったイベントを処理します。
extension ViewController: WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
// nameにWKUserContentController.addで設定したイベント名が入ります
switch message.name {
case "increment":
print("increment")
case "decrement":
print("decrement")
default:
assertionFailure()
}
// bodyにJS側から送られる値が入ります、型はAnyになります
print(message.body)
}
}
JS側ではwebkitというインスタンスが利用出来るのでこれを利用してiOSへイベントを送ります。
// incrementイベントを送信
try {
webkit.messageHandlers.increment.postMessage(1);
} catch (err) {
console.log(err);
}
// decrementイベントを送信
try {
webkit.messageHandlers.decrement.postMessage(2);
} catch (err) {
console.log(err);
}
iOSからJSへの通信
WKWebViewが提供するevaluateJavaScriptを利用してブラウザへ任意のJSコードを送ることが出来ます。
webView.evaluateJavaScript("console.log('from iOS')") { response, error in
if let error = error {
print(error)
}
print(response)
}
ElmからiOS間の通信
ここまでJSとiOSの通信を書いてきましたので、Elmを少しばかり理解している人ならどうすればいいかはもう分かっていると思います。
Elmのportsを利用してElmとiOSを橋渡しすれば良いだけです。
Elmのサンプルにあるカウンターのコードを少しばかりいじったものを用意します。
port module Main exposing (..)
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
type alias Model = Int
main =
Browser.element
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
type Msg = Increment | Decrement | Set Model
init : Maybe Model -> ( Model, Cmd msg )
init flags =
case flags of
Just model ->
( model, Cmd.none )
Nothing ->
( 0, Cmd.none )
-- Elmでカウントアップボタンが押されたら、JSへ通知する
port incremented : Model -> Cmd msg
-- Elmでカウントダウンボタンが押されたら、JSへ通知する
port decremented : Model -> Cmd msg
update msg model =
case msg of
Increment ->
let
newModel = model + 1
in
( newModel, incremented newModel )
Decrement ->
let
newModel = model - 1
in
( newModel, decremented newModel )
Set newModel ->
( newModel, Cmd.none )
-- JSから通知を受け取ったら、その値でModelを更新する
port fixModel : (Model -> msg) -> Sub msg
subscriptions model =
fixModel Set
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (String.fromInt model) ]
, button [ onClick Increment ] [ text "+" ]
]
JS側のportsのコードにiOSと連携する処理を書いていきます。
app.ports.incremented.subscribe((data) => {
try {
webkit.messageHandlers.increment.postMessage(data);
} catch (err) {
console.log(err);
}
});
app.ports.decremented.subscribe((data) => {
try {
webkit.messageHandlers.decrement.postMessage(data);
} catch (err) {
console.log(err);
}
});
iOS側からはElmのPortsにイベントを送る処理を書いていきます。
@IBAction func onTapButton(sender: UIButton) {
let js = "app.ports.fixModel.send(10);"
self.webView.evaluateJavaScript(js) { _, error in
if let error = error {
print(error)
}
}
}
記事にのせたコードだと全容が掴み難いかもしれませんので、全体のコードをgistにおいておきました。
興味のある方は御覧ください。
https://gist.github.com/k-motoyan/c4be847b2b36060f2cbb410df7076c20