企業向けmBaaS「AppPot」を使ったサーバー開発なしの高速モバイルアプリ開発

企業向けmBaaS「AppPot」を使った
サーバ開発なしの高速モバイルアプリ開発

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved.
自己紹介
十川亮平
そごうりょうへい
2
Panasonic、日本オラクルでソフトウェア
エンジニア、アーキテクトとして
企業システムに従事
現在はNCDCでmBaaS製品AppPotの
プロダクトマネージャ、
ユーザー企業様向けにモバイルアプリの
企画・開発のご支援をしています
(製薬、小売、製造……)

NCDCの特徴
3

NCデザイン＆コンサルティングとは？
IT×デザインによる企業向けのサービスを展開
4
ご提供分野コンサルティング受託開発・制作製品
UX
新サービス企画
UX使用性改善
UIデザインー
IT
Smart Device
Enterprise IT ーー
新サービスの
企画立案・実現
アプリUXの
改善
アプリ等の
システム開発
アプリUIの制作
AppPot・
AppPot SFA
設計等、
技術支援
アーキテクチャ
策定
アプリ開発

様々な業種の新ビジネスからUXデザイン、ITの実装まで
5
新ビジネス・
新サービス
UX/UI サーバサイドアプリ
化学
金融
製薬
医薬卸
サービス
IT
小売り️
新ビジネスの企画
営業支援アプリ
ベンチャー企業の新サービス開発
営業改革支援
アプリ発注ガイド
ラインの策定
既存サービスの
スマホ対応UX検討
EA・SOAコンサル
既存製品の
スマートデバイス対応
スマートデバイスを活用したカスタマーエクスペリエンス改革
スマートデバイス事業
立ち上げ支援

今日の内容
 モバイルアプリを高速に開発する「MBaaS」とは
 MBaaSを使うことで変わること
 企業向けMBaaS「AppPot（アップポット）」
 AppPotの使い方
 まとめ
6

社内ワークフローシステム
フィールドサポートアプリの例
7
指示書
作業後社外での業務（オフライン）事前準備
<PDF>
マニュア
ル
①今日の指示書と、
PDFのマニュアルを
ダウンロード
②ネットワークの無い環境で、
データの参照や更新、
写真・動画の取り扱いができる
報告書
<Image>
お客様署名
③作業後にレポートを
アップロード。
帰社後のPC業務を軽減。
マネージャー

アプリのバックエンド
Apple/Google社等
モバイルアプリのシステム構造
8
モバイルアプリ用
サーバシステム
Directory
Service
アプリ
- UI
- ロジック
認証・認可
システム
I/F
Push通知などOSごとに
提供されるサービスと連携
社内ワークフ
ローシステムDB
WebサービスAPI
iOS: Swift, Objective C
Android: Java
HTML5などで開発
モバイルアプリのシステムは、クライアント・サーバーモデル。
クライアントと、サーバーは基本的に別々の技術で開発します。
HTTPによる
リモート
アクセス
社員認証情報

Apple/Google社等
モバイルアプリのシステム構造
9
Directory
Service
アプリ
- UI
- ロジック
認証・認可
システム
I/F
社内ワークフ
ローシステムDB
WebサービスAPI
Swift, Objective C
Android Java
クライアントと、サーバーは基本的に別々の技術で作成します。
アプリ
- UI
- ロジック
認証・認可
システム
I/F
DB
WebサービスAPI
アプリ
- UI
- ロジック
認証・認可
システム
I/F
DB
WebサービスAPI
社員認証情報

Apple/Google社等
MEAPを使用したシステムの構造
10
Directory
Serviceアプリ
- UI
- ロジック
社内ワークフ
ローシステム
Swift, Objective C
Android Java
クライアントと、サーバーは基本的に別々の技術で作成します。
アプリ
- UI
- ロジック
アプリ
- UI
- ロジックアプリのバックエンド
DB
MEAP
MEAP
SDK
認証・認可
システム
I/F
DB
DB
社員認証情報
企業システムとの
連携は各種アダプタが
用意されている

MEAPとは
• Mobile Enterprise Application Platformの略で、
２００８年のGarterのレポートで使用されました。
http://www.gartner.com/id=843412
• このレポートの中で、次の条件に当てはまればMEAP
を導入するメリットがあると定義されています
• ３つ以上のモバイル向けアプリをサポートする
• ３つ以上のモバイル向けのOSをサポートする
• 少なくとも３つ以上のバックエンドのシステムと連携する
11

