 |
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からネイティブの関数を実行したい場合の方法。よければこちらもどうぞ
↓こんな記事もありますよ！
 2021-04-22 14:54:53 | かっこいいカルーセル厳選3点！WebGLを使った渋い画像スライダー。
昨日カッコいいスライダーを探す旅にでていました。
よく使われるswiper など、シンプルで使いやすくデザインも良いのですが、何かもの足りない、、、。
そこで調べていくと、webglを使... |
 2021-04-20 14:46:43 | Twillioとは何？？skywayとは何が違うのか。webrtcを使う際に判断する情報。
先日webrtc開発で「twillio」といった名前を聞きました。
以前自分でskywayを使ってwebrtcを試していた際に調べた時には、無かったような気もするんだけと、KDDIが絡んでいる... |
 2021-04-19 13:58:21 | 先日久々にアップデートした妊娠週刊パパのAndroid版も。アカウント移管したいんだけど、注文ID見当たらないよ。
先日の妊娠、出産、育児関連のアプリ「妊娠週刊パパ」をAndroid studioで再リリースしようと思ってるんだけど、コンパイル失敗してエミュレータで動かせない。
多分sdkとかapiのバージ... |
Tweet
|
|||
| |||
