Apple WatchアプリSuperRhythmTimeをつくってみた

Apple Watchアプリ “SuperRhythmTime” をつくってみた 佐久間捷⽮

アプリについて “SuperRhythmTime” ⼀定間隔でタッチし続けて、 何回できるを競う暇つぶしのアプリ ダウンロードURL https://apps.apple.com/us/app/superrhythmtime/id6 740461196?ign-itscg=30200&ign-itsct=apps_box_link &mttnsubad=6740461196

• https://apps.apple.com/us/app/superrhythmtime/id6740461196?ign-itscg=30200&ign-itsct=apps_box_link&mttnsubad=6740461196

つくった理由 AppleWatchを健康⽬的以外でつかってみたら⾯⽩いかなとおもったため また、iPhoneの電池がやばくて、AppleWatchで時間潰す⽅法が欲しくなった機会がそこそ こあった（例：満員電⾞） →だけど、健康管理以外の有名なアプリを聞いたことがないので、⾃分でつくってみようと なった

やる、やらないこと ● やる ○ ○ ● シンプルな操作だけにする AppleWatch専⽤アプリにする やらない ○ ○ ⾳の再⽣と振動機能 ■ この２つは、Applewatchの通知とかぶる可能性があり、 また、画⾯を⾒ないで操作したときに誤認識しやすそうだったためやらないことにした 標準外のライブラリの使⽤ ■ とてもシンプルなアプリであるため、審査を通過するか微妙と考え、ライブラリの検証 にこだわって時間をかけたがリリースできないを避けるため、使⽤しないこととした

アプリの案だし（ポエム） 陸上部時代、休憩時間によくやっていた５秒でぴったりストップウォッチを⽌めるシンプル なゲームと同じレベルのゲームがよさそうだなー そういえば、学⽣時代、⾳痴だったなー、⾳楽の授業、３３７拍⼦ってむずかったなー リズムといえばメトロームあったけど、あれで練習すればよかったのか？ →これってなにかゲームにできそう

アプリの⼯夫点 ● 既存の操作を間違って操作しない部分をタッチしてもらう ○ ○ ● リアクションは⼤きく表⽰ ○ ● 画⾯上部、下部が通知や電話を受けるときに使うので避ける 画⾯の左上のオレンジ部分をタップすること促す ただでさえ⼩さい画⾯＋指でかくれるため、⼤きく数字を表⽰ スコアは、⼀定後ごと＋ゲームオーバー時だけ表⽰ ○ 常に表⽰するには画⾯がせますぎるため

アプリランキング アプリのカテゴリを”ゲーム”の”ミュージック”にしたら、 ダウンロード数１で２３位だった →おそらく新規アプリであること 有料アプリの⺟数が少ないため

AppleWatchアプリつくってわかったこと(プログ ラム以外） ● ● ● ● AppleWatchアプリのストアには、動画をアップできない AppleWatchアプリは、iPhoneのAppStoreアプリで検索できる AppleWatchアプリは、iOS⽤アプリのランキングに含まれる AppleWatchアプリは、それ⽤のランキングなどがないので、⼈の⽬につかない

プログラムについて

実装 ● Swift ○ SwiftUI + SpriteKit

SwiftUI? コード量を減らして、appleのUIフレームワークを使いよくあるアプリをつくれるApple公式 のフレームワーク https://developer.apple.com/jp/xcode/swiftui/ SwiftUIでできることで、アプリが実現できるなら使う価値あり

• https://developer.apple.com/jp/xcode/swiftui/

SpriteKit? Apple公式の画像、テキスト、矩形の描画を簡単にできるようにしたフレームワーク https://developer.apple.com/documentation/spritekit/ iOS,macOS,tvOS,visionOSなどで⼤体つかえる サービス⽤アプリは、UIのフレームワークをつかってきっかりしたものを作るイメージ。そ こから外れた表現をしたいときにつかうフレームワーク

• https://developer.apple.com/documentation/spritekit/

構造

構造説明 SwiftUIの中で、SKScene(Spritkitのクラス）を作成し、その中で表⽰の処理を⾏っていま す。 ● SwiftUIの役割 ○ SKSceneの⽣成 ○ ● タッチ操作開始の検出 SKSceneの役割 ○ ゲームの状態管理 ○ 表現部分全般

SKScene ● 上書きしたメソッド ○ ○ ● sceneDidLoad ■ 画⾯表⽰できたら１度だけ呼ばれるメソッド ■ ここで画⾯表⽰の準備をしました update ■ UnityのUpdateメソッドとほぼ同じもの タッチされたらSwiftUIから呼ばれるメソッド ○ OnTouched ■ ゲーム状態ごとに分岐メソッドを呼び出しています

SKScene - 円表現 SKSceneでSKSpriteNodeを作成し、フラグメントシェーダーを割り当て、 表現しています シェーダーには基準となる時間と、現時間をわたして、 円がうごくようにしています METALで書く必要がありますが、ほぼGLSL(らしい）

SKScene - 数字表現 SKSceneでSKSpriteNodeを作成し、SKActionクラスで簡単なフェード表現を ⾏っています SKSpriteNodeには、数字画像を割り当ててあります SKActionは、フェードのカーブ調整ができないため、 サードパーティライブラリを⼊れるのがベストっぽい

ありがとうご ざいました 次回作にご期待ください