↑クリックして拡大
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大

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

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です。

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

サンプル画像

なんだかキモい

まとめ

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

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

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

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


2021-05-06 14:04:37

LINEのアニメーションスタンプ制作の落とし穴、、、失敗談

ゴールデンウィークにLINEスタンプを作成してみました。 作り切って申請も通したんですが、意図したアニメーションと違う、、、、 LINEクリエーターの画面だと、アニメーションのプレビュー...

2021-05-01 18:05:35

久しぶりのAdmobをobjective-cに実装。コンパイルエラーだらけ。バーミッション不具合でエミュレータにインスコできない。

忘れないようにメモ エミュレータにアプリをインストールする際にパーミッション系のエラーがでた時、また、iphone実機にインストールする際にも権限系のエラーが出る場合。 ターゲット→ex...

2021-04-26 18:06:43

めちゃめちゃ久しぶりにFlashの恩恵を受けた話。LINEスタンプ制作。APNGって何なの。

私は以前今は亡きFlashをつかった仕事。Flash デベロッパーとして仕事してる時期がありました。 ただ、Flashは下火になりましたので10年以上遠ざかっていて、恩恵にも触れなかったのです...
このエントリーをはてなブックマークに追加
右側のFacebookのLikeをクリック頂けると記事更新の際に通知されますので宜しければご利用下さい!