前書き
日本では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の性能調査結果が次の通りです。
まとめ
| ネイティブアプリ | ウェブアプリ | Quick App | |
|---|---|---|---|
| インストールの有無 | 必要 | 不要 | 不要 |
| デバイス機能の使用 | 可能 | 不可 | 可能 |
| リリース時の審査 | あり | なし | あり |
| iOS同時対応 | 不可 | 可能 | 不可 |
| アプリのサイズ | 大きい | 小さい | 小さい |
| 起動時間 | 遅い | 速い | 速い |
| 操作性 | 良い | 普通 | 良い |
| メモリ使用量 | 少ない | 多い | 少ない |
AppGalleryのQuick Appの紹介
Quick AppはAppGalleryで検索できます。AppGalleryがインストールされていない方は、こちらのページ（AppGallery をインストールするにはどうすればよいでしょうか）を参考に、AppGalleryをダウンロードし、インストールしておいてください。
AppGalleryを開き、QuickAppをタップします。
ここでさらに検索をかけます。実行したいQuick Appは”開く”ボタンをタップして実行します。
例として、”楽天市場”を開いてみましょう。
Quick App終了時に、そのQuick Appを追加しておくと、次回起動するときに便利です。
Quick Appの開発手順
Quick Appの開発手順はAndroidアプリのとほとんど同じです。それでは、詳しい手順を説明しましょう。
Quick Appの開発環境
Quick Appを開発するのに、以下のものが必要です。それらをダウンロードしてインストールしてください。
AppGallery Connect側の作業
AppGallery Connect側の作業はHMS Account Kit実装入門の前準備をご参照ください。ただ、注意しなければならないのは、アプリの追加画面でQuick Appを選ぶことです。
Huawei quick app IDE
Huawei quick app IDEを起動し、“New Project”をクリックします。
“App Name”と“Package Name”を設定します。
簡単なQuick Appの作り方を示したいので、Templateでは今回はHTML5 Appを選びます。
OKボタンをクリックしたら、プロジェクトが生成され、次のような画面に遷移します。
コーディングに入る前に、指紋ボタンをクリックし、署名を設定しておきます。
署名が作成されたら、証明書が/sign/releaseに格納されます。
ここでさらに/sign/debugフォルダを作り、/sign/releaseにあるcertificate.pemとprivate.pemをここにコピーします。
もう一度指紋ボタンをクリックします。クリックしたら、Fingerprint（公開鍵暗号）が表示されます。それをコピーします。
AppGallery Connectの[My Projects] -> [General information] -> [App information] -> [SHA-256 certificate fingerprint]に、コピーした公開鍵暗号をセットします。
Quick Appのコーディング
Quick Appはウェブアプリと同じく、HTML、CSS、JSで開発します。ウェブアプリの開発経験がある方なら、すぐ慣れると思います。
プロジェクトの構成
プロジェクトは次のパーツより構成されます。
- manifest.json
- app.ux
- /Common/[リソースファイル]
- /[ページ名]/[ページ名のuxファイル]
詳しくはこちらをご参照ください。
Quick App Reference
manifest.json
基本的にAndroidManifest.xmlと同じものだと考えればよいです。
app.uxファイル
すべてのページ（app.ux以外のuxファイル）に使われるものはここで定義します。
uxファイル
uxファイルはtemplateとstyleとscriptで構成されます。それぞれのブロックのプログラミング言語が違います。templateはhtml5、styleはcss、scriptはjavaScriptになります。
Quick Appのサンプル
試しに楽天市場のQuick Appを作ってみましょう。
まずloadUrlの値を "https://www.rakuten.co.jp/" に変えます。
デバッグボタンをクリックします。
Huawei Quick App LoaderがAndroid端末にインストールされていない場合はダイアログが出ます。ここでインストールします。
楽天市場が出てきました。右上のフローティング操作ボタンをドラッグして別の場所に移動できます。
終わり
Quick Appは高いポテンシャルを秘めているので、皆さんもぜひ試してみてください。