アプリ内のお知らせやマニュアル等の静的なテキストファイルや画像等を、iOS のネイティブ UI を使って Auto Layout やコードで記述するのはとても面倒です。
こういった場合、あらかじめ HTML でコンテンツを作成しローカルに保存しておき、その html ファイルを UIWebView で表示させればいいかと思います。
今回は UIWebView にローカルの html ファイルを表示させてみたいと思います。
UIWebView でローカルの htmlファイルを表示させる
ViewController クラスの WebViewController.swift と、表示させたい HTML ファイル（ここでは index.html）を用意し、index.html を表示したいと思います。
手順は以下の通りです。
- プロジェクトに index.html をコピーする
- WebViewController で UIWebView のデリゲートを宣言する
- UIWebView を生成する
- UIWebView に index.html を表示させる
プロジェクトに index.html をコピーする
以下のような index.html を準備し、HTML ファイルをプロジェクトにドラッグしてコピーします。
[code]
This is index.html
[/code]
このとき、head タグ内に CSS ファイルをリンクすれば HTML に CSS のスタイルが適用されます。
WebViewController で UIWebView のデリゲートを宣言する
ViewController クラスの WebViewController.swift を作成し、UIWebView のデリゲートを宣言します。
[code]
import UIKit
class WebViewController: UIViewController, UIWebViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
[/code]
UIWebView を生成する
UIWebView を生成し、ViewController の viewDidLoad から addSubView します。
[code]
import UIKit
class WebViewController: UIViewController, UIWebViewDelegate {
var webView: UIWebView!
override func viewDidLoad() {
super.viewDidLoad()
webView = UIWebView(frame: self.view.frame)
webView.delegate = self
webView.backgroundColor = UIColor.blackColor()
self.view.addSubview(webView)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
[/code]
UIWebView に index.html を表示させる
index.html を読み込むために以下の func loadRequest を作成し、viewDidLoad で loadRequest を実行すると index.html が表示されます。
[code]
func loadRequest() {
let fileName: String = “index”
var filePath: String = NSBundle.mainBundle().pathForResource(fileName, ofType: “html”)!
let url = NSURL(string: filePath)!
let urlRequest = NSURLRequest(URL: url)
webView.loadRequest(urlRequest)
}
[/code]
サンプルコード
上記で説明した WebViewController のサンプルコードです。
WebViewController.swift
[code]
import UIKit
class WebViewController: UIViewController, UIWebViewDelegate {
var webView: UIWebView!
override func viewDidLoad() {
super.viewDidLoad()
webView = UIWebView(frame: self.view.frame)
webView.delegate = self
webView.backgroundColor = UIColor.blackColor()
self.view.addSubview(webView)
loadRequest()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
func loadRequest() {
let fileName: String = “index”
var filePath: String = NSBundle.mainBundle().pathForResource(fileName, ofType: “html”)!
let url = NSURL(string: filePath)!
let urlRequest = NSURLRequest(URL: url)
webView.loadRequest(urlRequest)
}
}
[/code]
index.html
[code]
This is index.html
[/code]
まとめ
当然ですが URL をリモートのアドレスに変更すればリモートの html を表示することも可能です。
マニュアルやクレジット表記等、アプリ内に必要な情報は HTML で作成しておけば、ローカル、リモートに関わらずメンテナンスがしやすくなります。
Xcode 上で html/css の作成や編集も可能です。ある程度 HTML/CSS コーディングに慣れている方は、一度試してみるといいかと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
