More than 5 years have passed since last update.

Webサイトを表示するだけのスマホネイティブのガワ実装、iOSとAndroid分

Posted at 2017-05-02

はじめに

このエントリでは、iOSとAndroidで、ネイティブアプリの形でWebサイトを表示するまでの方法を紹介します。
ネット上に同じような趣旨のエントリは散見されるのですが、自分でもやってみたかったのと、iOS/Android両方ともやって見ている記事は少ない気がしたので書いてみることにしました。

上記サイト内のリポジトリURLをcloneすると、Xcodeのプロジェクトがダウンロードされます。

$ git clone https://github.com/hrkt/dongara-ios.git

XcodeでiOSアプリを開発するとき、実機で動かす上ではハマるポイントがあるので、まずはシミュレータで動作させてみるとよいでしょう(Xcode8で随分便利になりましたが、慣れない人はハマりポイントがあると思われます)。

XcodeでiOS Appのprojectを新規作成します。
テストコードなど、デフォルトでつけてくれるものを削除してすっきりさせました。
デフォルトで作られる「Main.storyboard」に、WebViewを一枚貼り付けて、全体に伸びるようにAuto-layoutのパラメータを指定します。
デフォルトで作られる「ViewController.swift」に上記webViewのreferenceを設定します。
URLベタがきはイマイチかなってことで、App.plistからAppUrlプロパティで表示ページを指定できるようにします。
Webの読み込みイベントくらいは確認したいだろうということで、ViewContrrollerにUIWebViewDelegegateのプロトコルに対応できるような宣言をして、webViewFinishLoadメソッドを記述します。ログを1行書いているだけです。

上記サイト内のリポジトリURLをcloneすると、Android Studioのプロジェクトがダウンロードされます。

$ git clone https://github.com/hrkt/dongara-android.git

Android Studioで、新規アプリの作成から「EmptyProject」を選択します。
テストコードなど、デフォルトでつけてくれるものを削除してすっきりさせました。
デフォルトで作られるlayout/activity_main.xmlに、WebViewを追加します。xmlの定義で、webViewが画面目一杯になるように設定します。
デフォルトで作られるMainActivity.javaのonCreateに、webViewの初期化コードを指定します。
URLベタがきはイマイチかなってことで、res/values/appSettings.xmlからapp_urlプロパティで表示ページを指定できるようにします。
Androidだと、「戻る」ボタン連打でアプリを終了しますが、これを少しカスタマイズし、webViewで「戻る」ができるときにはページを戻れるようにし、「戻る」ができないときにも、アプリは終了しないように、MainActivityのonKeyDownメソッド内で処理を加えました。
Androidの標準で付いてくるタイトルバーのアプリ表示は不要なので、AndroidManifest.xmlの中で「android:theme="@android:style/Theme.NoTitleBar"」を指定することにより消しています。