企業向けバックエンドサービスAppPotを使ったモバイルアプリの高速開発手法 / Enterprise App development methods by AppPot

اۀ޲͚όοΫΤϯυαʔϏε"QQ1PUΛ ࢖ͬͨϞόΠϧΞϓϦͷߴ଎։ൃख๏ 2017年9⽉7⽇ NCデザイン＆コンサルティング株式会社⼗川亮平

Copyright ©2017, NC Design & Consulting Co., Ltd. All rights
reserved. ⾃⼰紹介 े઒྄ฏ ͦ͝͏Γΐ͏΁͍ 2 ࠃ಺ϝʔΧʔ4*෦໳ɺ೔ຊΦϥΫϧͰ ιϑτ΢ΣΞΤϯδχΞɺΞʔΩςΫτͱ ͯ͠اۀγεςϜʹैࣄ ݱࡏ͸/$%$ͰόοΫΤϯυαʔϏε ʰ"QQ1PUʱͷϓϩμΫτϚωʔδϟɺ Ϣʔβʔاۀ༷޲͚ʹϞόΠϧΞϓϦͷ اըɾ։ൃͷ͝ࢧԉΛ͍ͯ͠·͢ ੡ༀɺݐઃɺখചɺ੡଄ʜʜ

reserved. NCデザイン&コンサルティングの特徴 3 NCDC CX/UX デザインモバイル＆クラウド企業向けサービス •  CX/UXデザインコンサルティング •  ワークショップ •  デザイン制作 •  システムアーキテクチャ  コンサルティング •  開発プロセスコンサルティング •  システム受託開発 •  モバイルプラットフォーム  [AppPot] の製造・販売 •  アプリ＆クラウド受託開発 •  モバイルテクノロジーコンサルティング企業向けCX/UXコンサルティングから開発までを⼀貫して提供

reserved. 今⽇の内容 n  なぜモバイルアプリの開発に内製開発が向いているか？ n  内製開発を進めるポイント n  企業向けバックエンドサービスAppPotのご紹介 n  AppPotで進めるアプリの⾼速開発 n  まとめ 4

reserved. 企業のモバイルアプリ活⽤の成熟度 5 カタログアプリやグループウェアのブラウザ、メールアプリからの利⽤導入の初期これまでオフィスで⾏っていたPC業務を現場でタブレットで⾏うことによる業務効率化業務へ本格活用モバイルならではの新しい業務や顧客サービス更に進んだモバイル活用導入負荷やリスクも小さいもの社外での入力端末として活用・営業日報など出先でのレポート系・基幹システムのフロント

reserved. 新しい領域にモバイルアプリを適⽤するために –––– 変化に適⽤する体制とプロセス 6 新しいビジネス/ アプリの企画アプリ定義書作成利⽤者の分析ペルソナ作成メンタルモデル作成ストーリーボード作成アプリの基本設計/ UIデザイン KPIの測定アプリ作成/ ユーザーテストと改善プロトタイプ作成リリース

reserved. 新しい領域にモバイルアプリを適⽤するために –––– 変化に適⽤する体制とプロセス 7 新しいビジネス/ アプリの企画アプリ定義書作成利⽤者の分析ペルソナ作成メンタルモデル作成ストーリーボード作成アプリの基本設計/ UIデザイン KPIの測定アプリ作成/ ユーザーテストと改善プロトタイプ作成リリース n  基幹業務と異なり、新しい企画の場合、何が正解か予測することは難しい。答えがでるまで待っていては遅すぎる n  ビジネスのニーズに合わせて企画・実装・測定・フィードバックのサイクルを軽量に回す事が重要最初に決めたものをQCDを守って作りきる請負型プロジェクトよりも、業務を理解している少数のエンジニアが継続的に改善を続ける内製開発が向いている

reserved. とはいえ、検討しなければならないこともある 8 カタログアプリやグループウェアのブラウザ、メールアプリからの利⽤導入の初期既存のPC業務をタブレットへ置き換えることによる業務効率化業務へ本格活用モバイルならではの新しい業務や顧客サービス更に進んだモバイル活用第２の壁 •  アプリが増え、管理コスト増 •  アプリ開発の効率化第１の壁 •  社内のシステムへの接続 •  セキュリティの確保 •  人材の確保

