JavaScript
BaaS
monaca
BaaS@rakuza
More than 1 year has passed since last update.

BaaSと言えば国外だったらParse、Firebase、国内だったらニフティクラウド mobile backendなどですが、BaaS@rakuzaというBaaSの記事が無かったので使ってみました。(まあ、自社のサービスなんですけど)
スマホアプリ作成は、HTML/CSS/JSでネイティブアプリが作成できるMonacaを使ってみます。

BaaS@rakuza申込み

公式サイトから利用申し込みします。(60日無料)
http://www.raku-za.jp/baas/inquiry/
※「無料体験版申し込みはこちら」から
2~3日ほどでテナントキーなどのアカウント情報がメールに送信されます。

Monaca申込み

Monacaはアカウントは以下から申込みします。とりあえず無料のBasicプランで登録します。
https://ja.monaca.io/

Monacaプロジェクト作成

「新規プロジェクトの作成」から作成します。OnsenUI2からAngularJS非依存になったため、Vanilla JS(素のJS)、Reactなど、色々なライブラリと組み合わせて使えるようになってます。ただ、クラウドIDEだとAngular2やReactは対応していないので、AngularJS1で作成します。
無題.png

Cordovaプラグインのインストール

MonacaからBaaS@rakuzaを使用するために、公式が提供しているCordovaプラグインをインストールします。Githubからインポートすることもできますが、Basicプランの場合はCordovaプラグインのインポートができない様なので、クラウドIDEより「Cordovaプラグインの管理...」メニューを開いて、「rakuza」で検索したら候補に挙がるので、有効にしたらOKです。
無題2.png

Cordovaプラグインの初期化

ons.ready()に登録したコールバック関数にCordovaプラグインの初期化処理を記述します。続いて、上メニューの「ビルド」⇒「Android(iOS)アプリのビルド」からビルド画面を開いて、ビルドを実行。
ビルドできたら、QAコードなどでアプリURLを開いて、実機にインストールします。「初期化成功!」のアラートが表示されたら成功!

index.html
<script>
ons.bootstrap();
ons.ready(function() {
    var tenantKey = "ここにテナントキー";
    RKZClient.setTenantKey(tenantKey, function() {
      alert("初期化成功!");
    }, function(error) {
      // エラー
      alert(JSON.stringify(error, null, " "));
    });
});
</script>

お知らせの作成

試しに、お知らせを表示するアプリを作成してみます。
お知らせの登録はBaaS@rakuzaの管理者機能で行います。

登録した際に送られてきたメールに記載されている管理者画面のURLにアクセスして、「お知らせ管理」⇒「お知らせ一覧」から適当にお知らせを作成します。
無題3.png

お知らせの表示

登録できたら、クライアント側で表示してみます。index.htmlを以下の様に編集しました。

index.html
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>

  <script>
    ons.bootstrap('myApp');
  </script>
  <script src="js/controllers/MainController.js"></script>
  <script src="js/controllers/NewsController.js"></script>
  <script src="js/controllers/NewsDetailController.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>

<ons-navigator var="navi">
  <ons-page ng-controller="mainController as main">
    <ons-toolbar>
      <div class="center">トップ</div>
    </ons-toolbar>

    <p style="text-align: center">
      <ons-button ng-click="navi.pushPage('news.html');">お知らせ</ons-button>
    </p>
  </ons-page>
</ons-navigator>

<ons-template id="news.html">
  <ons-page ng-controller="newsController as news">
    <ons-toolbar>
      <div class="left">
        <ons-back-button>戻る</ons-back-button>
      </div>
      <div class="center">お知らせ</div>
    </ons-toolbar>

    <div class="progress" ng-if="news.isLoading">
      <ons-progress-circular indeterminate></ons-progress-circular>
    </div>

    <ons-list>
      <ons-list-item ng-repeat="newsDetail in news.news" modifier="tappable" ng-click="news.onSelectNewsDetail(newsDetail)">
        {{newsDetail.title}}
      </ons-list-item>
    </ons-list>
  </ons-page>
</ons-template>

