AppPotで企業向けアプリの開発はこう変わる！/ Change Apps development style by AppPot

2017/3/24のCTC様との共催イベントで講演した資料です。

Transcript

1. "QQ1PUͰاۀ޲͚ΞϓϦͷ
   ։ൃ͸͜͏มΘΔʂ
   2017年3⽉24⽇ NCデザイン＆コンサルティング株式会社 ⼗川亮平
2. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. ⾃⼰紹介
   े઒
   
   ྄ฏ
   ͦ͝͏
   
   Γΐ͏΁͍
   2 ࠃ಺ϝʔΧʔ4*෦໳ɺ೔ຊΦϥΫϧͰ
   ιϑτ΢ΣΞΤϯδχΞɺΞʔΩςΫτͱ
   ͯ͠اۀγεςϜʹैࣄ
   
   ݱࡏ͸/$%$ͰόοΫΤϯυαʔϏε
   ʰ"QQ1PUʱͷϓϩμΫτϚωʔδϟɺ
   Ϣʔβʔاۀ༷޲͚ʹϞόΠϧΞϓϦͷ
   اըɾ։ൃͷ͝ࢧԉΛ͍ͯ͠·͢
   ੡ༀɺখചɺ੡଄ɺݐઃʜʜ
   
3. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. NCデザイン&コンサルティングの特徴 3 NCDC CX/UX デザイン モバイル＆ クラウド 企業向け サービス •  CX/UXデザインコンサルティング •  ワークショップ •  デザイン制作 •  システムアーキテクチャ
 コンサルティング •  開発プロセスコンサルティング •  システム受託開発 •  モバイルプラットフォーム
 [AppPot] の製造・販売 •  アプリ＆クラウド受託開発 •  モバイルテクノロジーコンサルティング 企業向けCX/UXコンサルティングから開発までを⼀貫して提供
4. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. 今⽇の内容 n  AppPotを使うことによって何が変わるのか？ •  必要となるスキルセット＝体制 •  開発プロセス n  AppPotの事例 n  このように使えます n  まとめ 4
5. AppPotで変わること
6. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. AppPotで何が変わるのか？ サーバープログラムを開発する分のコストが下がる 単純に だけではありません 業務のニーズを理解した⼩さなチームが、 UX駆動でアジャイルな開発プロセスを 採⽤することで、柔軟で軽量な開発を⾏える ことが⼤きな違いです
7. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. ⼩さなチームで、効率良く開発 7 モバイルアプリ エンジニア サーバーアプリ エンジニア 画⾯で使う項⽬が決 まったらAPIを開発す るよ 通常のチーム 体制 プロセス 協調が必要 APIの開発が完了 するまで、結合テ ストはできないな 業務設計者 協調が必要 関係者が多いから、 詳細な設計書がいる な
8. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. ⼩さなチームで、効率良く開発 8 モバイルアプリ エンジニア サーバーアプリ エンジニア 画⾯で使う項⽬が決 まったらAPIを開発す るよ 画⾯の項⽬が増え そうなんだけ ど・・・ 通常のチーム 協調が必要 えー！！ APIの修正が必要だか ら、ちょっと時間下 さい APIの開発が完了 するまで、結合テ ストはできないな 業務設計者 協調が必要 関係者が多いから、詳 細な設計書がいるな じゃあ、画⾯の修 正しないといけな いですね 体制 プロセス
9. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. ⼩さなチームで、効率良く開発 9 モバイルアプリ エンジニア 変更があっても、 チームが⼩さいの で調整に時間がか からない 要件、UI設計が決 まったところから、 すぐに開発着⼿ 業務設計者 開発時はスピード優 先。 保守に必要な設計書 はちゃんと作ろう AppPotを使⽤した開発 体制 プロセス
10. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. 従来のアジャイル開発プロセス 10 設計＆デザイン UI実装 設計＆デザイン 共通化設計 UI実装 設計＆デザイン UI実装 設計＆デザイン リリー ス リリー ス リリー ス スプリント #1 企画 スプリント #2 スプリント #3 スプリント #4 スプリント #5 UI実装 体制 プロセス API実装 共通化設計 API実装 API実装 API実装 フロントエンド開発 バックエンド開発 API実装
11. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. AppPotを使ったアジャイル開発プロセス 11 設計＆デザイン UI実装 設計＆デザイン 共通化設計 UI実装 設計＆デザイン UI実装 設計＆デザイン リリー ス リリー ス リリー ス スプリント #1 企画 スプリント #2 スプリント #3 スプリント #4 スプリント #5 UI実装 ü  サーバーの開発が無いため、UXの設計、UIデザインが終わったとこ ろから画⾯を開発していける ü  APIの開発・テストを待つ必要がなく、設計・開発したUIをスプリ ントの最後ですぐ評価できる 体制 プロセス フロントエンド開発
12. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. アジャイルプロセスとの相性の良さ 12 スプリント #1 企画 スプリント #2 スプリント #3 スプリント #4 スプリント #5 機能A 開発 機能B 開発 機能C 開発 機能D 開発 機能E 開発 当初の計画 体制 プロセス
13. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. アジャイルプロセスとの相性の良さ 13 スプリント #1 企画 スプリント #2 スプリント #3 スプリント #4 スプリント #5 機能A 開発 機能B 開発 機能C 開発 機能D 開発 機能E 開発 ⼀部のユーザーを対象に トライアルテストを実施した ところ、機能Cの使⽤性に 問題があった 機能C’ 開発 機能X 開発 競合に対して弱みとなっていた 機能Xが機能Eよりも重要と ビジネス的に判断 体制 プロセス
14. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. アジャイルプロセスとの相性の良さ 14 スプリント #1 企画 スプリント #2 スプリント #3 スプリント #4 スプリント #5 機能A 開発 機能B 開発 機能C 開発 機能D 機能E ⼀部のユーザーを対象に トライアルテストを実施した ところ、機能Cの使⽤性に 問題があった 機能C’ 開発 機能X 競合に対して弱みとなっていた 機能Xが機能Eよりも重要と ビジネス的に判断 ü  このような⽅向転換は⾃社主導のプロジェクトでなければ難しい ü  バックエンドサービスを使っていれば、変更の⽅向転換は 画⾯開発部分のにみ留まるので⽐較的影響は⼩さい バックエンドサービスを使っていない場合、先⾏して開発していたAPIは 捨てなければならないかも知れない ü  AppPotを使っていれば、変更の⽅向転換は 画⾯開発部分のみに留まるので⽐較的影響は⼩さい ü  変更時の調整ポイントが少ないため、コミュニケーションコスト も下がる バックエンドサービスを使っていない場合、先⾏して開発していた APIは捨てなければならないかも知れない 体制 プロセス
15. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. これらの機能が画⾯のロジックから 利⽤可能です Ϣʔβʔ؅ཧ
    • ログイン／ログアウト • Active Directory／LDAP／Google Appsとの 認証連携 σʔλ؅ཧ
    • 端末とサーバー間のデータの同期 • トランザクション制御によるデータの信頼性 の確保 • オフライン状態での利⽤と、オンライン時の 再送 ΞϓϦͷ࢖༻ঢ়گͷϞχλϦϯά
    • 使⽤されている機能やエラー情報の収集、参 照 15 ϓογϡϝοηʔδɺFϝʔϧ
    • 管理画⾯やAPI経由でアプリからのPush メッセージの送信 • API経由でeメールの送信 ηΩϡϦςΟ
    • 端末内のデータの暗号化 • SQL Injectionなどのセキュリティ対応済 み ଞγεςϜͱͷ࿈ܞ
    • 他システムとのWebサービス、ファイル、 データベースとの連携 • 別オプションでERPパッケージ製品との連 携コネクター 各機能を簡単に使⽤するためのiOS / Android / JavaScriptの SDKが提供されています
16. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. これらの機能が画⾯のロジックから 利⽤可能です Ϣʔβʔ؅ཧ
    • ログイン／ログアウト • Active Directory／LDAP／Google Appsとの 認証連携 σʔλ؅ཧ
    • 端末とサーバー間のデータの同期 • トランザクション制御によるデータの信頼性 の確保 • オフライン状態での利⽤と、オンライン時の 再送 ΞϓϦͷ࢖༻ঢ়گͷϞχλϦϯά
    • 使⽤されている機能やエラー情報の収集、参 照 16 ϓογϡϝοηʔδɺFϝʔϧ
    • 管理画⾯やAPI経由でアプリからのPush メッセージの送信 • API経由でeメールの送信 ηΩϡϦςΟ
    • 端末内のデータの暗号化 • SQL Injectionなどのセキュリティ対応済 み ଞγεςϜͱͷ࿈ܞ
    • 他システムとのWebサービス、ファイル、 データベースとの連携 • 別オプションでERPパッケージ製品との連 携コネクター 各機能を簡単に使⽤するためのiOS / Android / JavaScriptの SDKが提供されています ü  このような⽅向転換は⾃社主導のプロジェクトでなければ難しい ü  バックエンドサービスを使っていれば、変更の⽅向転換は 画⾯開発部分のにみ留まるので⽐較的影響は⼩さい バックエンドサービスを使っていない場合、先⾏して開発していたAPIは 捨てなければならないかも知れない ü  画⾯の要件はさまざまであり、それこそが差別化要因ですが AppPotが提供する機能は⾮業務的なものであり、 これらを組み合わせて使うことで、 ほとんどのアプリケーションが開発可能です ü  AppPotの機能はすべてAPIとして提供されており、 さまざまクライアント・アプリケーションから利⽤可能です
