はじめに
- WeChat(微信)とは、中国を中心に使用されているメッセージングサービスです。「中国のLINE」とざっくり説明されることがあります。
- WeChat mini program(微信小程序)とは、WeChat上に構築できるウェブサイト/アプリの・ようなものです。
- Canvasや通常のhtmlタグを使った画面表示、メディア録画・再生、マップ表示、WeChatのログイン及びペイメントとの連携、ストレージアクセスなどができるようです(まだ全部試せていない)。
- この記事では、WeChat mini programの開発環境の構築のしかたを説明します。具体的なコーディング方法については記載されていません。
- 開発言語はJavaScript, wxml(html方言), wxss(css方言)です。
- 丸いやつがmini programです。
-
こんな感じに各社mini programをリリースしています。
-
WeChat等でQRコードを読むだけでサクッとインストールされるので、アプリのインストールよりもユーザー的なハードルが少なく、使いやすいと感じました。
-
2018年4月時点での構築方法です。公式ドキュメントと実際の手順で整合性が取れていない部分もあったため、今後もどんどん変わっていくのだと思います。ので、あくまでご参考まで。
公式リファレンス等:
開発環境構築(1): 開発用App IDを取得する。
- 前提として、WeChatのユーザーアカウントは既に準備しているものとします。
- また、スマホにWeChatアプリが入っているものとします。
- 公式アカウントの取得画面から、公式アカウントの取得を行います。
- まずはemail認証。この画面のあと、emailが届くので、メールに書いてあるリンクをクリックして認証を行います。
- 次にSMS認証及び開発者情報登録。
- 会社名を入れる必要が有るのですが、自分の場合は(登記していない)自分が関連している開発者コミュニティの名称を入れました。ひとまずそれで登録はできました(なんでもいいのかも)。ただし、後々チェックされた際にアカウント凍結等のリスクがなくはないため、自己責任でお願いします。
- 身分証番号もなんでもいいのかもしれませんが、僕はパスポート番号を入れました。
- このあと、個人アカウントと開発者アカウントの紐付けフローが(たしか)あり(すいません、スクショ取り忘れてました)、開発者登録が完了します。
開発環境構築(2): 開発用IDEのインストール
- 取得したログインIDとパスワードを使ってログインを行います。
- この際、QRコードが画面に表示されるので、スマホにインストールしているWeChatアプリでQRコードを読み取ることで、個人認証を行う必要があります。
- ログインするとこんな画面
- 開発環境のインストール用のページに行き、IDEをインストールします。
- これで、開発環境を手に入れる事ができます！
開発環境構築(3): IDEを触ってみる
- 起動するとこんな感じです。
- ここからアプリを新規作成します。
- こんな感じのIDEが立ち上がります。
-
デモアプリにさまざまなUIの作り方などが書いてあるので、参考にしながら(これから)勉強していこうと思います。
-
IDE上にエミュレータが出ているのですが、実機で確認したい場合は「預覧」ボタンを押すと、QRコードを表示されます。これをWeChatで読み取ることで、スマホで動作を見ることが出来ます。
- アプリの公開には別途手続きが必要そうなので、それもおって勉強していこうと思います。
デモ
- mini program→AWS上のサーバ→コンセント上のマイコンという径路で通知を送り、コンセントを制御するデモをつくってみました。
- mini programをつくったことが有るよ！という話をすると、中国のソフトウェア開発者の方と仲良くなりやすいのでおすすめです！