<ons-template id="news_detail.html">
  <ons-page ng-controller="newsDetailController as newsDetail">
    <ons-toolbar>
      <div class="left">
        <ons-back-button>戻る</ons-back-button>
      </div>
      <div class="center">{{newsDetail.newsDetail.title}}</div>
    </ons-toolbar>

    <div style="padding: 16px;">
      <h1>{{newsDetail.newsDetail.title}}</h1>
      <p style="text-align: right;">{{newsDetail.newsDetail.release_end_date | date:'yyyy/MM/dd'}}</p>
      <p>{{newsDetail.newsDetail.description}}</p>
    </div>
  </ons-page>
</ons-template>

</body>
</html>

JavaScript側は別ファイルに別けました。以下の感じです。

MainController.js
(function () {
  angular.module('myApp').controller('mainController', MainController);

  /**
   * 主画面のController
   * @constructor
   */
  function MainController() {

    var vm = this;

    ons.ready(onReady);

    ///////////////////

    function onReady() {
      // RKZClientはCordovaPluginのため、「ons.ready」で呼び出す必要がある
      setupRakuza();
    }

    function setupRakuza() {
      // 第一引数で指定されたテナントキーの値をもとに楽座のテナントを設定します
      var tenantKey = 'ここにテナントキー';
      RKZClient.setTenantKey(tenantKey, function() {
        // 成功時の処理
        alert('RKZClientクラスの初期化に成功しました。');
      }, function(error) {
        // エラー時にアラートでエラー内容を表示します
        alert(JSON.stringify(error, null, ' '));
      });
    }

  }

})();
NewsController.js
(function () {
  angular.module('myApp').controller('newsController', NewsController);

  /**
   * お知らせ一覧画面のController
   * @constructor
   */
  function NewsController($scope, $timeout) {

    var vm = this;
    vm.onSelectNewsDetail = onSelectNewsDetail;

    ons.ready(onReady);

    ///////////////////

    function onReady() {
      loadNews();
    }

    function loadNews() {
      vm.isLoading = true;

      // BaaS@rakuzaから、上限20件で公開しているお知らせ情報を取得する
      var limit = 20;
      RKZClient.getReleasedNewsList(limit, [], [], function (data) {
        // 成功時の処理
        // BaaS@rakuzaのコールバックは$scope.$applyを呼ばないので、$timeoutで反映を行う
        $timeout(function () {
          vm.news = data;
          vm.isLoading = false;
        });
      }, function () {
        // 失敗時の処理
        alert('エラーが発生しました。');
        $timeout(function () {
          vm.isLoading = false;
        });
      });
    }

    function onSelectNewsDetail(newsDetail) {
      // お知らせ情報を設定して、お知らせ詳細に遷移する
      $scope.navi.pushPage('news_detail.html', { data: newsDetail });
    }
  }

})();
NewsDetailController.js
(function () {
  angular.module('myApp').controller('newsDetailController', NewsDetailController);

  /**
   * お知らせ詳細画面のController
   * @constructor
   */
  function NewsDetailController($scope) {

    var vm = this;

    ons.ready(onReady);

    ///////////////////

    function onReady() {
      // 一覧から渡したお知らせ情報を取得して、ViewModelに設定
      vm.newsDetail = $scope.navi.topPage.data;
      // 日時データは文字列(yyyy-MM-dd HH:mm:ssZ)のため、Date型に変換する
      vm.newsDetail.release_end_date = new Date(vm.newsDetail.release_end_date);
    }
  }

})();

AngularJSの話になりますが、RKZClientに渡したコールバック関数は$scope.$applyを呼んでくれないので、自分で呼ぶ必要があります。ここでは$timeoutを使って$scope.$applyを呼んでいます。

画面

無題4.png

ソースコード

https://github.com/kishino/BaaSSampleApp

最後に

私はBaaS@rakuza開発している会社の社員ですが、開発メンバーではなく、Monacaも初めてで、BaaSもあまり使ったことはありません。ですが、結構簡単に環境を作ることができました。
今後もちょくちょく触って、記事を投稿していこうと思います。

参考ページ