WatchKitでWEBサービスと連携するアプリを作る(Qiita)


## Agenda
WatchKit（Xcode6.2β build:6C86e）で下記をやります。
1. Qiitaの記事一覧(WatchKitタグ)を表示してみる
2. Qiitaの記事一覧を更新するメニューをつけてみる
3. Qiitaの記事をストックしてみる

### 動作イメージ(gif)
![画像の説明](https://github.com/tid-kijyun/QiitaWatch/wiki/preview.gif)

### コード
[https://github.com/tid-kijyun/QiitaWatch](https://github.com/tid-kijyun/QiitaWatch)


### 使用API
Qiita API v1を使用しました。([Qiita API document](https://qiita.com/docs))
v2で作っていたのですが、記事をstockしているか一回で取れなかったのでv1にしました・・・。

### 注意
+ 簡略化の為、QiitaアカウントID/Passをコードに埋め込む形にしています。
+ ストック操作を実行したい場合は自分のアカウントID/PASSを設定してください。
+ 単体で動作させるため、OSSは使用していません。

## Qiita記事の一覧を表示してみる
![aw_qiitaview.png](https://qiita-image-store.s3.amazonaws.com/0/45742/7ec35c8c-5c46-2027-bd78-93e7e47e8eab.png "aw_qiitaview.png")
WatchKitタグが付いたQiita記事の一覧を表示してみます。

### プロジェクトの作成
![1.png](https://qiita-image-store.s3.amazonaws.com/0/45742/68d01088-3a03-033b-f6ac-437b4aaf267f.png "1.png")

![2.png](https://qiita-image-store.s3.amazonaws.com/0/45742/ae80ad20-1e8e-b1b2-82a9-dfe204d4c7f1.png "2.png")

![3.png](https://qiita-image-store.s3.amazonaws.com/0/45742/7c48d297-e2c7-d5e9-a240-59381f6d5da3.png "3.png")

### WatchAppの追加
![4.png](https://qiita-image-store.s3.amazonaws.com/0/45742/5914b2bf-3535-7c94-4bf8-b49fc333951a.png "4.png")
![5.png](https://qiita-image-store.s3.amazonaws.com/0/45742/dddccc5f-b01a-1e9f-6061-af39dcb7d086.png "5.png")

### Storyboardの編集(ベースを作る)
![6.png](https://qiita-image-store.s3.amazonaws.com/0/45742/162f3348-ece1-dbdf-b724-8f9861b8c653.png "6.png")

StoryboardでTable/Group/Label/Imageを組み合わせてベースとなる画面を作ります。

### テーブルのレコードクラスを作る

#### クラスを作ってStoryboardで関連付けを行う
テーブルのレコードクラスを作って、Storyboardで関連付けます。

```swift
class HeadLineTableRow: NSObject {
}
```

![8.png](https://qiita-image-store.s3.amazonaws.com/0/45742/ebfee03f-aa32-7b69-6668-ff6b55b4736b.png "8.png")


#### Storyboardの各パーツをコードへ右クリック&ドラッグしてアウトレットを作ります。
![7.png](https://qiita-image-store.s3.amazonaws.com/0/45742/d0889f63-fc22-aedc-6627-cfcf28d8e222.png "7.png")

これを必要なパーツ全てに対して行うとこうなります。

```swift
class HeadLineTableRow: NSObject {
    @IBOutlet weak var icon: WKInterfaceImage!
    @IBOutlet weak var headline: WKInterfaceLabel!
    @IBOutlet weak var author: WKInterfaceLabel!
    @IBOutlet weak var stock: WKInterfaceLabel!
}
```

### コーディング
ほとんどWatchKit関係ないので一部のみ。

#### APIをたたく
普通にアクセスすればOKです。
例えば、QiitaでWatchKitに関する投稿を取得する場合はこんな感じ。
他に、NSURLSession使ってもいいですし、Alamofire使っても動くと思います。

```
let request = NSMutableURLRequest(URL: NSURL(string: "https://qiita.com/api/v1/tags/watchkit/items")!)
NSURLConnection.sendAsynchronousRequest(request, queue: NSOperationQueue.mainQueue()) {
    (response, data, error) -> Void in
        // 略
    }
}
```

#### テーブルにレコードを表示する
WKInterfaceTableのsetNumberOfRowsメソッドでレコード数を設定します。

```swift
@IBOutlet weak var headLineTable: WKInterfaceTable!

func loadTableData() {
    // レコード数を設定
    headLineTable.setNumberOfRows(self.articles.count, withRowType: "default")

    for (i, article) in enumerate(self.articles) {
        if var row = headLineTable.rowControllerAtIndex(i) as? HeadLineTableRow {
            row.article = article
        }
    }
}
```



## Qiita記事の一覧を更新するメニューをつけてみる
![qo_qiitamenu.png](https://qiita-image-store.s3.amazonaws.com/0/45742/9a8e1e17-094c-ccf5-8eff-296e22d4eb54.png "qo_qiitamenu.png")

Force Touch(シミュレーターだとタップ長押し)で表示されるメニューに更新メニューを付けて、
記事一覧を更新できるようにしてみます。

### Storyboardを編集(メニューを追加)
#### StoryboardでMenuを追加
![9.png](https://qiita-image-store.s3.amazonaws.com/0/45742/9baa1905-da99-5d91-b142-424b6310d282.png "9.png")
一見追加されたのかわかりずらいですが・・・。
![10.png](https://qiita-image-store.s3.amazonaws.com/0/45742/bd0580b3-b314-8b09-11d8-d565619a0ad0.png "10.png")
#### メニューがタップされた時のアクションを指定
![11.png](https://qiita-image-store.s3.amazonaws.com/0/45742/676d4a58-c1c9-8d1d-3c09-1b434b31ba95.png "11.png")
selectorをコードにドラッグ＆ドロップしてActionを作成します。

```swift
@IBAction func menuItemTapped() {
    self.reloadData()
}
```

## Qiita記事をストックしてみる
![aw_qiitastock.png](https://qiita-image-store.s3.amazonaws.com/0/45742/7264f6e5-efb8-6c9f-20bd-cf9316637bf8.png "aw_qiitastock.png")


記事をタップしたらストック/アンストックを実行するようにしてみます。

Controllerの下記メソッドが呼ばれるのでoverrideします。
```func table(table: WKInterfaceTable, didSelectRowAtIndex rowIndex: Int)```

```swift
override func table(table: WKInterfaceTable, didSelectRowAtIndex rowIndex: Int) {
    if var row = table.rowControllerAtIndex(rowIndex) as? HeadLineTableRow {
        Qiita.stock(accessToken, itemId: row.uuid, stock: row.isStock) {
            row.isStock = !row.isStock
        }
    }
}
```

## まとめ
思ったより機能が少なかったWatchKitですが、
Webサービスと組み合わせたらいろいろできるんじゃないかなぁと思います。

ただキャッシュとかちゃんとしないとモリモリ電池食べそう。
いろいろわからないので早く実機が欲しいですね！