ミニアプリ DevTools

ミニアプリ自体について説明したところで、ここではさまざまなスーパーアプリ プラットフォームのデベロッパー エクスペリエンスに焦点を当てたいと思います。すべてのプラットフォームのミニアプリ開発は、スーパーアプリ プラットフォームによって無料で提供されている IDE で行われます。まだたくさんありますが、ここでは特に人気の高い 4 つと、比較のために 5 つ目のクイックアプリに焦点を当てたいと思います。

スーパーアプリと同様に、IDE の大部分は中国語でのみ提供されています。実際には、中国語バージョンをインストールし、英語(または海外)バージョンでは最新ではない場合があるため、インストールしていないことを確認する必要があります。macOS のデベロッパーは、署名されていない IDE もあるため、macOS ではインストーラの実行が拒否されます。Apple のヘルプで概説されているとおり、自己責任でこれをバイパスできます。

Mini アプリのスターター プロジェクト

ミニアプリの開発を迅速に開始するために、すべてのスーパーアプリ プロバイダがデモアプリを提供しています。デモアプリはすぐにダウンロードしてテストでき、場合によってはさまざまな IDE の「新しいプロジェクト」ウィザードに統合されることもあります。

開発フロー

IDE を起動してミニアプリ(デモ用)を読み込んだら、必ず最初にログインします。通常、IDE によって生成されたスーパーアプリ(すでにログインしている)で QR コードをスキャンするだけで済みます。パスワードを入力しなければならないことは、ほとんどありません。ログインすると、IDE がユーザーの ID を認識し、プログラミング、デバッグ、テスト、審査のためにアプリを送信できるようになります。以下に、上記の段落で説明した 5 つの IDE のスクリーンショットを示します。

シミュレータ、コードエディタ、デバッガが表示されている WeChat DevTools アプリケーション ウィンドウ。
シミュレータ、コードエディタ、デバッガを備えた WeChat DevTools。
コードエディタ、シミュレータ、デバッガが表示されている Alipay DevTools アプリケーション ウィンドウ。
コードエディタ、シミュレータ、デバッガを備えた Alipay DevTools。
シミュレータ、コードエディタ、デバッガが表示されている Baidu DevTools アプリケーション ウィンドウ。
シミュレータ、コードエディタ、デバッガを備えた Baidu DevTools。
シミュレータ、コードエディタ、デバッガが表示されている ByteDance DevTools アプリケーション ウィンドウ。
シミュレータ、コードエディタ、デバッガを備えた ByteDance DevTools。
コードエディタ、シミュレータ、デバッガが表示された Quick App DevTools アプリケーション ウィンドウ。
コードエディタ、シミュレータ、デバッガを備えたクイックアプリ DevTools。

ご覧のとおり、すべての IDE の基本的なコンポーネントはよく似ています。VS Code を支えているのと同じプロジェクトである Monaco Editor に基づくコードエディタが常に存在します。すべての IDE に、Chrome DevTools フロントエンドに基づくデバッガがありますが、変更点は後で詳しく説明します(デバッガをご覧ください)。IDE 自体NW.js または Electron アプリとして実装され、IDE のシミュレータは NW.js <webview> タグまたは Electron <webview> タグとして実現され、これらは Chromium <webview> タグに基づきます。IDE の内部に興味がある場合は、Chrome DevTools でキーボード ショートカットの Ctrl+Alt+I(Mac の場合は command+option+I)を使用して確認するだけで済みます。

バイドゥの DevTools を調べるために使用される Chrome DevTools。Chrome DevTools の [要素] パネルに、シミュレータの WebView タグが表示されています。
Chrome DevTools を使用してバイドゥ DevTools を調べると、シミュレータが Electron の <webview> タグとして認識されていることがわかりました。

シミュレータと実機のテストとデバッグ

このシミュレータは、Chrome DevTools のデバイスモードで確認できるものと同様のものです。さまざまな Android デバイスと iOS デバイスをシミュレートしたり、スケールやデバイスの向きを変更したりできるだけでなく、さまざまなネットワーク状態、メモリ圧力、バーコード読み取りイベント、予期しない終了、ダークモードをシミュレートできます。

組み込みのシミュレータで、アプリの動作を大まかに把握するだけでは十分ですが、通常のウェブアプリのようなオンデバイス テストは不可能です。開発中のミニアプリのテストは、QR コードをスキャンするだけで完了します。たとえば、ByteDance DevTools では、IDE によって動的に生成された QR コードを実際のデバイスでスキャンすると、クラウドにホストされたバージョンのミニアプリが表示され、すぐにデバイスでテストできます。これが ByteDance で機能する仕組みとして、QR コードの背後にある URL()はホストされたページ()にリダイレクトされ、そこに snssdk1128:// などの特別な URI スキームのリンクが含まれ、Douyin や Toutiao などのさまざまな ByteDance スーパーアプリでミニアプリをプレビューできます(こちらは)。他のスーパーアプリ プロバイダは中間ページを経由せず、プレビューを直接開きます。

