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
CursorはMCPを使った方が良いぞ
taigakono
1
190
ふつうの技術スタックでアート作品を作ってみる
akira888
0
150
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
440
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
500
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
240
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
220
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
Select API from Kotlin Coroutine
jmatsu
1
190
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
480
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
650
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
540
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
540
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Site-Speed That Sticks
csswizardry
10
660
Music & Morning Musume
bryan
46
6.6k
Docker and Python
trallard
44
3.4k
Navigating Team Friction
lara
187
15k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
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
ありがとうございました🙌