WeChat ミニプログラム用 Mega プラグインのサンプルプロジェクトをすばやく実行する

この記事では、WeChat ミニプログラム用 Mega プラグインのサンプルプロジェクトをすばやく実行する方法を紹介します。以下を学びます。

サンプルプロジェクトの開発環境を構築・設定する。
サンプルの一部機能を実行し、Mega のクラウド定位を使用する。
マッピング結果のマスクファイルを表示し、モデルと実環境の位置合わせを確認する。

始める前に

定位機能を使用できますか？を参照し、定位データベースが正しく作成され、マップが追加済みであることを確認してください。

ミニプログラムの主体が企業であることを確認

重要

Mega ミニプログラムプラグインは、企業主体の WeChat ミニプログラムのみをサポートします。個人主体のミニプログラムでは、このプラグインを使用できません。

ミニプログラムの管理画面で設定 > 基本情報 > 主体情報 を開き、企業法人または個人事業主 と表示されていることを確認してください。

Mega 機能はミニプログラムのプラグインとして提供されるため、ホストとなる 企業主体の WeChat ミニプログラム が必要です。

提供されているサンプルプロジェクトを実行するだけの場合でも、開発者ツールでデバッグとプレビューを行うには 自分の WeChat ミニプログラム AppID を設定する必要があります。

サンプルプロジェクトをダウンロード

開発ツールのダウンロードページに移動します。
EasyAR プライバシーポリシー を確認してから、ダウンロードをクリックします。
ダウンロード完了後、.zip パッケージをローカルで解凍します。

サンプルプロジェクトを設定

WeChat ミニプログラム開発者ツールにログインします。
WeChat ミニプログラム開発者ツールでサンプルプロジェクトをインポートします。
- 開発者ツールを開き、インポートをクリックして、ローカルで展開したディレクトリを選択します。
- AppID が Mega ライセンス申請時に入力した AppID と一致することを確認し、開発モードを ミニプログラム に設定して作成をクリックします。
注記

AppID が一致しないとライセンス検証に失敗します
Mega ライセンスとクラウドサービスを設定

miniprogram/components/sample-data/easyar-settings.ts を開き、準備手順のライセンスとサービス情報に従って該当フィールドを入力します。
- Mega ライセンス
```
/** Mini Program 用の Mega ライセンス */
export const EasyARLicenseKey: string = "";
```
Mega WeChat Mini Program ライセンスの取得方法

EasyAR Developer Center で Mega WeChat Mini Program を選択します。

使用する Mega WeChat Mini Program ライセンス が一覧に存在する必要があります。利用可能なライセンスがない場合は、現在のアカウントが Mega ローカライゼーションデータベース作成に使用したアカウントと同じか確認してください。

Mini Program 名をクリックすると、その Mega ライセンスを取得できます。右側の Copy をクリックし、easyar-settings.ts に EasyARLicenseKey の値として貼り付け、関連付けられた AppID が自分の WeChat Mini Program AppID と完全に一致することを確認します。
- クラウドサービス API Key および Seceret
```
/** クラウドサービスの API Key と Seceret */
export const EasyARAPIKey: string = "";
export const EasyARAPISecret: string = "";
```
クラウドサービス API Key および Seceret の取得方法

EasyAR Developer Center で Cloud Service API KEY を選択します。

以前にクラウドサービス API Key と Seceret を作成済みの場合は、右側の Copy を順にクリックし、easyar-settings.ts に EasyARAPIKey と EasyARAPISecret の値として貼り付けます。

まだクラウドサービス API Key と Seceret を作成していない場合は、次の方法で作成します。

EasyAR Developer Center で Cloud Service API KEY > Create API KEY を選択します。

アプリケーション名を入力し、使用するクラウドサービス Mega Block および/または Mega Landmark を選択して Confirm をクリックします。
- クラウドサービス ServerAddress および AppID：
```
/** Mega クラウドローカライゼーションデータベースの ServerAddress と AppID */
export const MegaTrackerServerAddress: string = "";
export const MegaTrackerAppID: string = "";
```
Mega クラウドローカライゼーションデータベースの ServerAddress と AppID の取得方法

EasyAR Developer Center で Block Cloud Localization を選択し、その後自分の Mega クラウドローカライゼーションサービスグループ を選択します。

自分の Mega クラウドローカライゼーションデータベースを選択します。

Key をクリックし、下部でクラウドローカライゼーションデータベースの AppID と Server Address を順に取得します。右側の Copy をクリックし、easyar-settings.ts に MegaTrackerAppID と MegaTrackerServerAddress の値として貼り付けます。
マッピング結果のマスクファイルですばやく検証する

クラウド定位データベースの マスクファイルをダウンロード から glb 形式のマスクファイルを取得できます。実空間の 3D 白モデルを表示し、注釈を作成せずに位置合わせを確認できます。

注記

この方法は、マッピングバージョン 9.6 以降の結果にのみ適用されます。

クラウド定位データベースで検証する Block を探し、その行の操作列にある マスクファイルをダウンロード をクリックします。実行時はその Block の現場で検証してください。

ポップアップで 低精度 を選択して ダウンロード をクリックすると、スマートフォンでの読み込みとレンダリングの負荷を抑えられます。

ダウンロードした glb ファイルを Mini Program プロジェクトの assets ディレクトリ（サンプルでは miniprogram/assets/）に置き、各モデルの元の位置、回転、スケールを維持します。

miniprogram/components/sample-easyar-mega/index.ts で occlusionMeshAssets 設定の src を Mini Program プロジェクトのルートからの相対パスに変更します。デフォルト設定は次のとおりです。
```
const occlusionMeshAssets = [
    {
        assetId: "occlusionMesh00",
        type: "gltf",
        src: "assets/Low_Poly_occlusion.glb",
        options: {}
    },
];
```
ダウンロードしたマスクに複数の GLB ファイルがある場合は、各ファイルについて固有の assetId と対応する src を持つ項目を occlusionMeshAssets に追加します。サンプルはファイルを読み込み、マスクメッシュを定位された Block に接続して、組み込みの表示・遮蔽マテリアルを適用します。ページの マスクファイル スイッチでメッシュの表示を切り替えます。リソースはサンプルコンポーネントとともに解放されるため、追加の読み込み・解放処理は不要です。

実機でサンプルを実行

ミニプログラム開発者ツールの上部にある実機プレビューをクリックし、QR コードを読み取って開発用スマートフォンにプロジェクトを読み込みます。

注意

AR 機能を持つ xr-frame コンポーネントは、開発者ツールのシミュレーターでは直接実行できません。

注記

WeChat 開発者ツールでサンプルプロジェクトを初めて実行する際、プラグインの権限がない場合は未認可の通知が表示されます。開発者ツールで認可するか、プラグイン導入手順を参照してください。
EasyAR Mega Samples をクリックして、サンプルプロジェクトの AR シーンを開きます。

注記

AR シーンを開けない場合は、端末が WeChat VisionKit に対応していない可能性があります。対応機種の制限を参照してください。
画面に EasyAR Session is initializing と表示されたら、WeChat の平面検出を初期化しています。

ヒント

十分な明るさの環境でテストし、広い単色の壁や単色の床を避けてください。

床などの平面にカメラを向け、スマートフォンを左右に一定の速度で動かすと初期化が早まります。
初期化後はスマートフォンを縦に持ち、カメラに実際の風景を映します。定位に成功すると Debug 情報に Found が表示され、右下の状態表示が白から緑に変わります。
マスクファイルと実環境の位置合わせを確認する

マスクファイルの表示設定を終えたら、モデルの読み込みと対応する Block への定位が完了するまで待ちます。ページの マスクファイル スイッチをオンにすると、カメラ映像に重ねた 3D 白モデルが表示され、実環境との位置合わせを確認できます。