Monacaを使ってKintoneを手軽にアプリ化しましょう

業務で使うちょっとしたWebアプリケーションを手軽に作れるのがサイボウズの提供するKintoneです。日報や議事録管理、タイムカード、アンケートなど様々なWebアプリケーションが用意されており、ExcelやCSVファイルを使って自分たちのワークフローに合わせたWebアプリケーションを作ることもできます。

KintoneはWebアプリケーションなので、Webブラウザを使って操作します。しかし、Monacaを使えばKintoneの提供するAPIを使って、手軽にアプリ化することが可能です。ぜひ活用してください。

必要なもの

kintoneのアカウント
Monacaのアカウント（無料）

案件管理をアプリ化する

今回は営業の案件状況を管理する案件管理をアプリ化してみたいと思います。まずは最小限のテンプレートでプロジェクトを作成します。

次に設定メニューのJS/CSSコンポーネントの追加と削除を選択します。

そしてOnsen UI追加してください。バージョンは最新版とします。

HTMLの修正

index.htmlを次のように変更します。AngularJS用にmyAppを定義し、一緒にOnsen UIも読み込むようにします。


<!DOCTYPE HTML>
<html ng-app="myApp" lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        var myApp = angular.module('myApp', ['onsen']);
    </script>
</head>
<body style="height:100%">
    <ons-navigator var="myNavigator" page="login.html"> 
    </ons-navigator> 
</body>
</html>

次にindex.htmlと同じ階層にlogin.htmlを作成します。これは初期のログイン画面を表示するものです。内容は次のようになります。


<ons-page ng-controller="LoginController" style="background:#cedfe5;">
  <!-- 読み込み中表示のモーダル用 -->
  <ons-modal var="modal">
    <ons-icon icon="ion-load-c" spin="true"></ons-icon>
    <br><br>
    Please wait.
  </ons-modal>
  
  <!-- ログインフォーム -->
  <div id="loginContainer">
    <div id="loginContents">
      <h4 id="subTitle"  >kintone連携</h3>
      <h3 id="title">商談記録入力アプリ</h2>    
      <ons-row id="url" align="center">
        <ons-col align="right" width="20%" class="fontSmaller">https://</ons-col>
        <ons-col width="50%"><input placeholder="Domain" type="text" id="test2" ng-model="domain" class="loginItems"></ons-col>
        <ons-col align="left"  width="30%" class="fontSmaller">.cybozu.com</ons-col>
        
      </ons-row>
      <ons-row>
        <ons-col width="20%"></ons-col><ons-col width="50%"><input placeholder="Login Name" type="text" ng-model="loginName" class="loginItems"></ons-col>
        <ons-col></ons-col>
        
      </ons-row>
      <ons-row>
        <ons-col width="20%"></ons-col><ons-col width="50%"><input placeholder="Password" type="password" ng-model="loginPass" class="loginItems"></ons-col>
        <ons-col></ons-col>
      </ons-row>
      <ons-row id="saveInfo"> 
        <ons-col><input type="checkbox" ng-model="remember">Remember me</ons-col>
      </ons-row>
      <ons-button ng-click="showList()" modifier="quiet" id="loginButton">Login</ons-button>  
    </div>
  </div>
</ons-page>

ここで大事なのはKintoneにアクセスする際には、

domain：ドメイン
loginName：ログインID
LoginPass：パスワード

という3つの要素が必要になるということです。ここまでの時点でアプリをMonacaデバッガーで開くと次のように表示されます。

ログイン処理を作る

ではログイン処理を作っていきます。まずKintone APIを使う際にはBase64ライブラリが必要です。そこでJavaScriptによるBASE64変換−ちゃよて・ちゃよてよりbase64.jsをダウンロードし、Monacaプロジェクトのjsフォルダ（最初はありませんので新規作成してください）にアップロードします。また、jsフォルダ内にkintone.jsを作成してください。

上記二つのファイルはindex.html内で読み込んでください。


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        var myApp = angular.module('myApp', ['onsen']);
    </script>
<!-- 追加ここから -->
    <script src="js/base64.js"></script> 
    <script src="js/kintone.js"></script>
<!-- 追加ここまで -->
</head>

上記コードのLoginボタンをタップした際にはshowListを実行しています。これは後ほどログイン成功時に案件リストを取得するためですが、まずはログイン処理までを作ってみます。kintone.jsを編集します。


