mBaaSには管理画面がありますが、それでも欲しいと言われるのが自社専用の管理画面です。入力項目や画面数を制限して担当者が使いやすいようなオリジナルの画面です。企業によっては承認フローが必要といった場合もあるでしょう。
Webブラウザ向けに作成しても良いですが、データの保存であったり、ローカルにあるファイルの読み書きはデスクトップアプリで行う方が便利です。そこで今回はJavaScript SDKとWeb技術によるデスクトップアプリフレームワークであるElectronを組み合わせた仕組みを紹介します。
Electronとは？
Electronは元々Atom Shellと呼ばれ、GitHubが開発しているプログラミングエディタAtomで使われている技術になります。Google Chromeのオープンソース版であるChromiumをベースとしており、HTML/JavaScript/スタイルシートを使って機能を作り、それをElectronでラッピングすることでデスクトップアプリケーションになります。Windows/macOS/Linuxそれぞれに対応しています。
Electronのインストール
Electronを使う際にはNode.jsをインストールする必要があります。Node.jsのインストール後、パッケージ管理のnpmを使ってElectronをインストールします。
npm install electron -g
さらにデスクトップアプリを生成する場合にelectron-packagerが必要です。
npm install electron-packager -g
これで開発の準備は完了です。
mBaaSアプリのベースを作る
まずNCMBMania/ElectronNCMBをダウンロード&解凍します。これはごく基本的な機能だけ実装したElectronアプリケーションとなっています。
起動する際には次のように実行します。
electron .
起動すると最初に設定画面が表示されます。アプリケーションキーとクライアントキー、さらに認証情報を設定します。これらの情報はlocalStorageに保存されます。
表示のライブラリにVue.jsを使っています。Reactのようにデータ（app.messageなど）を操作するだけでHTMLが書き換わってくれる仕組みを持っています。そのため、開発時にはDOMを直接操作する必要がありません。
また、UIにはBootstrapを適用しています。社内用のツールであれば十分な品質のUIが作成できるはずです。それに伴ってjQueryも入っていますので、Ajax処理などはそちらで可能です。もちろんNCMBも入っています。
Vue.jsは以下のようにv-onではじまる要素を使ってアクションを定義します。
<form v-on:submit="register_keys"> : </form>
そしてJavaScript側で app.methods.register_keys でアクションを受け取ります。
var app = new Vue({
el: '#app',
data: data,
:
methods: {
// キーの登録処理
register_keys(e) {
e.preventDefault();
// 入力された設定をlocalStorageおよびアプリケーションデータとして設定
for (var i in ary) {
var key = ary[i];
localStorage.setItem(key, e.target[key].value);
app[key] = e.target[key].value;
}
app._mount();
}
},
他にも機能はたくさんありますのでVue.jsのドキュメントを参考にしてみてください。
アプリケーションキーとクライアントキーを設定すると、デスクトップアプリケーションとしての画面を表示するようになります。データメンテナンスであったり、ユーザ一覧を表示する、ダッシュボード的に数字を見られるようにするなどしても良さそうです。v-if/v-elseを使って分岐を行えます。
<div v-if="ncmb"> <!-- ここにデスクトップアプリケーションとしての画面を作成 --> </div> <div v-else> <!-- キーの設定画面 --> </div>
必要な技術
今回のコードをベースにした場合、以下の技術が必要になるでしょう。
特にVue.jsはビューとアクションのハンドリングに使っていますので習得が必要でしょう。Reactのような専用のタグを使ったりしないのでさほど迷わず使えるようになるかと思います。
今回のをベースにすれば、NCMBを使った社内用ツールが手軽に作れるようになるはずです。コードはNCMBMania/ElectronNCMBにアップロードされていますので、これをベースに開発してみてください。
