Syntax Error.

[Sy] 【技術メモ】Xcode5.xにてUIWebViewを使ってWebページを表示するだけのiOSアプリを作る手順

2014/02/15

iOSアプリ開発はほぼ初心者です。

そんな状態から以下のページを参考に、UIWebView を使って単純にWebページを表示するサンプルアプリを作成してみました。

⇒ XcodeでWebを表示するだけのiPhoneアプリを作ってみる。

最初は同じようにやってみたんですが、どうもstoryboardの動きが現行バージョン(5.0.2)と違う(?)のかうまくいかず。一部変えてうまくいったのでその手順をまとめておきます。

1. プロジェクトを作成

[File]->[New]->[Project]から「Single View Application」を選択してプロジェクトを作成。

「Single View Application」の作成

いくつかプロジェクトの設定をします。

Xcodeプロジェクト名の設定
  • Project Name : プロジェクトの名前。フォルダの名前になります。適当で。
  • Organization Name : 作った人の名前。まぁサンプル適当であれば適当に。
  • Company Identifier : 通常は会社のドメインを逆にしたものを指定。ぼくはjp.utanoにしてます。持ってない人は、公開しないのであればcom.exampleとか適当でいいはず。
  • Class Prefix : 作成されるクラスのプレフィックス(頭につく文字)らしい。とりあえず空白で。
  • Devices : 対象のデバイスを選択。ここではiPhoneにします。(UniversalだとiPhoneとiPad両方を対象にしたアプリになります)

次へ進み、プロジェクトの保存場所もお好きなところへ。

Xcodeプロジェクト保存場所の設定

「Create git repository on …」のチェックをつけると、gitのリポジトリを作ってくれます。必要ない場合やよく分からない場合は外しちゃって問題ないです。(ぼくはコードの変化を把握しやすいのでリポジトリ作ることが多いですが)

これでプロジェクトの完成です。

Xcodeプロジェクトの完成

2. UIWebViewをstoryboardへ配置

さて本題です。UIWebViewを使ってWebページを表示できるようにしていきます。

まずは、Main.storyboardというファイルがあるので選択し、storyboardを表示します。

storyboardを表示

次に、右側にあるリストから「Web View」を選択してstoryboard上に表示されている枠(ViewController)へドラッグ&ドロップし、UIWebViewを枠いっぱいになるように配置します。(ドロップ位置を探して中心付近をウロウロしてれば、十字に補助線が表示される場所があるので、そこへドロップするときれいに配置できます)

Web Viewをドラッグ&ドロップ UIWebViewを配置

3. UIWebViewのオブジェクトを参照するためのプロパティをつくる

UIWebViewを配置できたら、ViewController.hというファイルがあるので、それをoptionキーを押しながらクリックします。

すると、こんな感じでstoryboard + ViewController.hという表示になります。

storyboardとViewController.hを表示

ViewController.hが表示されたら、storyboardのUIWebViewをコード上にドラッグ&ドロップします。

UIWebViewの上にカーソルを移動させて、controlキーを押しながらドラッグすると青い線が表示されるので、ViewController.hの@interface@endの間にカーソルを持っていって離します。

UIWebViewをViewController.hへドラッグ&ドロップ

下のようなダイアログが表示されるので、Nameのところにプロパティの名前を入力します。ここではwebViewとします。

プロパティの名前を設定

入力してConnectボタンを押すと、ViewController.hに、

@property (weak, nonatomic) IBOutlet UIWebView *webView;

というコードが一行追加されます。こうなってるはずです。

プロパティの紐付け

これで、このあと編集するViewController.mの中で_webViewという変数名でUIWebViewのオブジェクトを参照できるようになります。

4. 表示するページのURLを設定する

最後に、ViewController.mにてURLを設定していきます。

ViewController.mを、以下のように編集します。今回はGoogleの検索ページを表示してみます。

@implementation ViewController
 
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
 
    // ↓ここから
    NSURLRequest* req = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.google.co.jp"]];
    [_webView loadRequest:req];
    // ↑ここまで
 
}
 
- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
 
@end

これでコードは完成です。

5. iOSシミュレーターを起動

では、iOSシミュレーターを起動してアプリを実行してみます。ウィンドウの左上にある再生ボタンのようなボタンをクリックします。

iOSシミュレーターを起動

するとiOSシミュレーターが起動し、アプリが実行されます。

UIWebViewにWebページを表示

こんなかんじで、Googleの検索ページが表示されればOK。