Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Wear OS Application Development

ymnder
October 14, 2022

Introduction to Wear OS Application Development

DroidKaigi 2022 - 2022/10/05 12:10-12:50

ymnder

October 14, 2022
Tweet

More Decks by ymnder

Other Decks in Technology

Transcript

  1. DroidKaigi 2022, Dialogs -> Backdrop - 2022/10/05 12:10-12:50
    Ryo Yamazaki
    Introduction to Wear OS
    Application Development

    View full-size slide

  2. 🎉
    Google Pixel Watchが発売

    View full-size slide

  3. ● Ryo Yamazaki
    ○ twitter: @ymnd
    ○ GitHub: @ymnder
    ● Application Engineer
    ○ Android 日経電子版アプリ
    ○ Android 紙面ビューアーアプリ
    ● DroidKaigi co-organizer
    whoami

    View full-size slide

  4. ● 日本経済新聞社ではAndroidエンジニアの募集をしています!!!
    ○ https://hack.nikkei.com/jobs/android/
    We are Hiring :)

    View full-size slide

  5. ● オープンテストで公開されています
    ● 今すぐインストール https://play.google.com/store/apps/details?id=com.nikkei.newspaper
    日経電子版がWear対応しました

    View full-size slide

  6. ● Wearアプリのリリースを目指す
    ○ 開発中に遭遇した様々な困難を整理して紹介する
    ■ Documentはどこにあるか
    ■ Wearアプリとはどのようなものなのか
    ■ どうやってモバイルアプリと組み合わせるか
    ■ どうやってリリースをするか
    本セッションの目標

    View full-size slide

  7. ● Health Servicesの実装
    ○ フィットネスや健康に関するセンサー
    ● Watch Faceの実装 / Watch Face Studio
    ○ 時計の盤面
    ● User input
    ○ IMEや音声入力
    ● Data Layer API
    ○ ペア設定したモバイルアプリとの通信
    本セッションで扱わないもの

    View full-size slide

  8. ● Wearアプリ
    ○ Wear OS by Googleがインストールされたスマートウォッチで動作
    するアプリ。正確にはWear OSアプリ
    ● モバイルアプリ
    ○ Androidがインストールされたスマートフォン/タブレット端末で動作す
    るアプリ
    本セッションでの便宜的なアプリの呼び方

    View full-size slide

  9. Wear OSって何?

    View full-size slide

  10. ● Wearableデバイス向けに設計されたAndroidベースのOS
    ○ https://cs.android.com/android/platform/superproject/+/and
    roid-wear-9.0.0_r34
    ○ 現在の最新はWear OS 3 (API level 30) : Google I/O 2021で発表
    ● 接続できるモバイルのOS
    ○ Wear OSのデバイスはiOSとAndroidに対応している
    ● Wear単体での使用も可能
    ○ モバイルが近くになくても使えるように実装できる
    Wear OSって何?

    View full-size slide

  11. ● Wear OSのデバイスはiOSにもAndroidにも接続できる
    Wear OSのデバイス
    iOS / iPadOS
    Android

    View full-size slide

  12. ● こちらを参照
    ○ https://wearos.google.com/intl/ja_jp/#find-your-watch
    ○ Galaxy watch4が代表的
    ● Wear OSではないデバイス
    ○ Fitbit Sense
    ○ Mi Watch
    ○ wena
    ○ …
    Wear OSがインストールされたデバイス

    View full-size slide

  13. Wear OSがインストールされたデバイス
    ref: Google Play Console デバイスカタログ

    View full-size slide

  14. ● Wear OS 3 (api 30)
    ○ 15台(Galaxy Watch4他)
    ● Wear OS 2 (api 25, 26, 28)
    ○ 66台(Fossil Gen 5他)
    Wear OSのバージョン別台数

    View full-size slide

  15. ● 基本できることは同じ
    ○ Tiles, Complications, Overlays, Watch Face
    ● 今の段階では3が普及していないため2もサポートした方が良い
    ● すでにWear OS 2に向けてアプリを公開している場合
    ○ Support Library から Jetpack Libraryへ移行する
    ■ https://android-developers.googleblog.com/2021/09/w
    ear-os-jetpack-libraries-now-in-stable.html
    ○ デザイン ガイドライン対応をする
    Wear OSのバージョン差

    View full-size slide

  16. Wear OSの開発の準備

    View full-size slide

  17. ● 実機
    ● エミュレーター
    ○ 円形の画面
    ○ 長方形の画面
    Wearアプリを動かす

    View full-size slide

  18. 1. Wearで開発者向けオプションを有効にする
    2. Wearと開発マシンを同じWi-Fi ネットワークにつなぐ
    3. WearでWi-Fi設定を開き、IP アドレスを確認する
    4. 開発マシンでadbコマンドを打つ
    a. adb connect :5555
    実機と開発マシンをつなぐ

    View full-size slide

  19. 1. Android StudioでDevice ManagerからCreate Deviceをする
    2. デバイスを選択する
    3. System Imageを選択する
    エミュレーターと開発マシンをつなぐ

    View full-size slide

  20. 1. Android StudioのDevice ManagerからPair Wearableを選択する
    2. 任意のデバイスを選択しペアリング開始
    3. ウィザードに従いアプリをインストールする
    エミュレーターでWearとモバイルをつなぐ

    View full-size slide

  21. ● Android Studioの各種機能がモバイルアプリ開発と同じく使える
    ○ デバッガ
    ○ Device File Exprolerer
    ○ Network Inspector
    ○ Jetpack ComposeのPreview
    デバッグをどう進めるか

    View full-size slide

  22. ● Android Studio Dolphinでエミュレーターの更新があった
    ○ ボタンが実機に近くなった
    ○ Complication, Tile, and Watch Faceを直接反映できる🎉
    ■ いままでは毎回自分で手動で再配置する必要があった
    デバッグをどう進めるか

    View full-size slide

  23. ● 開発時はエミュレーターを使うのがおすすめ
    ○ モバイルとペアリングできる
    ○ デバッグが行いやすい
    ○ シンプルなWatchFaceが提供されている
    ○ Rotary inputなど実機にない機能検証ができる
    ● 企画時や使用感のチェックで実機を用いていく
    実機とエミュレーターの使い分け

    View full-size slide

  24. ● できないこと
    ○ WearアプリではURLを開けない
    ■ 開いたURLはモバイルに転送される
    ○ Firebase App Testerアプリはサポートされていない
    ● できること
    ○ Google Playアプリ経由でインストールする
    ■ クローズドテストなど
    ○ Android Studioでbuild & installする
    ○ adbコマンドでインストールする
    インストールしての動作確認をどう進めるか

    View full-size slide

  25. Wearアプリを開発する

    View full-size slide

  26. ● モバイルアプリの通知はそのままWearにも表示できる
    ○ もうWearアプリに対応しているのに何を開発するの?
    ● Wearはモバイルよりも制約が多い
    ○ 画面が小さい
    ○ バッテリー容量が少ない
    ○ ネットワークにつながっていない可能性がある
    Wearアプリは開発より企画の方が難しい

    View full-size slide

  27. スマートフォンアプリ開発との差異

    View full-size slide

  28. ● FirebaseのAnalyticsやCrashlyticsが使える
    ● Composeが使える
    ● Activity上でUIを構築できる(Overlay)
    ● モバイルと同じようにデータを永続化できる
    ○ SharedPreferences API
    ○ Room
    スマートフォンアプリ開発と似ているところ

    View full-size slide

  29. ● Google Playコンソールのリーチとデバイスからインストール率やクラッ
    シュ率を見られる
    Wearアプリと効果計測

    View full-size slide

  30. ● Wear OSではすべてのアプリがダークモードで表示される
    ● 独自のサーフェスが用意されている
    ● シンプルなユーザー体験が求められる
    ○ シャロー:2 階層より深くならないようにする
    ○ リニア:ほとんどのコンテンツとナビゲーションをインラインで表示する
    スマートフォンアプリ開発と異なるところ

    View full-size slide

  31. ● > API のほとんどは完全にサポートされていますが、特定のエッジケース
    にはいくつかの制限があります。たとえば、android.webkit API はサ
    ポートされていません。
    https://developer.android.com/training/wearables/wear-v-mo
    bile
    ○ UnsupportedOperationExceptionが発生します
    WearアプリではWebViewは使えません

    View full-size slide

  32. Wear OSのUI

    View full-size slide

  33. ● 身につけていることによるデータがとれる
    ● 手元でさっと情報を見られる
    Wearアプリでできること

    View full-size slide

  34. Wear OSのUI

    View full-size slide

  35. ● スマートフォンの通知と仕様は同じ
    ● ひと目で理解できる情報やアクションを表示する
    ● 表示方法
    ○ モバイルアプリの通知を自動でWearに表示される
    ○ Wearアプリが通知を作成する
    Wear OSのUI: Notification

    View full-size slide

  36. ● モバイルのアプリと仕様や実装が似ており、Activityが動く。
    ○ androidx.activity.ComponentActivity を継承したActivity上で
    UIを構築する
    ● 設定や詳細情報など複雑なタスクをするために使う
    ● 表示方法
    ○ アプリ ランチャー
    ○ Complicationなど
    Wear OSのUI: Overlay

    View full-size slide

  37. ● ユーザーがひと目ですぐに理解できる情報を表示する
    ○ ユーザーの差し迫ったニーズにフォーカスする
    ● UI要素が限定されたComposeでさっと見て使える機能を提供する
    ● 表示方法
    ○ WatchFaceからスワイプして切り替える
    Wear OSのUI: Tile

    View full-size slide

  38. ● 繰り返し使われるアクションやひと目でわかる情報を表示する
    ● WatchFaceの表示方法に依存する
    ○ 表示方法がWatch Faceによって異なる
    ● 表示方法
    ○ Watch Faceに追加する
    Wear OSのUI: Complication

    View full-size slide

  39. ● 時計の盤面
    ● ComplicationはWatch Face次第で置ける内容や個数がかわる
    ● 表示方法
    ○ WatchFaceを長押しすると他のWatch Faceに変更できる
    ● 補足
    ○ Watch Face StudioというSamsungのIDEがある
    ○ 自力で実装することもできる
    Wear OSのUI: Watch Face

    View full-size slide

  40. 各UIの優先度の例
    ref: https://developer.android.com/training/wearables/principles

    View full-size slide

  41. ● Code Samplesがすごく充実しています
    ○ https://github.com/android/wear-os-samples
    ● Overlayについて学ぶ -> ComposeStarter
    ● Complicationについて学ぶ -> WearComplicationProvidersTestSuite
    ● Tileについて学ぶ -> WearTilesKotlin
    ● Watch Faceについて学ぶ -> WatchFaceKotlin
    Wear OSのUIに対応したCode Samples

    View full-size slide

  42. ● 物理
    ○ 物理ボタン
    ○ クラウンのロータリー入力(縦方向のスクロールと押し込みでの選択)
    ○ 手首の操作
    ● 入力
    ○ IME
    ○ 音声入力
    ● 画面操作
    ○ 画面の縦スクロール
    ○ 画面の横スワイプ
    ○ ボタンのタップ
    Wear OSではどんなことができるのか(UX)

    View full-size slide

  43. スタンドアロンか非スタンドアロンか
    ● スタンドアロンとは
    ○ ユーザーがモバイルアプリを使わずにスマートウォッチでタスクを
    Wearだけで完了できる
    ○ 認証などでモバイルアプリを前提とする場合は非スタンドアロンとして
    宣言する -> Google Play ストアの表示がかわる
    android:name="com.google.android.wearable.standalone"
    android:value="true" />

    View full-size slide

  44. ● モバイルがネットワークにつながっていれば、WearアプリはBluetoothを
    介してネットワークに接続できる
    ○ WearデバイスがWi-Fiやモバイルネットワークをサポートしている場
    合はWearデバイスだけでもネットワークに接続できる
    ● バッテリーや通信量を考慮したアプリをつくる必要がある
    ● オフライン状態を考慮しネットワークがなくても使えるようにする
    Wearアプリをネットワークにつなぐ

    View full-size slide

  45. Wearアプリをネットワークにつなぐ
    Wearアプリ
    モバイル
    モバイル接続時: Bluetooth
    Moblile data / Wi-Fi
    Moblile data / Wi-Fi

    View full-size slide

  46. Overlayを作る

    View full-size slide

  47. ● https://developer.android.com/jetpack/androidx/releases/wear
    ○ 多くのWear系Jetapack librariesが用意されています
    Wear OS Jetpack libraries

    View full-size slide

  48. ● https://github.com/google/horologist
    ○ AccompanistのようにComposeの機能を補うライブラリ
    ○ Horologist is a group of libraries that aim to supplement
    Wear OS developers with features that are commonly
    required by developers but not yet available.
    ● WearOSのUIやAnimationなどを強力にサポートしてくれる
    ぜひ使いたい便利なライブラリ: Horologist

    View full-size slide

  49. ● 新規アプリの作成や Moduleの追加はドキュメントが詳しいです
    ○ https://developer.android.com/training/wearables/get-started/creating#creating
    ● 重要な事項
    ○ AndroidManifestに次のタグがある

    ○ もし既存のモバイルアプリと一緒にリリースする場合
    ■ 同じパッケージ名を付け、同じ証明書鍵で署名する
    Wearアプリの開発をはじめる

    View full-size slide

  50. ● 例:Android StudioでNew Projectする
    Overlayをつくる

    View full-size slide

  51. Wearアプリができた!!!

    View full-size slide

  52. ● androidx.wear:wear-remote-interactionsを使います

    Wearアプリからモバイルを開く
    val remoteActivityHelper = RemoteActivityHelper(
    this)
    try {
    val intent = Intent(Intent.
    ACTION_VIEW)
    .setData(Uri.parse(
    "https://play.google.com/store/apps/details?id=com.nikkei.newspaper"
    ))
    .addCategory(Intent.
    CATEGORY_BROWSABLE)
    // awaitは"org.jetbrains.kotlinx:kotlinx-coroutines-android"
    remoteActivityHelper.startRemoteActivity(intent).await()
    } catch (e: RemoteActivityHelper.RemoteIntentException) {
    //...
    }

    View full-size slide

  53. ● コード例ではモバイルでPlay ストアアプリが開かれる
    ● ここでモバイルアプリに向けたIntentを呼べば良い
    ○ モバイルの画面がオフになっていた場合でもIntentは受信され、次
    オンになったタイミングでは画面に表示される
    ● モバイルのアプリが開かれる・失敗した場合には確認のオーバーレイを表
    示すると良い
    Wearアプリからモバイルを開く
    ref: https://developer.android.com/training/wearables/design/confirmation-overlay#open

    View full-size slide

  54. ● モバイルアプリでWearアプリを使っていることをCapabilityClientを使え
    ば検知できる
    ○ https://github.com/android/wear-os-samples/tree/main/
    WearVerifyRemoteApp
    モバイルアプリからのWearアプリの検知

    View full-size slide

  55. Wearに特有のCompose

    View full-size slide

  56. ● WearアプリにはWearに最適化された独自のComposeがあります
    ○ Wearのデバイスに向けて調整されています
    ○ 多くのComposable要素は同じ名前で利用できます
    OverlayでComposeを使う
    ref: https://developer.android.com/training/wearables/compose

    View full-size slide

  57. ● 画面に時刻を表示する
    TimeText
    Scaffold(
    timeText = {
    TimeText()
    }
    ) {
    ScalingLazyColumn {
    // …
    }
    }

    View full-size slide

  58. ● 縁取りを暗くする
    Vignette
    Scaffold(
    vignette = {
    Vignette(vignettePosition = VignettePosition.
    TopAndBottom)
    }
    ) {
    ScalingLazyColumn {
    //…
    }
    }

    View full-size slide

  59. ● スクロール位置を表示する
    PositionIndicator
    val listState = rememberScalingLazyListState()
    Scaffold(
    positionIndicator = {
    PositionIndicator(scalingLazyListState = listState)
    }
    ) {
    ScalingLazyColumn(
    state = listState
    ) {
    //…
    }
    }

    View full-size slide

  60. ● LazyColumnよりもコンテンツにフォーカスがあたる
    ○ 画面の上部と下部でコンテンツが小さくなる
    ScalingLazyColumn
    val rooms = listOf("App bars", "Backdrop", "Cards", "Dialogs", "Online")
    ScalingLazyColumn {
    items(rooms) { room ->
    TitleCard(
    onClick = { /*TODO*/ },
    time = null,
    title = { Text(text = room) },
    content = { Text(text = "この部屋は${room}です。") }
    )
    }
    }

    View full-size slide

  61. ScalingLazyColumn
    ScalingLazyColumn LazyColumn

    View full-size slide

  62. ● リストではデフォルトで2つめのアイテムが中央に表示される
    ● 1本目を表示したい場合は次のindexで0を指定する
    ScalingLazyColumnの表示位置
    val listState = rememberScalingLazyListState(initialCenterItemIndex = 0)
    Scaffold(
    timeText = {
    TimeText(
    modifier = Modifier. fadeAwayScalingLazyList(
    initialIndex = 0,
    ) {
    listState
    },
    )
    },
    ) {
    ScalingLazyColumn(
    autoCentering = AutoCenteringParams( itemIndex = 0),
    ) {
    //…
    }
    }

    View full-size slide

  63. ● Rotary inputはデバイスに依存した
    入力です
    ● ベゼルやクラウンを回すことで画面を
    スクロールできます
    ● エミュレーターではExtended
    ControlsからRotary inputを行えま

    ScalingLazyColumnのRotary input対応

    View full-size slide

  64. ● HorologistのscrollableColumnを使う
    ● あわせてFocusRequesterを呼び出す
    ScalingLazyColumnのRotary input対応
    val focusRequester = remember { FocusRequester() }
    val listState = rememberScalingLazyListState(initialCenterItemIndex = 0)
    Scaffold(
    //…
    ) {
    ScalingLazyColumn(
    modifier = Modifier
    . fillMaxSize()
    . scrollableColumn(focusRequester , listState) ,
    autoCentering = AutoCenteringParams( itemIndex = 0),
    state = listState
    ) {
    //…
    }
    }
    LaunchedEffect(Unit) {
    focusRequester.requestFocus()
    }

    View full-size slide

  65. ● Actions
    ○ Floating action buttons -> ない
    ○ Segmented buttons -> ToggleButtonを使う
    ● Containment
    ○ Bottom sheets -> ない
    ● Navigation
    ○ Bottom app bar -> ない
    ○ Navigation bar -> ない
    ○ Navigation drawer -> WearableDrawerLayoutがあるが、Composeではない
    ○ Navigation rail -> ない
    ○ Top app bars -> ない
    ● Selection
    ○ Menus -> ない
    ○ Radio Button -> ToggleChipを使う
    ○ Switch -> ToggleChipを使う
    WearアプリとMaterial Components

    View full-size slide

  66. ● Tileの基本的なライブラリを入れる
    ○ https://developer.android.com/jetpack/androidx/releases/
    wear-tiles
    ● Horologistを入れるとCoroutinesTileServiceが使える
    ○ https://google.github.io/horologist/tiles/
    ● Figmaのデザインキットがある
    ○ https://developer.android.com/training/wearables/design/
    tiles-design-system
    Tileを作る

    View full-size slide

  67. ● まずはライブラリを入れる
    ○ https://developer.android.com/jetpack/androidx/releases/
    wear-watchface
    Complicationを作る
    // for Java
    implementation "androidx.wear.watchface:watchface-complications-data-source:1.1.1"
    // for Kotlin
    implementation "androidx.wear.watchface:watchface-complications-data-source-ktx:1.1.1"

    View full-size slide

  68. Complicationを作る
    class HelloComplicationService : SuspendingComplicationDataSourceService() {
    override fun getPreviewData
    (type: ComplicationType): ComplicationData? {
    return if (type == ComplicationType.
    SHORT_TEXT) {
    val text = PlainComplicationText.Builder(
    "title").build()
    val contentDescription = PlainComplicationText.Builder(
    "description").build()
    val builder = ShortTextComplicationData.Builder(text
    , contentDescription)
    builder.setTapAction(
    null).build()
    } else null
    }
    override suspend fun onComplicationRequest
    (request: ComplicationRequest): ComplicationData? {
    return if (request.complicationType == ComplicationType.
    SHORT_TEXT) {
    val text = PlainComplicationText.Builder(
    "hello").build()
    val contentDescription = PlainComplicationText.Builder(
    "world").build()
    val builder = ShortTextComplicationData.Builder(text
    , contentDescription)
    builder.setTapAction(
    null).build()
    } else null
    }
    }

    View full-size slide

  69. ● SuspendingComplicationDataSourceServiceを継承すると便利
    ● 配置する際のPreviewと実際に配置するComplicationをそれぞれ実装
    する
    Complicationを作る

    View full-size slide

  70. ● Complicationは次のタイプが存在する
    ○ SHORT_TEXT
    ○ LONG_TEXT
    ○ RANGED_VALUE
    ○ SMALL_IMAGE -> 焼付き防止がある
    ○ PHOTO_IMAGE
    ○ MONOCHROMATIC_IMAGE
    Complicationを追加する

    View full-size slide

  71. ● タイプに対応したクラスも存在する
    ○ SHORT_TEXT: ShortTextComplicationData
    ○ LONG_TEXT: LongTextComplicationData
    ○ RANGED_VALUE: RangedValueComplicationData
    ○ SMALL_IMAGE: SmallImageComplicationData
    ○ PHOTO_IMAGE: PhotoImageComplicationData
    ○ MONOCHROMATIC_IMAGE: MonochromaticImageComplicationData
    ● データをセットしてWatch Faceに描画を依頼する
    ○ どのように描画されるかはWatch Face次第
    Complicationを追加する

    View full-size slide

  72. Complicationを作る
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:exported="true"
    android:permission="com.google.android.wearable.permission.BIND_COMPLICATION_PROVIDER"
    >

    />

    android:name="android.support.wearable.complications.SUPPORTED_TYPES"
    android:value="SHORT_TEXT" />
    android:name="android.support.wearable.complications.UPDATE_PERIOD_SECONDS"
    android:value="300" />

    View full-size slide

  73. Complicationを作る
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:exported="true"
    // Wear OS システムだけがプロバイダ サービスにバインドできるよう
    にする
    android:permission="com.google.android.wearable.permission.BIND_COMPLICATION_PROVIDER"
    >

    // Wear OS システムだけがプロバイダ サービスにバインドできるようにする
    />

    // サポートされている表示形式を指定する
    android:name="android.support.wearable.complications.SUPPORTED_TYPES"
    android:value="SHORT_TEXT" />
    // データの更新頻度を指定する。単位は秒で、最短は
    300秒、0を指定すると更新されない
    android:name="android.support.wearable.complications.UPDATE_PERIOD_SECONDS"
    android:value="300" />

    View full-size slide

  74. Complicationを配置する

    View full-size slide

  75. Complicationを配置する
    長押しして設定へ どこに配置するか選択 Previewが表示
    Complicationを選ぶ

    View full-size slide

  76. Complicationを自動で配置する

    View full-size slide

  77. ● Watch Faceに配置できるためモバイルのWidgetのようにユーザーが繰り返
    し使いやすい位置でコアな機能を提供できる
    ● 一方で、配置が難しい
    ● また、どのWatch Faceを使っているかに依存する
    ○ Complicationが置けない可能性
    ■ SHORT_TEXTやSMALL_IMAGEは比較的サポートされている
    ○ 表示方法が異なる可能性
    ■ SHORT_TEXTのテキストとアイコンをどの位置に表示するかは
    Watch Face次第
    Complicationについて

    View full-size slide

  78. Wearアプリができた
    あとはリリースするだけ

    View full-size slide

  79. ・・・Wearアプリって
    どうやってリリースするの?

    View full-size slide

  80. ● 1つのAPK/AABファイルをモバイル・Wear両方のデバイスでインストール
    し使うことはできない
    ○ > 現時点では、Wear デバイスと Wear 以外のデバイス用に単一の
    APK を作成することはできません。
    ○ https://developer.android.com/training/wearables/packagi
    ng
    ● デバイスごとのAPK(AAB)のアップロードが必要となる
    1つのAPK/AABでアプリを配信できる?

    View full-size slide

  81. ● 現行のドキュメント
    ○ https://developer.android.com/training/wearables/packaging
    ● 古いドキュメント
    ○ https://developer.android.com/training/wearables/apps/packaging?hl
    =ja
    ○ Wear 1.x / Wear 2.0向けのドキュメント
    ○ Codelabのコードの中にもWear 2.0向けのコードがまだある
    ■ 例えばモバイルアプリのapp/build.gradleにwearAppの依存関係ルールを
    定義しなくてよくなった
    パッケージ化の方法にアップデートがあります

    View full-size slide

  82. ● たとえば審査でこういう点が指摘される
    ○ ストアの掲載情報で「 Wear OS」に言及していない
    ○ Wear のスクリーンショットがない
    ○ スクリーンショットに透明な背景やマスキングが含まれる
    ○ 円形ディスプレイ向けにフォーマットされていない
    ● 審査は長期化する可能性があるので余裕をもってリリーススケジュールを組みましょう
    ● 関連情報
    ○ https://developer.android.com/training/wearables/packaging#reasons-for-rejec
    tion
    ○ https://support.google.com/googleplay/android-developer/answer/9866151
    ○ https://developer.android.com/docs/quality-guidelines/wear-app-quality
    Play Consoleの審査に注意

    View full-size slide

  83. 1. WearアプリのAABもしくはAPKを用意する
    2. Google Play Consoleの設定 > 詳細設定 > リリースの種類でWear
    OSを選択する
    3. ストアの掲載情報を更新する
    a. Wear OSについて言及する
    b. Wear OSのスクリーンショットを含める
    4. オープンテストなどでWearアプリをリリースする
    5. Google Play Console の [詳細設定] から Wear OS にオプトイン
    Wearアプリの配信ステップ

    View full-size slide

  84. ● 既にスマートフォン向けアプリを配信中の場合、複数APKサポートを行うこ
    とになる
    ○ https://developer.android.com/google/play/publishing/mul
    tiple-apks
    ● ルール
    ○ 同じパッケージ名を付け、同じ証明書鍵で署名する
    ○ 異なるバージョン コードを指定する
    1. WearアプリのAABもしくはAPKを用意する

    View full-size slide

  85. ● バージョン コードとアップロードについて
    ○ モバイルのバージョンとWearのバージョンは同じにできない
    ○ そのデバイスに適応した最もバージョンコードが大きいapkがインス
    トールされる
    ○ 変更がないAPKの方は毎回APKをアップロードする必要はない
    ■ インクリメントは不要
    1. WearアプリのAABもしくはAPKを用意する

    View full-size slide

  86. ● バージョンコード: 10000など内部的に管理される正の整数
    ○ 次のスライドでは便宜上、major_minor_patchとして表現する
    ● バージョンネーム: 1.0.0や1.0.0-wearなどPlayストアなどでユーザーに表
    示される文字列
    1. WearアプリのAABもしくはAPKを用意する

    View full-size slide

  87. 1. WearアプリのAABもしくはAPKを用意する
    ● 例:モバイルアプリ(1.0.0)がすでにリリースされているときにWearアプリ
    (1.0.0)をリリースする
    mobile:
    wear:
    1_00_00
    20_01_00_00
    10_01_00_00 10_01_01_00
    今のストア Wearをリリース モバイルをhotfix
    20_01_00_00

    View full-size slide

  88. 1. WearアプリのAABもしくはAPKを用意する
    ● 例:モバイルアプリ(1.0.0)がすでにリリースされているときにWearアプリ
    (1.0.0)をリリースする
    mobile:
    wear:
    1_00_00
    今のストア Wearをリリース モバイルをhotfix
    Wearアプリであることをprefixで表現
    している
    必要な方だけバージョンを上げてリ
    リースできる
    20_01_00_00
    10_01_00_00 10_01_01_00
    20_01_00_00

    View full-size slide

  89. 2. Google Play Consoleの設定

    View full-size slide

  90. 3-a. Wear OSについて言及する

    View full-size slide

  91. 3-b. Wear OSのスクリーンショットを含める

    View full-size slide

  92. 4. オープンテストなどでWearアプリをリリースする

    View full-size slide

  93. ● もしすでに配信しているモバイルのAPKがある場合
    ○ 含まれないAPKからAPKを追加すると同時に配信できる
    4. オープンテストなどでWearアプリをリリースする

    View full-size slide

  94. 5. Google Play Console の [詳細設定] から Wear OS にオプトイン

    View full-size slide

  95. あとは審査の通過を待つのみです

    View full-size slide

  96. おわりに

    View full-size slide

  97. ● まずはPathwayで概観を掴みましょう
    ○ https://developer.android.com/courses/pathways/wear
    ● 次にGoogleの開発者ページを参照します
    ○ https://developer.android.com/training/wearables
    ● 具体的な実装はCode Samplesを見てください
    ○ https://github.com/android/wear-os-samples
    Wearアプリ開発のはじめ方

    View full-size slide

  98. ● Wearアプリの開発ははじめやすいです
    ○ Code Samplesが充実しています
    ● どういう機能を提供できるかを企画するのが難しいです
    ● 審査があるのでリリースは余裕をもって行いましょう
    ● Pixel Watchの発売が楽しみですね
    おわりに

    View full-size slide

  99. Wear元年やっていくぞ!

    View full-size slide

  100. ● Android Studioのスクリーンショット機能
    ● adb shell screencap
    ● 端末のスクリーンショット機能
    ● paparazzi
    ○ https://github.com/google/horologist/issues?q=is%3Aissue
    +paparazzi+is%3Aclosed
    付録: スクリーンショットの方法

    View full-size slide

  101. ● Android Studio
    ○ LogcatのScreen Captureを押す
    ● エミュレーターの場合
    ○ Take Screenshotボタンを押す
    ● 実機の場合
    ○ Wearコンパニオンアプリの右上詳細ボタンから選択できる
    付録: スクリーンショットの方法

    View full-size slide

  102. ● ニュース
    ○ https://android-developers-jp.googleblog.com/2021/11/compose-for-wear-os-now-in-developer.html
    ○ https://android-developers-jp.googleblog.com/2021/03/creating-custom-tiles-on-wear-os-by-google-with-jetp
    ack-tiles-library.html
    ○ https://android-developers.googleblog.com/2022/05/announcing-compose-for-wear-os-beta.html
    ○ https://blog.google/products/wear-os/wear-io21/
    ● Google I/O
    ○ https://io.google/2022/program/7f0f4d16-b260-414d-9f2d-bd2e18ea469b/intl/ja/
    ● 便利なツール
    ○ https://developer.android.com/distribute/marketing-tools/device-art-generator?hl=ja
    ● 発表
    ○ https://www.droidcon.com/tag/wear-os/
    ○ https://speakerdeck.com/syarihu/droidkaigi-2018-android-wearfalsewatch-facewozuo-rou-shi-ji-falsepan-mia
    n-nixiao-sanaqing-bao-wotian-ete
    参考資料

    View full-size slide

  103. ● Wear OSの画面機能について
    ○ https://developer.android.com/training/wearables/user-interfaces
    ● Pathway
    ○ https://developer.android.com/courses/pathways/wear
    ● ComposeのAPI
    ○ https://developer.android.com/training/wearables/compose
    ● Overlayについて
    ○ https://developer.android.com/training/wearables/overlays
    ● Complicationについて
    ○ https://developer.android.com/training/wearables/tiles/complications
    ○ https://medium.com/@danybony/wear-complications-api-16ab65290aa1
    ● デザイン原則について
    ○ https://developer.android.com/training/wearables/design/design-principles
    参考資料

    View full-size slide