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.

Sfdgr 12 20180906_v1.0

Salesforce Lightning Component

  • Login to see the comments

  • Be the first to like this

Sfdgr 12 20180906_v1.0

  1. 1. Salesforce Developer Group Rookies #12 2018/09/06(木)@株式会社LIFULL
  2. 2. 本日のメニュー 2 • 19:00~19:10 ルーキー会の簡単な説明 • 19:10~19:30 自己紹介タイム • 19:30~20:45 座学&ハンズオン&お題 • 20:45~21:00 お題解説&全体写真撮影 • 21:00~21:30 ご歓談タイム 注意事項 会場の様子は写真に撮って公開される可能性があります。予めご了承下さい。 (顔出しNGの方がいらっしゃいましたらサッと隠れるか運営までお知らせ下さ い)
  3. 3. 今日の進行役 3 讃岐 行(Sanuki Ikou) 株式会社テラスカイ Tw:@i_sanuki FB:isanuki なにやっている人?  Salesforce導入コンサルティング、開発  社内ツール開発、トレーニング  Salesforce Developer Group、Developerルーキー会の運営  ユーザグループ「新機能照らす会」のリーダー  TrailblazerCommunityにちらほら
  4. 4. SFDG Rookiesの紹介 これからSalesforceを学ぶデベロッパーのコミュニティ 4
  5. 5. 運営メンバー 5 株式会社テラスカイ 讃岐 行 @i_sanuki 株式会社フレクト 齊藤 俊 株式会社テラスカイ 須山 洋輔 @suyaman_jp 株式会社NSD 小林 亮理 @ryosuke921186 ServiceCloud の達人 Apexの神MVP テストの鬼 お休み
  6. 6. 6 3年未満 2年未満 1年未満 未経験 3年以上 未経験 半年未満 1年未満 2年未満 3年未満 SFでの 開発経験 プログラミングの経験 2 1 3 2 1 1 1 5 1 3年以上 4 2 1 半年未満 2 人数=50 1 1 1 1 不明
  7. 7. 7 自己紹介タイム ■お名前(会社名) ■Lightningどうよ?
  8. 8. Lightning Componentを開発しよう 1. Lightning Component概要(座学) 2. 開発ハンズオン 3. もっと作ってみよう(お題にチャレンジ) 8
  9. 9. Lightning Component概要 9
  10. 10. Salesforce UI開発の選択肢 • Visualforce + Apex Controller – JSP/Servletライクな従来のやり方 • Visualforce + JS – VFはコンテナとしてReactやVueを使う • Lightning Component – SFが提供する新しいSPAフレームワーク 10 Page中心 Application中心 いわゆるSPA
  11. 11. Page 中心(Visualforce + Apex Controller) 11 1. ユーザがページをリクエスト 2. サーバ側でVFタグの変換Apexコントローラコードの実行を行い、リクエスト結果としてHTML ページをブラウザに送信 3. ブラウザは結果を表⽰ 4. ユーザがボタン、リンクをクリックなどのアクションを行うと新規ページをリクエストする。 (ステップ1にもどる)
  12. 12. App 中心 (Lightning Component) 12 1. ユーザがアプリケーション、あるいはコンポーネントをリクエスト 2. クライアントにアプリケーション、あるいはコンポーネントのバンドル(必要なファイル群) をロード 3. JavaScriptアプリケーションがUIを⽣成 4. ユーザとのインターラクションの結果、JavaScriptアプリケーションがUIを適時変更する
  13. 13. SPA(Lightning Component) 13 Component (HTML+独 自タグ) Controller (JS) Helper (JS) Style (CSS) その他Renderer, Document等 Apex データ (オブジェクト) 構造 イベント処理 クライアント側 ロジック サーバー側 ロジック Lightning Component(Bundle) 通信 SOQL DML
  14. 14. Componentの組み合わせ 14 個別開発 App Exchange Salesofrce 標準提供 UserAdminDeveloper Lightning AppBuilder Lightning Experience Salesforce Mobile App
  15. 15. Lightning Componentを従来のVFと比較した時 15 • SPAフレームワーク • LEXフレンドリー • モバイルフレンドリー • よりコンポーネントフレンドリー • フローからの呼び出し • SalesforceのUI戦略に乗れる • 習得コスト • 発展途上/安定性 • LockerServiceによる制約 Good Bad
  16. 16. Lightning コンポーネント を作ろう
  17. 17. 開発するComponent:ハンズオンゴール 1. MessageBoardカスタムオブジェクトに登録された最新のメッセージを表⽰するコ ンポーネント 2. コンポーネントを開いたときとʼupdate messageʼボタンを押された時に最新の状 態に更新 17
  18. 18. Salesforce Playground組織へのログイン 18 ※マイドメインが設定してあるDE組織でもOK 種別がPlaygoround のものをクリック
  19. 19. (Classicの人は)LEXに切り替える 19
  20. 20. MessageBoardカスタムオブジェクト 20 • メッセージカスタムオブジェクトを作成 • レコード名(Name項目)はデフォルトのテキストでOK
  21. 21. カスタム項目追加 21 • テキスト型のMessage項目を追加
  22. 22. オブジェクトタブを追加 22 • 作成したカスタムオブジェクトのタブを作る • プロファイルやアプリケーションはデフォルトでOK
  23. 23. MessageBordレコードの作成 • タブから新規レコードを作成する – MessageBoard名に何か入れる – Messageに「Hello world!」と入力(何でもよい) 23
  24. 24. 開発者コンソールを起動してApexを選択 24
  25. 25. 最新のMessageを取得するApexクラスを作成 public class MessageBoardController { @AuraEnabled public static MessageBoard__c getMessageBoard() { // 最新のMessageBoardカスタムオブジェクトを返却するメソッドです。 // 【注】レコードがない場合は例外が発⽣します。 MessageBoard__c m = [SELECT Id, Name, Message__c FROM MessageBoard__c Order By CreatedDate DESC LIMIT 1]; return m; } } 25
  26. 26. 最新のメッセージを表⽰するCOMPONENTを作成① File > New > Lightning Componentʼを選択します。 26
  27. 27. 1. ʻNew Lightning BundleʼダイアログのNameに ʼMessageBoardʼと入力します 2. ʻSubmitʼボタンを押します。 最新のメッセージを表⽰するCOMPONENTを作成② 27
  28. 28. MessageBoard Component <aura:component implements="flexipage:availableForAllPageTypes" controller="MessageBoardController"> <aura:handler name="init" action="{!c.doInit}" value="{!this}"/> <aura:attribute name="messageBoard" type="MessageBoard__c"/> <p> Message:<ui:outputText value="{!v.messageBoard.Message__c}"/> </p> <ui:button label="update message" press="{!c.updateMessage}"/> </aura:component> 28 どこで使うか サーバーサイドのApex Event処理。initは初期 処理 Componentの属性 テキスト表⽰ ボタン
  29. 29. COMPONENTから呼び出されるCONTROLLERを作成 1. 開発者コンソール右側のʼCONTROLLERʼを選択 2. 関数doInitとupdateMessageを定義します。 – コードは次ページ 29
  30. 30. MessageBoard Controller ({ doInit: function(component, event, helper) { helper.updateMessage(component, event); }, updateMessage: function(component, event, helper) { helper.updateMessage(component, event); } }) 30 Componentのhandlerから 呼ばれる関数定義 Componentのボタンから 呼ばれる関数定義 ControllerではComponentから呼ばれる処理をハンドリングして、具体的な処 理を行うHelperに渡すのが一般的。
  31. 31. CONTROLLERから呼び出されるHELPERを作成 1. 開発者コンソール右側のʼHELPERʼを選択 2. 関数updateMessageを定義します。 – コードは次ページ 31
  32. 32. MessageBoard Helper ({ updateMessage: function(component, event) { var action = component.get("c.getMessageBoard"); action.setCallback(this, function(response) { var state = response.getState(); if (component.isValid() && state === "SUCCESS") { component.set("v.messageBoard", response.getReturnValue()); } else { console.log("簡易エラーログ: " + state); } }); $A.enqueueAction(action); } }) 32 Apexのメソッド名を指定 Apex後のコールバック処理 Apex側でエラーがない メソッドの戻り値を componentの属性にセット Apexでエラーが発⽣ Apexを呼び出すキューに 入れる
  33. 33. COMPONETに適用するSTYLEを作成 1. 開発者コンソール右側のʼSTYLEʼを選択 2. 背景色、文字サイズ、高さ等を定義します。 – コードは次ページ 33
  34. 34. MessageBoard STYLE 34 p.THIS{ background-color : white; font-size : 20px; height : 100px; } .THISは自身のComponent
  35. 35. アプリケーションBuilderでホームに配置
  36. 36. Component配置① アプリケーションビルダーを起動して、ホームページを選択 36
  37. 37. Component配置② • 任意のページ名を入れる • ビルダーでMessageBoardコンポーネントを右に配置 • その他自由に標準コンポーネントを配置 37
  38. 38. Component配置③ • 保存と有効化を行う 38
  39. 39. ホームを表⽰してComponentを確認 39
  40. 40. 更新確認 • 既存のホームをそのままに別タブで新規にレコード作成 • Update messageボタンを押すことで新たなメッセージを取得 40 完成!
  41. 41. もっとコンポーネントを作ってみよう(お題)
  42. 42. お題 取引先詳細画面に未クローズ商談一覧を表⽰しよう 表⽰する項目は、商談名、フェーズ、金額 42 拡大
  43. 43. ヒント1 • Componentのimplements属性にレコードIdを持たせる – 取引先画面に配置した時に取引先Idを保持し、関連する商談の取得に使う – <aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" ... • 取引先IdをApexのControllerに渡す 43 var action = component.get("c.getOpportunities"); action.setParams({ “accId” : component.get(“v.recordId”) //accIdはApexメソッドの引数名 }); action.setCallback(this, function(response) { ...
  44. 44. ヒント2 • 取得したレコードを表⽰ – Attributeに入った商談リストをiterationで繰り返しながら表⽰ 44 <aura:attribute name="oppList" type="Opportunity[]"/> (中略) <aura:iteration items="{!v.oppList}" var="opp"> ループ変数oppに商談1レコードが入るので、opp.Nameとかでアクセス可能 具体的な出し方は考えてみてください </aura:iteration>
  45. 45. 20:45まで 完成した方はメンターに確認してもらいましょう ステッカープレゼント!
  46. 46. Trailblazer Community Salesforceのユーザやアドミンや開発者が集まるコミュニティ 46 https://success.salesforce.com/_ui/core /chatter/groups/GroupProfilePage?g=0F 93A000000HTtr 【開発者向け】 • Salesforce Developer Group ルーキー会 • Tokyo Salesforce Developer Group • Salesforce女子部 など 今日の勉強会レポートを書いてくれる方 大募集!
  47. 47. 直近のコミュニティイベント紹介 • 9月8日(土) 13:00- 第12回 恵比寿Salesforce勉強会(Trailheadもくもく会) – https://ebisu-salesforce.connpass.com/event/99828/ • 9月8日(土) 19:00- Salesforce女子部#21 ~最強のDreamforceの歩き方を作る~ – https://sfggjp.connpass.com/event/96090/ • 9月21日(金) 19:00- QSD Salesforce勉強会 #9 in 鹿児島 – https://fsdg.connpass.com/event/100360/ • 9月28日(金) 19:00- dreamforce2018 Japan Night in Japan – https://connpass.com/event/100037/ 47

×