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

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からネイティブの関数を実行したい場合の方法。よければこちらもどうぞ

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

	Pintoを1年利用してほんとにプログラマーの背筋がピンとなった(P!nto) 猫背どうにかならないかな、、、、。プログラマーとしての職業上日中8割9割は画面と押し問答している私は、熱中すればするほど画面に食い入り知らず知らずに前のめりの姿勢に。姿勢が悪い、、、、分かってるんだけど、やめられない。
	Pre特殊文字難民記事を書いている時によくつまずくことがあります。preでコードを表示する際に、カッコを使うと文章が消えてしまったり、ドルマークの変数が表示できなかったり。その度に検索して探しているのでサイトの中に入れてしまいます。以前のバックスラッシュもそうですが、こういった特殊文字難民対策のページにしておきます。
	UITextViewやらで縦書きができないか検証「文字の縦書き」をやってみたいのですが、どうもUITextView等には設定が無いとのことです。調べていると、本当にない？のかな。少し調査して作れそうなもんであればつくってみれたら、、、との気持ちで進めてみます。