Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
39
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@_tid_

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

Agenda

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

動作イメージ(gif)

画像の説明

コード

https://github.com/tid-kijyun/QiitaWatch

使用API

Qiita API v1を使用しました。(Qiita API document)
v2で作っていたのですが、記事をstockしているか一回で取れなかったのでv1にしました・・・。

注意

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

Qiita記事の一覧を表示してみる

aw_qiitaview.png
WatchKitタグが付いたQiita記事の一覧を表示してみます。

プロジェクトの作成

1.png

2.png

3.png

WatchAppの追加

4.png
5.png

Storyboardの編集(ベースを作る)

6.png

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

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

クラスを作ってStoryboardで関連付けを行う

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

class HeadLineTableRow: NSObject {
}

8.png

Storyboardの各パーツをコードへ右クリック&ドラッグしてアウトレットを作ります。

7.png

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

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メソッドでレコード数を設定します。

@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

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

Storyboardを編集(メニューを追加)

StoryboardでMenuを追加

9.png
一見追加されたのかわかりずらいですが・・・。
10.png

メニューがタップされた時のアクションを指定

11.png
selectorをコードにドラッグ&ドロップしてActionを作成します。

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

Qiita記事をストックしてみる

aw_qiitastock.png

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

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

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サービスと組み合わせたらいろいろできるんじゃないかなぁと思います。

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

39
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
39
Help us understand the problem. What is going on with this article?