ファーウェイ・ウォッチのアプリ開発について（サンプルコード付き）

ファーウェイ・ウォッチについて

ファーウェイ・ウォッチは２種類あり、高機能のシリーズ（Wearable）と低価格のシリーズ（Lite Wearable）があります。

	Wearable	Lite Wearable
スペック	高	低
開発言語	ArkTSまたはJS	JSのみ
できること	多い（ArkTSで開発する場合）	少ない
シリーズ	Watchシリーズ	WATCH GTシリーズ
		WATCH Dシリーズ
		WATCH FITシリーズ

現在日本でよく売れているファーウェイ・ウォッチは主に価格帯が安いLite Wearableです。そのため、ウォッチアプリの開発需要はLite Wearableのほうが圧倒的に多いです。

開発環境

DevEco Studio

開発手順

ファーウェイ・アカウントの作成

ファーウェイデベロッパーのサイト(https://developer.huawei.com/consumer/en/)を開き、右上の「Sign in」ボタンをクリックします。

「Register」ボタンをクリックします。

情報を記入したら、「REGISTER」ボタンをクリックします。

プライバシーポリシーの「Agree」ボタンをクリックます。

開発者アカウントの作成

ファーウェイデベロッパーのサイト(https://developer.huawei.com/consumer/en/)を開き、右上の「Console」ボタンをクリックします。

個人開発者

「Individual」を選びます。

必要事項を記入し、「Submit」ボタンをクリックします。

企業開発者

「Enterprise」を選びます。

必要事項を記入し、さらにDUNS番号を入力し、または事業許可証を添付し、「Submit」ボタンをクリックします。

審査が通ったら、「Console」ボタンからコンソールに入れるようになります。

マーチャントサービスの登録（オプション）

アプリ課金サービスを利用する場合、マーチャントサービスを登録する必要があります。
コンソールの左側のメニューから「Merchant Service」をクリックし、情報を記入し、提出します。

ペイメントサービスの登録（オプション）

広告サービスを利用する場合、ペイメントサービスを登録する必要があります。
コンソールの左側のメニューから「Payment Service」をクリックし、情報を記入し、提出します。

プロジェクトの作成

アプリを開発するのに、まずプロジェクトを作成しなければなりません。「AppGallery Connect」を開き、「My projects」をクリックすれば、プロジェクト作成画面が表示されます。

プロジェクト作成画面で「Add project」をクリックし、プロジェクトの名前を入力します。

プロジェクトを作成したら、次はアプリを作成します。
プロジェクト画面の「Add app」ボタンをクリックし、アプリの情報を入れます。

Lite wearableのプロジェクトの作成

DevEco Studioを開き、「Create Project」で「[Lite]Empty Ability」を選びます。

Lite wearableの開発概念はウェブページの開発に似ています。hmlファイルにレイアウトを書き、cssファイルにデザインを書き、jsファイルにロジックを書きます。

Lite wearableのデバッグ方法

シミュレーター

DevEco Studioの右上にある「Huawei Lite Wearable Simulator」を使います。

実機

前準備

• Lite wearableをAndroidスマートフォンに接続します。
• AndroidスマートフォンにHuaweiヘルスケアアプリをインストールします。
• AndroidスマートフォンにAppGalleryをインストールします。

HUAWEI DevEco Assistant

AppGalleryを開き、右下の「自分」ボタンをタップし、「自分」画面を開きます。その後、上の「HUAWEI IDにログイン」をタップし、ログインします。

「自分」画面の下部にある「設定」ボタンをタップします。

「国/地域」を「中国」に設定します（現在HUAWEI DevEco Assistantがまだ中国でしか公開されていないため）。その後、AppGalleryをいったん終了し、また起動し直します。

検索キーワードに「DevEco」を入れて、検索します。

そうしたら、このアプリが出てくるので、それをインストールします。

実機デバッグ

[Project Structure] > [Signing Configs]で署名を設定します。「Automatically generate signature」のチェックを必ず外してください。

[Build] -> [Build Hap(s)/APP(s) > Build Hap(s)でhapのバイナリを作成します。

作成したバイナリをAndroidスマートフォンの/sdcard/hapsにpushします。

HUAWEI DevEco Assistantを起動し、「Apps」ボタンをタップします。

転送されたhapファイルの右側の「Install」ボタンをタップします。

Lite Wearableの開発の注意事項

• Lite Wearableで実現できることがかなり限られています。おそらく開発者が思った以上に制限が多いです。特に画面表示について、基本的に一度決まったレイアウトを動的に再編集することがほぼ無理なので、凝ったものを作るのがかなり難しいです。そのため、なるべく簡単かつ静的なレイアウトを作るように心掛けることをお勧めします。
• 利用できるCSSのプロパティはかなり限られています。ウェブページ感覚でレイアウトを作ってしまうと、アプリが動かなかったり、表示できなかったり、表示が崩れたり、インストールできなかったりといった不具合が生じるかもしれません。
• margin-left、margin-right、margin-top、margin-bottomにマイナスの値を入れられません。
• HAPファイルをLite Wearableの実機にインストールし、動作させることができますが、ログが取れず、デバッグもできません。ログとデバッグをしたい場合、DevEco Studio付属のシミュレーター（Huawei Lite Wearable Simulator）を使うしかありません。
• Wearableで動作するからといって、Lite Wearableでも動作するとは限りません。必ずシミュレーター（Huawei Lite Wearable Simulator）で動作確認した上、Lite Wearableの実機で動作を確認しましょう。
• config.jsonのmodule > deviceTypeでは、liteWearableとwearableを両方入れました。しかし、実際に運用するときに、プロジェクトを２つに分け、module > deviceTypeにliteWearableまたはwearableのみを設定することをお勧めします。特にWear Engineを導入する際、WearableのWear Engine SDKとLite WearableのWear Engine SDKは違うものになります。同時に導入すると、プロジェクトがビルドできなくなります。

サンプルコード

ファーウェイLite Wearableマップアプリのサンプルプロジェクト：https://github.com/Rei2020GitHub/LiteWearableMapDemo

これはLite Wearableのサンプルプロジェクトです。

ファーウェイのウォッチで地図アプリのデモを作ってみました。高性能のWearableはArkTS言語を使い、利用できるSDKも多いです。それに対してLite WearableはJS言語を使い、利用できるSDKもかなり少ないです。

通常、地図アプリを使う場合、マップSDKを利用したほうが開発効率が高いですが、残念ながら、Lite WearableにマップSDKがありません。また、画像の拡大・縮小・回転もできません。

そのため、地図の拡大・縮小機能をあきらめ、代わりにあらかじめ拡大した地図画像と縮小した地図画像を用意し、それを切り替えることで、疑似的な拡大・縮小機能を実現します。回転機能そのものはあきらめます。

参考資料

• Lite Smart Watches (https://developer.huawei.com/consumer/en/doc/best-practices/bpta-lite-wearable-guide)
• JavaScript-compatible Web-like Development Paradigm (ArkUI.Lite) (https://developer.huawei.com/consumer/en/doc/harmonyos-references/arkui-js-lite-comp)
• ライフサイクル (https://developer.huawei.com/consumer/en/doc/harmonyos-references/js-lite-framework-lifecycle)
• 多言語対応 (https://developer.huawei.com/consumer/en/doc/harmonyos-references/js-lite-framework-localization)
• 利用可能なCSSのプロパティ (https://developer.huawei.com/consumer/en/doc/harmonyos-references/js-lite-common-styles)
• stackタグ (https://developer.huawei.com/consumer/en/doc/harmonyos-references/js-lite-components-container-stack)
• divタグ (https://developer.huawei.com/consumer/en/doc/harmonyos-references/js-lite-components-container-div)
• imageタグ (https://developer.huawei.com/consumer/en/doc/harmonyos-references/js-lite-components-basic-image)
• inputタグ (https://developer.huawei.com/consumer/en/doc/harmonyos-references/js-lite-components-basic-input)
• textタグ (https://developer.huawei.com/consumer/en/doc/harmonyos-references/js-lite-components-basic-text)
• @system.router (https://developer.huawei.com/consumer/en/doc/harmonyos-references/js-apis-system-router)
• Wearable App Development (JS) (https://developer.huawei.com/consumer/en/doc/connectivity-Guides/fitnesswatch-dev-0000001051423561)