ゴール
Xcodeも全然わからん状態から、5分でWebViewアプリをつくってみる
- とりあえずアプリ起動したらgoogle.comのトップページでも見せますか
目次
- Xcodeをインストールします
- Xcodeプロジェクトをつくります
- StoryboradでWebViewをViewに置きます
- hファイルで紐づけます
- mファイルで(ちょっとだけ)処理を書きます
- 実行とまとめ
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な備忘録