2017年7月12日 (水) の Webセミナー資料です。

1. Lightning コンポーネント開発
実装例例に学ぶ開発のコツ
Salesforce Developer Web セミナー FY18 第17回
​ Salesforce Platform Specialist & DEMO Engineer

2. 稲葉葉 洋幸
(Hiroyuki Inaba)
Platform Specialist
話者紹介 - 今⽇日はなんと4⼈人体制！
加藤 房⼦子
(Fusako Kato)
Demo Engineer
⽥田中 宏樹
(Hiroki Tanaka)
Demo Engineer
菅原 孔⼀一
(Michikazu Sugahara)
Demo Engineer
Demo Engineer とは？
お客様向けデモンストレーションを⾏行行う組織や環境の
特別なカスタマイズを請け負うスペシャルなエンジニア

3. 今⽇日の内容
3 | ©2017 Salesforce
内容
• Lightning コンポーネントの実装例例と、その⼯工夫し
たところを紹介
対象者 • Lightning コンポーネント開発者の⽅方
ゴール
• これからの開発に役⽴立立つヒントを得て、何か作って
みようと思ってもらえる

4. セミナーの流流れ
4 | ©2017 Salesforce
ü 最後に質問への回答の時間を設けます
ü 質問はいつでも送ってもらってOKです
Lightning コン
ポーネント概要
(おさらい)
実装例例1:
法⼈人インフォで
取引先更更新
実装例例2:
Chatterワード
クラウド
実装例例3:
なんでも
関連リスト
Summerʼ’17
アップデート
(さらっと)
1 2 3 4 5

5. Lightning コンポーネント
概要(おさらい)

6. Lightning コンポーネントとは?
• Lightning ExperienceはAura UI Frameworkを使⽤用して構築されている
• https://github.com/forcedotcom/aura
• この Framework に則ったUI・ロジックのカスタマイズ⼿手法として Lightning コンポーネントを提供
​ Lightning Experience 時代の「UI」と「ロジック(クライアント側)」の実装⼿手法
6 | ©2017 Salesforce
Lightning Experience の画⾯面 Lightning コンポーネントの構成要素
要素名 概要
COMPONENT 必須。画⾯面表⽰示要素
CONTROLLER 個別のロジック
HELPER 共通ロジック
RENDER レンダリング
DESIGN 属性値の定義
STYLE 表⽰示スタイルの定義
DOCUMENTATION 使い⽅方などのドキュメント
SVG アイコンなどの画像

7. Lightning コンポーネントが使えるところ
• Lightning Experience/Salesforce1の
全画⾯面アプリケーション(ページ)
• Lightning Experience 画⾯面のパーツ
• クイックアクション
• Visualforce内
• Lightning Out
​ 画⾯面全体や、画⾯面を構成するパーツとしてなど多様な使い⽅方ができる
7 | ©2017 Salesforce
Visualforceページを組み込むことも可能
Lightning コンポーネントが使えるところ

8. AppExchange での流流通
• https://appexchangejp.salesforce.com/collection/LightningComponent
​ アプリケーション単位だけでなく、コンポーネント単位でも流流通可能
8 | ©2017 Salesforce

9. Visualforce はもう使わない⽅方が良良い?
• ユーザーインタフェース開発の考慮事項
• https://trailhead.salesforce.com/ja/trails/lex_dev/modules/lex_dev_overview/units/lex_dev_overview_future
• Lightning Experience 上で動かすものであれば、原則 Lightning コンポーネントを使⽤用すべき。ただし、
いくつかの⽤用途においては、引き続き Visualforce を使うことも検討する。
​ 答えはNO! 必要に応じて使い分ける
9 | ©2017 Salesforce
Classic UI
※注1
Angular や
Reactなどの
フレーム
ワークを
使う※注2
ページを
PDFとして
表⽰示する
Visualforce の使⽤用を検討する場合例例
※注1: Visualforce ページへの Lightning コンポンーネントの埋め込みが可能になり、
※注2: Lightning Container 機能 (Summer’17時点で Developer Preview) など
状況が変わりつつある

