破竹の勢いで広まる「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が用意されているので、詳細は以下を参照していただきたい。
Alipayのミニプログラム開発はWeChatに酷似?
本記事では、WeChat ミニプログラムの開発面について簡単にまとめてみた。
感想としては、以下のツイートでも書いたように、「独自の言語にちょるWeChat独自の機能性」を作りつつ、「HTML/CSS/Javascriptが分かればすぐに理解できるような学習コストの低さ」を兼ね備えているという点で、非常によく出来ていると感じた。
【WeChat ミニプログラムの開発言語】
— 吉田 基紀 / motoki yoshida (@motokiyoshida) 2019年2月1日
・WXML(WeiXin 用のマークアップ言語)
・WXSS(WeiXin 用のstylesheet)
・Javascript
独自の言語を作ることで機能やデザイン性担保しつつ、 HTML/CSS/Javascript が分かればほぼ分かる程度に学習コストの低い作りで良い感じ。あとでちゃんとまとめる。
本記事では WeChat のミニプログラムを見てきたが、Alipay 等の他のミニプログラムではどうなの?という疑問も出てくるだろう。
実は、Alipay のミニプログラムは WeChat でほぼそのままコード移行ができる形になっており、Alipay はテンセントから謝罪を求められたほどである。
WeChat の WXML に対して Alipay の AXML、WeChat の WXSS に対して Alipay の AXSS というように、名前の付け方からしてもう類似していることが明白だ(笑)
ただ、開発者としては嬉しい限りで、ネイティブアプリでいうと、iOS と Android で全く異なる技術が求められておりそれぞれで工数が取られていたが、WeChat と Alipay のミニプログラムについてはほぼそのままコードが使い回せるので、圧倒的に工数を削減することができる。
Alipay は昨年7月に、WeChatに1年半ほど遅れてミニプログラムの領域に参画することになったが、その当時、既に WeChat ミニプログラムが広く利用されていたため、「良いものはコピーする」という思想のもと、このような形に落ち着いたのかもしれない。
また、Baidu や Bytedance 等の他のミニプログラムの開発についてはまだ調査できていないので、今度また調べてみようと思う。
引き続き、ミニプログラム周りの動きについてはホットになりそうなので、情報を追っていきたい。