MEAPのハイレベルアーキテクチャー
12
Systems in
Cloud
MEAPサーバー
Systems
既存システム群
Systems
Systems
データ
コネクター
認証・認可
データ同期
プッシュ通知
ロギング
ユーザー管理.
管理コンソール
Databases,Web Services,
Package Applications, etc.
Client
Application
SDK
Client
Application
SDK
Client
Application
SDK
Client
Application
SDK
MEAP機能
提供範囲
MEAP機能
提供範囲外
スマートフォン/タブレット
システム
連携
システム
連携
API
MDM
凡例
端末管理
一般的に端末管理の機能はMEAP
製品に含まれないため、別途検討
する必要がある。
ユーザー、アプリの管理
各機能の実行

MBaaS
Apple/Google社等
MBaaSを使用したシステムの構造
13
アプリ
- UI
- ロジック
Swift, Objective C
Android Java
MBaaSが提供するサーバー機能を利用して、モバイルアプリを開発します。
MBaaSは開発する量が減るため、１つめのアプリでも効果がでる。
MBaaS
SDK
認証・認可
ユーザー
管理
データ
アクセス
DB
Push通知、
メール送信
Directory
Service
社内ワークフ
ローシステム
一般的に
企業システムとの
連携は弱い

BaaS (Backend as a Service) とは？
 下記のようなバックエンドの機能を
クラウド上で提供するサービス
• ユーザー登録、認証
• Push通信
• データベース
• SNS連携
 コンシューマ向けアプリ開発では一
般的になっており、ベンチャーや個
人が『自分達のアイデアに集中』し
て、『素早く低コスト』にサービス
を提供するために利用されている
14
Parse.com
Facebookに買収されたBaaS製品。OSS化
し、2017年にサービス停止予定
Firebase
Googleに買収されたMBaaS製品

体制の違い
16
ユーザー
部門
IT部門
モバイルアプリ
エンジニア
サーバーアプリ
エンジニア
インフラ
エンジニア
アプリ作成依頼
作業依頼
データセンター
を借りなきゃ！
セキュリティの設計は
時間がかかる。
どうやって基幹システ
ムに接続するか
画面は早くできたん
だけど・・・
2ヶ月以内に
マーケティング用
のアプリが必要！
2ヶ月は
無理です
ユーザー部門 IT部門
モバイルアプリ
エンジニア
アプリ作成依頼
作業依頼
画面だけの開発
であれば、すぐ
できます
2ヶ月以内に
マーケティング用の
アプリが必要！
OKです
従来型のアプリ開発 MBaaSを使用したアプリ開発

開発プロセスの違い
17
従
来
型
の
ア
プ
リ
開
発
MBaaS
を
使
用
し
た
ア
プ
リ
開
発
API開発
アプリ開発
結合
テスト
総合
テスト
アプリ開発
総合
テスト
要件定義
・設計
要件定義
・設計
通常は、APIができていないとアプリの開発が完了しない。
API開発チームと、アプリ開発チームが協調しながら開発を進める。
APIは既にMBaaSによって提供されるため、すぐにアプリの
開発を始めることができる。
常にサーバーと結合しながら開発を進められるため、
アプリ・サーバーの結合の確認は不要。
期間短縮

企業向けMBaaS
「AppPot（アップポット）」
18

ノウハウを自社製品「AppPot」としてリリース
19
特徴③特徴②
既存の社内システムとの
連携が容易
サーバー開発不要企業で必要な機能を
実装済み
特徴①

AppPotが提供する主な機能
① LDAP / Active Directory / Google Apps連携
② グループ、ユーザー及びアプリの権限管理
③ ログイン／ログアウトなどの認証
④ 端末とサーバー間のデータの同期
⑤ アプリの使用状況、エラーの情報収集
⑥ 端末内のデータの暗号化
⑦ プッシュメッセージの送信
⑧ Eメールの送信
⑨ バイナリファイルAPI
⑩ 他システムとの連携（データベース、Webサービス他）
20

AppPotの概要アーキテクチャ
21
クラウド
AppPotサーバー
Systems
既存システム群
Systems
他システム
データ
コネク
ター
認証・認可
データ管理
プッシュ
メッセージ
ロギング
管理コンソール
データベース、
Webサービス等
アプリ配布
デバイス管理
AppPot
DB
Client
Application
SDK
Client
Application
SDK
Client
Application
SDK
Client
Application
AppPot SDK
AppPot機能
提供範囲
AppPot機能
提供範囲外
スマートフォン/タブレット
システム連
携
システム連携
API
MDM
凡例
ユーザー管理
アプリ管理

他システム連携
22
既存の社内システムとの連携が容易
 既存システムと簡単に連携するた
めの各種アダプターが用意されて
います
 既存システムのデータをアプリか
ら活用したり、アプリのデータを
既存システムに連携することで、
より広い業務でスマートデバイス
を活用できます
 連携は必ずAppPotを介して行わ
れ、個別に開発されないため、シ
ンプルな構成となります

AppPotの導入効果
弊社にてAppPotを用いた場合の実測した結果
23
 下記の2点により、60％の工数が削減されました。
 共通機能部分の設計、開発、テストが不要
 サーバーのインフラ構築及びサーバー側の開発が不要
AppPot
従来
企画設計サーバ開発
インフラ
構築
アプリ開発テスト
企画設計アプリ
開発
テスト
23人日
59人日

活用イメージ［A社製薬メーカー］
複数アプリでAppPotを利用し、画面のみの開発で運用
• お薬ごとにアプリを開発
• MRが医師と患者の症状の変化を共有する為の業務アプリ
• アプリ上でデータ（投与量、体重、血圧等）の入力を行っている
• アプリ開発のスピードが求められる（3ヶ月から4ヶ月）
24
• 開発コスト削減
• 開発期間の短縮
• 共通の仕組みで複数のアプリを開発運用できるガバナンスの確立
［導入イメージ］〈Server〉
AppPot
UI
〈SDK〉
データ
アクセス機
能
認証
データ
アクセス
AppPotで提供
各アプリごとに
スクラッチで開発
各種
マスター
Active
Directory
案件概要
導入
メリット

［事例 1］製造業フィールドサポート社員向け
マルチプラットフォーム対応アプリを内製開発
【課題】
• ユーザーの個人端末を利用するため、
iPhone、Androidに対応する必要が
あった
• 内製化の方針であるが、モバイルアプ
リの開発経験はない
25
【ソリューション】
• Monacaと、AppPotを組み合わせて、
Webの技術のみでアプリを開発
• AppPotのDBコネクタ、Google Apps
認証連携で社内システムと連携
オンプレミス型で導入

［事例 2］化粧品メーカー営業社員向け
営業支援アプリをスピード開発
【課題】
• 既存のパッケージ製品では、自社の業
務と合わないが、すべてスクラッチで
開発するのは高すぎる
• 営業日報、画像などをリアルタイムに
共有したい
26
【ソリューション】
• AppPotのData API、File APIなどを活
用し、サーバ側の開発は不要だった
• フロントエンドのみの開発だったため、
初期開発コストが1/2程度で済んだ
• Push通知を利用して、新しい情報をリア
ルタイムに通知
AppPotクラウドサービスを利用

<Application Server>
WildfFly
デモの環境
サンプルアプリ
- HTML
- Javascript
(AngularJS)
AppPot
ブラウザ
JSON/HTTP
http://localhost:8000/app http://localhost:8000/apppot
Mac OSX
<DB>
MySQL

準備
1. アプリの登録
2. グループの登録
3. ユーザーの登録

 処理概要
• AppPotサーバー内に生成されたローカルDBのテーブルにアクセスし、データのCRUDを行なう
 接続先テーブルのレイアウト
• Customer（顧客テーブル）
サンプルの仕様
項目名型説明
objectId String サロゲートキー。AppPot組込項目。AppPotが自動更新。
customerId String 顧客ID
name String 顧客名
zip String 郵便番号
address String 住所
phone String 電話番号
sex Number 性別（0:男性、1:女性）
scopeType Number データの参照範囲。AppPot組込項目。
createTime Number クライアントでのデータ生成時間。UNIXTIME形式。AppPot組込項目。
updateTime Number クライアントでのデータ更新時間。UNIXTIME形式。AppPot組込項目。
createUserId Number データ生成ユーザID。AppPot組込項目。AppPotが自動更新。
groupIds String データ生成/更新したユーザの所属グループID。AppPot組込項目。AppPotが自動更新。
serverCreateTime String サーバで記録されるデータ作成日時。AppPot組込項目。AppPotが自動更新。
serverUpdateTime String サーバで記録されるデータ更新日時。AppPot組込項目。AppPotが自動更新。
serverRecordStatus Number レコードの状態。AppPot組込項目。AppPotが自動更新。

$scope.login = function() {
// 匿名トークン取得（認証機能で説明）
Authenticator.getAnonymousToken($cordovaDevice.getUUID())
.then(function(authToken) {
// デバイスの登録処理（プッシュ通知機能で説明）
})
.then(function(authToken) {
// ログイン処理（認証機能で説明）
})
.then(function(user) {
var schemas = [Customer.getSchema(), Photo.getSchema()];
return LocalDBInitializer.createAppData(schemas);
})
.then(function() {
// トップ画面に遷移（認証機能で説明）
})
.catch(function(error) {
// エラーハンドリング（認証機能で説明）
});
};
ローカルDB生成（呼び出し元）
LoginController.js
生成するテーブルのスキーマ情報を取得
スキーマ情報を指定して、AppPotのローカル
DBにテーブルを生成する処理を呼び出し

ローカルDBのテーブルスキーマ定義
this.getSchema = function() {
return {
primary_key: "objectId",
name: TABLE_NAME,
columns:
{ colName: "objectId", type: "varchar" },
{ colName: "customerId", type: "varchar" },
{ colName: "name", type: "varchar" },
{ colName: "zip", type: "varchar" },
{ colName: "address", type: "varchar" },
{ colName: "phone", type: "varchar" },
{ colName: "sex", type: "long" },
{ colName: "scopeType", type: "integer" },
{ colName: "createTime", type: "integer" },
{ colName: "updateTime", type: "integer" }
]
};
};
Customer.js
テーブルスキーマの定義。
colName : 項目名
type : 項目の型
varchar : 文字型
long : 整数型
integer : 数値型（実数）
※TABLE_NAME変数は定数として

ローカルDB生成処理
this.createAppData = function(schemas) {
return $http.post(AppPotConfig.apiUrl() + "/schemas", {
appId: AppPotConfig.appId,
appVersion: AppPotConfig.appVersion,
isResetDatabase: true,
companyId: AppPotConfig.companyId,
tables: schemas
})
.then(function(response) {
throwErrorIfErrorStatus(response);
});
};
LocalDBInitializer.js
引数で指定されたテーブルのスキーマ定義をポストパ
ラメータに指定して、テーブル生成のWebAPIを呼び
出す。
※AppPotConfigは補足を参照
※TABLE_NAME変数は定数としてCustomer.jsに定義

ローカルDBから一覧データを検索（呼び出し元）
$scope.findList = function() {
Customer.findList($scope.condition.customerId
,$scope.condition.name)
.then(function(customers) {
$scope.customers = customers;
})
alert(error);
});
}
CustomerController.js
画面で入力した顧客IDと顧客名を検索条件に顧客テー
ブルを検索した結果を取得する処理を実行
取得した顧客一覧を画面のテーブルにバインドされた
変数に格納

ローカルDBから一覧データを検索（検索API呼び
出し）
this.findList = function(customerId, name) {
return $http.post(AppPotConfig.apiUrl() + "/data/query", {
objectNames: [TABLE_NAME],
returnedObjectNames: [TABLE_NAME],
maxRecord: 1000,
condition: {
sortConditions: [{ tableName: TABLE_NAME, columnName: "serverUpdateTime", conditionValue: 2 }],
whereConditions: [{
searchConditions: [
{
type: 3,
tableName: TABLE_NAME,
columnName: "customerId",
conditionValue: [nullToBlank(customerId)]
},
{
type: 3,
columnName: "name",
conditionValue: [nullToBlank(name)]
}
]
}],
scope: 3
}
})
var customers = [];
angular.forEach(response.data.results.Customer, function(customer) {
customers.push(angular.extend(new Customer(), customer));
});
return customers;
})
};
Customer.js
検索条件を指定して、CustomerテーブルをSELCTす
るWebAPIを呼び出す。
Where句の条件を指定
type : 比較演算子（3:Equal）
tableName : 対象カラムが所属するテーブル名
columnName : カラム名
conditionValue : 条件に指定する値
OrderBy句の条件を指定
conditionValue : 昇順/降順の指定
取得した顧客情報をクライアントで定義した
Customerオブジェクトにコピーする

ローカルDBから1件のデータを取得（呼び出し
元）
$scope.showDetailDialog = function(customer) {
Customer.findBy(customer.objectId)
.then(function(customer) {
$scope.customer = customer;
$scope.detailDialog = $modal.open({
templateUrl: "components/localdb/customerDetail.html",
backdrop: "static",
scope: $scope
});
$scope.detailDialog.isNew = false;
})
alert(error);
});
}
画面でクリックした顧客のobjectIdをキーに最新の顧
客データを取得する処理を実行
取得した顧客データを表示する詳細ダイアログを表示
する
取得した顧客データを詳細画面に設定

ローカルDBから1件のデータを取得（1件取得API
呼び出し）
this.findBy = function(objectId) {
return $http.post(AppPotConfig.apiUrl() + "/data/query", {
objectNames: [TABLE_NAME],
returnedObjectNames: [TABLE_NAME],
maxRecord: 1,
condition: {
whereConditions: [{
searchConditions: [{
type: 1,
columnName: "objectId",
conditionValue: [objectId]
}]
}],
scope: 3
}
})
return angular.extend(new Customer(), response.data.results.Customer[0]);
});
}
Customer.js
objectIdをキーに、1件のCustomerデータをSELCTす
るWebAPIを呼び出す。
objectIdをWhere句に指定
type : 比較演算子（3:Equal）
conditionValue : 条件に指定する値
取得した顧客情報をクライアントで定義したCustomerオブジェクトにコピーする

ローカルDBへの登録・更新・削除（呼び出し元）
$scope.closeDetailDialog = function(editType) {
var promise;
switch(editType) {
case $scope.EditType.Create:
promise = $scope.customer.save();
break;
case $scope.EditType.Update:
promise = $scope.customer.update();
break;
case $scope.EditType.Delete:
promise = $scope.customer.remove();
break;
}
promise.then(function() {
$scope.detailDialog.close();
$scope.detailDialog = null;
$scope.customer = null;
})
alert(error);
});
}
対象のCustomerオブジェクトをDBに保存する処理のPromise
オブジェクトを取得する
対象のCustomerオブジェクトの情報でDBに更新する処理の
Promiseオブジェクトを取得する
対象のCustomerオブジェクトをDBから削除する処理の
Promiseオブジェクトを取得する
プロミスオブジェクトの処理を実行
処理がエラーだった場合、エラーの内容をダイアログで通知

ローカルDBにデータを登録
Customer.prototype.save = function() {
this.createTime = Math.floor(Date.now() / 1000);
this.updateTime = Math.floor(Date.now() / 1000);
return $http.post(AppPotConfig.apiUrl()
+ "/data/batch/addData", {
objectName: TABLE_NAME,
data: [this]
})
});
};
Customer.js
対象のCustomerオブジェクトのデータ
をDBに登録するWebAPIを呼び出す。
Customer.jsに定義

ローカルDBのデータを更新
Customer.prototype.update = function() {
this.updateTime = Math.floor(Date.now() / 1000);
+ "/data/batch/updateData", {
data: [this]
})
});
};
Customer.js
でDBに更新するWebAPIを呼び出す。

ローカルDBのデータを削除
Customer.prototype.remove = function() {
+ "/data/batch/deleteData", {
objectIds: [{
objectId: this.objectId,
serverUpdateTime: this.serverUpdateTime
}]
})
});
};
Customer.js
でDBにから削除するWebAPIを呼び出
す。
楽観的排他制御に利用するため、SELECTしてきた時の
serverUpdateTimeを指定

まとめ
 コンシューマー向けのモバイルアプリ開発では、
MBaaSを使用した高速開発が進んでいます
 企業向けのモバイルアプリでも、MBaaSをうまく活用する
ことで、開発期間の短縮や、小さなチームでの開発が
可能です
 「AppPot（アップポット）」は企業向けに特化した
MBaaS製品です

無償トライアルのご紹介
http://apppot.jp
44

NCDCはエンジニアを募集しています
1. AppPot開発者
• 最新のJava EEを用いて、サーバー・ソフトウェアを開発します
2. アプリケーション開発者
• Webエンジニア、iOSエンジニア、Androidエンジニア
• 自社の製品開発や、UXコンサルサービスと連動したアプリ開発
3. インフラエンジニア
• AWS、CircleCI、Githubなどを使って、DevOpsを一緒に進めていただ
ける方
45

企業向けmBaaS「AppPot」を使ったサーバー開発なしの高速モバイルアプリ開発

企業向けmBaaS「AppPot」を使ったサーバー開発なしの高速モバイルアプリ開発

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (12)

Semelhante a 企業向けmBaaS「AppPot」を使ったサーバー開発なしの高速モバイルアプリ開発

Semelhante a 企業向けmBaaS「AppPot」を使ったサーバー開発なしの高速モバイルアプリ開発 (20)

企業向けmBaaS「AppPot」を使ったサーバー開発なしの高速モバイルアプリ開発

Notas do Editor