10. Locker Service を正しく理理解すべき
• Locker Service が無いとどうなる?
• SPA ( Single Page Application )において、特定 DOM 空間の範囲を超えてデータやメソッドにアクセスできてしまい、
予期せぬ動作や、不不正なデータアクセスができてしまう。
これからの Single Page Application を安全に動かすには必須の機能
10 | ©2017 Salesforce
Lightning Platform API
Lightning
Component
B
Lightning
Component
A
悪意ある
Component他のComponentの
機能を利利⽤用したり、
データを読み取っ
たりできる
⾮非公開の Private
APIコールが可能
セキュリティレビューを通していないアプリは
潜在的なセキュリティ課題を抱えることに...
Lightning Platform API
Lightning
Component
B
Lightning
Component
A
悪意ある
Component
SalesforceのAPI40.0以上かつ「CSP」が実装されたブラウザでしか
Locker Serviceは機能がオンになりません
同じ名前空間の
Component 同⼠士
でしか、アクセス
できません
公開された API
コールのみ可能
IE11 の場合、
Locker Service は
作動しません
⼀一部のアプリ・
ライブラリは
実⾏行行に制限
Locker Service をオンにすると…
Locker Service 無し Locker Service あり

11. おことわり(免責事項)
​ これからご紹介する内容は、あくまで実装⽅方法の参考例例です。
​ あらゆる事態・状況を想定したテストを⾏行行ってはおらず、いかなる状況においての動作
をサポート・保証するわけではありませんので、あらかじめご了了承ください。

12. 法⼈人インフォで
取引先更更新
実装例例1
​ 加藤 房⼦子
​ (Fusako Kato)
​ Demo Engineer

13. 実装例例1: 法⼈人インフォで取引先更更新
​ オープンデータを使って取引先の情報を確認・更更新する
Ø 2017年年1⽉月に法⼈人インフォがオープン。社内より「APIを利利⽤用して、取引先のデータをクレンジングする
コンポーネントは有⽤用ではないか？」とのアイデアから作成。
13 | ©2017 Salesforce
取引先レコードページ 法⼈人インフォ
コンポーネント1
(情報取得・
⼀一覧表⽰示・
情報連携)
コンポーネント2
(情報受信・
データ更更新)
1 2
3
4
<動作の流流れ>

14. 実装例例1: 法⼈人インフォ - 解説のポイントまとめ
14 | ©2017 Salesforce
ポイント1 法⼈人データ⼀一覧と法⼈人詳細は別々の Lightning Component にしているので、データの受け渡しは
Lightning Event で⾏行行っている
ポイント2 取引先の法⼈人番号項⽬目に値が⼊入っているかどうかでコンポーネントの表⽰示内容を制御している
ポイント3 取引先レコードを更更新後、e.force:refreshView イベントで新しいデータを表⽰示している
https://github.com/Fusako/hojin-info-update-account

15. Chatter
ワードクラウド
実装例例2
​ ⽥田中 宏樹
​ (Hiroki Tanaka)
​ Demo Engineer

16. 実装例例2: Chatter ワードクラウド
​ Heroku 上に実装した形態素解析エンジンと連携し、Chatterのワードクラウドを表⽰示する
Ø Chatter 上での会話が活発な組織では、フォローしているユーザーのフィードや各グループに投稿された
フィードをスクロールして確認するのに時間がかかり、効率率率も悪くなりがち。今ユーザーが何について会
話しているのか即座に確認出来るツールとして、ワードクラウドを作成。
16 | ©2017 Salesforce
グループページ / Chatter ページなど アプリ on Heroku
コンポーネント
(情報取得・
結果表⽰示)
JQueryプラグイン
を使⽤用
1 2
<動作の流流れ>
Kuromojiによる
形態素解析
アプリ
(Node.js)

17. 実装例例2: Chatter ワードクラウド - 解説のポイントまとめ
17 | ©2017 Salesforce
ポイント1
Apex コードで関連する Chatter フィードの検索索を⾏行行い、Heroku 上に作成した態素解析のプログラ
ム(kuromoji)に渡す
ポイント2 Lightning Component jQuery のプラグインを利利⽤用しワードクラウドの描画を⾏行行なう
ポイント3
Apex コールアウトのタイムアウトが 10秒のため、Chatter フィードの取得件数の上限を設定できる
ようにしている

