FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

WebAssembly版NCMBのビルドを簡単に行う方法

f:id:mbaasdevrel:20180319115225p:plain

WebAssemblyはコンパイルしたコードを実行するWeb技術です。コンパイルされていますので、中のコードを読むことはできません。この技術はJavaScriptと異なり、コードが見られませんので、キーの隠蔽に用いることができます。

以前、WebAssembly版は紹介したのですが、自分でビルドしようと思うと以下の手順が必要でした。

  • Rustの開発環境構築
  • JavaScript SDKの更新
  • JavaScript SDKのビルド
  • Rust用のコード追加

これはとても面倒です。そこで、これらの手順を簡素化する方法を考えましたので紹介します。

Rustの開発環境構築

これはDockerを使うことで解消します。pjama/rust-wasm-dockerを使うと簡単です。

git clone git@github.com:pjama/rust-wasm-docker.git
cd rust-wasm-docker
docker build -t ubuntu-wasm docker/

これで準備完了です。

WebAssemblyのコンパイル

これはNCMBMania/wasmを使います。

git clone git@github.com:NCMBMania/wasm.git
cd wasm

そして src/lib.rsYOUR_CLIENT_KEY と書かれている部分を自分のクライアントキーに書き換えます。

コンパイルはDockerに対してコマンドを実行するだけです。

docker run --rm -v $PWD/:/var/workspace ubuntu-wasm /bin/bash -c 'cargo +nightly build --target wasm32-unknown-unknown --release'

これで target/wasm32-unknown-unknown/release/ncmb.wasm にファイルができあがります。

JavaScript SDKの更新

これはWebAssembly版があれば、そちらを使うように変更します。ncmb_js/signature.js at master · NIFCloud-mbaas/ncmb_jsvar sig = crypto の上にコードを追加します。

// 追加
if (window.wasm_sign) return window.wasm_sign(sigStr);
var sig = crypto

これでJavaScript SDKを再度ビルドすれば完了です。

npm run build

ここまでの手順を一まとめにしました。

Dockerイメージの準備だけできたら、後はコマンドだけで完了できるようにしました。 build.sh を実行すれば、WebAssemblyによるコンパイル、JavaScript SDKの更新は自動的に行います。

# Dockerの準備
git clone git@github.com:pjama/rust-wasm-docker.git
cd rust-wasm-docker
docker build -t ubuntu-wasm docker/

# その他一切の処理
git clone git@github.com:NCMBMania/wasm.git
cd wasm
sh build.sh

使い方

app.js の APPLICATION_KEY となっている部分を書き換えてください。その後、index.html を開くと、クラス名を入力するようになっています。クラス名を入力して取得を実行すると、そのデータをテキストエリアに出力します。クライアントキーは dummy となっており、使われていないのが分かるでしょう。WebAssembly版を使う上で必ず必要なのは以下の処理です。

window.onload = async () => {
  window.exports = {};
  const mod = await fetchAndInstantiate('./ncmb.wasm')
  const exports = mod.exports;
  window.wasm_sign = s => {
    let outptr = exports.to_sign(newString(exports, s));
    return copyCStr(exports, outptr);
  };
};

これさえ行ってしまえば、後は通常のJavaScript SDKと変わらない使い方になります。

まとめ

WebAssembly版が簡単に作れるようになりましたので、WebアプリケーションでmBaaSを使うのも問題ないでしょう。セキュリティ的にもクライアントキーが漏洩しないのが安心です。ぜひ積極的に使ってください。

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。