6.3 UIWebView
iOSアプリを作っていて、リンクなどを毎回Safariで開くのではなくアプリの中で開きたいということがあると思います。そのような時に使えるコンポーネントとしてUIWebViewがあります。 この章ではそのUIWebViewの使い方と、UIWebViewを使った演習を行います。
UIWebViewはUIScrollViewのプロトコルに準拠したUIViewのサブクラスで、単体でほぼ一つのブラウザとしての働きをすることができます。 何かのviewとしてUIWebViewのインスタンスを生成し、NSURLRequestのインスタンスと共にloadRequestメソッドを実行することで読み込みを開始します。
ユーザーがリンクをタップした時の遷移や、Cookieに関する処理も自動的に行います。戻る、進む、リロードなどの処理もそれぞれ - (void)goBack, - (void)goForward, - (void)reloadなどのメソッドを呼ぶことで実現することが出来ます。
- Xcodeから新しいプロジェクトを作り、Single View Applicationをテンプレートとして開いてください。そしてViewControllerのxibでUIWebViewのコンポーネントを追加し、ソースコードと結びつけてください。
- リクエストを読み込みます
NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://mixi.jp"]];
[_webView loadRequest:request];
すると、次のようなmixiのログイン画面が出てくると思います。
ログインする、遷移するなどすこしいじってみてください。 ログインや遷移なども全て自動で行ってくれることがお分かりかと思います。
フックとしてdelegateが用意されており、delegateをセットすることでwebviewの状態が変化した時に情報を取得することが出来ます。 プロトコルには以下のようなものがあります
| メソッド名 | 説明 |
|---|---|
| webViewDidStartLoad: | WebViewが新しい画面のロードを開始した時に呼ばれます |
| webViewDidFinishLoad: | WebViewのロードが完了した時に呼ばれます |
| webView:didFailLoadWithError: | WebViewが読み込みに失敗した時に呼ばれます。失敗の内容についてはerrorに含まれます |
| webView:shouldStartLoadWithRequest:navigationType: | webViewが読み込みを行うかどうかを判断し、BOOL値を返します。引数として今から読み込みたいリクエストとクリック、戻る、進むなどのnavigationTypeが渡されます。一部のURLではSafariに遷移するなどの用途として使います |
先ほどのサンプルに追加を行いこのデリゲートメソッドを実際に実装してみます。
- プロトコルへの準拠を宣言し、viewDidLoadで
_webView.delegate = self;とします。 - リクエスト開始前へのフックとしてwebView:shouldStartLoadWithRequest:navigationType:を追加します。今回はリクエストをコンソールに表示します
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSLog(@"%@", request);
return YES; // YESを返さないとそこからの処理が進みません
}
出力結果は以下のようになりました。
2013-04-30 18:41:31.615 WebViewSample[82864:c07] <NSMutableURLRequest https://mixi.jp/>
2013-04-30 18:41:44.802 WebViewSample[82864:c07] <NSMutableURLRequest https://mixi.jp/login.pl?from=login1>
2013-04-30 18:41:44.975 WebViewSample[82864:c07] <NSMutableURLRequest https://mixi.jp/check.pl?n=%2Fhome.pl>
2013-04-30 18:41:44.996 WebViewSample[82864:c07] <NSMutableURLRequest https://mixi.jp/home.pl>
2013-04-30 18:41:45.039 WebViewSample[82864:c07] <NSMutableURLRequest http://mixi.jp/home.pl>
Cookieを持っていない状態だったので一度login画面にリダイレクトされ、ログイン完了後にメイン画面であるhome.plへ遷移しているのが分かります。
UIWebViewにはアプリからWebViewへJavaScriptを実行できるメソッド、stringByEvaluatingJavaScriptFromStringがあります。 このメソッドのおかげでTriainaのようにWebとネイティヴをハイブリッドさせたアプリを作ることができます。
このメソッドで直接DOMを直接取得することはできません。しかしDOMの操作や単一の値として取得できるもの(高さなど)は取得することができます。例えばmixi.jp/home.plの一部の画面の背景を赤色にする場合は以下のようにすることで変更できます。
[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByClassName('cpMoreLink08')[0].style.backgroundColor='red'"];
実行のタイミングは、webViewのロード完了時などです。
iOS6, Mac版Safari6を用いることでiOSのSafariのインスペクタを表示することができました。 このインスペクタをSafari以外のアプリのWebViewでも利用することができます。
アプリのWebViewが表示されている状況で、Mac Safariのメニューバー→開発→iPhone Simulatorと辿ることで現在実行中のアプリのweb インスペクタを利用することができます。
細かい利用法などはこちらをご覧ください
UIWebViewを使った演習としてブラウザコンポーネントを作ります。
仕様は以下の通りになります。
- ナビゲーションバーとツールバーが表示されている
- ナビゲーションバーのタイトルには各ページのタイトルが表示されている。遷移するごとに切り替わる
- ツールバーには戻るボタンと進むボタン、リロードがついている
- 戻るがないとき、進むがないときはボタンがdisableになっている
- 最初のリクエストは http://mixi.jp からとする
以下に完成図を示します。
