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.1k
ウォッチフェイス作ってみた 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
doggy
3
3.2k
Android でも Haptics 入門 potatotips #84 @Kaito-Dogi
doggy
0
200
Kotlin で AWS Lambda 動かしてみた Server-Side Kotlin Meetup vol.9 @Kaito-Dogi
doggy
1
300
フロントエンドエンジニアの友人と“型”で話がすれ違った原因 YUMEMI.grow合同LT会in横浜 @Kaito-Dogi
doggy
1
600
Other Decks in Programming
See All in Programming
Java 22 Overview
kishida
1
180
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5.2k
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180
SIMD Parallel Programming with the Vector API
josepaumard
0
160
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
410
What We Can Learn From OSS
inouehi
0
420
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
Git Lint
bkuhlmann
4
750
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
180
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
[技育CAMPアカデミア]アイディアを形に!【超入門】スマホアプリ開発〜リリースまでの流れをご紹介
teamlab
PRO
0
370
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Writing Fast Ruby
sferik
621
60k
Designing Experiences People Love
moore
136
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
The Mythical Team-Month
searls
216
42k
The Illustrated Children's Guide to Kubernetes
chrisshort
31
46k
Music & Morning Musume
bryan
41
5.6k
Navigating Team Friction
lara
178
13k
Statistics for Hackers
jakevdp
789
220k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
Clear Off the Table
cherdarchuk
84
310k
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
ありがとうございました🙌