DRYな備忘録

Don't Repeat Yourself.

Xcodeで超簡単なWebViewアプリを作ってみる【Xcode5.0.2編】

ゴール

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プロジェクトをつくります

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

f:id:otiai10:20131224221704p:plain

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

f:id:otiai10:20131224221743p:plain

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

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

すると...

f:id:otiai10:20131224221906p:plain

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

とりあえず今はSingle View Applicationを選択しとけばいいのかな(;^ω^)

f:id:otiai10:20131224222025p:plain

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

最後に

f:id:otiai10:20131224222205p:plain

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

/Users/otiia10/proj

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

/Users/otiai10/proj/iOS/Unko

となるように

/Users/otiai10/proj/iOS/

を選択します。

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

f:id:otiai10:20131224222443p:plain

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

StoryboradでWebViewをViewに置きます

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

f:id:otiai10:20131224223144p:plain

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

f:id:otiai10:20131224223355p:plain

f:id:otiai10:20131224223418p:plain

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

hファイルで紐づけます

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

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

f:id:otiai10:20131224223707p:plain

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

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

f:id:otiai10:20131224223939p:plain

f:id:otiai10:20131224223949p:plain

こういう感じになります

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

f:id:otiai10:20131224224143p:plain

置きます。

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

f:id:otiai10:20131224224458p:plain

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

f:id:otiai10:20131224224724p:plain

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

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

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

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

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

f:id:otiai10:20131224225124p:plain

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

f:id:otiai10:20131224225137p:plain

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

f:id:otiai10:20131224225246p:plain

以下、書きました

- (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];

    // おわり<
}

実行とまとめ

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

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

f:id:otiai10:20131224234625p:plain

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

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

DRYな備忘録