ゴール

Xcodeも全然わからん状態から、5分でWebViewアプリをつくってみる

• とりあえずアプリ起動したらgoogle.comのトップページでも見せますか

目次

1. Xcodeをインストールします
2. Xcodeプロジェクトをつくります
3. StoryboradでWebViewをViewに置きます
4. hファイルで紐づけます
5. mファイルで（ちょっとだけ）処理を書きます
6. 実行とまとめ

Xcodeをインストールします

（割愛してもいいんだけど）

• Mac右上の虫眼鏡マークからApp Storeを検索
• AppStoreで、Xcodeを検索してインストールします
• これはけっこう時間かかる

Xcodeプロジェクトをつくります

インストールできましたか？

こいつや。クリックすると

（本当に最初の最初なら、右側には既存のプロジェクトは出ないはずですね（；^ω^））

Create a new Xcode projectを選択しましょう

すると...

うわー萎えるわー英語わかんねーわー

とりあえず今はSingle View Applicationを選択しとけばいいのかな（；^ω^）

次にプロジェクト情報を色々入力しなきゃならんのだけど、とりあえず写真にならってUnkoで入れましょう。そうです、うんこです。つまり任意ですここは。

最後に

プロジェクトファイルが入る場所をしてします。僕の場合は

/Users/otiia10/proj

っていうディレクトリに言語単位でプロジェクトを整理しているので、今回は

/Users/otiai10/proj/iOS/Unko

となるように

/Users/otiai10/proj/iOS/

を選択します。

Create git repositoryは、gitと聞いてピンと来ないならチェックを外しとくのがいいんじゃないでしょうか。

完成です！僕のUnkoプロジェクトができました！

StoryboradでWebViewをViewに置きます

画面左にある「ファイル一覧」らしきところで「Main.storyboard」を選択します。何やら四角が出てくるはずです

この状態は空っぽなので、右下のパーツ置き場からWeb Viewを選んでドラック&ドロップしてみます

こんな感じになりましたか？これでWebViewがViewに置かれました

hファイルで紐づけます

しかしこのままでは、単にViewに置かれてるだけで、.hファイルや.mファイルのプログラムからアクセスできる状態ではありません。プログラムからアクセスできるパーツにするためには、名前をつけて存在を指定してあげる必要があります。

ちょっとXcodeの画面が見にくいので、作業場のレイアウトを変えます

右上のジェイソンの顔みたいなボタンをクリックすると、画面が分割されると思います

分割されたら、右の画面の上の方で、UnkoViewController.hを指定して、このファイルを右領域に表示しましょう

こういう感じになります

そしたら、左の画面で鎮座しているWebViewを右のファイルに記述されているプログラムに紐づけます。 キーボードのControlボタンを押しつつ、 左のWebViewを右の画面のここに

置きます。

「なんて名前つける？」って聞いてくるので、ここはロマンチックに

myFirstWebViewと名付けました/// そうすっとこういうプログラムが一行追加されるはずです

これでUnkoViewController.h中の変数にWebViewパーツが紐付けられました

mファイルで（ちょっとだけ）処理を書きます

最後に、このmyFirstWebViewたん（かわゆす）がロードするウェブページのURLを指定しましょう。

この作業はstoryboardも.hもいじらないので、一画面にしましょう

右上のジェイソンあたりをこのような状態にして

ここのあたりのUnkoViewController.m（.hではない）を選択します

こういうファイルが開かれたと思うので、「ここーイェーイ」と書いてみた部分に今から処理を書きます。viewDidLoadという関数の中ですね。

以下、書きました

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    // ここー!!!!ｲｪ━━━━━ヽ( ﾟДﾟ)人(ﾟДﾟ )ﾉ━━━━━━ｲ!!
    
    // はじまり>
    
    // Stringオブジェクトをつくります
    NSString* urlString = @"http://google.com";
    // これを使って、URLオブジェクトをつくります
    NSURL* googleURL = [NSURL URLWithString: urlString];
    // さらにこれを使って、Requestオブジェクトをつくります
    NSURLRequest* myRequest = [NSURLRequest requestWithURL: googleURL];
    // これを、myFirstWebViewのloadRequestメソッドに渡します
    [self.myFirstWebView loadRequest:myRequest];

    // おわり<
}

実行とまとめ

最後に、これを実行します。

左上の再生ボタンみたいなの押すと、アプリが立ち上がります

やったー！これでネイティブアプリの中でウェブページを表示することができました！

これを使えば、ウェブの知識しかなくても、WebViewの中でモバイルに最適化したデザインのウェブページを見せることで擬似的にネイティブアプリっぽいものができますね！

DRYな備忘録