Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

実践!カスタマー エクスペリエンス向上のためのアプリ開発 前編


Published on

2016年11月2日に行われた「実践!カスタマー エクスペリエンス向上のためのアプリ開発 前編」Webセミナーの資料です。

Published in: Technology

実践!カスタマー エクスペリエンス向上のためのアプリ開発 前編

  1. 1. Mitsuhiro Okamoto @mitsuhiro 実践!カスタマー エクスペリエンス 向上のためのアプリ開発 前編
  2. 2. Statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward- looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available., inc. assumes no obligation and does not intend to update these forward-looking statements. Forward-Looking Statement
  3. 3. ソーシャルメディアをフォロー @salesforcedevjp / #forcewebinar Salesforce Developers Japan Salesforce Developers (English Only) Salesforce Developers Japan このwebセミナーは録画されています このビデオは後にYouTubeおよびWebセミナー お申し込みページにアップロードされます
  4. 4. DreamHouseとは? 2016年における、Salesforce版の 「Pet Store」 アプリケーション
  5. 5. – 前編 § DreamHouse概要 § コンポーネント指向開発 – 後編 § インテグレーションの制御 § 中間サービスの実装 前編と後編の位置付け
  6. 6. コンポーネントによるUI設計
  7. 7. コンポーネント指向にすることのUXへの利点 § コンポーネント/デザインの再利用 – ユーザの学習コストを減らす • UXデザイン § コンポーネントは独立しつつ相互に通信 – よりインタラクティブなコンテンツの提供 § コンポーネントの柔軟性 – コンポーネントはコンフィグレーションによってカスタマイズ 可能 • No Code でカスタマイズ
  8. 8. 開発生産性 Lightning Component , Apex , App Builder … Field Level Security CRUD Permission Custom Endpoint …
  9. 9. UXと生産性を両立させる 1. コンポーネントの開発効率を高める – Lightning Base Component – Lightning Data Service 2. コンポーネントの独立性を保つ – イベントによる相互の通信 3. コンポーネントの活用箇所を広げる – カスタムアクション – ユーティリティバー 3つの開発Tips
  10. 10. Lightning Base Component § シンプルなコンポーネント週 § バリデーション § カスタムメッセージ § 表示フォーマット § SLDSにマッチしたデザイン § 少量のCSS SLDSベースのUIに馴染む軽量のコンポーネント
  11. 11. 例 : 簡単なフォーム <lightning:input label="姓" value="{!}" /> <lightning:input label="名" value="{!}" /> <lightning:input label="メール" value="{!}" /> <lightning:button onclick="{!c.onSaveClicked}">保存 </lightning:button>
  12. 12. 例 2: バリデーション <lightning:input label="姓" value="{!}" /> <lightning:input label="名" value="{!}" /> <lightning:input label="メール" value="{!}" required="true" pattern=".*@.+..+" /> <lightning:button onclick="{!c.onSaveClicked}">保存 </lightning:button>
  13. 13. Lightning Data Service § 宣言的なCRUD処理 § Apexいらず § SOQLいらず § 少量のJavaScript (編集モードのみ必要) § 共有ルールおよびFLSのハンドリング § 共有レコードキャッシュ Lightningのための新しいデータアクセス方法
  14. 14. Lightning Data Serviceの前のDreamHouse 物件 ステータス 物件 地図 住宅ローン 計算機 Property Controller - getProperty getProperty(abc) getProperty(abc) getProperty(abc) Client Server
  15. 15. 以前の方式の課題 1. 同じレコードを参照するのにサーバへ複数回のコール 2. コードが非常に煩雑 – JavaScriptはクライアントサイドで動作し、コントローラを含め る – Apexコントローラはサーバサイドで動作 (CRUD および FLS への 遵守も含む) 3. UIの矛盾 – それぞれのコンポーネントは自分専用のデータのコピーを持つ – 一つのコンポーネントがデータを変更しても、他のコンポーネン トに反映されなかった
  16. 16. Lightning Data Serviceの導入 物件 ステータス 物件 地図 住宅ローン 計算機 Client Server 共有レコードキャッシュ <force:record recordId="abc"/> <force:record recordId="abc"/> <force:record recordId="abc"/>
  17. 17. 例 <aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes" access="global"> <aura:attribute name="recordId" type="Id" /> <aura:attribute name="property" type="Property__c" /> <force:recordPreview recordId="{!v.recordId}" targetRecord="{!}" fields="['Id', 'Status__c']" /> {!} </aura:component>
  18. 18. 例 2: 編集モード <aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes" access="global"> <aura:attribute name="recordId" type="Id" /> <aura:attribute name="property" type="Property__c" /> <force:recordPreview aura:id="propertyService" recordId="{!v.recordId}" targetRecord="{!}" fields="['Id', 'Status__c']" mode="EDIT"/> <ui:inputText label=“Status:” value=“{!}”/> <lightning:button onclick=“{!c.onSaveClicked}”>保存</lightning:button> </aura:component>
  19. 19. レコードの保存 onSaveClicked : function(component) { component.find("propertyService").saveRecord(); }
  20. 20. レコードの編集モードでの同期 <aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes" access="global"> <aura:attribute name="recordId" type="Id" /> <aura:attribute name="property" type="Property__c" /> <force:recordPreview aura:id="propertyService" recordId="{!v.recordId}" targetRecord="{!}" fields="['Id', 'Status__c']" mode="EDIT" recordUpdated="{!c.onRecordUpdated}"/> <ui:inputText label=“ステータス:” value=“{!}”/> <lightning:button onclick=“{!c.onSaveClicked}”>保存</lightning:button> </aura:component>
  21. 21. レコードの再読み込み onRecordUpdated : function(component, event, helper) { var changeType = event.getParams().changeType; if (changeType === "CHANGED") { component.find("propertyService").reloadRecord(); } }
  22. 22. Lightning Data Serviceまとめ Lightning Data Service無し Lightning Data Serviceあり 複雑なコード (Apex, SOQL, FLS, Javascript) 宣言的(no code) コンポーネントごとに同一レコード を複数回呼び出す コンポーネントはローカルのレコー ドキャッシュにアクセスし、サーバ とは透過的かつ効率的に通信 それぞれのコンポーネントはレコー ドのコピーを保持 コンポーネントは単一のレコードコ ピー共有
  23. 23. Lightningアプリケーションイベント § 自身が選択された事をアプリケーションへ通知 – ltng:selectSObject § コンポーネント間でメッセージを送受信 – ltng:sendMessage 相互に通信を行うための仕組み
  24. 24. Lightningアプリケーションイベント ltng:selectSObject
  25. 25. § Utility Bar – FlexiPageを作成し設定 – 現状APIのみ • Application内にある utilityBarタグ § Quick Action – force:lightningQuickAction » OR – force:lightningQuickActionWi thoutHeader 新しいLightningコンポーネントの利用先
  26. 26. まとめ § コンポーネント指向はUXを向上させる § UXと開発生産性を両立するには – Lightningの提供する便利な機能活用 • Lightning Services • Lightning Event • Utility Bar & Quick Action
  27. 27.
  28. 28. Survey 今後のプログラムの品質改善のために アンケートにご協力ください! Webinar資料のダウンロードURLはアンケートの回答後 にリンクしています
  29. 29. Q & A またはディスカッションボードを活用 Trailheadを是非お試しください: その他お問い合わせなど: @salesforcedevjp
  30. 30. Thank You