Swift転職なら=>【LevTech】
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大

頭痛が減ったので共有です!

rebuild.fmを応援しています!

HOME > WatchKitでタイマーアプリを作成する

WatchKitでタイマーアプリを作成する。

サンプル画像

簡単なアプリを作成しながらAppleWatchを学んでいきます。前回の記事で大まかな動きは理解できましたので、 つぎはAppleWatchとアプリとの連携をタイマー機能を利用して検証していきます


参考:Apple Watchでカウントダウンアプリを作る

やってみた(AppleWatch上でのタイマー処理)

ひとまず簡単なものを作成してみます。iPhone端末のメインアプリ側との連携をしないで、AppleWatch側だけでタイマー処理設定ー>実行するタイマーです

サンプル画像

StoryBoardに手動でラベル(WKInterfaceLabel)をドラッグして、WatchKit ExtensionのInterfaceController.swiftにIBOutletで関連付けます。(※プログラムから動的にaddSubView追加しようと しましたができませんでした、できないのかな?方法はまだ不明。)

タイマー処理を追加します。


import WatchKit
import Foundation

class InterfaceController: WKInterfaceController {
    
    @IBOutlet weak var timerLabel: WKInterfaceLabel!
    var higeCnt = 0;
    
    override func awakeWithContext(context: AnyObject?) {
        super.awakeWithContext(context)
        var timer = NSTimer.scheduledTimerWithTimeInterval(1.0, target: self, selector: Selector("onHigenobita"), userInfo: nil, repeats: true);
    }
    func onHigenobita(){
        //ここが実行されます
        timerLabel.setText("ひげが\(++higeCnt)本のびた");
    }

    override func willActivate() {
        // This method is called when watch view controller is about to be visible to user
        super.willActivate()
    }

    override func didDeactivate() {
        // This method is called when watch view controller is no longer visible
        super.didDeactivate()
    }
}

サンプル画像

特に問題なくAppleWatchでもひげが伸びるタイマーを作成できました!

カスタマイズ

どうせなので以下のアニメーションgif画像も一緒に表示できるかを検証してみます。

ヒゲサンプル画像

そもそもアニメーションGIFを表示できるのか


参考:WatchKit Framework Reference WKInterfaceImage Class Reference
参考:WatchKitでWKInterfaceImageを使ってアニメーション

このあたりを読むとWKInterfaceImageはアニメーションGIFをそのまま読み込むのは無理そうで、パラパラマンガ的に表示させるとのことです。ということで、 このサイトでgifを分割します。こんな便利なサイト知りませんでした、超オススメ! Gifをフレームに分割してくれるサイト=ezgif.com

サンプル画像サンプル画像

このサイトからgifのフレームをゲット!そのままだとXCodeでインポートできなかったのでJpegに変換

ヒゲサンプル画像

イメージアセットに追加します。

ヒゲサンプル画像

StoryBoardにWKInterfaceImageをドラッグして追加して同じようにIBOutletで関連づけます。(Ctrlドラッグ)

ヒゲサンプル画像

プロパティで、imageファイル名(連番)、Duration, Animateを調整します。プレビューの画像がはてなになるけどOKです。

そして、実行すると、、、、

サンプル画像

なんだかキモい

まとめ

最終的にキモいものが出来上がってしまいました。ごめんなさい。

前の記事はこちらからです!

次の記事はこちらからです!

↓こんな記事もありますよ!

Pre特殊文字難民

記事を書いている時によくつまずくことがあります。preでコードを表示する際に、 カッコを使うと文章が消えてしまったり、ドルマークの変数が表示できなかったり。その度に検索して探しているのでサイトの中に入れてしまいます。 以前のバックスラッシュもそうですが、こういった特殊文字難民対策のページにしておきます。

新しくなったLawsonの無料WiFiを試してみた

ネットでローソン無料Wifiを調べていたのですがネットを接続するにはアプリが必要との誤情報が多かった(今まではアプリが必要だった)ですが、2015年の6月からはアプリの必要ありません。 Wifiで接続して登録すればPCからでも利用できました。手順を記載してまいります。

アップルWatchから親アプリケーションへデータ送信

前回の記事では実機上で親アプリケーションからAppleWatchにイベントを送るのができなかった。 Notificationでできるはずなのですが、動作してくれなかった、、、、、。今回はいったん逆の時計から親アプリへのデータ送信の方法サンプルサイト をQiita様の中の記事でみつけましたので検証してみます。
このエントリーをはてなブックマークに追加
右側のFacebookのLikeをクリック頂けると記事更新の際に通知されますので宜しければご利用下さい!