ユーザーが Douyin アプリでスキャンしてデバイス上の現在のミニアプリを確認できる QR コードを表示している ByteDance DevTools。
ByteDance DevTools に QR コードが表示されている様子。ユーザーはこの QR コードを Douyin アプリでスキャンして、デバイス上ですぐにテストできます。
会社のさまざまなスーパーアプリで ByteDance ミニアプリをプレビューするための中間ランディング ページ。プロセスをリバース エンジニアリングするために通常のデスクトップ ブラウザで開かれています。
ミニアプリをプレビューするための ByteDance の中級ランディング ページ(フローを示すためにパソコンのブラウザで開かれています)。

さらに魅力的な機能として、クラウドベースのプレビューのリモート デバッグがあります。同様に IDE で生成された特別な QR コードをスキャンするだけで、物理デバイスでミニアプリが開き、リモート デバッグ用に Chrome DevTools ウィンドウがパソコン上で実行されます。

ミニアプリを実行しているスマートフォンで、ノートパソコンで検査している ByteDance DevTools デバッガによって UI の一部が強調表示されている。
ByteDance DevTools を使用して、実際のデバイスでミニアプリをワイヤレスでリモート デバッグします。

デバッガ

要素のデバッグ

ミニアプリのデバッグ エクスペリエンスは、Chrome DevTools を使った経験がある人にはおなじみのものです。ただし、ワークフローをミニアプリに合わせて調整する重要な違いがいくつかあります。ミニアプリの IDE には、Chrome DevTools の [Elements] パネルではなく、特定の HTML 言語に合わせてカスタマイズされたパネルがあります。たとえば、WeChat の場合、このパネルは Wxml(WeiXin Markup Language)と呼ばれます。Baidu DevTools では、Swan Element と呼ばれます。ByteDance DevTools では Bxml と呼ばれます。Alipay はこれに AXML という名前を付け、Quick App では単に「UX」としてパネルを参照します。これらのマークアップ言語については、後で詳しく説明します。

WeChat DevTools の [Wxml] パネルでイメージを検査する使用されているタグが「image」タグであることがわかります。
WeChat DevTools で <image> 要素を検査する。

カスタム要素の仕組み

about://inspect/#devices を使用して実際のデバイスで WebView を調べると、WeChat DevTools が意図的に事実を隠していたことがわかります。WeChat DevTools に <image> が表示されていましたが、実際に見ているのは、<div> が唯一の子である <wx-image> というカスタム要素です。興味深いことに、このカスタム要素は Shadow DOM を使用しません。これらのコンポーネントの詳細については、後述します。

Chrome DevTools を使用して、実際のデバイスで実行されている WeChat ミニアプリを検査します。WeChat DevTools で「image」タグが表示されていると報告されましたが、Chrome DevTools には「wx-image」カスタム要素が実際に処理されていることが示されています。
WeChat DevTools で <image> 要素を調べると、これは実際には <wx-image> カスタム要素であることがわかりました。

CSS のデバッグ

もう 1 つの違いは、CSS のさまざまな言語におけるレスポンシブ ピクセル用の新しい長さの単位 rpx です(この単位については後述)。WeChat DevTools では、デバイスに依存しない CSS の長さ単位を使用することで、さまざまなデバイスサイズ向けの開発をより直感的に行うことができます。

WeChat DevTools で、上下のパディングが 200rpx に指定されたビューを調べます。
WeChat DevTools を使用して、ビューのレスポンシブ ピクセル(200rpx 0)で指定されたパディングを検査します。

パフォーマンス監査

ミニアプリではパフォーマンスが最重要事項であるため、WeChat DevTools やその他の DevTools に、Lighthouse からヒントを得た統合監査ツールが組み込まれているのは当然のことです。監査の重点分野は 合計、パフォーマンス、経験、ベストプラクティスですIDE のビューをカスタマイズできます。以下のスクリーンショットでは、監査ツールの表示スペースを広げるために、一時的にコードエディタを非表示にしています。

組み込みの監査ツールを使用してパフォーマンス監査を実行する。スコアは合計、パフォーマンス、エクスペリエンス、ベスト プラクティスで、100 点満点中 100 点で示されます。
合計、パフォーマンス、エクスペリエンス、ベスト プラクティスを示す、WeChat DevTools に組み込まれた監査ツール。

API モック

API レスポンスのモックは、デベロッパーが別のサービスを設定するのではなく、WeChat DevTools に直接組み込まれています。デベロッパーは使いやすいインターフェースを使用して、API エンドポイントと必要な疑似レスポンスを設定できます。

WeChat DevTools で API エンドポイントにモック レスポンスを設定します。
WeChat DevTools に組み込まれている API レスポンスのモック機能。

謝辞

この記事は、Joe MedleyKayce BasquesMilica MihajlijaAlan Kent、Keith Gu によってレビューされました。