AppleWatchアプリ開発第2回 基本的なUI機能

皆さんこんにちわ。 SuperSoftware東京オフィスの高橋です。 第1回:「Hello World!」を…

皆さんこんにちわ。
SuperSoftware東京オフィスの高橋です。
前回は、helloWorld!を表示させてみることで、テキスト表示の仕方を学びました。
2回目の今回は、基本的なユーザーインターフェース(UI)機能を試して見たいと思います。基本的なUIの中でも、特に馴染みの深い「ボタン」と「スイッチ」を使って、何かしらのアクションを起こすアプリを作って見たいと思います。
ちなみにスイッチのイメージは下記のような、
switch
iPhoneユーザーにとっては見慣れたUIです。
〜目次〜
1. プロジェクト作成
2. ボタンの実装
3. スイッチの実装
4. アプリの案出し
5. 実験
6. 感想
1. プロジェクト作成
xcodeからiOS用Appと、watchKit用のプロジェクトを新規作成します。
具体的な方法は、第1回を参考に。
プロジェクト名は、
uiWatchAppと
uiWatchkitAppにしておきます。
スクリーンショット 2016-08-11 9.14.37

また、プロジェクトを作成してストーリーボードを開くと、Interface用とNotification用がそれぞれデフォルトで用意されますが、今回はまだ練習なのでInterface用のみ残すことにします。

(本来、利用する予定がない場合もNotificationSceneを作成することが推奨されているようです。)
スクリーンショット 2016-08-11 9.24.43
2. ボタン実装
では、早速、コーディングしていきましょう!コーディングと言っても、基本的にはストーリーボードでことが済んでしまいます。
2.1. ボタンの配置
まずは、右のユーティリティエリアから「Button」を選択して、得意のドラッグ&ドロップ。
スクリーンショット 2016-08-11 9.35.16
ボタン完成!簡単です。
(補足:iOSアプリのボタンやラベルなどのように、プログラムコードでクラスのインスタンスを作成して画面に追加することはできないようです。→必ずストーリーボードから)
2.2. ボタンの位置&装飾
・色変更
文字色や、背景色を変えることも当然可能。右のユーティリティエリアで、いろいろ試してみましょう。今回は、文字色を赤にしてみました。
・位置の設定
iOS開発でできるような隣のオブジェクトから、xxピクセルずらすとか細かい設定はできません。しかし段階で切り替えることは可能です。
ユーティリティエリアのAlignmentのHorizontal、Verticalで設定してください。今回は、センター揃えの、一番下にボタンを表示しています。
・表示名も変えます
「Button」を「Dangerous!」に変えてみました。
スクリーンショット 2016-08-11 9.55.12
2.3. ボタン押下時のアクションを記述
ストーリーボードのボタンから、ctrlキーを押しながら、InterfaceControllerへ引っ張ります。
そしてConnectionでActionを選択し、NamewodengerButtonとしておきます。
スクリーンショット 2016-08-11 10.25.35

そして、できたファンクション内にボタン押下時のアクションを記述します。一旦、”Pushed!!”という文字列が表示されるように設定しました。

スクリーンショット 2016-08-11 10.30.56
シミュレータでも実機でも、試してみるとコンソール欄に”Pushed!!”が表示されていることを確認できると思います。
3. スイッチ実装
要領はボタンと同様に、ドラッグ&ドロップで配置して、 InterfaceControllerに繋ぎこみます。
スクリーンショット 2016-08-12 9.01.48
3.1. スイッチ切り替え時のアクションを記述
   @IBActionfuncactionSwitch(value:Bool) {
        if value{
print(“ON”)
}else{
print(“OFF”)
        }
    }
そして、実機で試してみると、コンソールには
スクリーンショット 2016-08-12 10.02.38
成功です!
3.2. 表示変更
スイッチのデフォルトはOFFに変えました。
また、Switchという名前も、Secretに変更しました。
いづれも、ユーティリティーエリアから変更が可能です。

スクリーンショット 2016-08-12 10.24.36

4. アプリの案出し
さぁ、パーツの準備は整いました。あとは、これら基本的なパーツの組み合わせで何か実用的な機能をもたせたいと思います。
映画007の世界であれば、時計を操作することで、ボンドカーをコントロールしたり、磁力で女性のドレスのファスナーを下ろしたりできます。やはりAppleWatchにもそういう役割を担ってもらいたいものです。現実世界の何かをコントロールすることで、課題を解決できたらいいなと思います。
ご存知の方も多いと思いますが、弊社エンジニアに土屋さんがいます。以前、土屋さんから、コーディングに没頭するあまり、ついトイレに行くのも忘れギリギリまで我慢してしまうという悩みを聞いたことを思い出しました。
もうこれは、土屋さんをAppleWatchコントロールして、ちゃんとトイレに行っていただくしかありません!
仕様を決めましょう。
・スイッチがONにある状態で、「Degerous!」ボタンを押下
→土屋さんがトイレに行く
・スイッチが右にある状態で、「Degerous!」ボタンを押下
→土屋さんがトイレから出てくる
というものです。
具体的なコーディングは以下です。内容は単純です。
①クラス変数tuttiを用意し、初期値は0にしておきます
②今まで、ON/OFF記述していたところでtutti変数に1/0をセットします。
③degerButtonが押下されたタイミングで、tuttiの値に応じて、土屋さんをトイレから出し入れします。
classInterfaceController:WKInterfaceController{
    var tutti:Int = 0 //①
    @IBAction func actionSwitch(value: Bool) {
       ifvalue{
            tutti = 1//①
        }else{
tutti  =0
        }

    }

@IBAction func degerButton() {
if tutti == 1{
print(“土屋さんが、トイレに行く!”)
}else{
print(“土屋さんが、トイレから帰ってくる!”)
}

    }
5. 実験
さぁ、実際に試してみましょう!
まずSecretSwitchをONにして、Dangerousボタンを押下します!
IMG_6859
xcode上で見てみると、正しく動いています。
スクリーンショット 2016-08-12 11.00.06
そして、土屋さんの様子を見てみると、
現実世界でもバッチリ、トイレに行きました!
さぁ、そろそろ帰ってこさせましょう!
SecretSwitchをOFFにして、Dangerousボタンを押下します!
IMG_6858
xcode上では成功です。
スクリーンショット 2016-08-12 10.58.19
そして、ドアに注目していると、
 
出てきました!どことなくスッキリした表情に変わっていました。
6. まとめ
■基本的なUI機能の使い方
AppleWatchは画面が小さいので、文字を読みたくないですし、
複雑な操作もしたくありません。なので、今回練習した、ボタン、スイッチ切り替えぐらいの操作が限界なような気がしています。
今後のApllleWatchアプリを検討する時にはその辺も考慮に入れることにします。
■現実世界の課題解決
IoTがトレンドではありますが、今回作成のアプリは言わば、IoHという感じでしょうか(HはHuman)。
今回はあくまでイメージとしての完成でしたが、人間にチップを埋めて制御するみたいなことは今後リアルに出てくるかもしれませんね。