iOS - WebView でローカルファイルを表示する方法

ローカルファイルを Xcode プロジェクト内に配置して WebView で表示させてみます。

プロジェクトの作成

適当にプロジェクトを作成してください。
ここでは 「WebViewLocalFileExample」 というプロジェクト名にします。

WebView で表示させたいファイルの準備

Assetsファイル/
├── index.html
├── javascripts
│   └── example.js
└── stylesheets
    ├── example.css

WebView で表示させたいファイルをプロジェクトに配置

1. [WebViewLocalFileExample] を右クリックする。
2. [New Group] を選択し、ディレクトリ名を「Resources」にする。
3. [ユーティリティエリア] > [Identity and type]の フォルダアイコンをクリックする。
4. [New Folder] をクリックし、ダイアログが表示されるので「Resources」ディレクトリを作成する
5. [Choose]をクリックする。
6. [Resources] を右クリックする。
7. [Add Files to "WebViewLocalFileExample"...] を選択する。
8. 用意しておいたassets配下のファイルとディレクトリを選択する。
9. [Destination] で Copy items if needed にチェックを入れる。
10. [Added folders] で Create folder references を選択する。
11. [Add] をクリックする。

この方法でやるとディレクトリ階層を維持したままプロジェクト内に配置することができます。

WebViewで表示

import UIKit

class ViewController: UIViewController, UIWebViewDelegate {
    
    var webView: UIWebView = UIWebView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // デリゲートを指定する
        self.webView.delegate = self;

        // 全画面表示にする
        self.webView.frame = self.view.bounds
        
        // サブビューを追加する
        self.view.addSubview(self.webView)
        
        // index.htmlのパスを取得する
        let path = NSBundle.mainBundle().pathForResource("index", ofType: "html")!
        let url = NSURL(string: path)!

        // リクエストを生成する
        let urlRequest = NSURLRequest(URL: url)
        
        // 指定したページを読み込む
        self.webView.loadRequest(urlRequest)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

ソースコード

github.com