Fabricを使ってユーザのツイート一覧を表示させる方法


Fabricをつかって
ユーザのツイート一覧を表示させてみました。

## Fabricとは？
Twitter社が運営するモバイルアプリ開発向けのサービスで
大きく分けて

- twitter
	- Twitterへのサインイン, Twitter APIの呼び出し, Viewの提供, SMS認証
- Crashlytics
	- クラッシュ統計, リアルタイム分析, テスト配信
- MoPub
	- 広告配信による収益化

の3つのモジュールで構成されています。

http://dev.classmethod.jp/smartphone/ios-fabric-sign-in-with-twitter/
より


今回はこのTwitterというモジュールを利用します。


## インストール

https://get.fabric.io/


![スクリーンショット 2016-05-31 16.55.06.png](https://qiita-image-store.s3.amazonaws.com/0/64452/45994ad3-6613-bbc1-9afc-721efa06c64d.png "スクリーンショット 2016-05-31 16.55.06.png")

- 「Get Started with Fabric」から登録
- 手順に従ってSDKをダウンロード


## Fabricの設定

### SDKを起動

![スクリーンショット 2016-05-31 17.18.40.png](https://qiita-image-store.s3.amazonaws.com/0/64452/7e1e1361-96f2-ff64-a8b4-1b54d5044ad3.png "スクリーンショット 2016-05-31 17.18.40.png")

SDKをアプリケーションホルダに入れて起動



![スクリーンショット 2016-05-31 17.18.55.png](https://qiita-image-store.s3.amazonaws.com/0/64452/813baa66-3b42-9740-7826-5326dd8ae801.png "スクリーンショット 2016-05-31 17.18.55.png")

登録したメールアドレスとパスワードを入力

### Xcodeのプロジェクト作成

![スクリーンショット 2016-05-31 17.17.24.png](https://qiita-image-store.s3.amazonaws.com/0/64452/84b5de88-e7eb-62c3-c30e-8da2d7b2d9f6.png "スクリーンショット 2016-05-31 17.17.24.png")

今回は「FabricTweetSample」って名前で作成

### SDKに戻ってプロジェクトを選択

![スクリーンショット 2016-05-31 17.19.34.png](https://qiita-image-store.s3.amazonaws.com/0/64452/432ce244-4ab8-7272-7c00-cc81129c758c.png "スクリーンショット 2016-05-31 17.19.34.png")


さっきつくった「FabricTweetSample」を選択

### インストールするkitを選択

![スクリーンショット 2016-05-31 17.19.54.png](https://qiita-image-store.s3.amazonaws.com/0/64452/db77d603-69fe-989e-a290-3b37964d6253.png "スクリーンショット 2016-05-31 17.19.54.png")

Twitterを選択

![スクリーンショット 2016-05-31 17.20.43.png](https://qiita-image-store.s3.amazonaws.com/0/64452/1292c30d-7c99-7e98-314b-475ceedf3119.png "スクリーンショット 2016-05-31 17.20.43.png")

よければチェックをして「Agree」

### 指示に従ってXcodeにインストール

![スクリーンショット 2016-05-31 17.22.07.png](https://qiita-image-store.s3.amazonaws.com/0/64452/f60138cf-0e0d-ef25-dc05-09f3f4a8e583.png "スクリーンショット 2016-05-31 17.22.07.png")


![スクリーンショット 2016-05-31 17.23.21.png](https://qiita-image-store.s3.amazonaws.com/0/64452/b1db72ad-9c70-e590-e450-a996a0ea8944.png "スクリーンショット 2016-05-31 17.23.21.png")

![スクリーンショット 2016-05-31 17.24.30.png](https://qiita-image-store.s3.amazonaws.com/0/64452/68392f03-f5e2-2e9b-21df-6a729fa75d20.png "スクリーンショット 2016-05-31 17.24.30.png")


で、「⌘ + B」でビルドすると
SDKが以下のようになるからドラッグアンドドロップで
プロジェクトに追加

![スクリーンショット 2016-05-31 17.24.48.png](https://qiita-image-store.s3.amazonaws.com/0/64452/0001b77f-ef8c-a5e5-0b10-35c42b12886d.png "スクリーンショット 2016-05-31 17.24.48.png")


### AppDelegateの設定

![スクリーンショット 2016-05-31 17.26.47.png](https://qiita-image-store.s3.amazonaws.com/0/64452/c14e1e9c-fc97-8bac-cd65-7d7bbbea25d3.png "スクリーンショット 2016-05-31 17.26.47.png")


手順にあるようにXcodeの`AppDelegate.swift`に

	 import Fabric
	 import TwitterKit
	 
と

	Fabric.with([Twitter.self])
	
を追加

```AppDelegate.swift

import UIKit
import Fabric       // 追加
import TwitterKit   // 追加


@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?


    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        // Override point for customization after application launch.
        Fabric.with([Twitter.self]) // 追加
        return true
    }
	・
	・
	・
}



```


### 実行

![スクリーンショット 2016-05-31 17.32.03.png](https://qiita-image-store.s3.amazonaws.com/0/64452/784b3ef7-0717-87f8-8276-b4c801c1dacd.png "スクリーンショット 2016-05-31 17.32.03.png")


「⌘ + R」で実行するとSDKのくるくるが止まって設定完了


## ログインボタンを作成

`ViewController.swift`にボタンを表示させるコードを追加する

```ViewController.swift

import UIKit
import Fabric       // 追加
import TwitterKit   // 追加

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.

        // ここから追加
        
        let logInButton = TWTRLogInButton(logInCompletion: { session, error in
            if (session != nil) {
                print("signed in as \(session!.userName)")
            } else {
                print("error: \(error!.localizedDescription)")
            }
        })
        logInButton.center = self.view.center
        self.view.addSubview(logInButton)
        
        // ここまで追加

    }

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

こんな感じ

![スクリーンショット 2016-06-05 16.18.21.png](https://qiita-image-store.s3.amazonaws.com/0/64452/da33485d-82c7-c8b2-ff0e-67710e366c2d.png "スクリーンショット 2016-06-05 16.18.21.png")


ボタンを押すと端末にログインされている場合はログにIDガ出てくる
ログインされてない場合はログイン画面がでてくる。


## ユーザのタイムラインを表示

File -> New -> File -> swiftを選択して
「UserTimelineViewController」って名前のファイルを作成

ユーザのタイムラインを表示させるコントローラ

```UserTimelineViewController.swift

import UIKit
import TwitterKit

class UserTimelineViewController: TWTRTimelineViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let client = TWTRAPIClient()
        
        Twitter.sharedInstance().logInWithCompletion { session, error in
            if (session != nil) {
            	// ユーザ名からタイムラインを取得
                self.dataSource = TWTRUserTimelineDataSource(screenName: session!.userName, APIClient: client)
            } else {
                print("error: \(error!.localizedDescription)")
            }
        }
  
    }
}

```

遷移処理を`ViewController.swift`に追加

```ViewController.swift

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        let logInButton = TWTRLogInButton(logInCompletion: { session, error in
            if (session != nil) {
                print("signed in as \(session!.userName)")
                let timelineVC = UserTimelineViewController()	// 追加
                UIApplication.sharedApplication().keyWindow?.rootViewController = timelineVC	// 追加
            } else {
                print("error: \(error!.localizedDescription)")
            }
        })
        logInButton.center = self.view.center
        self.view.addSubview(logInButton)
        

    }


```

するとログインボタンを押すとタイムラインが表示されました！

![スクリーンショット 2016-06-05 16.33.25.png](https://qiita-image-store.s3.amazonaws.com/0/64452/ef570131-6fb6-8ab3-94ff-21867240db95.png "スクリーンショット 2016-06-05 16.33.25.png")


## 	画面を整える

### 大枠をつくるメインのコントローラを作成

File -> New -> File -> swiftを選択して
「MainTabViewController」って名前のファイルを作成

```MainTabViewController.swift

import UIKit

class MainTabViewController: UITabBarController {
    
    var userTimelineView: UserTimelineViewController!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        userTimelineView = UserTimelineViewController()
       
        userTimelineView.tabBarItem = UITabBarItem(title: "ゆーざ", image: UIImage(named: "twtr-icn-logo"), selectedImage: UIImage(named: "twtr-icn-logo"))
                
        var userTimelineNavigationController = UINavigationController(rootViewController: userTimelineView)
        
        self.setViewControllers([userTimelineNavigationController], animated: false)
    }
}

```

### タブバーのアイコン画像を選択

今回はkitに入っている`twtr-icn-logo`を利用

- Assets.xcassetsを選択
- Media Libraryから`twtr-icn-logo.png`を選択
- Assets.xcassetsに`twtr-icn-logo.png`をドラッグアンドドロップ


### タイトルを追加

```UserTimelineViewController.swift

override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationItem.title = "ユーザのツイート"	// 追加
        
        let client = TWTRAPIClient()
        
        Twitter.sharedInstance().logInWithCompletion { session, error in
            if (session != nil) {
            	// ユーザ名からタイムラインを取得
                self.dataSource = TWTRUserTimelineDataSource(screenName: session!.userName, APIClient: client)
            } else {
                print("error: \(error!.localizedDescription)")
            }
        }
  
    }

```

### 遷移先を変更

```ViewController.swift

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        let logInButton = TWTRLogInButton(logInCompletion: { session, error in
            if (session != nil) {
                print("signed in as \(session!.userName)")
                let timelineVC = MainTabViewController()	// 変更
                UIApplication.sharedApplication().keyWindow?.rootViewController = timelineVC	
            } else {
                print("error: \(error!.localizedDescription)")
            }
        })
        logInButton.center = self.view.center
        self.view.addSubview(logInButton)
        

    }


```

![スクリーンショット 2016-06-05 19.40.55.png](https://qiita-image-store.s3.amazonaws.com/0/64452/6dabcdb4-6bf8-5a3c-47dd-4a4e8587b808.png "スクリーンショット 2016-06-05 19.40.55.png")

こんな感じ

ここのイメージとしてはこんな感じ
![スクリーンショット 2016-06-05 19.44.23.png](https://qiita-image-store.s3.amazonaws.com/0/64452/709f0957-10ef-1107-d8c0-9d2778a9633e.png "スクリーンショット 2016-06-05 19.44.23.png")

今は`UserTimelineViewController.swift`しかないけれど
複数のコントローラを持つイメージなのかな？


## ツイートができるようにしてみる

```UserTimelineViewController.swift
import UIKit
import TwitterKit

class UserTimelineViewController: TWTRTimelineViewController {
    
    var rightBarButton: UIBarButtonItem!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationItem.title = "ユーザのツイート"
        
        rightBarButton = UIBarButtonItem(title: "ついーと", style: .Plain, target: self, action: "tappedRightBarButton")	// 追加
        
        self.navigationItem.rightBarButtonItem = rightBarButton	// 追加
        
        let client = TWTRAPIClient()
        
        Twitter.sharedInstance().logInWithCompletion { session, error in
            if (session != nil) {
                self.dataSource = TWTRUserTimelineDataSource(screenName: session!.userName, APIClient: client)
            }
        }
  
    }
    
    // 追加[ここから]
    
    func tappedRightBarButton() {
        let composer = TWTRComposer()
        
        // Called from a UIViewController
        composer.showFromViewController(self) { result in
            if (result == TWTRComposerResult.Cancelled) {
                print("Tweet composition cancelled")
            }
            else {
                print("Sending tweet!")
            }
        }
    }
    
    // 追加[ここまで]
}
```

そしたらこんな感じ


![スクリーンショット 2016-06-05 20.02.35.png](https://qiita-image-store.s3.amazonaws.com/0/64452/1bea1c96-e201-a224-323a-058f3aec9e06.png "スクリーンショット 2016-06-05 20.02.35.png")

ツイートできるよ
やったね！


## 参考

ブログ：
http://qiita.com/mokumoku/items/bf0460f420acac3c04fc

http://qiita.com/makora9143/items/5bdbab674bea55f56a81

公式ドキュメント：
https://docs.fabric.io/ios/twitter/index.html