Quick Appの開発方法

# 前書き
日本ではQuick Appがあまり知られていません。しかし、Quick Appはすでに１７０ヶ国以上展開されています。本稿はQuick Appの特徴と開発手順を紹介するものです。

# Quick Appの概要
ユーザーがAndroid上で動かすサービスが主に２つあります。

* ネイティブアプリ（Androidアプリ）
* ウェブアプリ（ブラウザでウェブサイトを開く）

さらにQuick Appを加えれば、合計３つあります。

Quick Appの開発方法を述べる前に、ネイティブアプリとウェブアプリとQuick Appの特徴を比べてみたいです。

### ネイティブアプリの特徴

* インストールが必要
* デバイス機能が使用可能
* リリース時の審査あり
* iOS同時対応不可
* 開発言語（Java、Kotlin）
* APKの容量が大きい（数十MB以上のアプリが多く、100MBを超えるアプリも少なくない）

### ウェブアプリの特徴

* インストールが不要
* デバイス機能が使用不可
* リリース時の審査なし
* iOS同時対応可
* 開発言語（HTML、CSS、JS）
* 容量が小さい

### Quick Appの特徴

* インストールが不要
* デバイス機能が使用可能
* リリース時の審査あり
* iOS同時対応不可
* 開発言語（HTML、CSS、JS）
* 容量が4MBまで

### 性能比較
ネイティブアプリ、ウェブアプリ、Quick Appの性能調査結果が次の通りです。
![スクリーンショット 2020-10-08 144822.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/7f202831-4858-50b8-b4a9-4263f09c2be7.png)

### まとめ

||ネイティブアプリ|ウェブアプリ|Quick App|
|:---:|:---:|:---:|:---:|
|インストールの有無|必要|<font color="red">不要</font>|<font color="red">不要</font>|
|デバイス機能の使用|<font color="red">可能</font>|不可|<font color="red">可能</font>|
|リリース時の審査|あり|<font color="red">なし</font>|あり|
|iOS同時対応|不可|<font color="red">可能</font>|不可|
|アプリのサイズ|大きい|<font color="red">小さい</font>|<font color="red">小さい</font>|
|起動時間|遅い|<font color="red">速い</font>|<font color="red">速い</font>|
|操作性|<font color="red">良い</font>|普通|<font color="red">良い</font>|
|メモリ使用量|<font color="red">少ない</font>|多い|<font color="red">少ない</font>|


