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

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

部品と変数をつなげる

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

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

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

　とりあえず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

②ViewController.m

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

　とりあえずメッセージを受け取ることができるようになりました。次に、テキスト入力して戻ってきたメッセージからウェブを表示できるようにプログラムを組みます。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を

https://jprogramer.com

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

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

著者：安井 真人(やすい　まさと)
@yasui_masatoさんをフォロー