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


[初めてのiPhoneアプリ開発「簡単webViewアプリ」その①](http://qiita.com/yuinchirn/private/59d54d318cce48772df0)の続きになります。
こちらの記事でやったことを前提に話を進めます。

# 前回の復習

前回は、プロジェクトを一から作り、
webViewで任意のwebページを表示するところまでやりました。

この日のGoogleのロゴが可愛くて個人的には好きですw
母の日バージョンでした。

![スクリーンショット 2015-05-10 午後6.11.15.png](https://qiita-image-store.s3.amazonaws.com/0/41892/541e0057-2e0a-2a42-9c06-cfdcccce9c4d.png "スクリーンショット 2015-05-10 午後6.11.15.png")

# 今回のゴール

①「前のページに戻る」「次のページへ進む」ボタンの実装。

② 表示中のWebページをFacebook,Twitterでシェアするボタンの実装。

# ①「前のページに戻る」「次のページへ進む」ボタンの実装

下記の順序でやります。

* main.storyboardにボタンを配置。
* 配置したボタンを押した時に呼ばれるメソッドをつくる。
* メソッド内に「戻る」「進む」処理を書く。

## main.storyboardにボタンを配置。

やり方は、webViewを配置した時と同様です。

今回は画面下部にToolBarを配置、
その上にBarButtonItem(ToolBar上で用いるButton)を配置します。
※デフォルトで一つ配置されているので一つ追加でOKです。

ToolBarを追加。

![スクリーンショット_2015-05-11_午前0_34_18.png](https://qiita-image-store.s3.amazonaws.com/0/41892/182c900a-ea7c-7146-e531-b540e812f086.png "スクリーンショット_2015-05-11_午前0_34_18.png")

BarButtonItemを追加。

![スクリーンショット_2015-05-11_午前0_43_47.png](https://qiita-image-store.s3.amazonaws.com/0/41892/43006c06-85cb-f211-6a7c-816ac19d2c59.png "スクリーンショット_2015-05-11_午前0_43_47.png")

toolBarのレイアウトは、前回使ったAutoLayoutを使って、
実装してみてください。
※わからなければ[初めてのiPhoneアプリ開発「簡単webViewアプリ」その①](http://qiita.com/yuinchirn/private/59d54d318cce48772df0)で確認しましょう。


ボタンが左に寄ってしまっているので、バランス良く配置するため
「Flex Space Bar Button Item」を２つのBarButtonItemの間に置きます。

![スクリーンショット_2015-05-11_午前0_39_28.png](https://qiita-image-store.s3.amazonaws.com/0/41892/26c6b044-fc36-f1c8-d2d8-31cef4a059d8.png "スクリーンショット_2015-05-11_午前0_39_28.png")

## 配置したボタンを押した時に呼ばれるメソッドをつくる。

BarButtonItemを選択&右クリックして、
[Sent Actions]の[selector]を「WebViewController.swift」にドラッグ&ドロップします。

これを２つ分やります。
Nameはそれぞれ「prevBtn」「nextBtn」としておきます。

![スクリーンショット_2015-05-11_午前0_59_21.png](https://qiita-image-store.s3.amazonaws.com/0/41892/69fdb46c-fba8-1858-426a-f21db64b05a6.png "スクリーンショット_2015-05-11_午前0_59_21.png")

ここで作られた下記のメソッドが、
それぞれのBarButtonItemが押された時に呼ばれるメソッドです。

```swift
@IBAction func prevBtn(sender: AnyObject) {

}

@IBAction func nextBtn(sender: AnyObject) {

}

```

## メソッド内に「戻る」「進む」処理を書く。

ここまできたら「戻る」「進む」の処理は１行で済みます。

```swift
// 戻る
self.webView.goBack() 

// 進む
self.webView.goForward()
```

戻れるか、進めるかのチェックを書き加えて下記のように書きます。

```swift
/* 戻るボタン押下時に呼ばれるメソッド */
@IBAction func prevBtn(sender: AnyObject) {
        
    if self.webView.canGoBack {
        self.webView.goBack() // 戻る
    }
}
    
/* 進むボタン押下時に呼ばれるメソッド */
@IBAction func nextBtn(sender: AnyObject) {
        
    if self.webView.canGoForward {
        self.webView.goForward() // 進む
    }
}

```

ボタンの見た目がデフォルトの「Item」なので、
変えたい人は好きなように変えてみましょう。

# ② 表示中のWebページをFacebook,Twitterでシェアするボタンの実装。

次に、記事のシェア用ボタンを追加します。

下記の順序でやります。

* Social.frameworkの追加。
* main.storyboardにボタンを配置。
* 配置したボタンを押した時に呼ばれるメソッドをつくる。
* 投稿画面の実装

## Social.frameworkを追加。

簡単に実装できるSocial.frameworkというものがあるのでそれを使います。
下記の図に従ってSocial.frameworkを追加します。

![スクリーンショット_2015-05-11_午前2_16_27.png](https://qiita-image-store.s3.amazonaws.com/0/41892/65be6f06-828d-8796-28e2-87cf0378a250.png "スクリーンショット_2015-05-11_午前2_16_27.png")

##  main.storyboardにボタンを配置。

* さらにBarButtonItemを２つToolBarに追加します。
* ボタンを押された時のメソッドを追加します。

```swift
/* facebookボタン押下時に呼ばれるメソッド */
@IBAction func facebookBtn(sender: AnyObject) {
}

/* twitterボタン押下時に呼ばれるメソッド */
@IBAction func twitterBtn(sender: AnyObject) {
}
```

※やり方は先ほどと同じなので省略。

## 投稿画面の実装

全体像は下記のようになります。


```swift
	/* facebookボタン押下時に呼ばれるメソッド */
    @IBAction func facebookBtn(sender: AnyObject) {
        if SLComposeViewController.isAvailableForServiceType(SLServiceTypeFacebook) {
            showPostView(serviceType: SLServiceTypeFacebook)
        }
    }

    /* twitterボタン押下時に呼ばれるメソッド */
    @IBAction func twitterBtn(sender: AnyObject) {
        if SLComposeViewController.isAvailableForServiceType(SLServiceTypeTwitter) {
            showPostView(serviceType: SLServiceTypeTwitter)
        }
    }
    
    /* 投稿画面を表示 */
    func showPostView(#serviceType:String){
        
        var controller = SLComposeViewController(forServiceType: serviceType)
        
        // 表示中のページURLをセット
        let link: NSURL? = self.webView?.request?.URL
        if let shareUrl = link {
            controller.addURL(shareUrl)
        }
        
        // 表示中のページURLのタイトルをセット
        let title: String? = self.webView.stringByEvaluatingJavaScriptFromString("document.title")
        if let shareTitle = title {
            controller.setInitialText(shareTitle)
        }
        
        // 表示
        presentViewController(controller, animated: true, completion: {})
    }
```

下記部分で、表示中のページのURLとタイトルを取得してセットしています。

```swift
// 表示中のページURLをセット
let link: NSURL? = self.webView?.request?.URL
    if let shareUrl = link {
        controller.addURL(shareUrl)
    }

// 表示中のページURLのタイトルをセット
let title: String? = self.webView.stringByEvaluatingJavaScriptFromString("document.title")
    if let shareTitle = title {
        controller.setInitialText(shareTitle)
    }

```

これでCommand+RでRunして確認してみます。
下記のような画面がでればOKです。
※Simulatorではうまくいかない場合は実機で確認してみてください。

![IMG_6148.png](https://qiita-image-store.s3.amazonaws.com/0/41892/62807d4d-e550-b617-3d46-45fc9f113960.png "IMG_6148.png")

これで一通り簡単なwebViewのアプリができました。
検索機能を追加すれば簡単なブラウザアプリにもなると思います。

#  完成アプリのソースコード
[yuinchirn/simpleWebView](https://github.com/yuinchirn/simpleWebView)