Swift:UIWebView でローカルの htmlファイルを表示させる

アプリ内のお知らせやマニュアル等の静的なテキストファイルや画像等を、iOS のネイティブ UI を使って Auto Layout やコードで記述するのはとても面倒です。

こういった場合、あらかじめ HTML でコンテンツを作成しローカルに保存しておき、その html ファイルを UIWebView で表示させればいいかと思います。

今回は UIWebView にローカルの html ファイルを表示させてみたいと思います。

UIWebView でローカルの htmlファイルを表示させる

ViewController クラスの WebViewController.swift と、表示させたい HTML ファイル(ここでは index.html)を用意し、index.html を表示したいと思います。

手順は以下の通りです。

  1. プロジェクトに index.html をコピーする
  2. WebViewController で UIWebView のデリゲートを宣言する
  3. UIWebView を生成する
  4. UIWebView に index.html を表示させる

プロジェクトに index.html をコピーする

以下のような index.html を準備し、HTML ファイルをプロジェクトにドラッグしてコピーします。

<html>
<head>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
This is index.html</body>
</html>

このとき、head タグ内に CSS ファイルをリンクすれば HTML に CSS のスタイルが適用されます。

WebViewController で UIWebView のデリゲートを宣言する

ViewController クラスの WebViewController.swift を作成し、UIWebView のデリゲートを宣言します。

import UIKit

class WebViewController: UIViewController, UIWebViewDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

UIWebView を生成する

UIWebView を生成し、ViewController の viewDidLoad から addSubView します。

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()
    }
}

UIWebView に index.html を表示させる

index.html を読み込むために以下の func loadRequest を作成し、viewDidLoad で loadRequest を実行すると index.html が表示されます。

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)
}

サンプルコード

上記で説明した WebViewController のサンプルコードです。

WebViewController.swift

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)
    }
}

index.html

<html>
<head>
<meta charset="utf-8">
<title>Index</title>
</head>

<body>

This is index.html
</body>
</html>

まとめ

当然ですが URL をリモートのアドレスに変更すればリモートの html を表示することも可能です。

マニュアルやクレジット表記等、アプリ内に必要な情報は HTML で作成しておけば、ローカル、リモートに関わらずメンテナンスがしやすくなります。

Xcode 上で html/css の作成や編集も可能です。ある程度 HTML/CSS コーディングに慣れている方は、一度試してみるといいかと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents