Table of Contents

Quick run wechat mini program mega plugin sample project

この記事では、wechat mini program megaプラグインのサンプルプロジェクトを迅速に実行する方法を紹介します。以下の内容を学習します：

  • サンプルプロジェクトの開発環境の構築と設定
  • サンプルの一部機能の実行：megaクラウドローカライゼーションの使用

Before you begin

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

重要

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

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

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

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

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

  1. 開発ツールダウンロードページ にアクセス

  2. easyarプライバシーポリシー を確認後、ダウンロードをクリック

    downloadsample

  3. ダウンロード完了後、ローカルで .zip ファイルを解凍

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

  1. 微信小程序开发者ツールにログインします。

  2. 微信小程序开发者ツールでサンプルプロジェクトをインポートします。

    • 开发者ツールを開いたら、インポートボタンをクリックし、ローカルで解凍したディレクトリを選択します。

    导入开发者工具

    选择本地目录

    • AppID が Megaライセンス申請時に記入したAppID と一致し、開発モードが小程序であることを確認し、「作成」をクリックします。

    [!注意] AppIDが一致しないとライセンス検証が失敗します

    导入开发者工具选项

  3. Megaライセンスとクラウドサービスの設定

    miniprogram/components/sample-data/easyar-settings.ts ファイルを開き、準備作業で取得したライセンスとサービス情報を対応するフィールドに入力します：

    • Megaライセンス
    /** 小程序用Megaライセンス */
export const EasyARLicenseKey: string = "";
    Mega微信小程序ライセンスの取得方法

    EasyAR開発センターで Mega微信小程序を選択します。

    ライセンスリスト

    使用するMega微信小程序ライセンスがリストに存在する必要があります（利用可能なライセンスがない場合は、アカウントとMega位置情報ライブラリ作成に使用したアカウントが同一か確認してください）。

    小程序名をクリックすると、当該小程序のMegaライセンスを取得できます（右側のコピーをクリックし、easyar-settings.tsファイル内のEasyARLicenseKeyの値として貼り付け）。また、関連付けられたAppIDが微信小程序のAppIDと完全に一致することを確認してください。

    ライセンス詳細


    • クラウドサービスAPI KeyおよびSeceret
    /** クラウドサービスAPI KeyおよびSeceret */
export const EasyARAPIKey: string = "";
export const EasyARAPISecret: string = "";
    クラウドサービスAPI KeyおよびSeceretの取得方法

    EasyAR開発センターでクラウドサービスAPI KEYを選択します。

    以前にクラウドサービスAPI KeyおよびSeceretを作成済みの場合は、右側のコピーを順次クリックし、easyar-settings.tsファイル内のEasyARAPIKeyおよびEasyARAPISecretの値として貼り付けます。

    クラウドサービスAPI KEY

    以前に作成していない場合は、以下の方法で作成します：

    EasyAR開発センターでクラウドサービスAPI KEY > API KEYを作成を選択します。

    API KEY作成

    API KEY作成詳細

    アプリケーション名を入力し、使用するクラウドサービス（Mega Block および/または Mega Landmark）を選択し、「確定」をクリックします。


    • クラウドサービスServerAddressおよびAppID：
    /** Megaクラウド位置情報ライブラリのServerAddressおよびAppID */
export const MegaTrackerServerAddress: string = "";
export const MegaTrackerAppID: string = "";
    Megaクラウド位置情報ライブラリのServerAddressおよびAppIDの取得方法

    EasyAR開発センターでBlockクラウド位置情報を選択し、使用するMegaクラウド位置情報サービスグループを選択します。

    クラウド位置情報サービスグループの選択

    使用するMegaクラウド位置情報ライブラリを選択します：

    クラウド位置情報ライブラリの選択

    位置情報の取得

    キーをクリックし、下方でクラウド位置情報ライブラリのAppIDとServer Addressを順次取得します（右側のコピーをクリックし、easyar-settings.tsファイル内のMegaTrackerAppIDおよびMegaTrackerServerAddressの値として貼り付けます）。

実機でのサンプル実行

  1. 小程序開発ツール上部バーの実機プレビューボタンをクリックし、QRコードをスキャンして開発用スマートフォンにロードします。

    注意

    AR機能付きxr-frameコンポーネントは開発ツール上で直接シミュレート実行できません。 シミュレート実行

    QRコード読み込み

    注記

    微信開発者ツールでサンプルプロジェクトを初めて実行する際、プラグイン権限をまだ取得していない場合、ツールは通常プラグイン未承認のポップアップを表示します。微信開発者ツールによる自動承認、またはプラグイン接続フローを参照してください。

  2. EasyAR Mega SamplesをクリックしてサンプルプロジェクトのARシーンに入ります。

    Sampleエントリ

    注記

    サンプルプロジェクトのARシーンに入れない場合、現在のデバイスが微信のビジュアルアルゴリズムコンポーネントVisionKitをサポートしていない可能性があります。詳細は機種制限を参照してください。

  3. 画面にEasyAR Session is initializingと表示される場合、微信平面検出が初期化中であることを示します。

    ヒント

    十分な光量の環境下でテストし、広範囲の無地の壁や床を避けてください。

    地面や他の平面に向けてスマートフォンを均等な速度で左右に動かすと、このプロセスを高速化できます。

    初期化中

  4. 初期化が完了したら、スマートフォンを垂直に持ち、カメラが正常な現実の景色を捉えるようにします。トラッキングが成功すると、Debug情報にFoundという文字が表示され、右下のステータスインジケータが白から緑に変わります。

    トラッキング

Next steps