reserved. 新しい領域にモバイルアプリを適⽤するために必要な３つのP 9 People •  変化に柔軟に対応できる体制の整備 •  ⾃社主導の開発体制 •  モバイルアプリを開発できるエンジニア Process •  利⽤者経験（UX）の設計 •  アジャイル的な開発プロセス •  運⽤後の計測とフィードバックのプロセス Platform •  軽量に短期間で開発するためのツール •  セキュリティ、ユーザー管理などの標準的な仕組みの整備 •  バックエンドサービスがキーワード

reserved. ここに注⼒バックエンドサービスとは n  サーバー側にもつ認証、データベースアクセス、 Push通知などの機能を提供するサービス •  BaaS（Backend as a Service） n  サーバーやインフラを気にすることなくアプリのアイデアに注⼒できるため、ベンチャー企業がコンシューマ向けのアプリケーションなどを迅速に提供するのに良く使⽤されています 10

バックエンドサービスで変わること

reserved. バックエンドサービスで何が変わるのか？サーバープログラムを開発する分のコストが下がる単純にだけではありません業務のニーズを理解した⼩さなチームが、画⾯ドリブンでアジャイルな開発プロセスを採⽤することで、柔軟で軽量な開発を⾏えることが⼤きな違いです

reserved. ⼩さなチームで、効率良く開発 13 モバイルアプリエンジニアサーバーアプリエンジニア画⾯で使う項⽬が決まったらAPIを開発するよ通常のチーム People Process Platform 協調が必要 APIの開発が完了するまで、結合テストはできないな業務設計者協調が必要関係者が多いから、詳細な設計書がいるな

reserved. ⼩さなチームで、効率良く開発 14 モバイルアプリエンジニアサーバーアプリエンジニア画⾯で使う項⽬が決まったらAPIを開発するよ画⾯の項⽬が増えそうなんだけど・・・通常のチーム People Process Platform 協調が必要えー！！ APIの修正が必要だから、ちょっと時間下さい APIの開発が完了するまで、結合テストはできないな業務設計者協調が必要関係者が多いから、詳細な設計書がいるな

reserved. ⼩さなチームで、効率良く開発 15 モバイルアプリエンジニア変更があっても、チームが⼩さいので調整に時間がかからない People Process Platform 要件、UI設計が決まったところから、すぐに開発着⼿業務設計者開発時はスピード優先。保守に必要な設計書はちゃんと作ろうバックエンドサービスを使⽤した開発

reserved. UX駆動とアジャイルな開発プロセス 16 デザイン UI実装デザイン共通化設計 UI実装デザイン UI実装デザインリリースリリースリリーススプリント #1 企画スプリント #2 スプリント #3 スプリント #4 スプリント #5 UI実装 People Process Platform ü  サーバーの開発が無いため、UXの設計、UIデザインが終わったところから画⾯を開発していける ü  APIの開発・テストを待つ必要がなく、設計したUIをすぐ評価できる

reserved. アジャイルプロセスとの相性の良さ 17 スプリント #1 企画 People Process Platform スプリント #2 スプリント #3 スプリント #4 スプリント #5 機能A 開発機能B 開発機能C 開発機能D 開発機能E 開発当初の計画

reserved. アジャイルプロセスとの相性の良さ 18 スプリント #1 企画 People Process Platform スプリント #2 スプリント #3 スプリント #4 スプリント #5 機能A 開発機能B 開発機能C 開発機能D 開発機能E 開発⼀部のユーザーを対象にトライアルテストを実施したところ、機能Cの使⽤性に問題があった機能C’ 開発機能X 開発競合に対して弱みとなっていた機能Xが機能Eよりも重要とビジネス的に判断

reserved. アジャイルプロセスとの相性の良さ 19 スプリント #1 企画 People Process Platform スプリント #2 スプリント #3 スプリント #4 スプリント #5 機能A 開発機能B 開発機能C 開発機能D 機能E ⼀部のユーザーを対象にトライアルテストを実施したところ、機能Cの使⽤性に問題があった機能C’ 開発機能X 競合に対して弱みとなっていた機能Xが機能Eよりも重要とビジネス的に判断 ü  このような⽅向転換は⾃社主導のプロジェクトでなければ難しい ü  バックエンドサービスを使っていれば、変更の⽅向転換は画⾯開発部分のにみ留まるので⽐較的影響は⼩さいバックエンドサービスを使っていない場合、先⾏して開発していたAPIは捨てなければならないかも知れない ü  このような⽅向転換は⾃社主導のプロジェクトでなければ難しい ü  バックエンドサービスを使っていれば、変更の⽅向転換は画⾯開発部分のみに留まるので⽐較的影響は⼩さい ü  変更時の調整ポイントが少ないため、コミュニケーションコストも下がるバックエンドサービスを使っていない場合、先⾏して開発していた APIは捨てなければならないかも知れない

