PageMenuを使ってキュレーションアプリを作る（その１）【Swift3.0】

# キュレーションアプリを作る（その１）
横スライドのタブメニューライブラリ**PageMenu**を使ったキュレーションアプリの実装手順を２回に分けて紹介します。サンプルとしてQAサイトのキュレーションアプリを作成します。

[その2はこちら](http://qiita.com/fromage-blanc/items/71fe34e170f9e381ac57)

*記事で取り扱っているサイトは説明の便宜上のためであり、利用は本記事内に留まります*

## 見本（その１）
![demo4.gif](https://qiita-image-store.s3.amazonaws.com/0/151314/b3a4a99b-070f-49f5-edf5-0a63e0d912f9.gif)
なんかちょっと青みがかってますが・・・

## 1.プロジェクト作成
「Single View Application」をテンプレートにプロジェクトを新規作成します。今回は「NewsAppSample」という名前にしました。

## 2.PageMemuのインポート
https://github.com/orazz/PageMenu からSwift3.0版がダウンロードできます。ダウンロードしたら`CAPSPageMenu.swift`をプロジェクトにドラッグ＆ドロップします。
<img width="1384" alt="0.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/6e0abed3-461c-9dd4-acbc-8f783777c67e.png">

<img width="727" alt="1-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/88d5f79d-1432-b01d-ac93-c6f03c75dd8d.png">

## 3.ウェブアクセスの設定
info.plistに`App Transport Security Settings`を追加します。その子要素に`Allow Arbitray Loads`を追加してvalueを`YES`にします。これでウェブアクセスが全許可状態となります(2016.12月時点)。
<img width="1063" alt="2.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/d56ceab1-69c2-4792-f9cb-87529876cf75.png">

## 4.コンテンツコントローラーの準備
PageMenuの各タブに対応するコントローラーを用意します。メニュー：File → New → Fileと辿り、「Cocoa Touch Class」をダブルクリックします。XIBファイルも同時作成したいので「Also create XIB file」にチェックを入れます。今回はContentsViewControllerという名前にしました。
<img width="730" alt="1.png" src="https://qiita-image-store.s3.amazonaws.com/0/151314/12442368-d35a-dc43-19d2-2353c51eb5ce.png">

## 5.ContentsViewControllerの実装
プロパティに`webView`と`siteUrl`、nibファイルをパラメタにとるイニシャライザ`init`を追加します。

ContentsViewController.swift

```swift
// Swift3.0

import UIKit

class ContentsViewController: UIViewController ,UIWebViewDelegate{

    var webView:UIWebView!
    var siteUrl:String!
    
    
    override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
        super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}
```

## 6.ViewControllerの実装
このサンプルではサイト情報をハードコードしていますが、実用レベルではDBから取得するような感じになると思います。

ViewController.swift

```swift
// Swift3.0

import UIKit

class ViewController: UIViewController {

    // インスタンス配列
    var controllerArray : [UIViewController] = []
    var pageMenu : CAPSPageMenu?

    // サイト情報
    let siteInfo:[Dictionary<String,String>] = [
        ["title":"ヤフー！知恵袋","url":"http://chiebukuro.yahoo.co.jp/"],
        ["title":"教えて！goo","url":"http://oshiete.goo.ne.jp/"],
        ["title":"OKWAVE","url":"http://okwave.jp/"],
        ["title":"発言小町","url":"http://komachi.yomiuri.co.jp/"],
        ["title":"BIGLOBEなんでも相談室","url":"http://soudan.biglobe.ne.jp/sp/"]
    ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        for site in siteInfo {
            
            let controller:ContentsViewController = ContentsViewController(nibName: "ContentsViewController", bundle: nil)
            
            controller.title = site["title"]!
            controller.siteUrl = site["url"]!

            controller.webView = UIWebView(frame : self.view.bounds)
            controller.webView.delegate = controller
            controller.view.addSubview(controller.webView)
            let req = URLRequest(url: URL(string:controller.siteUrl!)!)
            controller.webView.loadRequest(req)
            controllerArray.append(controller)
            
        }

        // Customize menu (Optional)
        let parameters: [CAPSPageMenuOption] = [
            .scrollMenuBackgroundColor(UIColor.white),
            .viewBackgroundColor(UIColor.white),
            .bottomMenuHairlineColor(UIColor.blue),
            .selectionIndicatorColor(UIColor.red),
            .menuItemFont(UIFont(name: "HelveticaNeue", size: 14.0)!),
            .centerMenuItems(true),
            .menuItemWidthBasedOnTitleTextWidth(true),
            .menuMargin(16),
            .selectedMenuItemLabelColor(UIColor.black),
            .unselectedMenuItemLabelColor(UIColor.gray)
            
        ]
        
        // Initialize scroll menu
        
        let rect = CGRect(origin: CGPoint(x: 0,y :20), size: CGSize(width: self.view.frame.width, height: self.view.frame.height))
        pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: rect, pageMenuOptions: parameters)
        
        self.addChildViewController(pageMenu!)
        self.view.addSubview(pageMenu!.view)
        
        pageMenu!.didMove(toParentViewController: self)
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}
```

## 7.ビルドしてみる
とりあえずこの時点でビルドしてみます。見本の通り、横スライドメニューと各タブにウェブサイトがロードされていればOKです。

[その2へ続く...](http://qiita.com/fromage-blanc/items/71fe34e170f9e381ac57)