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

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

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

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

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

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

reserved. 今⽇の内容 n  なぜUXが重要なのか？ n  UX駆動開発のポイント n  企業向けバックエンドサービスAppPotのご紹介 n  AppPotで進めるアプリの⾼速開発 n  まとめ 6

reserved. UXの重要性 7 ユーザー商品・サービス競争⼒企業

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

reserved. 9 http://andronavi.com/2011/11/137142

reserved. UXの重要性 10 ユーザー商品・サービス成熟してくると技術や機能によって差をつけることが困難に！企業

reserved. UXの重要性 11 ユーザー商品・サービスどのような使⽤者経験を提供できるか？企業競争⼒競争⼒

reserved. UXとは 12 ユーザー商品・サービス広告サポート営業ブランドユーザーと商品・サービスのすべての接点におけるユーザー経験のあるべき姿を考えて、それを実現すること（NCDCの定義）

reserved. ちなみに・・・なぜ、社内の業務システムにUXデザイン？ 13 「使いにくい、他のシステムでもやろうと思えばやれる」「使い⽅がよくわからない」経営戦略として「注⼒製品」の位置づけ活⽤されないと話にならない将来は代理店やオーナーにも使ってもらう構想

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

reserved. UXデザイン + ITプロジェクト 15 UXD IT Project

reserved. UXデザイン + ITプロジェクト 16 UXD IT Project

reserved. ウォーターフォールのプロセスに組み込む例 17 n  ITプロセス（ウォーターフォール⽅式）の要件定義及び基本設計フェーズの⼀部をUXデザインのタスクで置き換える要件定義基本設計詳細設計実装テスト

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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として提供されており、さまざまクライアント・アプリケーションから利⽤可能です

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

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

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

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

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

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

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

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; }]);

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

reserved. データアクセス（登録処理）これだけの記述で、サーバーのデータベースにアクセスできます。データ項⽬に変更があっても、前述のデータ定義を変更するだけ。 // 登録処理 // TODO customer変数に画⾯で⼊⼒した値を設定 $scope.customer.insert() .then(function() { // TODO 成功した場合の画⾯処理 }) .catch(function(error) { // TODO エラーの場合の画⾯処理 }); } 45 同様に更新の場合は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 エラーの場合の画⾯処理 }); } 46 Idを指定したシンプルな単件取得⽤APIも有り

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

まとめ

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

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

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

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

reserved. AppPot for IoT 53 リリース間近！無料βプログラムへのご参加受付中いま注⽬のIoT。低コストでクイックにIoTをはじめるための仕組みをAppPotが提供します。オンプレミスでもクラウドでも！

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

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

More Decks by AppPot

Other Decks in Technology

Featured

Transcript