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
460
フロントエンドエンジニアの友人と“型”で話がすれ違った原因 YUMEMI.grow合同LT会in横浜 @Kaito-Dogi
kaito_dogi
1
660
Other Decks in Programming
See All in Programming
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
980
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
AWS Serverless Application Model入門_20250708
smatsuzaki
0
130
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
6
880
TDD 実践ミニトーク
contour_gara
0
150
Infer入門
riru
4
1.6k
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
1
310
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
470
令和最新版手のひらコンピュータ
koba789
14
8k
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
110
A Gopher's Guide to Vibe Coding
danicat
0
170
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
210
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
Designing Experiences People Love
moore
142
24k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
BBQ
matthewcrist
89
9.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
How to Ace a Technical Interview
jacobian
279
23k
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
ありがとうございました🙌