ミニアプリ DevTools

デベロッパー エクスペリエンス

ここまではミニアプリそのものについて説明してきましたが、ここではさまざまなスーパーアプリ プラットフォームのデベロッパー エクスペリエンスについて説明します。すべてのプラットフォームでミニアプリを開発するには、スーパーアプリ プラットフォームから無料で提供される IDE を使用します。他にもいくつかありますが、ここでは最も一般的な 4 つの方法と、比較用にクイックアプリの 5 つについて説明します。

ミニアプリ IDE

スーパーアプリと同様に、ほとんどの IDE は中国語でのみ利用できます。英語(または海外)バージョンは最新ではない可能性があるため、中国語バージョンをインストールすることをおすすめします。macOS デベロッパーは、すべての IDE が署名されているわけではないことに注意してください。署名されていない IDE は、macOS でインストーラの実行が拒否されます。Apple のヘルプで概要が説明されているように、自己責任でこの制限を回避できます。

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

ミニアプリ開発をすぐに開始できるように、すべてのスーパーアプリ プロバイダは、すぐにダウンロードしてテストできるデモアプリを提供しています。これらのデモアプリは、さまざまな 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 の基本コンポーネントは非常に似ています。Monaco Editor に基づくコードエディタが常に用意されています。これは、VS Code を支えるプロジェクトと同じです。すべての IDE には、Chrome DevTools フロントエンドに基づくデバッガが用意されています。このデバッガは、後述する(デバッガを参照)ように、一部が変更されています。IDE は NW.js または Electron アプリとして実装されます。IDE 内のシミュレーターは、NW.js <webview> タグまたは Electron <webview> タグとして実装されます。これらのタグは、Chromium <webview> タグに基づいています。IDE の内部に興味がある場合は、キーボード ショートカット Ctrl+Alt+I(Mac の場合は Command+Option+I)を使用して Chrome DevTools で簡単に検査できます。

Chrome DevTools で検査した Baidu の DevTools。Chrome DevTools の [Elements] パネルにシミュレータのウェブビュー タグが表示されています。
Chrome DevTools で Baidu DevTools を調べると、シミュレータが Electron <webview> タグとして実装されていることがわかります。

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

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

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

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

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

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

デバッガ

要素のデバッグ

ミニアプリのデバッグは、Chrome DevTools を使用したことのある人なら誰でも使い慣れているはずです。ただし、ミニアプリに合わせてワークフローを調整する必要がある重要な違いがいくつかあります。ミニアプリ IDE には、Chrome DevTools の [要素] パネルではなく、HTML の特定のディレクトリに合わせてカスタマイズされたパネルがあります。たとえば、WeChat の場合、パネルは Wxml と呼ばれ、WeiXin Markup Language を表します。Baidu DevTools では、これは「Swan 要素」と呼ばれます。ByteDance DevTools では Bxml と呼ばれます。Alipay では AXML という名前で、Quick App ではパネルを単に UX と呼びます。これらのマークアップ言語については、後で詳しく説明します。

WeChat DevTools の [Wxml] パネルで画像を検査している様子。使用されているタグが「image」タグであることを示しています。
WeChat DevTools で <image> 要素を検査。

カスタム要素の仕組み

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

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

CSS デバッグ

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

WeChat DevTools で、上部と下部のパディングが「200rpx」に指定されたビューを検査している様子。
WeChat DevTools でビューのレスポンシブ ピクセル(200rpx 0)で指定されたパディングを検査。

パフォーマンス監査

ミニアプリではパフォーマンスが重視されるため、WeChat DevTools やその他の DevTools に Lighthouse をベースにした監査ツールが統合されているのは当然です。監査の重点分野は、総合、パフォーマンス、エクスペリエンス、ベスト プラクティスです。IDE のビューはカスタマイズできます。以下のスクリーンショットでは、監査ツールの画面領域を広げるために、コードエディタを一時的に非表示にしています。

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

API モック

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

WeChat DevTools で API エンドポイントのモック レスポンスを設定する。
WeChat DevTools の統合 API レスポンス モック機能。

謝辞

この記事は、Joe MedleyKayce BasquesMilica MihajlijaAlan Kent、Keith Gu が確認しました。