 |
Facebook#1(調査)| 外部サイト |
|
|
HOME > UIWebView
UIWebView
UIWebViewクラスは画面に外部ネットワークやhtml等を表示する際に利用します。（以下はこのサイトを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を表示してみる
先ほどのURLを記載していた箇所を調整します。以下サンプルではプロジェクトに追加したlocalfile.htmlを読み込みます。
//画面一杯に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の中身
以下、コピペ用です。
<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
これだけでビヨーンを禁止します。
（左）通常、（右）バウンスを禁止した状態
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のハイブリット！
こんなに高度な事もできるんだとすごいなあと思いましたので共有です
このプレゼンで以下サイトから「WebViewからネイティブコールができるのかどうか」との疑問がある人がいました。できます！私も以前迷った箇所でしたので、別記事にて整理していけたらと思います。
参考：ねとなび：FINAL FANTASY Record Keeper の作り方 ＃１
参考：ねとなび：FINAL FANTASY Record Keeper の作り方＃２
追加(2014/12/17)
Webビュー作成にはWKWebViewなんかもあります。よければこちらもどうぞ
追加(2015/1/5)
WebViewでモバイル表示Useragentを変更する簡単な方法。よければこちらもどうぞ
追加(2015/5/25)
WebViewからネイティブの関数を実行したい場合の方法。よければこちらもどうぞ
↓こんな記事もありますよ！
 | SwiftData＋SqliteのDBファイル保存+Libraryフォルダから読込さて、私の目標は事前に作成したSqliteのDBファイルをSwiftDataで読み込むことですので、その一連の作業を以下説明してまいります。 |
 | UIImage中年サラリーマンが画像をローカルやURLやあんな所からアクセスして表示するサンプルを説明しております。 |
 | UIToolBar画面の端っこに追加できるツールバーコントロール。アプリにピリッとアクセントを付けます。機能を追加したい時に便利です |
Tweet
|
|||
| |||
