【詳説】初めてのiPhoneアプリ開発「簡単webViewアプリ」その①


# 対象者
初めてiPhoneアプリをつくる人

# ゴール
iPhoneアプリの作り方をざっくりと理解する。

※各機能の細かい説明は含んでいません。
今回はアプリを一から作り上げることが目的です。

# 今回つくるアプリの概要
・webViewでgoogleのページを表示(その①)
・ページの戻る/進む機能の実装(その②)
・Facebook/Twitterでの投稿機能の実装(その③)
(表示中ページのURL/タイトルをデフォルトでセット)

# プロジェクトをつくる

Xcodeを開く。

![スクリーンショット_2015-04-27_午前2_32_17.png](https://qiita-image-store.s3.amazonaws.com/0/41892/8e17ff46-5090-0d22-3975-a3cd83c027d5.png "スクリーンショット_2015-04-27_午前2_32_17.png")

「Create a new Xcode project」を選択

![スクリーンショット_2015-04-26_午後11_26_17.png](https://qiita-image-store.s3.amazonaws.com/0/41892/f52432a3-3a81-b3df-0fa3-326ff9873457.png "スクリーンショット_2015-04-26_午後11_26_17.png")

「Single View Application」を選択して、「Next」へ

![スクリーンショット_2015-04-26_午後11_27_09.png](https://qiita-image-store.s3.amazonaws.com/0/41892/9dbfc24d-6833-f00a-4910-23ff006dafa8.png "スクリーンショット_2015-04-26_午後11_27_09.png")

今回はPriductNameを「simpleWebView」にします。

Languageは「Swift」、Deviceは「iPhone」を選択します。

これでプロジェクトができました。

![スクリーンショット 2015-04-26 午後11.28.14.png](https://qiita-image-store.s3.amazonaws.com/0/41892/c5677c85-2c86-59f1-e041-53987f715574.png "スクリーンショット 2015-04-26 午後11.28.14.png")

最初に上記の画面の
[simpleWebView]->[General]->[Deployment Info]から
DeploymentTargetをアプリの最低サポートバージョンに指定しておくと後々楽です。
※今回はswiftなのでiOS7.0を選択。

# WebViewの配置

* まずは画面左のナビゲーションから「Main.storyboard」を選択します。

* 右下のエリアから「View Controller」を探し、中央のエリアにドラッグ&ドロップします。

![スクリーンショット_2015-05-10_午後3_53_26.png](https://qiita-image-store.s3.amazonaws.com/0/41892/38e4477f-d2f5-ac71-5679-b78e8e847685.png "スクリーンショット_2015-05-10_午後3_53_26.png")

* 今度は追加したView Controllerに、ウェブページを表示するためのwebViewを設置します。
* View Controllerをダブルタップして拡大、右下のエリアからWeb Viewを見つけ出し、View Controllerへドラッグ&ドロップ。

![スクリーンショット_2015-05-10_午後3_59_43.png](https://qiita-image-store.s3.amazonaws.com/0/41892/3d3a5247-f1d5-afdc-d4d5-f0427d043c7c.png "スクリーンショット_2015-05-10_午後3_59_43.png")

# WebViewのレイアウト設定

次に、追加したWebViewのレイアウトを設定していきます。
今回はAutoLayoutという機能を使います。

* WebViewを選択した状態で、下記の図①〜③の手順で設定してください。

何しているかというと、
「親のViewのそれぞれ上部、下部、右部、左部から⚪︎ptずらした位置に配置する」ということを「制約(Constraint)」として定めています。

今回の場合は、画面いっぱいに表示したいので、上部から0pt、下部から0pt、右部から-16pt、左部から-16ptとしています。
※0ptではなく、-16ptとしているのは理由があるのですが今回は触れません。

設定できたら「Add 4 Constraints」を押して保存します。

![スクリーンショット_2015-05-10_午後4_04_46.png](https://qiita-image-store.s3.amazonaws.com/0/41892/bd2e58b6-823e-0fe1-4f34-5cc9160a6a81.png "スクリーンショット_2015-05-10_午後4_04_46.png")

その後、WebViewを選択した状態で、下記のようにUpdate Framesを押します。
これでさきほど設定した制約が反映されます。

これでwebViewの配置ができました。

![スクリーンショット_2015-05-10_午後4_31_15.png](https://qiita-image-store.s3.amazonaws.com/0/41892/0f50aa26-a7e0-5a0d-b7b2-81bdc74e34b6.png "スクリーンショット_2015-05-10_午後4_31_15.png")

# WebViewに任意のwebページを表示する。

今度は、配置したwebViewに好きなwebページを表示させてみます。

## 実際に処理を書くファイルを追加

* まずは、storyBoardに追加したViewControllerの処理を書くswiftファイルを追加します。(下記画像の手順)


![スクリーンショット_2015-05-10_午後4_42_48.png](https://qiita-image-store.s3.amazonaws.com/0/41892/c866cbed-c788-3473-27dd-d754c92b2474.png "スクリーンショット_2015-05-10_午後4_42_48.png")

![スクリーンショット_2015-05-10_午後4_43_09.png](https://qiita-image-store.s3.amazonaws.com/0/41892/7eb76e89-e470-b493-ea07-132479677dd8.png "スクリーンショット_2015-05-10_午後4_43_09.png")


![スクリーンショット_2015-05-10_午後4_43_27.png](https://qiita-image-store.s3.amazonaws.com/0/41892/b2b2b5f5-b874-9642-91bd-ff57275ac6e5.png "スクリーンショット_2015-05-10_午後4_43_27.png")

これで「WebViewController.swift」というファイルが追加されます。

## swiftファイルとstoryBoardの紐付け

次に、最初にStoryBoardに追加したViewControllerと
今追加した「WebViewController.swift」ファイルの紐付けをします。

画面左のナビゲーションから「Main.storyboard」を選択、
webViewを追加したViewControllerを選択し、画面右の[Custom Class]->[Class]から先ほど追加したWebViewControllerを選択します。

これでStoryBoard上のViewControllerと「WebViewController.swift」が紐づけることができました。

![スクリーンショット_2015-05-10_午後4_53_28.png](https://qiita-image-store.s3.amazonaws.com/0/41892/5f7b0006-5423-1a8d-32a3-971cd8519ec5.png "スクリーンショット_2015-05-10_午後4_53_28.png")

## WebViewにWebページを表示

次にwebViewにWebページを表示していきます！
ここからコードを書いていきます。

まずはStoryBoardで追加したwebViewを「WebViewController.swift」で扱うために、「WebViewController.swift」ファイルに紐付けて定義します。

下記画像の手順で行ってください。

![スクリーンショット_2015-05-10_午後5_03_57.png](https://qiita-image-store.s3.amazonaws.com/0/41892/14e044df-c334-20c3-624b-6e4f84e4d715.png "スクリーンショット_2015-05-10_午後5_03_57.png")

「Name」の部分に「webView」と入れてConnectを選択します。
これで「WebViewController.swift」ファイル上でwebViewとして扱うことができます。

![スクリーンショット_2015-05-10_午後5_13_54.png](https://qiita-image-store.s3.amazonaws.com/0/41892/8f4cd9eb-b57e-a492-dd4c-f84b5340883b.png "スクリーンショット_2015-05-10_午後5_13_54.png")

これで準備ができたので、実際にコードを書いていきます。
「WebViewController.swift」を開きます。

WebViewにページを表示するのに必要なコードは下記になります。

![スクリーンショット_2015-05-10_午後5_18_40.png](https://qiita-image-store.s3.amazonaws.com/0/41892/138f7126-9bdb-870a-78ca-2253ccfd8bb8.png "スクリーンショット_2015-05-10_午後5_18_40.png")

## Delegateの設定

Delegateとは、一言で言うと「委譲」と呼ばれるものです。

今回のwebViewのケースで説明します。

webView関連のメッセージ(例えば、「web読み込み完了しました！」など)は
本来はUIWebViewControllerで受け取り、その場合の処理を行います。

ただ、そのためにUIWebViewControllerのオブジェクトを作り、処理を書くのは面倒なので、
メッセージを受け取り、処理をする役割を他のクラスに任せる。(=委譲)
(今回の例で言えば、WebViewControllerに委譲して、このクラス内でメッセージの受け取り、処理を行えるようにしています。)

※詳しくは下記の記事を参考に。
http://konton.ninpou.jp/program/cocoa/delegate.html
http://dev.classmethod.jp/smartphone/iphone/ios-delegate/

Delegateは下記のように書くと設定できます。

まずは「UIWebviewDelegate」を追加。

```swift
class WebViewController: UIViewController, UIWebViewDelegate {
```

viewDidLoad()のメソッドに下記を追加。

```swift
self.webViewdelete = self
```

これで、webViewのDelegateをself(=WebViewController)に設定できました。

## URLを指定してwebページを表示

表示したいURLを下記のようにNSURLとして宣言する。

```swift
let initialUrl = NSURL(string: "https://www.google.co.jp")
```

下記のコードで上で設定したURLリクエストを飛ばします。

```swift
let request = NSURLRequest(URL: initialUrl!)
self.webView.loadRequest(request)
```

これで、指定したURLのページが表示されるはずです。

最後に起動時に呼ばれるViewControllerを「WebViewController」に指定します。

「main.storyboard」を開き、
「ViewController」についている矢印を「WebViewController」にドラッグ&ドロップします。

![スクリーンショット_2015-05-10_午後6_21_23.png](https://qiita-image-store.s3.amazonaws.com/0/41892/5d9c29c0-b15f-a7b5-5d03-b62366f1d3a8.png "スクリーンショット_2015-05-10_午後6_21_23.png")



では実際にSimulatorで動かしてみましょう。

Command+Rで「Run」します。

iOS Simulatorが立ち上がり、下記のようにページが表示されれば成功です。

![スクリーンショット 2015-05-10 午後6.11.15.png](https://qiita-image-store.s3.amazonaws.com/0/41892/41ad8bd5-5a5e-10b1-5fa3-3965cc8c07e6.png "スクリーンショット 2015-05-10 午後6.11.15.png")

ここまでのアプリでは、
Safariなどのブラウザアプリのように「前のページへ戻る」「次のページへ進む」などの動きができないので、次回はその方法を書いていきます。

[【詳説】初めてのiPhoneアプリ開発「簡単webViewアプリ」その②](http://qiita.com/yuinchirn/private/285b4024965b593ac3fb)

# 一言

デフォルトでViewController.swiftファイルとStoryBoard上にViewControllerが用意されていますが、
Viewの追加などのStoryBoardの使い方を学ぶために自分でファイルを追加して実装しいく方法をご紹介しました。