DevFest Shikoku Android Wear Watch Face ハンズオン

とりあえず箇条書き的にメモ。

実施日

2015/11/28 13:00 - 18:00

お題目

  • Android Wearのウォッチフェイスをつくる

その１：座学

  • Android Wearのばあい、時計デザインを自力で起こすことができる

  • 時計アプリは「Watch Face」と呼ばれ、Watch Face APIを使用して自由にWatch Faceを作成できる

  • 最近の機種は高解像度化してきているので、ハンドヘルド同様複数解像度に対応する必要も出てきている

  • ウォッチフェイスアプリについては、数が少ない今がチャンス

  • Google Playストアでの検索性がお世辞にもよろしくない上に、ほとんどは海外製で似たようなデザインが多い

  • 日本製は少ない

  • ほとんど無料だが、カスタマイズ機能はIn-App Billingになっていることが多い

  • 有料は概ねUSD1.00-程度のため、お小遣い稼ぎには厳しいかも

  • デザインするにあたり、どのようなものが公開されているかを確認したほうがいい

  • 実機のハンドヘルドがあれば、WearのPCエミュレータにインストールして確認できる

  • デザインに際して

    • 時間が一目で確認できること

    • 角型、丸型の両方に対応していること

    • Interactive、Ambientの両モードで違和感ないデザインとする

    • Ambientのばあい、発色数は大幅に制限を受け、焼きつき防止措置への対応も考慮する必要あり

    • これらはAPIで取得可能

    • システムUI要素も、APIで表示位置を制御できる

    • 「デザイン = コンテキスト + データ」と認識する

    • interactiveは最近リリースされたばかりの機能

    • Interactiveでは、ウォッチフェイスへのタップイベントを検出できるようになった

    • ただし、使えるジェスチャーはシングルタップのみで、スワイプやピンチアクションはシステムで予約されていて使用できない

    • パターン

      • タップすると表示を切り替える
      • タップするとActivityを差し込む
      • などなど

    • ただし、対応するにはGoogle Play開発者サービスのバージョンを判断して、使用可否を判断する必要あり

    • コンパニオンアプリ（母艦側にインストールする、ウォッチフェイスの設定を行うアプリ）を用意できる

    • アニメーションは、ハンドヘルドと同じ手法で実装可能

    • 基本パターン

      1. 背景
      2. アナログ時計（目盛り、数字、針、午前午後表示、など）
      3. カレンダー（年月日+曜日）

    • ハイブリッド時計をデザインする

    • 昼／夜で切り替える

    • ハンドヘルドから取得した情報を表示する

    • 作成すべきリソース

      • ランチャーアイコンは不要
      • ウォッチフェイスのサムネイル画像は必須(プログラムで動的生成できない)
      • ウォッチフェイスの背景画像は、Interactive、Ambientでそれぞれ用意する

    • アナログ時計の場合、長針、短針、秒針の３つの画像を最低用意できれば、回転表示で対応できる

    • APIのみでベクター描画する方法もある(目盛りは三角関数で計算できる)

    • デジアナのハイブリッドの場合、最初のプロジェクト作成ウィザードでデジタル、アナログをそれぞれ作成しておき、それぞれを適宜流用して実装するとやりやすい。

  • 単純なデジタル時計（アニメーションなし）であれば、600行程度で実装できてしまう

  • キャラクターものの場合、著作権者に問い合わせをしておくこと（重要）

その２：ハンズオン

  • Intaractiveを試したかったので、ハンドヘルドをAPI 18、WearをAPI22とし、デジタルのウォッチフェイスプロジェクトを生成
  • Wearに関しては、実機よりもエミュレータのほうが動作が軽快らしい。エミュレータのストレージ設定は、規定から強化しておいたほうが、何かと便利とのこと
  • プロキシが間に挟まっていると、起動時にHTTP_PROXYオプションを設定しておく必要がある
  • 開発者モードを有効にする方法は、ハンドヘルドと同じ
  • Wearの言語設定を強制変更するには、 adb shell で対応できる
  • ウィザードで作ったプロジェクトをそのままビルドしても、時計として動作するようになっている
  • 挙動を変えたい場合、インナークラスにある Engine#onDraw(Canvas, Rect) から手を付ける。背景画像もここで設定する
  • 同じく、表示の微調整を行うには Engine#onApplyWindowInsets(WindowInsets) で実施する
  • 実機ごとに画面サイズが異なるため、画像サイズの調整は Engine#onSurfaceChangad(SurfaceHolder, int, int, int) にて行う
  • ベクター描画するアナログの場合、角度計算したあと、 Canvas自体を回転させたあと 描画して戻す、いう手法で対応すると楽
  • Ambientモードに入ると onAmbientModeChanged(boolean) が発生するので、ここでアンチエイリアスの設定変更等を行い、 invalidate() をコールする
  • プレビュー画像は AndroidManifest.xml 内のservice→metaタグに、drawableを指定しているところがあるので、変更するときはここをいじる
  • BroatcastReceiverのregister/unregisterのタイミングは、 onVisibilityChanged(boolean) で行う