ホームページを表示する(その2)
2012年10月16日:iOS
前回、ウェブ表示アプリをつくるために画面を設計しました。ここでは、コードをかいていきアプリを完成させます。
部品と変数をつなげる
コードするため、画面の部品と変数をつなげます。右上のEditorの3つのうちの真ん中を選択して2画面にしましょう。そして、ViewController_iPhone.xibとViewController.hを表示させます。あとは画面の部品を右ドラッグしてViewController.hにつなげるだけです。
この際、以下のように設定してください。するとヘッダーが以下のようになるはずです。
ウェブを表示できるようにする
とりあえずURLを入力したらウェブを表示できるようにしましょう。流れとしては、
- URLをテキストに入力
- 入力したというメッセージを受け取る
- テキストのURLからウェブを表示
- ウェブ表示開始のメッセージを受け取る
- 読込状態を表示
- ウェブ表示が終了
- 表示終了のメッセージを受け取る
- 表示されたURLをテキストフィールドへ記入
ということになります。これらをコードしていきます。
テキストフィールドやウェブ表示のメッセージを受け取れるようにする
まず、ViewController.hに
- 2. URL用テキストフィールドの入力が完了したメッセージ
- 4. ウェブ表示開始のメッセージ
- 7. ウェブ表示終了のメッセージ
をうけれるようにします。そのためViewController.hの
@interface ViewController : UIViewController
を
@interface ViewController : UIViewController <UIWebViewDelegate, UITextFieldDelegate>
とします。そして、ViewController.mの
-(void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. }
を
-(void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. [self.WebView setDelegate:self]; [self.URLText setDelegate:self]; }
とします。これでメッセージを受け取る準備ができました。
-(BOOL)textFieldShouldReturn:(UITextField *)textField{ }
がURLTextフィールドを記入した際に実行されます。そして、
-(void)webViewDidStartLoad:(UIWebView *)webView{ }
がウェブを読み込む際に実行され
-(void)webViewDidFinishLoad:(UIWebView *)webView{ }
がウェブの読込が終了したときに実行されます。まとめると次のようになります。
①ViewController.h
②ViewController.m
テキスト入力後にウェブを表示できるようにする
とりあえずメッセージを受け取ることができるようになりました。次に、テキスト入力して戻ってきたメッセージからウェブを表示できるようにプログラムを組みます。URLテキストフィールド入力後のメッセージは
-(BOOL)textFieldShouldReturn:(UITextField *)textField{ }
にくるのでここにコードを書きます。コードの流れは
- キーボードを閉じる
- 入力されたテキストをNSURLRequestに変換する
- NSURLRequestからウェブを表示する
となります。これらをコードすると以下のようになります。
-(BOOL)textFieldShouldReturn:(UITextField *)textField{ [textField resignFirstResponder]; NSString * text =[textField text]; //①キーボードを閉じる NSURL * url=[NSURL URLWithString:text]; //②テキストをNSURLへ変換する NSURLRequest * request=[NSURLRequestrequestWithURL:url]; //②NSURLをNSURLRequestへ変換する [self.WebView loadRequest:request]; //③ウェブを表示する returnYES; }
これで、URLの入力が終わったらウェブが表示されます。
ウェブの読込中を表示する
続いて、読込中であることを表示しましょう。そのために、ウェブ開始メッセージに以下のように記述します。
-(void)WebViewDidStartLoad:(UIWebView *)webView{ [UIApplicationsharedApplication].networkActivityIndicatorVisible=YES; }
これで、読込中であることが表示されます。読込中であることとはiPhoneの上の方にある以下の様な記号です。
読み込んだウェブのURLを表示する
読み込んだウェブの正確なURLを表示できるようにします。そこで、ウェブの読込が終わったときのメッセージである
-(void)webViewDidFinishLoad:(UIWebView *)webView{ }
にコードします。コードする内容としては
- 読込中マークを解除する
- 表示されているホームページのURLをテキストボックスに表示する
です。具体的には以下のようになります。
-(void)webViewDidFinishLoad:(UIWebView *)webView{ [UIApplicationsharedApplication].networkActivityIndicatorVisible=NO; //①読込中マークを解除する NSURLRequest * request=self.WebView.request; //②URLをrequestへ代入 NSURL * url=request.URL; //②requestをNSURLへ変換 NSString * text=[url absoluteString];//②NSURLをNSStringへ変換 self.URLText.text=text;//②テキストフィールドへ表示する }
実行してみよう
これでURLを記入すればページが表示されるはずです。ためしにURLを
https://jprogramer.com
と記入してみてください。以下のように表示されるはずです。
お疲れ様です。次回は、下の方にあるツールバーのボタンを使用できるようにします。
著者:安井 真人(やすい まさと)
@yasui_masatoさんをフォロー