前回に続いてカンファレンスアプリを作っていくチュートリアルです。アプリができあがった暁には実際にリリースしますのでお楽しみに！
今回はmBaaSの扱い方について紹介します。なお、この方法はVue向けです。
方法は二つ
アプリの中でmBaaSを使う場合、二つの方法が考えられます。
直接JavaScript SDKを使う
これが一番簡単です。各ページで const NCMB = require('ncmb') とすれば良いだけです。ただし、アプリケーションキーとクライアントキーによる初期化を毎回やるのは面倒です。
App.vueでNCMBオブジェクトを管理する
そこでApp.vue内で管理する方法が考えられます。App.vue内で初期化し、それを props で引き継ぐ方法です。この方法も簡単で良いのですが、各画面ごとに実行された処理を再利用しづらいという問題があります。
JavaScript SDKをラップして、それをApp.vueで管理する
そこでお勧めなのがJavaScript SDKをラップする方法です。このクラス経由でmBaaSのメソッドを実行すれば、各処理の再利用性が高まります。
const NCMB = require('ncmb'); const applicationKey = 'APPLICATION_KEY'; const clientKey = 'CLIENT_KEY'; import {config} from './config'; class NCMBConf { constructor(applicationKey, clientKey) { this.ncmb = new NCMB(applicationKey, clientKey); this.consts = { news: 'News', sessions: 'Sessions', speakers: 'Speakers', sponsors: 'Sponsors' } } } const ncmb = new NCMBConf(config.applicationKey, config.clientKey) export {ncmb}
このようにJavaScript SDKをクラスの中で持つようにします。後はこのクラスをApp.vueの中で管理しながらすべての画面で使うようにします。認証データを持ち回したりする時に便利です。また、別な画面で同じクラスを使ったり、同じようなデータの取得法を行う時には再利用できます。
オフライン時の対応
アプリケーションがオフラインかどうかは window.navigator.online が true または false にて管理できます。その状態によって、mBaaSからデータを取得するかどうかを決められます。ただし、この方法ではオンラインでネットワークが遅い時にストレスを感じます。
そこで二回目以降の起動については、次のようなフローにするのが良いでしょう。
- キャッシュを取得して表示
- mBaaSのデータを取得
- オフラインならすぐ終了
- オンラインならデータを取得してキャッシュを入れ替え
このフローの良いところは、二回目以降についてはまずデータを表示してしまう点です。そして新しいデータが取得でき次第、画面に渡します。Vueはデータの更新によってリアクティブに表示を書き換えてくれますので、アプリ側で画面の更新を気にする必要がありません。
なお、この時キャッシュデータは localStorage に保存しておきます。そのため、mBaaSのデータストアをそのまま保存できません。キャッシュはJSONをテキスト化したものを保存し、キャッシュ取得時にデータストアのインスタンスにします。なお、注意点として localStorage は同期、データストアは非同期という違いが挙げられます。
認証のセッション有効時間
認証した際のセッションはデフォルトでは24時間となっています。そこでマックスの○時間まで延長しておきます。
なお、これでも実際には不十分で、アプリの起動時にセッションの有効無効をチェックしなければなりません。これはユーザ情報を取得し、最終ログイン時間を更新できるかどうかでチェックするのが簡単です。
const user = ncmb.getCurrentUser(); user .set('lastSignInTime', new Date()) .update() .then(() => { // セッションが有効 }) .catch((err) => { // セッションが有効期限切れ })
セッションが有効期限切れだった場合にはログアウト相当の処理を行いましょう。
デバイスのソーシャルログインの利用
今回は独自の認証は設けず、FacebookまたはTwitterのログインを提供します。この時、あらためて認証を行うのは面倒なのでデバイス内にあるソーシャルサービスの認証データが使えると便利です。
CordovaではManifestWebDesign/twitter-connect-plugin: Cordova/PhoneGap plugin to use Twitter Single Sign onやgurisko/cordova-plugin-accountkit: AccountKit Plugin for Apache Cordova which allows you to add passwordless email and SMS authentication to your appというプラグインでそれが実現できます。このプラグインを通じて取得した認証情報をmBaaSに送ることで認証できるはずです（未実装なので試しつつ行っていきます）。これによってTwitterであってもサーバレスで認証を行えます。
まとめ
Monaca × Onsen UI × Vueでニフクラ mobile backendを扱う際の注意点は以下の通りです。
- JavaScript SDKはラップして使おう
- オフライン時の対応（キャッシュ利用と再現）
- 認証処理
こういった点に注意しながら今後実装を行っていきます。