企業向けバックエンドサービスAppPotのご紹介

reserved. 特徴③ 特徴② 企業向けのバックエンドサービス『AppPot』 21 企業のスマートデバイス活⽤を⽀援するモバイルアプリの開発／運⽤プラットフォームです既存の社内システムとの連携が容易サーバー開発不要企業で必要な機能を実装済み特徴① ίετ࡟ݮº։ൃظؒ୹ॖ People Process Platform

reserved. これらの機能が画⾯のロジックから利⽤可能です Ϣʔβʔ؅ཧ • ログイン／ログアウト • Active Directory／LDAP／Google Appsとの認証連携 σʔλ؅ཧ • 端末とサーバー間のデータの同期 • トランザクション制御によるデータの信頼性の確保 • オフライン状態での利⽤と、オンライン時の再送 ΞϓϦͷ࢖༻ঢ়گͷϞχλϦϯά • 使⽤されている機能やエラー情報の収集、参照 22 ϓογϡϝοηʔδɺFϝʔϧ • 管理画⾯やAPI経由でアプリからのPush メッセージの送信 • API経由でeメールの送信 ηΩϡϦςΟ • 端末内のデータの暗号化 • SQL Injectionなどのセキュリティ対応済み ଞγεςϜͱͷ࿈ܞ • 他システムとのWebサービス、ファイル、データベースとの連携 • 別オプションでERPパッケージ製品との連携コネクター People Process Platform 各機能を簡単に使⽤するためのiOS / Android / JavaScriptの SDKが提供されています

reserved. これらの機能が画⾯のロジックから利⽤可能です Ϣʔβʔ؅ཧ • ログイン／ログアウト • Active Directory／LDAP／Google Appsとの認証連携 σʔλ؅ཧ • 端末とサーバー間のデータの同期 • トランザクション制御によるデータの信頼性の確保 • オフライン状態での利⽤と、オンライン時の再送 ΞϓϦͷ࢖༻ঢ়گͷϞχλϦϯά • 使⽤されている機能やエラー情報の収集、参照 23 ϓογϡϝοηʔδɺFϝʔϧ • 管理画⾯やAPI経由でアプリからのPush メッセージの送信 • API経由でeメールの送信 ηΩϡϦςΟ • 端末内のデータの暗号化 • SQL Injectionなどのセキュリティ対応済み ଞγεςϜͱͷ࿈ܞ • 他システムとのWebサービス、ファイル、データベースとの連携 • 別オプションでERPパッケージ製品との連携コネクター People Process Platform 各機能を簡単に使⽤するためのiOS / Android / JavaScriptの SDKが提供されています ü  このような⽅向転換は⾃社主導のプロジェクトでなければ難しい ü  バックエンドサービスを使っていれば、変更の⽅向転換は画⾯開発部分のにみ留まるので⽐較的影響は⼩さいバックエンドサービスを使っていない場合、先⾏して開発していたAPIは捨てなければならないかも知れない ü  画⾯の要件はさまざまであり、それこそが差別化要因ですが AppPotが適⽤する機能は⾮業務的なものであり、これらを組み合わせて使うことで、ほとんどのアプリケーションが開発可能です ü  AppPotの機能はすべてAPIとして提供されており、さまざまクライアント・アプリケーションから利⽤可能です

reserved. AppPotの代表的な事例 24 製造業フィールドサポート⽀援アプリ写真なども活⽤し、その場で記録・報告製造業化粧品メーカー営業⽀援アプリ営業⽇報のリアルタイム⼊⼒、管理者とのコニュニケーション強化製造業⼯場における安全管理アプリ安全管理のためのチェックリストと、検査結果の管理医療／製薬 MR向け営業⽀援アプリ症例情報をトラッキングし、ディテイリングを⽀援医療／製薬医師向け医薬品ガイドアプリ医薬品の説明動画を配信医療／製薬⻭科向け患者コミュニケーションアプリアンケートや将来の⼝の中の状態予想など⼩売百貨店商品カタログアプリ店員からお客さまへの接客⽀援⼩売百貨店催事・イベント管理アプリ店員からお客さまへのご案内⽀援建設建設現場施⼯データ管理アプリ建設機器のデータ連携、検査値⼊⼒その他、業務向けアプリケーション多数 People Process Platform

reserved. ［事例］製薬 UCBジャパン様 MR向け症例フォローツール UXドリブンな開発プロセスで短期間でアプリ開発 25 MRが症例の情報を聞き取り、ドクターと共同でトラッキングするためのアプリを開発。 •  匿名のまま患者さんの情報を記録し、ドクターとディスカッションするためのコミュニケーションツール •  MRが⼊⼒した情報をエリアマネージャーや本社スタッフがタイムリーに確認できる得られた効果 •  2016年9⽉から使いはじめて、⼊⼒症例数は毎⽉増えている。MRが全員が使⽤している。 •  アプリから症例を追うことで、MRからの提案によって、発作が減ったなど⾃分の活動効果が⽬に⾒えることや、ドクターからの突然の質問に対して、情報が引き出せるようになった。

reserved. ［事例］製薬 UCBジャパン様 MR向け症例フォローツール UXドリブンな開発プロセスで短期間でアプリ開発 26 ①ヒアリング＆プロトタイプ作成 ②プロトタイプによるユーザーテスト ③AppPotを使ったアプリ開発デザイナーが要件定義フェーズから参画し、プロトタイプツールで動作するプロトタイプを作成することで完成イメージを共有実際の利⽤者によるユーザーテスト。作る前にUX、UI上の課題を潰す。サーバー側は開発なし。フロントエンドのエンジニア１名で開発 AppPotの特徴としてUI側はスクラッチ開発と同様に⾃由にUX、UIを設計でき、且つ、フロントエンドのみであるため短期間で開発ができた。

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

reserved. 他システム連携 28 既存の社内システムとの連携が容易 l  既存システムと簡単に連携するための各種アダプターが⽤意されています Webサービス各種データベース JMSなど l  既存システムのデータをアプリから活⽤したり、アプリのデータを既存システムに連携することで、より広い業務でスマートデバイスを活⽤できます l  連携は必ずAppPotを介して⾏われ、個別に開発されないため、シンプルな構成となります People Process Platform

reserved. 営業⽀援アプリを例にAppPotの機能をご紹介 29

