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
260
Kotlin で AWS Lambda 動かしてみた Server-Side Kotlin Meetup vol.9 @Kaito-Dogi
kaito_dogi
1
450
フロントエンドエンジニアの友人と“型”で話がすれ違った原因 YUMEMI.grow合同LT会in横浜 @Kaito-Dogi
kaito_dogi
1
660
Other Decks in Programming
See All in Programming
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
97
34k
効率的な開発手段として VRTを活用する
ishkawa
0
150
AIともっと楽するE2Eテスト
myohei
8
2.9k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
580
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
6.7k
Goで作る、開発・CI環境
sin392
0
260
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
CDK引数設計道場100本ノック
badmintoncryer
2
360
NEWT Backend Evolution
xpromx
1
110
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
12k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
220
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
870
Featured
See All Featured
Facilitating Awesome Meetings
lara
54
6.5k
What's in a price? How to price your products and services
michaelherold
246
12k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Invisible Side of Design
smashingmag
301
51k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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
ありがとうございました🙌