dataway

パーソナルデータ利活用の未来を考えるメディア

WeChatミニプログラムの開発方法と利用言語についてまとめてみた

f:id:show_motto:20190202145611p:plain 破竹の勢いで広まる「WeChat Mini Programs(ミニプログラム)」。

ミニプログラム領域においては、Alipayのアントフィナンシャル、バイドゥ、TikTokのバイトダンス、ニュースキュレーションアプリのToutiaoらも参入が始まっている。

WeChat のミニプログラムだけで、既に100万以上が作成されているというが、このミニプログラム、どうやって実装するのだろうか?

これだけ急速に広まるということは、簡単に作れるということなのか?

本記事では、そのような疑問に応えるべく、WeChat ミニプログラムの開発者用ドキュメントを元に、その開発手法について、プログラミング経験がないビジネスサイドの方でも分かるレベルで解説していこう。

↓ミニプログラムについて理解したい方は、まずこちらの記事からどうぞ。 www.dappsway.com

全体構成について

WeChat ミニプログラムの各ページは以下の4つのファイルで構成されている。

  • ***.js
  • ***.wxml
  • ***.wxss
  • ***.json

*** 部分は、同じ英数字が入る。例えば、index ページであれば、以下のような形になる。

  • index.js
  • index.wxml
  • index.wxss
  • index.json

それぞれの役割としては、 .js ファイルはスクリプトファイルでロジック周りの記述、 .wxml ファイルはマークアップのためのファイル、 ..wxss ファイルはスタイルシートで見た目を整えるもの、 .json ファイルはページのPathやタイムアウトの設定等のコンフィギュレーションのためのファイルとなっている。

なお、 .json ファイルについては、アプリケーション全体で app.json というファイルを用意することになっており、各ページで個別な設定をしない場合には、 app.json が利用されるため、任意のファイルとなっている。

つまり、 .js.wxml.wxss があれば、1つのページを記述しているということになる。

一言でいうならば、HTML/CSS/Javascript で一般的なウェブサイトを構築したことがある人ならけっこうすぐに馴染めますよという内容となっている。

これ以降で、それぞれの詳細について解説していこう。

(若干コードも出てくるので、コードが苦手な方は最後の「まとめ」の章まで読み飛ばしでも大丈夫です)

.wxml ファイルについて

.wxml ファイルは、一般的なウェブサイトでいう HTML にあたる、いわゆるマークアップ言語だ。

「wxml = WeiXin HTML」というように、WeiXin(≒WeChat)版のHTMLということになる。

WeChat 版ということで、一般的なHTMLに加えて、WeChat ミニプログラムの作成を助けるいくつかの機能が付いている。

例えば、後述するロジックレイヤーの .js ファイルの記述と連携して、以下のような記述ができる。

Data Binding

page.js で記載した message: 'Hello MINA!'{{message}} に代入され描画される。

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

List Rendering

page.js で記載した array: [1, 2, 3, 4, 5]{{item}} に代入され描画される。

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

このように、ロジックレイヤーである .js ファイルとの連携が可能となっている。

Ruby on Rails 等のフレームワークの View ファイルに近しいともいえるだろう。

さらに詳細はこちら

.wxss ファイルについて

.wxss ファイルは、一般的なウェブサイトでいう CSS にあたる、いわゆるスタイルを整えるためのコード

「WXSS = WeiXin CSS」ということで、WeChat 用に拡張されたCSSである。

拡張されている点をいくつか紹介しよう。

Units of Measurement

wxss では、rpx(responsive pixel)という基準で大きさを記述することができる。

以下のように、デバイスサイズに応じて、最適な px サイズに変換をしてくれる。

Device rpx converted into px (screen width/750) px converted into rpx (750/screen width)
iPhone 5 1rpx = 0.42px 1px = 2.34rpx
iPhone 6 1rpx = 0.5px 1px = 2rpx
iPhone 6 Plus 1rpx = 0.552px 1px = 1.81rpx

Style importation

@import ステートメントを使うことで、別のスタイルシートを読み込むことができる。

例えば、以下のように、common.wxss から app.wxss を読み込むといったことができる。

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

さらに詳細はこちら

.js ファイルについて

.js ファイルは、Javascript で記述をするロジックレイヤーとなる。

こちらのファイルでロジック周りの処理がされた後に、wxml 及び wxss に基づいてビューが描画されるという構成。

また、.js では、WeChat が用意している様々なAPIを用いて機能を提供することができる

例えば、WeChat Pay のAPIを用いて決済を行ったり、QRコードを呼び出したりといったことが可能になっている。まさにミニプログラム独自の部分といえる。

こちらについては、膨大なAPIが用意されているので、詳細は以下を参照していただきたい。

open.wechat.com

Alipayのミニプログラム開発はWeChatに酷似?

本記事では、WeChat ミニプログラムの開発面について簡単にまとめてみた。

感想としては、以下のツイートでも書いたように、「独自の言語にちょるWeChat独自の機能性」を作りつつ、「HTML/CSS/Javascriptが分かればすぐに理解できるような学習コストの低さ」を兼ね備えているという点で、非常によく出来ていると感じた。

本記事では WeChat のミニプログラムを見てきたが、Alipay 等の他のミニプログラムではどうなの?という疑問も出てくるだろう。

f:id:show_motto:20190202151000p:plain
Alipay Mini Program の開発者ページ

実は、Alipay のミニプログラムは WeChat でほぼそのままコード移行ができる形になっており、Alipay はテンセントから謝罪を求められたほどである。

WeChat の WXML に対して Alipay の AXML、WeChat の WXSS に対して Alipay の AXSS というように、名前の付け方からしてもう類似していることが明白だ(笑)

ただ、開発者としては嬉しい限りで、ネイティブアプリでいうと、iOS と Android で全く異なる技術が求められておりそれぞれで工数が取られていたが、WeChat と Alipay のミニプログラムについてはほぼそのままコードが使い回せるので、圧倒的に工数を削減することができる

Alipay は昨年7月に、WeChatに1年半ほど遅れてミニプログラムの領域に参画することになったが、その当時、既に WeChat ミニプログラムが広く利用されていたため、「良いものはコピーする」という思想のもと、このような形に落ち着いたのかもしれない。

また、Baidu や Bytedance 等の他のミニプログラムの開発についてはまだ調査できていないので、今度また調べてみようと思う。

引き続き、ミニプログラム周りの動きについてはホットになりそうなので、情報を追っていきたい。

関連記事

www.dappsway.com