WeChatミニプログラム開発ツールのインストール手順を解説

2019年2月9日 16:00

中国の国民的アプリ「WeChat」がミニプログラムを発表してから約1年半。

4億人を超えたといわれるユーザー数に比例して、中国では開発者登録するエンジニアも急増。すでに100万人以上が開発者として登録していると発表されています。

本ブログでもWeChat開発者IDの登録方法についてすでに紹介していますが、本記事ではさらに一歩踏み込んで「WeChatミニプログラムの開発ツール」のインストール手順について紹介します。

0. WeChatミニプログラム開発ツール、一言まとめ

・WeChat、WeChatミニプログラムの開発者ID登録が事前に必要
・Windows、Macのどちらも対応
・開発ツールで作業した内容をスマホ側ですぐにテストできて便利

WeChatのスマホへのインストールおよびWeChat開発者IDの登録がまだの人は下記ページを参考に登録を済ませてから次に進んでください。WeChatは個人用のIDと開発者IDを紐づけているので、両方を登録しないと開発時の認証が行えず、先に進めなくなります。

・WeChat登録

WeChatのインストールやアカウント取得は日本国内でも問題なくできますので、まだ登録していない人は先にWeChatの登録が必要になります。

携帯SMSでの認証が必要になりますが、それ以外は特に問題なくインストールできると思います。

・WeChat開発者IDの登録

下記記事にまとめてあるので、ID登録を進めてください。15分程度で終わります。

下記ページから、自分のPC環境に合わせた開発ツールのインストール用ファイルをダウンロードしましょう。Windows 64, Windows 32, Mac　の3種類が用意されています。

ダウンロードしたファイルを実行して、開発ツールのインストールを行います。インストールには結構時間がかかりますが、手順自体は単純です。

1GB程度のストレージ容量が必要なので、空きが少ない人はご注意ください。

1.4.1 開発ツールと開発者IDの紐づけ

開発ツールの初回実行時にQRコードが表示されるので（下記画像参照）、開発者IDと紐づけ済みのWeChatでQRコードをスキャンします。

1.4.2 ミニプログラムの開発ツールを選択

「Mini Program Project」「WeChat Web Project」の2つのボタンが表示されるので、「Mini Program Project」を選択

1.4.3 プログラムIDの設定

作成するプロジェクトのIDとデータ保存場所を設定します。今回はミニゲームのテストアカウントを選択、データ保存場所は新しく作ったフォルダを使用します。

しばらくするとサンプルプログラムの状態で開発ツールが起動します。

ここからは、開発ツールの大まかな機能を紹介します。

開発ツール左側はミニプログラムやミニゲームのシミュレータ画面。ミニゲームのサンプルプログラムは、開発ツール起動時点で動いててちょっと感動です。

右側のフォルダツリーから主人公機の画像データ「Hero.png」を探し、大仏画像に差し替えたところ、無事に主人公機が大仏になりました。マウスやタッチパネルを使った動作テストもできます。

画面上に「画面サイズ」「通信環境」など設定するメニューがあり、通信環境が悪い場合の動作テストなどもできそうです（未確認）。

当然といえば当然ですが、スマホ側でも動作テストが可能です。手順は下記になります。

・画面上メニューの「Preview」（目のアイコン）をクリック
・「Scan QR Code With WeChat」を選択
・QRコードが表示されるのでWeChatのQRスキャンで読み取り

右側はソースコードのファイルツリー＆エディタ画面です。デバッグ機能などいろいろありそうなんですが、まだ細かく確認できてないので別途記事にできればと思います。

以上、WeChatミニプログラムの開発ツールのインストール手順について解説しました。引き続きミニプログラムの開発方法についても記事にまとめていきたいと思います。

（twitter：@tech_nomad_）

サポートいただいた分は下記にまとめた本を読んで還元したいと思います！デジタルヘルスケア　https://is.gd/4XCPtN スタートアップ×知財　https://is.gd/KHV8G8 中国スタートアップ　https://is.gd/KG2zcF