# AppGalleryのQuick Appの紹介
Quick AppはAppGalleryで検索できます。AppGalleryがインストールされていない方は、こちらのページ（[AppGallery をインストールするにはどうすればよいでしょうか](https://consumer.huawei.com/jp/support/content/ja-jp00696141/)）を参考に、AppGalleryをダウンロードし、インストールしておいてください。

AppGalleryを開き、QuickAppをタップします。
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/69d9c57b-f752-d31e-7da7-6d1473e21378.png">

ここでさらに検索をかけます。実行したいQuick Appは”開く”ボタンをタップして実行します。
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/b063d2bf-8caa-f1e5-a588-836451ef376c.png">

例として、”楽天市場”を開いてみましょう。
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/d3be7c5c-a578-add3-185e-140d637c7e32.png">

Quick App終了時に、そのQuick Appを追加しておくと、次回起動するときに便利です。
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/7697bbb2-fa5c-5b0f-102d-c5124c7fcd20.png">

# Quick Appの開発手順
Quick Appの開発手順はAndroidアプリのとほとんど同じです。それでは、詳しい手順を説明しましょう。

## Quick Appの開発環境
Quick Appを開発するのに、以下のものが必要です。それらをダウンロードしてインストールしてください。

* [Node.js](https://nodejs.org/)
* [Huawei quick app IDE](https://appfile1.hicloud.com/FileServer/getFile/appAttach/011/111/111/0000000000011111111.20200829101405.23973388354629496506234801230073:20471231000000:0001:EB03AC4B342CDE671C6CB407310A1FC047BBFC82BA2F7706DA19C6886635986D.exe?needInitFileName=true)

## AppGallery Connect側の作業
AppGallery Connect側の作業は[HMS Account Kit実装入門](https://qiita.com/Rei_2020/items/81001ffc6299e56401c8)の前準備をご参照ください。ただ、注意しなければならないのは、アプリの追加画面でQuick Appを選ぶことです。
<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/6cbd9603-cb16-6f80-10e7-8b262e8b9337.png">

## Huawei quick app IDE
Huawei quick app IDEを起動し、“New Project”をクリックします。
<img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/934712d3-192f-1dfc-5c68-5dec7cd11772.png">

“App Name”と“Package Name”を設定します。
簡単なQuick Appの作り方を示したいので、Templateでは今回はHTML5 Appを選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/e282ebca-cb3a-12e8-401e-d19829a0e691.png)

OKボタンをクリックしたら、プロジェクトが生成され、次のような画面に遷移します。
コーディングに入る前に、指紋ボタンをクリックし、署名を設定しておきます。
<img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/e5ad084f-9d9a-a3cc-f18c-5ee4577e77ce.png">

署名が作成されたら、証明書が/sign/releaseに格納されます。
<img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/e9eb195c-8179-7408-8f59-6353114de99a.png">

![スクリーンショット 2020-10-08 233351.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/74b04b35-1d67-319f-463e-5acfe402c9b0.png)

ここでさらに/sign/debugフォルダを作り、/sign/releaseにあるcertificate.pemとprivate.pemをここにコピーします。
![スクリーンショット 2020-10-08 233533.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/5306245b-d74d-f602-cdb8-360fd5ba25ee.png)

もう一度指紋ボタンをクリックします。クリックしたら、Fingerprint（公開鍵暗号）が表示されます。それをコピーします。
<img width="800" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/b318db26-d209-d8ad-3791-024709f56232.png">

AppGallery Connectの[My Projects] -> [General information] -> [App information] -> [SHA-256 certificate fingerprint]に、コピーした公開鍵暗号をセットします。
![スクリーンショット 2020-10-08 234731.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/0a58fa4a-a124-1bec-0e7f-b120138233cb.png)

## Quick Appのコーディング
Quick Appはウェブアプリと同じく、HTML、CSS、JSで開発します。ウェブアプリの開発経験がある方なら、すぐ慣れると思います。

### プロジェクトの構成
プロジェクトは次のパーツより構成されます。

* manifest.json
* app.ux
* /Common/[リソースファイル]
* /[ページ名]/[ページ名のuxファイル]

詳しくはこちらをご参照ください。
[Quick App Reference](https://developer.huawei.com/consumer/jp/doc/development/quickApp-References/quickapp-filestructure)

### manifest.json
基本的にAndroidManifest.xmlと同じものだと考えればよいです。
![スクリーンショット 2020-10-09 000313.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/bb65ffd7-d607-bf40-ea16-da551e85ca98.png)

### app.uxファイル
すべてのページ（app.ux以外のuxファイル）に使われるものはここで定義します。

### uxファイル
uxファイルはtemplateとstyleとscriptで構成されます。それぞれのブロックのプログラミング言語が違います。templateはhtml5、styleはcss、scriptはjavaScriptになります。

![スクリーンショット 2020-10-09 001731.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/1978d766-0034-c57f-0195-36b1b75758b6.png)

### Quick Appのサンプル
試しに楽天市場のQuick Appを作ってみましょう。

まずloadUrlの値を "https://www.rakuten.co.jp/" に変えます。
![スクリーンショット 2020-10-09 002458.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/e2210eb5-0533-1d21-59e2-9825f453633e.png)

デバッグボタンをクリックします。
![スクリーンショット 2020-10-09 002805.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/7f3c1418-2b9b-f0ed-12b2-c3b40d32d522.png)

Huawei Quick App LoaderがAndroid端末にインストールされていない場合はダイアログが出ます。ここでインストールします。
![スクリーンショット 2020-10-09 003650.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/7dffd936-c3c1-1d38-1072-cea6fe12ae38.png)


楽天市場が出てきました。右上のフローティング操作ボタンをドラッグして別の場所に移動できます。
<img width="300" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704548/44b25a92-ba4d-8cac-78be-f14fe2995a1b.png">

# 終わり
Quick Appは高いポテンシャルを秘めているので、皆さんもぜひ試してみてください。

# 参考ページ
[Quick Appの概要](https://developer.huawei.com/consumer/jp/quickApp)
[Quick Appのガイド](https://developer.huawei.com/consumer/jp/doc/development/quickApp-Guides/quickapp-introduction)
[Quick AppのAPI](https://developer.huawei.com/consumer/jp/doc/development/quickApp-References/quickapp-filestructure)