Google Pixel Watchを買ったので、アプリ作ってみた(前編)

2023年8月30日 17:54

2022/11/24 に公開したブログの移行記事になります。

はじめに

こんにちは、大友です。
最近寒くなってきて、こたつを出してしまったのですが、一度入ってしまうともう出れません…
またこの季節が来たか〜としみじみしながら、よくこたつでうたた寝してしまい、妻に怒られることがしばしば。
風邪をひいてしまうので、気をつけましょう！

さて今回は、先日発売されたGoogle Pixel Watchを購入したので、アプリの作り方などなどを紹介したいと思います。

Google Pixel Watchとは

Google が作ったスマートウォッチです。
詳細の仕様は製品ページを見てもらったほうがいいかもしれません。

ちなみに約１ヶ月ほど使ってみた感想です。

バッテリーの持ちはそこそこ良い。常時点灯にしていなければ、概ね24時間耐えれる。
操作もサクサク動くので、ストレスは少ない。
丸形で、個人的にはデザイン性もよく、違和感を感じない。
Fitbitになってしまったので、いままでGoogle Fitを使っていたが、切り替えが必要になった。
- Fitbit premiumは6ヶ月無料なので、しばらく使ってみようと思う。
- 睡眠時間測定がついているが、結構シビアな判定な気がする。
- つけたまま、こたつでゴロゴロしてると、睡眠判定されて、寝返りうちまくっているような感じになり、睡眠のスコアが悪いと出てしまう。

この記事内の範囲

タイトルにもありますが、前編、後編と記事を分けようと考えています。

前編の本記事内では、「VSCodeを通じて、WearOSのエミュレーターに、作成した簡単なアプリケーションが起動できること」を記載します。

開発自体は、AndroidStudio上でKotlinを使ってできるのですが、欲を出してVSCode上でFlutterを使ってアプリを開発していきたいと考えています。

後編では「VSCodeを通じて、実機(Google Pixel Watch)に、作成した簡単なアプリケーションが起動できること」を書く予定です。(予定は未定…)

環境を整える

まずは、開発環境を整えて行きましょう。

今回の記事は以下のような環境で開発を行いました。

% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.8, on macOS 11.7.1 20G918 darwin-x64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[!] Xcode - develop for iOS and macOS (Xcode 11.5)
    ✗ Flutter requires Xcode 13 or higher.
      Download the latest version or update via the Mac App Store.
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.73.1)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

! Doctor found issues in 1 category.

macOSのバージョンが若干古いのはあしからず…古いゆえにXcodeが最新化できないという…
基本的には執筆時の最新バージョンで進めてい行きます。

エミュレーターの設定

まずは、WearOS想定のエミュレーターの定義をしていきましょう。
AndroidStudioからエミュレーターを登録していきます。

エミュレーターの登録ができたら、起動してみましょう。

おそらく言語設定が英語になっていると思うので、日本語にしてみましょう。
設定画面から Custom Locale を選択し、言語を設定します。

日本語は最初設定されていないので、 ADD NEW で Ja を追加してください。
追加するとリストに表示されるので、選ぶと日本語になります。

これでエミュレーターの設定は一旦終了です。

プロジェクトの作成

それでは、Flutterのプロジェクトを作成していきます。

% flutter create -i swift -a kotlin wear_os_flutter

任意の場所でプロジェクトを作成するコマンドを実行してみましょう。
WearOSであっても特別オプションを設定する必要はないです。
swiftを指定していますが、あまり意味ないですね…

作成したプロジェクトをVSCodeで開いてみましょう。

ちなみに、ご存じの方も多いと思いますが、CLIでもVSCodeを起動することができます。
ご存じなかった方は、こちらを参考に設定してみてください。

% cd wear_os_flutter
% code .

最初はパッケージのインストールなどが実行されてしばらくかかりますが、基本的には初回だけです。

先程作ったエミュレーターが選択できることを確認しましょう。

ここまで確認できたら、エミュレーターを使った開発はVSCodeだけですすめることができます。

試しに、新規で作ったプロジェクトをWearOSのエミュレーターで実行してみましょう。

お馴染みのカウントアップのサンプルページが表示されましたね。
プラスボタンを押すとちゃんとカウントアップされます。

WearOSっぽいことをしてみよう

せっかくなんで、簡単にWearOSっぽいことをしてみようと思います。

画面の枠の形と、状態を取得し表示したいと思います。

こちらのFlutterのライブラリを使ってみようと思います。

% flutter pub add wear

コマンド実行後 pubspec.yaml に追加されていることを確認してください。

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  wear: ^1.1.0

このライブラリを使うにはGradleの設定変更が必要なので、そちらも変更してしまいます。

minSdkVersionを23に指定しましょう。

android {
    ....

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.wear_os_flutter"
        // You can update the following values to match your application needs.
        // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.
        // minSdkVersion flutter.minSdkVersion
        minSdkVersion 23
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

Gradle変更ができたら、main.dartを変更してみましょう。
先程追加したライブラリのサンプルにあるコードを使ってみましょう。

import 'package:flutter/material.dart';
import 'package:wear/wear.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: WatchShape(
            builder: (BuildContext context, WearShape shape, Widget? child) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Shape: ${shape == WearShape.round ? 'round' : 'square'}',
                  ),
                  child!,
                ],
              );
            },
            child: AmbientMode(
              builder: (BuildContext context, WearMode mode, Widget? child) {
                return Text(
                  'Mode: ${mode == WearMode.active ? 'Active' : 'Ambient'}',
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

このコードの内容は、画面の形が丸(round)か四角(square)なのかを判別するのと、状態(Mode)がActiveなのかAmbientなのかを判別します。

ちなみに、Ambientとは、常にONではない状態で、アプリを表示した状態でしばらくすると、暗転し消費電力を抑える状態になることです。

それでは、これをエミュレーターで実行してみましょう。

最初はActiveで表示されていますが、スリープにしてみると。

Ambientになりました。その下のボタンを押すと、もとに戻ります。

このエミュレーターでは、Shapeの確認をしようがないですが…

まとめ

これで、WearOSのアプリ開発ができる環境が整い、(超)簡単なアプリの実行までできることを確認できました。

WearOS用の細かなお作法などはあるにせよ、スマホでの開発とあまり変わらず開発がスタートできそうということがわかりました。

後編では、実機を使ったアプリ開発に入っていきたいと思います。

最後まで読んでいただきありがとうございました。