[Sy] 【技術メモ】Xcode5.xにてUIWebViewを使ってWebページを表示するだけのiOSアプリを作る手順
iOSアプリ開発はほぼ初心者です。
そんな状態から以下のページを参考に、UIWebView を使って単純にWebページを表示するサンプルアプリを作成してみました。
⇒ XcodeでWebを表示するだけのiPhoneアプリを作ってみる。
最初は同じようにやってみたんですが、どうもstoryboardの動きが現行バージョン(5.0.2)と違う（？）のかうまくいかず。一部変えてうまくいったのでその手順をまとめておきます。
1. プロジェクトを作成
[File]->[New]->[Project]から「Single View Application」を選択してプロジェクトを作成。
いくつかプロジェクトの設定をします。
- Project Name : プロジェクトの名前。フォルダの名前になります。適当で。
- Organization Name : 作った人の名前。まぁサンプル適当であれば適当に。
- Company Identifier : 通常は会社のドメインを逆にしたものを指定。ぼくは
jp.utanoにしてます。持ってない人は、公開しないのであればcom.exampleとか適当でいいはず。 - Class Prefix : 作成されるクラスのプレフィックス（頭につく文字）らしい。とりあえず空白で。
- Devices : 対象のデバイスを選択。ここではiPhoneにします。（UniversalだとiPhoneとiPad両方を対象にしたアプリになります）
次へ進み、プロジェクトの保存場所もお好きなところへ。
「Create git repository on …」のチェックをつけると、gitのリポジトリを作ってくれます。必要ない場合やよく分からない場合は外しちゃって問題ないです。（ぼくはコードの変化を把握しやすいのでリポジトリ作ることが多いですが）
これでプロジェクトの完成です。
2. UIWebViewをstoryboardへ配置
さて本題です。UIWebViewを使ってWebページを表示できるようにしていきます。
まずは、Main.storyboardというファイルがあるので選択し、storyboardを表示します。
次に、右側にあるリストから「Web View」を選択してstoryboard上に表示されている枠（ViewController）へドラッグ＆ドロップし、UIWebViewを枠いっぱいになるように配置します。（ドロップ位置を探して中心付近をウロウロしてれば、十字に補助線が表示される場所があるので、そこへドロップするときれいに配置できます）
3. UIWebViewのオブジェクトを参照するためのプロパティをつくる
UIWebViewを配置できたら、ViewController.hというファイルがあるので、それをoptionキーを押しながらクリックします。
すると、こんな感じでstoryboard + ViewController.hという表示になります。
ViewController.hが表示されたら、storyboardのUIWebViewをコード上にドラッグ＆ドロップします。
UIWebViewの上にカーソルを移動させて、controlキーを押しながらドラッグすると青い線が表示されるので、ViewController.hの@interfaceと@endの間にカーソルを持っていって離します。
下のようなダイアログが表示されるので、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シミュレーターが起動し、アプリが実行されます。
こんなかんじで、Googleの検索ページが表示されればOK。