Introduction to Wear OS Application Development

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

Transcript

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

   View Slide

2. 🎉
   Google Pixel Watchが発売
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. Wear OSって何？
   

   View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

16. Wear OSの開発の準備
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. Wearアプリを開発する
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. Wear OSのUI
    

    View Slide

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

    View Slide

34. Wear OSのUI
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. Overlayを作る
    

    View Slide

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

    View 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 Slide

49. ● 新規アプリの作成や Moduleの追加はドキュメントが詳しいです
    ○ https://developer.android.com/training/wearables/get-started/creating#creating
    ● 重要な事項
    ○ AndroidManifestに次のタグがある
    ■
    ○ もし既存のモバイルアプリと一緒にリリースする場合
    ■ 同じパッケージ名を付け、同じ証明書鍵で署名する
    Wearアプリの開発をはじめる
    

    View Slide

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

    View Slide

51. View Slide

52. Wearアプリができた！！！
    

    View Slide

53. ● 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 Slide

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

    View Slide

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

    View Slide

56. Wearに特有のCompose
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

61. ● 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 Slide

62. ScalingLazyColumn
    ScalingLazyColumn LazyColumn
    

    View Slide

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

    View Slide

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

    View Slide

65. ● 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 Slide

66. ● 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 Slide

67. ● 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 Slide

68. ● まずはライブラリを入れる
    ○ 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 Slide

69. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

73. 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 Slide

74. 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 Slide

75. Complicationを配置する
    

    View Slide

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

    View Slide

77. Complicationを自動で配置する
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

82. ● 現行のドキュメント
    ○ 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 Slide

83. ● たとえば審査でこういう点が指摘される
    ○ ストアの掲載情報で「 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 Slide

84. 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 Slide

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

    View Slide

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

    View Slide

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

    View Slide

88. 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 Slide

89. 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 Slide

90. 2. Google Play Consoleの設定
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

97. おわりに
    

    View Slide

98. ● まずは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 Slide

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

    View Slide

100. Wear元年やっていくぞ！
     

     View Slide

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

     View Slide

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

     View Slide

103. ● ニュース
     ○ 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 Slide

104. ● 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 Slide