当サイトはリンクフリーです。リンク大歓迎です：）

Swift転職なら=>【LevTech】

↑クリックして拡大

外部サイト

swift 開発に関するツイート

頭痛が減ったので共有です！

rebuild.fmを応援しています！

HOME > UIWebView

UIWebView

UIWebViewクラスは画面に外部ネットワークやhtml等を表示する際に利用します。（以下はこのサイトをUIWebViewで読み込んだ状態です。モバイル対応できていません、、、）

UIWebViewのサンプル画像
（右側）モバイル対応しました！(2015年5月)

UIWebViewのクラス階層

NSObject
↑
UIResponder
↑
UIView
↑
UIWebView

参考Appleサイト(英語)： UIKit Framework Reference UIWebView Class Reference
参考：009 UIWebViewでページを表示

UIWebViewで外部サイトを表示してみる

ViewController.swiftのviewDidLoadに追加してみます。（恐縮ですがこのサイトswift-salaryman.comを読み込んでみます）


        //画面一杯にWebを表示
        let myWebView : UIWebView = UIWebView()
        myWebView.delegate = self
        myWebView.frame = self.view.bounds
        self.view.addSubview(myWebView)
        let url: NSURL = NSURL(string: "http://swift-salaryman.com")!
        let request: NSURLRequest = NSURLRequest(URL: url)
        myWebView.loadRequest(request)

これだけだとdelegateにエラーが発生します。クラス宣言の箇所をすこし調整します。


class ViewController: UIViewController {

↓


class ViewController: UIViewController,UIWebViewDelegate {

にUIWebViewDelegateを追加することでdelegateをViewControllerが受け止めることができるようになります。

以下の関数でUIWebViewからdelegateされたイベントを取得することができます。


    //ページが読み終わったときに呼ばれる関数
    func webViewDidFinishLoad(webView: UIWebView) {
        println("ページ読み込み完了しました！")
    }
    //ページを読み始めた時に呼ばれる関数
    func webViewDidStartLoad(webView: UIWebView) {
        println("ページ読み込み開始しました！")
    }

以下、上記一連の処理をコピペ一発でViewControllerに貼り付けるソース


import UIKit

class ViewController: UIViewController,UIWebViewDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //画面一杯にWebを表示
        let myWebView : UIWebView = UIWebView()
        myWebView.delegate = self
        myWebView.frame = self.view.bounds
        self.view.addSubview(myWebView)
        let url: NSURL = NSURL(string: "http://swift-salaryman.com")!
        let request: NSURLRequest = NSURLRequest(URL: url)
        myWebView.loadRequest(request)
    }
    //ページが読み終わったときに呼ばれる関数
    func webViewDidFinishLoad(webView: UIWebView) {
        println("ページ読み込み完了しました！")
    }
    //ページを読み始めた時に呼ばれる関数
    func webViewDidStartLoad(webView: UIWebView) {
        println("ページ読み込み開始しました！")
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        
    }
}

UIWebViewでローカルhtmlを表示してみる

UIWebViewのサンプル画像

先ほどのURLを記載していた箇所を調整します。以下サンプルではプロジェクトに追加したlocalfile.htmlを読み込みます。

UIWebViewのサンプル画像


        //画面一杯にWebを表示
        let myWebView : UIWebView = UIWebView()
        myWebView.delegate = self
        myWebView.frame = self.view.bounds
        self.view.addSubview(myWebView)
        if let url = NSBundle.mainBundle().URLForResource("localfile", withExtension: "html") {
            myWebView.loadRequest(NSURLRequest(URL: url))
        }

localfile.htmlの中身

UIWebViewのサンプル画像

以下、コピペ用です。


<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>ローカルhtmlですよ</div>
</body>
</html>

おまけ

WebViewのスクロールバーを無効にする

WebView横についているスクロールバーは簡単にOFFにすることができます。


        myWebView.scrollView.scrollEnabled = false

これだけでガッチリ固定したWebViewの出来上がりです

WebViewのバウンスを無効にする

WebViewのスクロールを画面端まで行うとビヨーンと戻ってくる遊びがありますが、その遊びを無くす方法があります。


        myWebView.scrollView.bounces = false

これだけでビヨーンを禁止します。

UIWebViewのサンプル画像
（左）通常、（右）バウンスを禁止した状態

WebViewから外部Safariを起動してリンク先を開く

通常ではUIWebviewでhtmlのリンクをクリックするとUIWebview内部で遷移しますが、以下の処理を加えればSafariが別途起動して表示することができます


    func webView(webView: UIWebView!, shouldStartLoadWithRequest request: NSURLRequest!, navigationType: UIWebViewNavigationType) -> Bool {
        
        if navigationType == UIWebViewNavigationType.LinkClicked{
            UIApplication.sharedApplication().openURL(request.URL!);
            return false;
        }
        
        return true
    }

UIWebViewNavigationTypeはクリック以外にもイベントの種類があるので興味のある方はこのページの下の方にあるWebViewからNativeCallを実行するをご参照ください！

注意：デリゲートのセットはお忘れなく！webview.delegate = self; と　UIWebviewDelegate

考察

私も以前アプリをWeViewで開発していたのですが。このコンポーネントの可能性は高いと思います。楽。 CSSもJSも普通に実行できます。ただし、うまく開発しないとレスポンスが悪くてタッチ動作がモサモサします。

Html上でJSを使えばそれだけでXCodeを使わなくても開発ができてしまいます。クロスプラットフォーム用のサービスとしてAndroid等でもWebviewを利用して同時に開発できるものもありますので、開発効率やWebデベロッパーがそのまま経験を利用できるありがたいコンポーネントです。

そこで最近私もハマっているFinal Fantasy Record Keeperをどうつくったかとのプレゼンが面白かったので共有させていただきます。どうやらWebViewとOpenGLのハイブリット！こんなに高度な事もできるんだとすごいなあと思いましたので共有です

FINAL FANTASY Record Keeper の作り方 from dena_study

このプレゼンで以下サイトから「WebViewからネイティブコールができるのかどうか」との疑問がある人がいました。できます！私も以前迷った箇所でしたので、別記事にて整理していけたらと思います。
参考：ねとなび：FINAL FANTASY Record Keeper の作り方　＃１
参考：ねとなび：FINAL FANTASY Record Keeper の作り方＃２

追加(2014/12/17)

Webビュー作成にはWKWebViewなんかもあります。よければこちらもどうぞ

追加(2015/1/5)

WebViewでモバイル表示Useragentを変更する簡単な方法。よければこちらもどうぞ

追加(2015/5/25)

WebViewからネイティブの関数を実行したい場合の方法。よければこちらもどうぞ

↓こんな記事もありますよ！

	アイコン一括作成サービス紹介アプリのアイコンを作るのは手間で面倒くさい。と、思いながらPhotoshopで一つ一つサイズを変えて作っていたのですが、簡単につくれるサービスやっぱりありました。Macのスクリプトだったり、Webサービスだったりと揃っていましたので共有します。
	デバッグ時とリリース時に処理を変更する#ifdef DEBUG のやり方 DEBUG時だけ特定の動作をさせて、リリース時に排除したい、そんな時に利用する方法です。Swiftでは標準ではDEBUGとリリースの判断がつかないので、コンパイル時に設定する必要があります
	NSNotificationCenterでコード間のイベントやりとり AppDelegateのイベント（アプリがアクティブ）になるタイミングでViewControllerに通知する為にはどうすればいいのか？と調査しているとこのクラスにたどり着きました。delegateを利用せずにイベントの通知をViewController間で簡単に実装できるので使いやすいです！