// 認証情報は他でも使い回すのでグローバルにしておきます。
var authorization; // 認証用
myApp.controller("LoginController", function ($scope, $http, ItemService) {
  // ログイン処理を行います
  $scope.showList = function () {
    ItemService.domain = $scope.domain;
    console.log("ログイン処理開始");
    // 入力を元にログインに必要な情報をセット
    $scope.url = "https://"+$scope.domain+".cybozu.com/k/v1/records.json";
    authorization = base64encode($scope.loginName+":"+$scope.loginPass);
  
    // kintoneAPIdocumentに従って送信するデータを作成
    $scope.req = {
      url: $scope.url,
      method: "GET",
      headers: {
        "X-Cybozu-Authorization": authorization,
        "Content-Type": "application/json"
      },
      params: {
        "app": 13
      }
    };
  
    // httpリクエストを送信
    $http($scope.req)
      .success(function success(data, status, headers, config) {
        // ログイン成功時の処理
        console.log("ログイン成功しました");
        if ($scope.remember == true) {
          // ログイン情報を記録する場合
  // localStorageに記録しておきます。
          localStorage.setItem("LoginName", $scope.loginName);
          localStorage.setItem("Password",$scope.loginPass);
          localStorage.setItem("Domain",$scope.domain);
        } else if (localStorage.getItem("LoginName")) {
          // ログイン情報を記録しない場合
          localStorage.removeItem("LoginName");
          localStorage.removeItem("Password");
          localStorage.removeItem("Domain");
        }
      })
      .error(function error(data, status, headers, config) {
        alert("ログイン名またはパスワードが違います。");  
      });
  };
  
  // 端末にログイン情報が残っていた場合はそれを元にデータの取得を行う
  if (localStorage.getItem("LoginName")) {
    $scope.loginName = localStorage.getItem("LoginName");
    $scope.loginPass = localStorage.getItem("Password");
    $scope.domain = localStorage.getItem("Domain");
    $scope.remember = true;
    $scope.showList();
    //ons-modalを表示
    $(document.body).on("pageinit", function () {
      modal.show();
      setTimeout("modal.hide()", 1000);
    });
  }
});
myApp.service("ItemService", function () {
});

そうすると、コンソールのログに「ログイン処理開始」「ログイン成功しました」というメッセージが出るかと思います。KintoneのサーバがCORSに対応していないのでデスクトップブラウザのプレビューからではエラーが出るのでご注意ください。

案件情報の取得

ログインが成功しましたので、次に案件情報の取得を行ってみます。ログイン処理の最後に以下のコードを追加します。


if ($scope.remember == true) {
  // ログイン情報を記録する場合
  // localStorageに記録しておきます。
  localStorage.setItem("LoginName", $scope.loginName);
  localStorage.setItem("Password",$scope.loginPass);
  localStorage.setItem("Domain",$scope.domain);
} else if (localStorage.getItem("LoginName")) {
  // ログイン情報を記録しない場合
  localStorage.removeItem("LoginName");
  localStorage.removeItem("Password");
  localStorage.removeItem("Domain");
}
// 追加ここから
//ログインに成功したら一覧画面へ
myNavigator.pushPage("list.html",{animation:"none"});
// 追加ここまで

これでlist.htmlを読み込むようになりますので、index.htmlと同じ階層にlist.htmlを作成します。

list.htmlの内容

list.htmlの内容は次のようになります。


<ons-page ng-controller="MainController" style="background:#cedfe5">
  <ons-toolbar>
    <div class="left" ng-click="signout()" id="signoutButton">
      <ons-toolbar-button><ons-icon icon="fa-sign-out"></ons-icon>Signout</ons-toolbar-button>
    </div>
    <div class="center">案件一覧</div>
  </ons-toolbar>
  <div id="listContainer">
      <div ng-repeat="item in items track by $index"  ng-click="create(item)" id="listContents">
          <div>{{item['文字列__1行_']['value']}}</div>
          <div id="listHorizentalLine" style=""></div>
          <div id="listSubInfo" style="">{{item['文字列__1行__0']['value']}}　</div>
      </div>
  </div>
</ons-page>

kintone.jsの修正

list.htmlにおいて案件の一覧はitemsに入ってくる指定になっています。そこで js/kintone.js を修正します。

まず $scope.items を初期化します。


$scope.showList = function () {
  ItemService.domain = $scope.domain;
  $scope.items = []; // 追加
    :

次にログイン時に使ったメソッドはそのまま案件の一覧が返ってきますので、それを保存するようにします。


.success(function success(data, status, headers, config) {
  // 追加ここから
  //返ってきた配列データをItemService.items[]に格納
  for (var i=0; i<data.records.length; i++) {
    $scope.items.push(data.records[i]);
  }
  ItemService.items = $scope.items;
  // 追加ここまで

そして最後に MainController を定義します。


myApp.controller("MainController", function ($scope, $http, ItemService) {
  $scope.items = ItemService.items;
});

これで処理が完成です。

案件の一覧を取得してみる

ここまでできていると、ログイン成功すると案件の一覧が取れるようになります。

応用編

さらに見た目を整えたり、案件一覧の中からタップすることで活動報告を行えるようにすることで、本当のアプリらしくなっていきます。

Kintoneの良いところはデスクトップ用のWebアプリケーションはごくごく簡単に、さらにWeb APIを通じて操作もできることです。Monacaを使えばiOS/Androidの両方に対応したハイブリッドアプリも簡単に開発できます。業務向けスマートフォンアプリ開発にMonacaとKintoneをぜひ活用してください。