reserved. 30 認証API $scope.login = function() { AppPot.LocalAuthenticator.login($scope.userName, $scope.password) .then(function(authInfo) { // 成功した場合の処理 }) .catch(function(error) { // 例外処理 }); };

reserved. 31 Project, Report, Contact, Customerなどのデータ定義は画⾯のソースコードに記述するとバックエンドサーバー内にもデータベースが⾃動⽣成 angular.module("app") .factory("Customer", ["AppPot", function(AppPot) { var customer = AppPot.defineModel("customer", { "customerId": { type: AppPot.DataType.Varchar }, "name": { type: AppPot.DataType.Varchar }, "zip": { type: AppPot.DataType.Varchar }, "address": { type: AppPot.DataType.Varchar }, "phone": { type: AppPot.DataType.Varchar }, "sex": { type: AppPot.DataType.Long } }); return customer; }]);

reserved. 32 Data APIでデータベースと情報をやりとり（次⾴以降サンプル） File APIで写真をやりとり訪問記録を書くと、上司にPush通知でリアルタイムにお知らせ

reserved. データアクセス（登録処理）これだけの記述で、サーバーのデータベースにアクセスできます。データ項⽬に変更があっても、前述のデータ定義を変更するだけ。 // 登録処理 // TODO customer変数に画⾯で⼊⼒した値を設定 $scope.customer.insert() .then(function() { // TODO 成功した場合の画⾯処理 }) .catch(function(error) { // TODO エラーの場合の画⾯処理 }); } 33 同様に更新の場合はupdate、削除の場合は removeが用意されています

reserved. データアクセス（検索処理） SQLライクな検索条件を指定できます。JOINももちろんできます $scope.ﬁndList = function() { // TODO 画⾯で指定された検索条件を変数にセット Customer.select() .where("#customer.customerId like ? AND #customer.name like ?", "%" + customerId + "%", "%" + name + "%") .ﬁndList() .then(function(result) { // TODO 成功した場合の画⾯処理 }) .catch(function(error) { // TODO エラーの場合の画⾯処理 }); } 34 Idを指定したシンプルな単件取得⽤APIも有り

reserved. Gateway APIを使⽤した他システムへの接続 35 AppPot 社内DB Monaca HTML5 AppPot SDK 取引先テーブル Gateway API Login API Flow定義 •  DBへの接続URLの設定 •  テーブルに対するSELECT（GET)、 INSERT（POST）、 UPDATE（PUT）、 DELETE（DELETE）の機能を提供取引先⼀覧

reserved. Gateway API（GET）を使ったデータ⼀覧取得 n  Gateway APIを呼び出す function getCustomerList() { return AppPot.Gateway.get("customer-db", "CustomerCompany", null, null, null) .then((response) => { console.log(JSON.stringify(response)); // TODO 取得した結果の処理 }); } GatewayAPIの呼び出し AppPot.Gateway.get("customer-db", "CustomerCompany", null, null, null) サービス名取得するテーブル名データ取得

reserved. Gateway API（POST）を使ったデータ更新 function regist() { var requestJson = { "companyName" : document.getElementById('companyName').value, "companyNameKana" : document.getElementById('companyNameKana').value, "zipCode" : document.getElementById('zipCode').value, "address" : document.getElementById('address').value, "phoneNumber" : document.getElementById('phoneNumber').value } AppPot.Gateway.post("customer-db", "CustomerCompany", null, requestJson, null) .then((response) => { console.log(response); alert("登録しました"); return navi.popPage(); }) .then(getCustomerList) } HTMLの各フォームから⼊⼒されている値を取得し、 GatewayAPIに送信するデータを組み⽴てる Gateway API (POST)を呼び出し

reserved. どういうところが企業向けなの？ 38 企業システムとの連携 ActiveDirectoryや Googleアカウントとの認証の連携、既存の DBやWebサービスなど他システム連携など企業システムで必要な機能が⽤意されている DBはNoSQLではなくあえてRDBMSを採⽤複雑なJoinなど業務システムのデータを扱うのに⼗分な機能があるクラウドでもオンプレミスでも企業のポリシーに合わせて選択可能オンプレミスからクラウドへの移⾏も可能

まとめ

reserved. まとめ 40 モバイルアプリを活用した新しい取り組みには、企画・実行・計測・フィードバックのサイクルを高速に回すことが重要です。 People •  変化に柔軟に対応できる体制の整備 •  ⾃社主導の開発体制 •  モバイルアプリを開発できるエンジニア Process •  利⽤者経験（UX）の設計 •  アジャイル的な開発プロセス •  運⽤後の計測とフィードバックのプロセス Platform •  軽量に短期間で開発するためのツール •  セキュリティ、ユーザー管理などの標準的な仕組みの整備 •  バックエンドサービスがキーワード

reserved. まとめ 41 モバイルアプリを活用した新しい取り組みには、企画・実行・計測・フィードバックのサイクルを高速に回すことが重要です。 People •  変化に柔軟に対応できる体制の整備 •  ⾃社主導の開発体制 •  モバイルアプリを開発できるエンジニア Process •  利⽤者経験（UX）の設計 •  アジャイル的な開発プロセス •  運⽤後の計測とフィードバックのプロセス Platform •  汎⽤的だが複雑で品質が求められる部分は AppPotが機能を提供します •  AppPotを使って業務やUIにフォーカスして下さい

reserved. 無償トライアルのご紹介 http://apppot.jp 42 こちらからお申し込み下さい

企業向けバックエンドサービスAppPotを 使ったモバイルアプリの高速開発手法 / Enter...

企業向けバックエンドサービスAppPotを 使ったモバイルアプリの高速開発手法 / Enterprise App development methods by AppPot

More Decks by AppPot

Other Decks in Technology

Featured

Transcript

企業向けバックエンドサービスAppPotを使ったモバイルアプリの高速開発手法 / Enter...

企業向けバックエンドサービスAppPotを使ったモバイルアプリの高速開発手法 / Enterprise App development methods by AppPot