17. AppPotの事例
18. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. AppPotの代表的な事例 18 製造業 フィールドサポート ⽀援アプリ 写真なども活⽤し、その場で 記録・報告 製造業 化粧品メーカー 営業⽀援アプリ 営業⽇報のリアルタイム⼊⼒、管 理者とのコニュニケーション強化 製造業 ⼯場における 安全管理アプリ 安全管理のためのチェックリス トと、検査結果の管理 医療／製薬 MR向け営業⽀援アプリ 症例情報をトラッキングし、 ディテイリングを⽀援 医療／製薬 医師向け 医薬品ガイドアプリ 医薬品の説明動画を配信 医療／製薬 ⻭科向け患者コミュニケー ションアプリ アンケートや将来の⼝の中の 状態予想など ⼩売 百貨店商品カタログアプリ 店員からお客さまへの接客⽀援 ⼩売 百貨店 催事・イベント管理アプリ 店員からお客さまへの ご案内⽀援 建設 建設現場 施⼯データ管理アプリ 建設機器のデータ連携、 検査値⼊⼒ その他、業務向けアプリケーション多数
19. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. ［事例①］製造業 フジテック株式会社様 マルチプラットフォーム対応アプリを内製開発 19 フジテック株式様の事例紹介ページ および事例講演資料 http://apppot.jp/cases.html#fujitec フィールドサポートの部⾨の社員はほとんど 外で仕事をしており、社内のシステム化の恩 恵を受けることができないという課題を解消 するためにモバイル化を会社として推進。 以下のような機能をAppPotを使⽤して構築。 •  モバイルからの社員の認証を社内で使⽤ しているGoogle Appsの認証と統合 •  社内のOracle Databaseに格納されてい るデータをモバイルアプリから活⽤ •  点検業務において記録や写真の記録
20. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. ［事例①］製造業 フジテック株式会社様 フィールドサポート社員向けアプリの例 20 フジテック株式会社様講演資料より https://goo.gl/ZwiWlu
21. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. ［事例①］製造業 フジテック株式会社様 AppPotの効果 既存のスキルセットではじめてのアプリ開発を実現 n  社内開発であったが、アプリから要求を受けるWebシステムに構築するスキ ル・⼯数はなかったが、⾯倒なWebシステムの構築は不要で、パラメタだけ で社内DB、サーバーと連携可能となった アプリ特有の機能を簡単に実現 n  モバイルアプリ特有のユーザー認証、Push通知、アプリのログ収集などを APIで簡単に利⽤できた モバイルアプリ以外からの利⽤ n  モバイルアプリからだけではなく、AppPotのAPIを利⽤をGoogleスクリプ トから社内DBの情報をリアルタイム取得している n  従来は、Excelマクロで定期的にデータベースから取得していたため古い情 報しか参照できなかった 21
22. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. ［事例①］製造業 フジテック株式会社様 アーキテクチャ 22 •  ひとつのAppPotを使⽤して複数のモバイルアプリを開発・運⽤ •  社内のOracle DBなどをAppPotを介してモバイルアプリに公開 サーバー
23. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. ［事例②］ 製薬 UCBジャパン様 MR向け症例フォローツール UXドリブンな開発プロセスで短期間でアプリ開発 23 MRが症例の情報を聞き取り、ドクターと共同でトラッキ ングするためのアプリを開発。 •  匿名のまま患者さんの情報を記録し、ドクターと ディスカッションするためのコミュニケーション ツール •  MRが⼊⼒した情報をエリアマネージャーや本社ス タッフがタイムリーに確認できる 得られた効果 •  2016年9⽉から使いはじめて、⼊⼒症例数は毎⽉増 えている。MRが全員が使⽤している。 •  アプリから症例を追うことで、MRからの提案によっ て、発作が減ったなど⾃分の活動効果が⽬に⾒える ことや、ドクターからの突然の質問に対して、情報 が引き出せるようになった。
24. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. ［事例②］ 製薬 UCBジャパン様 MR向け症例フォローツール UXドリブンな開発プロセスで短期間でアプリ開発 24 ①ヒアリング＆ プロトタイプ作成 ②プロトタイプによる ユーザーテスト ③AppPotを使った アプリ開発 デザイナーが要件定義 フェーズから参画し、 プロトタイプツールで 動作するプロトタイプ を作成することで完成 イメージを共有 実際の利⽤者による ユーザーテスト。 作る前にUX、UI上の課 題を潰す。 サーバー側は開発なし。 フロントエンドのエン ジニア１名で開発 AppPotの特徴としてUI側はスクラッチ開発と同様に⾃由にUX、UIを設計でき、 且つ、フロントエンドのみであるため短期間で開発ができた。
25. AppPot使ったアプリのイメージ
26. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. 営業⽀援アプリを例にAppPotの機能をご紹介 26
27. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. 27 認証API $scope.login = function() { AppPot.LocalAuthenticator.login($scope.userName, $scope.password) .then(function(authInfo) { // 成功した場合の処理 }) .catch(function(error) { // 例外処理 }); };
28. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. 28 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; }]);
29. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. 29 Data APIで データベースと 情報をやりとり （次⾴以降サンプル） File APIで 写真をやりとり 訪問記録を書くと、上司に Push通知APIを使⽤して、 リアルタイムにお知らせ
30. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. データアクセス（登録処理） これだけの記述で、サーバーのデータベースにアクセスできます。 データ項⽬に変更があっても、前述のデータ定義を変更するだけ。 // 登録処理 // TODO customer変数に画⾯で⼊⼒した値を設定 $scope.customer.insert() .then(function() { // TODO 成功した場合の画⾯処理 }) .catch(function(error) { // TODO エラーの場合の画⾯処理 }); } 30 同様に更新の場合はupdate、削除の場合は removeが用意されています
31. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. データアクセス（検索処理） SQLライクな検索条件を指定できます。JOINももちろんできます $scope.findList = function() { // TODO 画⾯で指定された検索条件を変数にセット Customer.select() .where("#customer.customerId like ? AND #customer.name like ?", "%" + customerId + "%", "%" + name + "%") .findList() .then(function(result) { // TODO 成功した場合の画⾯処理 }) .catch(function(error) { // TODO エラーの場合の画⾯処理 }); } 31 Idを指定したシンプルな単件取得⽤APIも有り
32. まとめ
33. Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. AppPotを使ったアプリ開発の変化 33 体制 •  ビジネスを理解したプロダクトオーナー •  デザイナー •  フロントエンド（UI）を開発できるエンジ ニア 開発プロセス •  利⽤者経験（UX）の設計 •  UX⽅法論を適⽤したITプロジェクトのプロ セス •  運⽤後の計測とフィードバックのプロセス プラット フォーム •  汎⽤的だが複雑で品質が求められる部分は AppPotが機能を提供します •  AppPotを使ってUXにフォーカスして下さ い