ホームページを表示する(その2)

2

 前回、ウェブ表示アプリをつくるために画面を設計しました。ここでは、コードをかいていきアプリを完成させます。

部品と変数をつなげる

 コードするため、画面の部品と変数をつなげます。右上のEditorの3つのうちの真ん中を選択して2画面にしましょう。そして、ViewController_iPhone.xibとViewController.hを表示させます。あとは画面の部品を右ドラッグしてViewController.hにつなげるだけです。

スナップショット 2012 10 15 23 02

この際、以下のように設定してください。するとヘッダーが以下のようになるはずです。

スナップショット 2012 10 15 23 13

ウェブを表示できるようにする

 とりあえずURLを入力したらウェブを表示できるようにしましょう。流れとしては、

  1. URLをテキストに入力
  2. 入力したというメッセージを受け取る
  3. テキストのURLからウェブを表示
  4. ウェブ表示開始のメッセージを受け取る
  5. 読込状態を表示
  6. ウェブ表示が終了
  7. 表示終了のメッセージを受け取る
  8. 表示された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

スナップショット 2012 10 16 0 14

②ViewController.m

スナップショット 2012 10 16 0 16

テキスト入力後にウェブを表示できるようにする

 とりあえずメッセージを受け取ることができるようになりました。次に、テキスト入力して戻ってきたメッセージからウェブを表示できるようにプログラムを組みます。URLテキストフィールド入力後のメッセージは

-(BOOL)textFieldShouldReturn:(UITextField *)textField{
}

にくるのでここにコードを書きます。コードの流れは

  1. キーボードを閉じる
  2. 入力されたテキストをNSURLRequestに変換する
  3. 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{
}

にコードします。コードする内容としては

  1. 読込中マークを解除する
  2. 表示されているホームページの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を

http://jprogramer.com

と記入してみてください。以下のように表示されるはずです。

スナップショット 2012 10 16 0 40

お疲れ様です。次回は、下の方にあるツールバーのボタンを使用できるようにします。

著者:安井 真人(やすい まさと)