Embed Size (px)
Citation preview
Mitsuhiro Okamoto@mitsuhiro
実践！カスタマー エクスペリエンス向上のためのアプリ開発 前編
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 salesforce.com, 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 non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, 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. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
Forward-Looking Statement
ソーシャルメディアをフォロー
@salesforcedevjp / #forcewebinar
Salesforce Developers Japan
Salesforce Developers (English Only)
Salesforce Developers Japan
このwebセミナーは録画されています このビデオは後にYouTubeおよびWebセミナーお申し込みページにアップロードされます
DreamHouseとは？2016年における、Salesforce版の 「Pet Store」 アプリケーション
http://www.dreamhouseappjp.io/
– 前編
§ DreamHouse概要§ コンポーネント指向開発
– 後編
§ インテグレーションの制御§ 中間サービスの実装
前編と後編の位置付け
コンポーネントによるUI設計
コンポーネント指向にすることのUXへの利点
§ コンポーネント/デザインの再利用– ユーザの学習コストを減らす
• UXデザイン
§ コンポーネントは独立しつつ相互に通信– よりインタラクティブなコンテンツの提供
§ コンポーネントの柔軟性– コンポーネントはコンフィグレーションによってカスタマイズ
可能• No Code でカスタマイズ
開発生産性Lightning Component , Apex , App Builder …
Field Level SecurityCRUD PermissionCustom Endpoint…
UXと生産性を両立させる
1. コンポーネントの開発効率を高める– Lightning Base Component– Lightning Data Service
2. コンポーネントの独立性を保つ– イベントによる相互の通信
3. コンポーネントの活用箇所を広げる– カスタムアクション– ユーティリティバー
3つの開発Tips
Lightning Base Component
§ シンプルなコンポーネント週§ バリデーション§ カスタムメッセージ§ 表示フォーマット§ SLDSにマッチしたデザイン§ 少量のCSS
SLDSベースのUIに馴染む軽量のコンポーネント
例 : 簡単なフォーム
<lightning:input label="姓" value="{!v.contact.LastName}" /> <lightning:input label="名" value="{!v.contact.FirstName}" /> <lightning:input label="メール" value="{!v.contact.Email}" /> <lightning:button onclick="{!c.onSaveClicked}">保存</lightning:button>
例 2: バリデーション
<lightning:input label="姓" value="{!v.contact.LastName}" /> <lightning:input label="名" value="{!v.contact.FirstName}" /> <lightning:input label="メール" value="{!v.contact.Email}"
required="true" pattern=".*@.+\..+" /><lightning:button onclick="{!c.onSaveClicked}">保存</lightning:button>
Lightning Data Service
§ 宣言的なCRUD処理§ Apexいらず§ SOQLいらず§ 少量のJavaScript (編集モードのみ必要)§ 共有ルールおよびFLSのハンドリング§ 共有レコードキャッシュ
Lightningのための新しいデータアクセス方法
Lightning Data Serviceの前のDreamHouse
物件ステータス
物件地図
住宅ローン計算機
PropertyController- getProperty
getProperty(abc)
getProperty(abc)
getProperty(abc)
Client Server
以前の方式の課題
1. 同じレコードを参照するのにサーバへ複数回のコール2. コードが非常に煩雑– JavaScriptはクライアントサイドで動作し、コントローラを含め
る– Apexコントローラはサーバサイドで動作 (CRUD および FLS への
遵守も含む)3. UIの矛盾– それぞれのコンポーネントは自分専用のデータのコピーを持つ– 一つのコンポーネントがデータを変更しても、他のコンポーネン
トに反映されなかった
Lightning Data Serviceの導入
物件ステータス
物件地図
住宅ローン計算機
Client Server
共有レコードキャッシュ
<force:record recordId="abc"/>
<force:recordrecordId="abc"/>
<force:record recordId="abc"/>
例
<aura:componentimplements="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="{!v.property}"fields="['Id', 'Status__c']" />
{!v.property.Status__c} </aura:component>
例 2: 編集モード
<aura:componentimplements="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="{!v.property}"fields="['Id', 'Status__c']"mode="EDIT"/>
<ui:inputText label=“Status:” value=“{! v.property.Status__c}”/><lightning:button onclick=“{!c.onSaveClicked}”>保存</lightning:button>
</aura:component>
レコードの保存
onSaveClicked : function(component) {component.find("propertyService").saveRecord();
}
レコードの編集モードでの同期<aura:componentimplements="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="{!v.property}"fields="['Id', 'Status__c']"mode="EDIT"recordUpdated="{!c.onRecordUpdated}"/>
<ui:inputText label=“ステータス:” value=“{! v.property.Status__c}”/><lightning:button onclick=“{!c.onSaveClicked}”>保存</lightning:button>
</aura:component>
レコードの再読み込み
onRecordUpdated : function(component, event, helper) {var changeType = event.getParams().changeType;if (changeType === "CHANGED") {
component.find("propertyService").reloadRecord();}
}
Lightning Data Serviceまとめ
Lightning Data Service無し Lightning Data Serviceあり
複雑なコード(Apex, SOQL, FLS, Javascript)
宣言的(no code)
コンポーネントごとに同一レコードを複数回呼び出す
コンポーネントはローカルのレコードキャッシュにアクセスし、サーバとは透過的かつ効率的に通信
それぞれのコンポーネントはレコードのコピーを保持
コンポーネントは単一のレコードコピー共有
Lightningアプリケーションイベント
§ 自身が選択された事をアプリケーションへ通知– ltng:selectSObject
§ コンポーネント間でメッセージを送受信– ltng:sendMessage
相互に通信を行うための仕組み
Lightningアプリケーションイベント
ltng:selectSObject
§ Utility Bar– FlexiPageを作成し設定– 現状APIのみ
• Application内にあるutilityBarタグ
§ Quick Action– force:lightningQuickAction
» OR
– force:lightningQuickActionWithoutHeader
新しいLightningコンポーネントの利用先
まとめ
§ コンポーネント指向はUXを向上させる§ UXと開発生産性を両立するには
– Lightningの提供する便利な機能活用• Lightning Services• Lightning Event• Utility Bar & Quick Action
http://dreamhouseappjp.io/
Survey今後のプログラムの品質改善のために
アンケートにご協力ください!
http://bit.ly/devjp1102
Webinar資料のダウンロードURLはアンケートの回答後にリンクしています
Q & Aまたはディスカッションボードを活用
http://bit.ly/discussionboards
Trailheadを是非お試しください: trailhead.salesforce.com
その他お問い合わせなど: @salesforcedevjp
Thank You
