Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ウォッチフェイス作ってみた shibuya.apk #41 @Kaito-Dogi
Search
Kaito-Dogi
April 21, 2023
Programming
0
1.4k
ウォッチフェイス作ってみた shibuya.apk #41 @Kaito-Dogi
2023/04/21 開催の shibuya.apk にて登壇させていただきました。
-----
ウォッチフェイスを作ってみました!
Kaito-Dogi
April 21, 2023
Tweet
Share
More Decks by Kaito-Dogi
See All by Kaito-Dogi
Expo Router は Expo 導入の決め手となるか フロントエンドカンファレンス沖縄2023 @Kaito-Dogi
kaito_dogi
3
4.1k
Android でも Haptics 入門 potatotips #84 @Kaito-Dogi
kaito_dogi
0
280
Kotlin で AWS Lambda 動かしてみた Server-Side Kotlin Meetup vol.9 @Kaito-Dogi
kaito_dogi
1
470
フロントエンドエンジニアの友人と“型”で話がすれ違った原因 YUMEMI.grow合同LT会in横浜 @Kaito-Dogi
kaito_dogi
1
660
Other Decks in Programming
See All in Programming
Pull-Requestの内容を1クリックで動作確認可能にするワークフロー
natmark
2
510
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1.1k
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
230
What's new in Spring Modulith?
olivergierke
1
150
CSC509 Lecture 03
javiergs
PRO
0
340
Go言語はstack overflowの夢を見るか?
logica0419
0
290
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
330
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.7k
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
After go func(): Goroutines Through a Beginner’s Eye
97vaibhav
0
390
CSC509 Lecture 05
javiergs
PRO
0
300
All About Angular's New Signal Forms
manfredsteyer
PRO
0
160
Featured
See All Featured
A Tale of Four Properties
chriscoyier
161
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
33
2.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Why Our Code Smells
bkeepers
PRO
340
57k
Navigating Team Friction
lara
190
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Documentation Writing (for coders)
carmenintech
75
5.1k
Visualization
eitanlees
149
16k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Transcript
ウォッチフェイス作ってみた shibuya.apk #41 @Kaito-Dogi
自己紹介 ❏ どぎー ❏ 株式会社ゆめみ ❏ Androidエンジニア ❏ Pixel Watch
愛用中 @Kaito_Dogi @Kaito-Dogi
スマートウォッチ使ってますか!
画像:https://store.google.com/jp/product/google_pixel_watch?hl=ja
毎日使ってるのに味気ない… 自分だけのカスタマイズをしたい…
ウォッチフェイスで実現できる!
ウォッチフェイスとは? ❏ 「文字盤」 ❏ ユーザーが自身を表現できる 分かりやすい手段 ❏ データソースからのデータを 表示できる(追加機能) ❏
タップイベントの処理
ウォッチフェイスを 自分でも作りたい!
ウォッチフェイスは手軽に作れる!
そう、WatchFaceStudioならね
WatchFaceStudioとは? ❏ 「ウォッチフェイスデザインツール」 ❏ コーディング不要! ❏ Google Play に公開可能 ❏
Samsung が作成 ❏ https://developer.samsung.com/watch-f ace-studio/download.html
画像:https://developer.android.com/training/wearables/wfs
コンポーネント ❏ テキスト ❏ 静的な標準テキスト ❏ 動的なデータテキスト(タグ式を使用) ❏ 図形(楕円・長方形など)
❏ 画像・アニメーション ❏ AGIF・Lottie・WebP の再生(マルチメディア) ❏ アナログ時計・デジタル時計 ❏ プログレスバー
ジャイロ ❏ 端末の傾きに応じて以下を 変更できる ❏ 大きさ ❏ 位置 ❏ 傾き
❏ 不透明度
アニメーション ❏ 複数の画像をパラパラマンガのように再生 ❏ 画像ごとに Frame を設定 ❏ メイン画面で再生して確認可能
❏ AGIF・Lottie・WebP のような、 既にアニメーション化されている画像は マルチメディアで再生!
実際に作ってみた!
❏ タグ式で時刻を表示 ([HOUR_1_12_Z]):([MIN_Z]):([SEC_Z]) ❏ デジタル時計をカーブ ❏ 太陽くんをジャイロで動かす
❏ 白くまくんをアニメーションで動かす 01~12 00~59 00~59
水平時 手首:https://developer.android.com/training/wearables/wfs
注意すること ❏ 常時オン状態で使用できる ピクセルのうち15%以下を使用 する設計を推奨 ❏ 大幅に超えると拒否される! ❏ 常時オン状態は自動的に生成 されるので自分で調整
ウォッチフェイスのコードを 眺めてみる👀
class CustomWatchFaceService : WatchFaceService() { override fun createUserStyleSchema(): UserStyleSchema =
// ... override fun createComplicationSlotsManager( currentUserStyleRepository: CurrentUserStyleRepository ): ComplicationSlotsManager = // ... override suspend fun createWatchFace( surfaceHolder: SurfaceHolder, watchState: WatchState, complicationSlotsManager: ComplicationSlotsManager, currentUserStyleRepository: CurrentUserStyleRepository ): WatchFace = // ... }
class CustomWatchFaceService : WatchFaceService() { override fun createUserStyleSchema(): UserStyleSchema =
// ... override fun createComplicationSlotsManager( currentUserStyleRepository: CurrentUserStyleRepository ): ComplicationSlotsManager = // ... override suspend fun createWatchFace( surfaceHolder: SurfaceHolder, watchState: WatchState, complicationSlotsManager: ComplicationSlotsManager, currentUserStyleRepository: CurrentUserStyleRepository ): WatchFace = // ... } WatchFaceService を継承
class CustomWatchFaceService : WatchFaceService() { override fun createUserStyleSchema(): UserStyleSchema =
// ... override fun createComplicationSlotsManager( currentUserStyleRepository: CurrentUserStyleRepository ): ComplicationSlotsManager = // ... override suspend fun createWatchFace( surfaceHolder: SurfaceHolder, watchState: WatchState, complicationSlotsManager: ComplicationSlotsManager, currentUserStyleRepository: CurrentUserStyleRepository ): WatchFace = // ... } 3つのメソッドを override
class CustomWatchFaceService : WatchFaceService() { override fun createUserStyleSchema(): UserStyleSchema =
// ... override fun createComplicationSlotsManager( currentUserStyleRepository: CurrentUserStyleRepository ): ComplicationSlotsManager = // ... override suspend fun createWatchFace( surfaceHolder: SurfaceHolder, watchState: WatchState, complicationSlotsManager: ComplicationSlotsManager, currentUserStyleRepository: CurrentUserStyleRepository ): WatchFace = // ... } スキーマの設定 (色・分針の長さなど)
class CustomWatchFaceService : WatchFaceService() { override fun createUserStyleSchema(): UserStyleSchema =
// ... override fun createComplicationSlotsManager( currentUserStyleRepository: CurrentUserStyleRepository ): ComplicationSlotsManager = // ... override suspend fun createWatchFace( surfaceHolder: SurfaceHolder, watchState: WatchState, complicationSlotsManager: ComplicationSlotsManager, currentUserStyleRepository: CurrentUserStyleRepository ): WatchFace = // ... } Complication スロット の初期化
class CustomWatchFaceService : WatchFaceService() { override fun createUserStyleSchema(): UserStyleSchema =
// ... override fun createComplicationSlotsManager( currentUserStyleRepository: CurrentUserStyleRepository ): ComplicationSlotsManager = // ... override suspend fun createWatchFace( surfaceHolder: SurfaceHolder, watchState: WatchState, complicationSlotsManager: ComplicationSlotsManager, currentUserStyleRepository: CurrentUserStyleRepository ): WatchFace = // ... } ウォッチフェイスを レンダリング(描画)
良きスマートウォッチライフを😚
参考記事 ❏ Build watch faces | Android Developers https://developer.android.com/training/wearables/watch-faces
❏ Watch Face Studio | Android Developers https://developer.android.com/training/wearables/wfs ❏ WatchFace Sample (Kotlin) https://github.com/android/wear-os-samples/tree/main/WatchFaceKotlin ❏ Watch Face Studio | Samsung Developers https://developer.samsung.com/watch-face-studio/overview.html ❏ DroidKaigi 2022 - Introduction to Wear OS Application Development | Ryo Yamazaki https://youtu.be/o0HhsnVAGNA ❏ Watch Face Studio でウォッチフェイスを作ろう https://funnelbit.hatenablog.com/entry/2022/11/28/150138 ❏ [Android] Watch Faceをささっと作成 https://cocoamix.jp/archives/9482
ありがとうございました🙌