企業向けバックエンドサービス「AppPot」を使ったUX駆動開発 / UX Driven Development by Backend service AppPot

Slide 1

Slide 1 text

اۀ޲͚όοΫΤϯυαʔϏε ʰ"QQ1PUʱΛ࢖ͬͨ69ۦಈ։ൃ 2016年11⽉14⽇ NCデザイン＆コンサルティング株式会社⼗川亮平

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. NCデザイン＆コンサルティングとは？  IT×デザインによる企業向けのサービスを展開 4 ͝ఏڙ෼໺ ίϯαϧςΟϯά डୗ։ൃɾ੍࡞ ੡඼ UX 新サービス企画 UX使⽤性改善 UIデザインー IT Smart Device Enterprise IT ーー新サービスの企画立案・実現アプリUXの改善アプリ等のシステム開発アプリUIの制作 AppPot・ AppPot SFA 設計等、技術支援アーキテクチャ策定アプリ開発

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. こんなことありませんか？ n  売れないサービス •  競合に機能的には負けてないけど、なぜかお試しだけで落ちる •  使いづらいと聞いたことがある •  価格だけの勝負になっている n  使われない社内システム •  せっかく作ったのに社員が使ってくれない •  ⾃社システムに対する評価が低く、⼀⽣懸命に対応しても感謝されない •  同じような問合せがずっと続き、全く減らない •  なぜか密かに別の⼿段（例えば、外部のサービス）が使われている 8

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. UXデザインの⼀般的プロセス 14 n  プロジェクトのゴール・状況に応じて上記のプロセスを適切に調整して⾏う n  上記プロセスに実装フェーズは含まれていないコンテキスト分析ペルソナ定義ストーリーボード作成メンタルモデル作成スケッチ作成プロトタイプ作成ユーザーテスト分析と改善ビジネスゴール設定分析フェーズ実証フェーズ反復

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. アジャイルプロセスに組み込む例 18 n  Agileの各イテレーションにおける優先順位の判断とデザインの継続的な改善を⾏う。 n  UXデザインの結果を常に確認し、改善しながら進めることができる n  ただし、全体的に負荷が増加する傾向がある⇒プロジェクトのフェーズを考慮し、イテレーション毎に必要なタスクの厳選が必要デザイン実装デザイン基盤作成プラニング実装デザイン実装デザインイタレーションイタレーションイタレーションイタレーションリリースリリースリリース

Slide 19

Slide 19 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. UX駆動開発に必要な３つのP 19 People •  ビジネスを理解したプロダクトオーナー •  デザイナー •  フロントエンド（UI）を開発できるエンジニア Process •  利⽤者経験（UX）の設計 •  UX⽅法論を適⽤したITプロジェクトのプロセス •  運⽤後の計測とフィードバックのプロセス Platform •  UXのプロセスを⽀援するツール •  セキュリティ、ユーザー管理などの標準的な仕組みの整備 •  バックエンドサービスがキーワード

Slide 20

Slide 20 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. UXのプロセスを⽀援するためのツール n  デザインツール •  Sketch、Adobe Illustratorなど •  最近のツールはデザイン指⽰書を⾃動で作成してくれる n  プロトタイプ作成 •  静的な画像を元に、実際にブラウザやスマートフォンで動作するプロトタイプを作ることができる •  Prott、InVisionなど n  バックエンドサービス 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. ⼩さなチームで、効率良く開発 27 ユーザー部門 IT部門モバイルアプリエンジニアサーバーアプリエンジニアインフラエンジニアアプリ作成依頼作業依頼 APIとDBの設計をするところからスタートですセキュリティの設計は時間がかかる。どうやって基幹システムに接続するか画⾯の開発着⼿はもうちょっと先だな・・・ 2ヶ⽉以内にマーケティング⽤のアプリが必要！ 2ヶ⽉は無理ですユーザー部門 IT部門モバイルアプリエンジニアアプリ作成依頼作業依頼画⾯だけの開発であれば、すぐできます 2ヶ⽉以内にマーケティング⽤のアプリが必要！ OKです従来型の開発バックエンドサービスを使⽤した開発 People Process Platform

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. AppPotの概要アーキテクチャ 39 クラウド 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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. 42 認証API $scope.login = function() { AppPot.LocalAuthenticator.login($scope.userName, $scope.password) .then(function(authInfo) { // 成功した場合の処理 }) .catch(function(error) { // 例外処理 }); };

Slide 43

Slide 43 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. 43 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; }]);

Slide 44

Slide 44 text

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights 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 エラーの場合の画⾯処理 }); } 46 Idを指定したシンプルな単件取得⽤APIも有り

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

まとめ

Slide 49

Slide 49 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. UX駆動開発にはチームづくり、UX⽅法論を適⽤したプロセス、軽量に開発できる仕組みが必要 49 People •  ビジネスを理解したプロダクトオーナー •  デザイナー •  フロントエンド（UI）を開発できるエンジニア Process •  利⽤者経験（UX）の設計 •  UX⽅法論を適⽤したITプロジェクトのプロセス •  運⽤後の計測とフィードバックのプロセス Platform •  UXのプロセスを⽀援するツール •  セキュリティ、ユーザー管理などの標準的な仕組みの整備 •  バックエンドサービスがキーワード

Slide 50

Slide 50 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. UX駆動開発にはチームづくり、UX⽅法論を適⽤したプロセス、軽量に開発できる仕組みが必要 50 People •  ビジネスを理解したプロダクトオーナー •  デザイナー •  フロントエンド（UI）を開発できるエンジニア Process •  利⽤者経験（UX）の設計 •  UX⽅法論を適⽤したITプロジェクトのプロセス •  運⽤後の計測とフィードバックのプロセス Platform •  汎⽤的だが複雑で品質が求められる部分は AppPotが機能を提供します •  AppPotを使ってUXにフォーカスして下さい

Slide 51

Slide 51 text

Copyright ©2016, NC Design & Consulting Co., Ltd. All rights reserved. 定期的にアプリ開発ハンズオンを開催しています n  本⽇は『【体験】AngularJSとバックエンドサービス AppPotで作る業務システム』を１５時半まで開催しています n  お時間ある⽅はぜひご参加ください n  Webサイト(http://apppot.jp)、Twitter(@app_pot)、 Facebook（@NextConceptDC）でも各種イベントを告知しています 51