Apple Watchのアプリを開発してみた


今日Apple WatchがDeveloper解禁しました。
せっかくなのでちょっとサンプルアプリを作ってみようとswiftで簡単なアプリを作ってみました。

## まずはじめに

[WatchKit](https://developer.apple.com/watchkit/)の説明はここに書いています。

予想通りApple WatchにはWatchKitという名のframeworkが用意されてます。
[先日osxアプリを作ってみました](http://qiita.com/moriyaman/items/e81acaf5261fb6e1e1f9)が、これでAppleにはIntefaceframeworkはAppKit、UIKit、WatchKitが存在します。

まぁそれなりに似ているので、1つ理解すればかなりハードルは下がるかと。

とりあえず、[ここ](https://developer.apple.com/xcode/downloads/)よりXcode6.2 betaをインストールしてください。

## アーキテクチャ

構成としては、公式HPにもあるように

・WatchKitExtention
・Watch App

の2つからなります。

下記はApple公式の画像になりますが、
簡単にいうとExtention側でデータを引っ張ってWatch App側で表示を担うといった構成になります。

![スクリーンショット 2014-11-19 22.25.32.png](https://qiita-image-store.s3.amazonaws.com/0/5365/a06bd904-985e-55e2-2c79-385aeb440320.png "スクリーンショット 2014-11-19 22.25.32.png")

Watch Appは主に3つのInterFaceが用意されています。

###・Watch Apps(main)

Watchアプリのメインの部分です。
アプリが起動した際に表示されます。

###・Glances

必須ではありません。アプリから重要な情報を伝える際に使う部分です。

###・Notifications

通知を表示する際に使います。

## Apiに関して

すでにQiitaにまとめてくれている方がいるので、こちらの方がわかるかと。

[1分でつくれるAppleWatch対応アプリ & WatchKit 全API解説](http://qiita.com/shu223/items/8ac4883105647db41b99)

あまりに数が少なくてびっくりしました。。。w

## 実際に作ってみる

Table等を使って簡単なリスト表示するアプリを作ってみます。

#### まずはApple Watchを作れるところまでの設定

①Xcode6.2を立ち上げてまずは、通常どおりiosアプリを作ってください。
②下記の部分をクリック
![スクリーンショット_2014-11-19_22_36_40.png](https://qiita-image-store.s3.amazonaws.com/0/5365/6c8c3c5a-518c-bf3e-5d67-36417e967b48.png "スクリーンショット_2014-11-19_22_36_40.png")
③Add Target...をクリック
④iOSのリストの中にある Apple Watch > Watch Appをクリック。

するとStoryboardにいくつかのInterFaceが追加されているかと思います。

#### 早速コードを書いてみる

```InterfaceController.swift
import UIKit
import WatchKit

class InterfaceController: WKInterfaceController {

    @IBOutlet weak var table: WKInterfaceTable!
    
    var rows = ["太郎?", "花子?", "サンタクロース?"]
    
    override init(context: AnyObject?) {
        // Initialize variables here.
        super.init(context: context)
        
        self.table.setNumberOfRows(self.rows.count, withRowType: "TableRow")
        
        for index in 0..<self.rows.count {
            var theRow = self.table.rowControllerAtIndex(index) as TableRow
            theRow.tableRowLabel.setText(self.rows[index])
        }
        
    }
    
    override func table(table: WKInterfaceTable, didSelectRowAtIndex rowIndex: Int) {
        self.pushControllerWithName("DetailController", context: self.rows[rowIndex])
    }

}

```

```TableRow.swift
import UIKit
import WatchKit

class TableRow: NSObject {

    @IBOutlet weak var tableRowLabel: WKInterfaceLabel!

}

```

```DetailController.swift
import UIKit
import WatchKit

class DetailController: WKInterfaceController {
    
    
    @IBOutlet weak var detailLabel: WKInterfaceLabel!
    
    override init(context: AnyObject?) {
        // Initialize variables here.
        super.init(context: context)
        
        var detailStr = context as String
        self.detailLabel.setText(detailStr)
    }

    
}

```

storybordはこんな感じです。

![スクリーンショット 2014-11-19 23.24.34.png](https://qiita-image-store.s3.amazonaws.com/0/5365/45fc305f-aaef-5d6b-2b20-f3bf914f9d68.png "スクリーンショット 2014-11-19 23.24.34.png")


難しくはないので、説明はそこまで不要かと思いますが、簡単にすると、

InterfaceControllerのinitでデータをセットし、rowのそれぞれに対してデータを設定しています。

クリックすると
```table(table: WKInterfaceTable, didSelectRowAtIndex rowIndex: Int)```
メソッドが呼び出され、DetailControllerをpushしてます。

動きに関してはこんな感じです。
想像以上に簡単w

![gif-1.gif](https://qiita-image-store.s3.amazonaws.com/0/5365/4cd08646-3756-0591-45e0-b7885cea96c6.gif "gif-1.gif")


## Notification/Glance をいじってみる


### Glance

Glanceに関してはinterface controllerを用いて実装します。
勿論storybordにLabelを置いてbuildするだけで、確認はできます。

※buildするときは、設定を変更する必要があります。
Appleの公式ページに乗っているのを見れば分かりますが、一応こちらにスクショ貼っておきます。

![スクリーンショット 2014-11-19 22.56.58.png](https://qiita-image-store.s3.amazonaws.com/0/5365/01648860-bb0e-39ee-ee31-52bb084545c2.png "スクリーンショット 2014-11-19 22.56.58.png")

そこまで多くはないですが、glance用にいくつかのAPIは用意されているようです。
詳しくは[ここ](https://developer.apple.com/library/prerelease/ios/documentation/General/Conceptual/WatchKitProgrammingGuide/TheGlanceController.html#//apple_ref/doc/uid/TP40014969-CH16-SW1)に載っています。

### Notification

notificationはWKUserNotificationInterfaceControllerを用いて実装する事が可能です。
didReceiveRemoteNotification含め3つしかAPIがないのでこれまたびっくり仕様ww

ちなみにExtentionのSupporting Filesに入っているPushNotificationPayload.jsonに設定が書いています。
custom notificationを作る際はここを変更する必要があります。

ちなみに簡単にいじってみると

```PushNotificationPayload.json
{
    "aps": {
        "alert": "Hey Atrae Test",
        "title": "Optional title",
        "category": "test"
    },
    
    "WatchKit Simulator Actions": [
        {
            "title": "OK",
            "identifier": "firstButtonAction"
        }
    ],
    
    "customKey": "Use this file to define a testing payload for your notifications. The aps dictionary specifies the category, alert text and title. The WatchKit Simulator Actions array can provide info for one or more action buttons in addition to the standard Dismiss button. Any other top level keys are custom payload. If you have multiple such JSON files in your project, you'll be able to choose between them in when selecting to debug the notification interface of your Watch App."
}
```

![スクリーンショット 2014-11-19 23.23.27.png](https://qiita-image-store.s3.amazonaws.com/0/5365/7ad312cb-5ee8-b1dc-c12d-01b982ec973d.png "スクリーンショット 2014-11-19 23.23.27.png")

## 最後に

思った以上に簡単に開発できたというか...思った以上にios側で処理してしまうのでびっくりしました。
まぁ電池の面とか諸々考慮するとこういう設計にせざるを得なかったんでしょうが。

SmartWatchはAndroidやPebbleを含めまだ市場としては、確立していませんが、Apple Watchが一つ大きな波になる可能性は高いので引き続き要チェックですね。