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

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 Security
CRUD Permission
Custom 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
物件
ステータス
物件
地図
住宅ローン
計算機
Property
Controller
- 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:record
recordId="abc"/>
<force:record recordId="abc"/>

例
<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="{!v.property}"
fields="['Id', 'Status__c']" />
{!v.property.Status__c}
</aura:component>

例 2: 編集モード
<aura:component
access="global">
<force:recordPreview aura:id="propertyService"
recordId="{!v.recordId}"
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:component
access="global">
<force:recordPreview aura:id="propertyService"
recordId="{!v.recordId}"
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:lightningQuickActionWi
thoutHeader
新しいLightningコンポーネントの利用先

まとめ
§ コンポーネント指向はUXを向上させる
§ UXと開発生産性を両立するには
– Lightningの提供する便利な機能活用
• Lightning Services
• Lightning Event
• Utility Bar & Quick Action

Survey
今後のプログラムの品質改善のために
アンケートにご協力ください!
http://bit.ly/devjp1102
Webinar資料のダウンロードURLはアンケートの回答後
にリンクしています

Q & A
またはディスカッションボードを活用
http://bit.ly/discussionboards
Trailheadを是非お試しください:
trailhead.salesforce.com
その他お問い合わせなど: @salesforcedevjp

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (13)

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

Similar a 実践！カスタマーエクスペリエンス向上のためのアプリ開発前編 (20)

Más de Salesforce Developers Japan

Más de Salesforce Developers Japan (20)

Último

Último (9)