XcodeでUIWebViewを追加する方法【初心者向け】

Xcodeで【UIWebView(Webビュー)を追加する方法】を初心者向けに解説した記事です。iPhoneアプリ上に、入力したURLのWebページを表示させることができます。「進む」「戻る」などのボタンの実装方法も紹介。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

iPhoneアプリ開発の際に便利なUIパーツを追加する方法を紹介する記事です。

今回はUIWebView(Webビュー)がテーマです。

 

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

 

UIWebViewとは

UIWebViewは、指定したURLのWebページを読み込んで表示するUIパーツです。アプリ内部でURLが完結するのであれば、URL入力フィールドは必須ではありませんが、本記事ではURLを入力して画面を表示することを目指します。

また、Webブラウザにある「進む」「戻る」「リロード」「読み込み中止」の各ボタンをToolBarに登録して操作することも可能です。

 

 

テキストフィールドとツールバーの配置

StoryboardのViewの上に、TextFieldとツールバーをそれぞれドラッグ&ドロップで追加します。ツールバーはFlexibile Space Bar Button Itemで区切って4つのボタンを配置します。

XcodeScreenSnapz001

 

さらに、それぞれをヘッダーファイルに右ドラッグしてIBOutletを作成します。

@property (weak, nonatomic) IBOutlet UITextField *textURL;
@property (weak, nonatomic) IBOutlet UIBarButtonItem *barButtonGoBack;
@property (weak, nonatomic) IBOutlet UIBarButtonItem *barButtonGoForward;
@property (weak, nonatomic) IBOutlet UIBarButtonItem *barButtonReload;
@property (weak, nonatomic) IBOutlet UIBarButtonItem *barButtonStop;

 

次に、ツールバーのIBActionを作成します。

– (IBAction)GoBack:(id)sender;
– (IBAction)GoForward:(id)sender;
– (IBAction)Reload:(id)sender;
– (IBAction)Stop:(id)sender;

 

また、テキストフィールドのインスペクタで、Clear ButtonをAppears while editingに、Capitalization(大文字化)をNoneに、Correction(訂正)をNoに、Spell CheckingをNoに、Keyboard TypeをURLに、Return KeyをGoに設定します。

 

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

Webビューの配置

TextFieldとツールバーの間にWebビューを配置します。

ここに設定したURLのWebサイトが表示されます。

webview

XcodeScreenSnapz002

 

 

Webビューの設定

ここで、インスペクタを使ってWebビューの設定を行います。

XcodeScreenSnapz003

デフォルトの状態に加えて、レスポンシブWebデザインでないサイトを画面全体に縮小して表示するためにScale Page To Fitと、リンクを検出するためにLinksにチェックを入れます。

 

 

入力されたURLのページを表示する

最後に、入力されたURLのページを表示できるように設定します。

まず、UIWebViewのIBOutletを作成します。

XcodeScreenSnapz004
XcodeScreenSnapz005

 

初期化

ここで、TextFieldとWebビューのdelegateプロトコルを実装します。

@interface ViewController : UIViewController<UITextFieldDelegate, UIWebViewDelegate>

 

また、それぞれのdelegate先をselfに設定するとともに、Tool Barのボタンを全て利用不可にします。これらの処理はviewDidLoadで行います。

– (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
_textURL.delegate = self;
_myWeb.delegate = self;
_barButtonGoBack.enabled = NO;
_barButtonGoForward.enabled = NO;
_barButtonReload.enabled = NO;
_barButtonStop.enabled = NO;
}

 

テキストフィールドの入力完了でWebを読み込む

まず、テキストフィールドの入力完了をGoボタンが押されたタイミングと判断します。また、ユーザーが先頭に「http://」を入力しなかった場合も考慮しておきます。

– (BOOL)textFieldShouldReturn:(UITextField *)textField
{
[_textURL resignFirstResponder];
NSString *strUrl;
if( [textField.text hasPrefix:@”http://” ])
{
strUrl = textField.text;
}
else
{
strUrl = @”http://”;
strUrl = [strUrl stringByAppendingString:textField.text];
}
NSURL *url = [[NSURL alloc]initWithString:strUrl];
NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url];
[_myWeb loadRequest:urlRequest];
return YES;
}

WebビューにURLで指定されたWebページを取得させるためにはNSURLRequestオブジェクトを使い、このオブジェクトはNSURLオブジェクトから生成します。そして、NSURLオブジェクトはNSStringオブジェクトから生成します。

 

Webページ読み込み開始

ネットワークアクティビティインディケーターを表示します。またツールバーボタンのうち、読み込み中止ボタンのみ利用可能にします。

– (void)webViewDidStartLoad:(UIWebView *)webView
{
[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
_barButtonStop.enabled = YES;
}

 

Webページ読み込み完了

ネットワークアクティビティインディケーターを非表示にします。またツールバーボタンのうち、読み込み中止ボタンを利用不可に、リロードボタンを利用可能にします。

また、戻る・進むが可能かを判断してボタンの状態を変更します。

– (void)webViewDidFinishLoad:(UIWebView *)webView
{
[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
_barButtonStop.enabled = NO;
_barButtonReload.enabled = YES;
if( webView.canGoBack )
{
_barButtonGoBack.enabled = YES;
}
else
{
_barButtonGoBack.enabled = NO;
}
if( webView.canGoForward )
{
_barButtonGoForward.enabled = YES;
}
else
{
_barButtonGoForward.enabled = NO;
}
}

 

Web読み込み中止

読み込みを途中で停止する処理です。

– (IBAction)Stop:(id)sender
{
[_myWeb stopLoading];
}

 

Webリロード

表示しているWebページを再読込します。

– (IBAction)Reload:(id)sender
{
[_myWeb reload];
}

 

戻る・進む

現在のWebビューが戻る・進むができるか否かを判断して動作を実行します。

– (IBAction)GoBack:(id)sender
{
if( _myWeb.canGoBack )
{
[_myWeb goBack];
}
}
– (IBAction)GoForward:(id)sender
{
if( _myWeb.canGoForward )
{
[_myWeb goForward];
}
}

 

ここまで書いて実行するとこのように表示されます。

iOS SimulatorScreenSnapz001

キーボードがURLになっており、リターンキーがGoになっているのがわかると思います。

 

今回はあえて「http://」を抜いて「www.google.co.jp」だけ入力しました。モダンブラウザは「http://」と言うスキームを付けずにURLを入力してもきちんとWebを表示します。エンドユーザーはそれに慣れていますので、このアプリでもスキームなしに対応しています。

iOS SimulatorScreenSnapz002

 

今回の記事は以上です。

さらにXcodeを使いこなしたい場合は、XcodeでUITextFieldを追加する方法を合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。