18. ​ 菅原 孔⼀一
​ (Michikazu Sugahara)
​ Demo Engineer
なんでも
関連リスト
実装例例3

19. 実装例例3: なんでも関連リスト
​ レコードページにどんなオブジェクトでも関連リスト⾵風に表⽰示するコンポーネント
Ø 不不動産業界向けの Lightning Experience デモにて、類似物件を物件レコードページに表⽰示したいという
ニーズから。
19 | ©2017 Salesforce
<動作の流流れ>
レコード詳細ページ
コンポーネント
(クエリキーワード取得・
検索索実⾏行行・結果表⽰示)
1
2
指定したオブジェクト
組織

20. 実装例例3: なんでも関連リスト - 解説のポイントまとめ
20 | ©2017 Salesforce
ポイント1 レコードページのオブジェクトと直接関連のないオブジェクトを関連リスト⾵風に表⽰示可能
ポイント2
プロパティでタイトル・アイコン・表⽰示オブジェクト・項⽬目などを設定できるだけでなく、画像も表
⽰示可能
ポイント3 表⽰示するオブジェクトは、レコードページの任意の項⽬目値を元にクエリし、絞り込むことができる

21. Summer’17 アップデート
​ (さらっと)

22. Lightning コンポーネント関連のアップデート
​ 詳細はリリースノートを参照
• https://releasenotes.docs.salesforce.com/ja-jp/summer17/release-notes/rn_lightning.htm?edition=&impact=
22 | ©2017 Salesforce
Summer '17 開発者向け新機能
https://developer.salesforce.com/events/webinars/summer17_jp
ぜひこちらのWebセミナーも
ご参照ください
1. LockerService の重要な更更新の有効化
2. 厳格な CSP 制限の重要な更更新
3. 管理理パッケージの global 以外の Apex コントローラメソッドへのアクセスの無効化 (重要な更更
新)
4. Lightning コンポーネントでの標準アクションの上書き
5. Lightning データサービス (ベータ)
6. 改善されたエラーメッセージによる迅速なコンポーネントマークアップエラーの検索索
7. 同じ名前の JavaScript と Apex アクションに関するブラウザコンソールの警告
8. カスタムレンダラの代わりに aura:valueRender イベントを使⽤用
9. コンポーネントの有効性チェックの合理理化
10. クイックアクションでの force:hasSObjectName インターフェースの使⽤用
11. AuraLocalizationService JavaScript API メソッドで廃⽌止された locale パラメータ
12. 廃⽌止された、aura:application の useAppcache 属性
13. JavaScript の instanceof での LockerService 制限の削除
14. 新規追加または変更更された Lightning コンポーネント
15. 新規追加または変更更された Lightning イベント
16. 新規追加または変更更された Lightning インターフェース
17. 新しい JavaScript API メソッド

23. 標準アクションの上書きとデータサービスの例例
23 | ©2017 Salesforce
Lightning データサービスによる
レコードデータの取得

24. おわりに

25. Trailhead モジュール
​ Lightning Experience の開発
• https://trailhead.salesforce.com/ja/modules/lex_dev_overview
​ クイックスタート: Lightning コンポーネント
• https://trailhead.salesforce.com/ja/projects/quickstart-lightning-components
​ Lightning Design System を使⽤用した Lightning アプリケーションの作成
• https://trailhead.salesforce.com/ja/projects/slds-lightning-components-workshop
​ Lightning コンポーネントの基本
• https://trailhead.salesforce.com/ja/modules/lex_dev_lc_basics
​ レストランの位置を⽰示す Lightning コンポーネントを作成する
• https://trailhead.salesforce.com/ja/projects/workshop-lightning-restaurant-locator
​ クイックスタートからプロジェクトまで豊富なラインナップ
25 | ©2017 Salesforce

26. & QA