はじめようLightningコンポーネント
4 likes3,811 views
2016年9月16日 (金) 開催 Salesforce for Developers Fukuoka セッション資料
はじめようLightningコンポーネント
- 2. Forward-Looking Statements 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.
- 4. Lightning コンポーネント はどこで使える？ Lightning Experience Salesforce1 コミュニティビルダー AppExchange Visualforce X Lightning Out （Salesforce外のWeb） アプリケーションビルダー
- 5. Lightning コンポーネントって何？ 再利利⽤用可能な部品 モダンなアプリケーション開発を⾏行行うためのフレームワーク → SPA（Single Page Application） JavaScriptベースでクライアントサイドで主に実⾏行行 サーバーサイドはApexコードを使⽤用 オープンソースのAuraフレームワークを元に開発 このフレームワークだけでレスポンシブになるわけではない チャート・グラフ カスタムリストビュー スライダー＋グラフ カスタムのボタン
- 6. Lightning コンポーネント の開発環境は？ 開発者コンソール • 簡単にすぐ使える • ちょっと使いづらい Sublime Text • 環境設定がちょっと⾯面倒 • ⾼高機能 • 開発したコンポーネントの他の環境への移植が容易易 • 環境設定⽅方法は Lightning SublimeでWebを検索索。。 開発者コンソール Sublime Text
- 7. LightningコンポーネントとLightningアプリケーション Lightning コンポーネント • 単体では実⾏行行できない（コンポーネント⾃自体のURLはない） • <c: コンポーネント名> タグで呼び出し Lightning アプリケーション • 単体で実⾏行行できる（⼀一意のURLが割り当てられる） • テストで使う
- 8. Lightningコンポーネントの構成 Lightningコンポーネントは複数のパーツ（ファイル）から成り⽴立立つ COMPONENT ビュー。ページの⾒見見え⽅方をHTML + Lightningが提供するタ グで記述。 CONTROLLER ビューに対するロジックを記述するjavascript HELPER 共通する処理理を記述するjavascript STYLE CSS DESIGN アプリケーションビルダーのパラメータを設定 SVG SVG（XML形式の画像） 開発者コンソールでの表⽰示
- 9. COMPONENT と CONTROLLER COMPONENT CONTROLLER ビュー コントローラ
- 11. CONTROLLER の functionの記述 関数名： 関数 の形式で記述 関数はcomponent、event、helper の 3つの引数をとる。 • component: COMPONENT（ビュー）関連 の処理理 • event: COMPONENT （ビュー）のイベン ト関連の処理理 • helper: HELPER関数の呼び出し HELPERも同じ
- 12. COMPONENTと CONTROLLER COMPONENT（ビュー）の値には v. でアクセスする 例例 component.get(“v.xxx”); CONTROLLER の関数には c. でアクセスする 例例 {!c.doAction} COMPONENT CONTROLLER ビュー コントローラ v. c.
- 13. Salesforceのデータを使うには？ Apex Codeを呼び出す COMPONENT （ビュー） CONTROLLER HELPER Apex Code クライアント（Lightning Component） サーバ
- 14. Apex コードの呼び出し Apex コード • @AuraEnabled アノテーションを つける。static メソッド。 Lightning コンポーネント • c.メソッド名でメソッドを呼び出し • ⾮非同期実⾏行行。Callbackで処理理。 • $A.enquequeAction() でキューに ⼊入れて実⾏行行。$AはAuraのユーティ リティを提供するオブジェクト
- 15. Salesforce Lightning Design System(SLDS) デザインガイド サンプルコード CSSの提供 アイコン集 https://www.lightningdesignsystem.com/
- 18. イベント処理理 【イベントを発⽣生させる側】 • 発⽣生するイベントを登録する • イベントを発⽕火（発⽣生）させる 【イベントを受ける側】 • 相互にやりとりするイベントを作成する • イベントを購読する（イベントが発⽣生した ら処理理を⾏行行うことを宣⾔言する） 【全体】
- 21. Topics Lightning コンポーネントを使うためにはマイドメイン（私のドメイン）が必要 ⼤大⽂文字、⼩小⽂文字を区別する v. c. を付け忘れても保存時にはエラーにならないので注意 デバック • Salesforce Lightning Inspector （ChromeのExtension） • 設定でLightning コンポーネントのデバッグモードを有効化 ltng:require で静的リソースを読み込める。外部のファイルは読み込めない。 SVGタグがサポートされていない! 名前空間が指定されている場合、いろいろな箇所で名前空間の指定が必要
- 23. Lightning コンポーネントとアプリケーション開発 (LC101) コース基本情報 • 受講対象:Lightning コンポー ネントの作成について学習し たい⽅方 • 期間: 1 ⽇日間 （9：30-18：00） • 受講料料: 70,000円 （テキスト込・税抜） • 形式:クラスルームの集合形式 • 前提知識識:以下の知識識をお持ち の⽅方。 - Apex、Visualforce - SOAP API / REST API - HTML、CSS - JavaScript イベントハン ドリング⼊入⾨門 アプリケー ションの デバッグ 簡単な Lightning コンポーネント の定義 開発の違い: スマホ vs タブレット vs デスクトップ アーキテク チャの理理解 Lightning アプ リケーションと は モバイルアプリ ケーション向け の HTML アプリケーショ ンとコンポーネ ントのデプロイ アプリケー ションの テスト ヘルプの取得 Review of Visualforce Pages Visualforce Standard Controlelrs スキーマビル ダを使⽤用した カスタムオブ ジェクトの 作成 Apex の使⽤用 Apex による データの検索索 ナビゲーショ ン制御の実装 主な学習内容： n コンポーネントバンドル n イベントモデル n スタイルのマークアップによるユーザインターフェースの作成 n サーバーサイドの Apex ロジックをコールするクライアントサイド JavaScript のコーディング n コンポーネントベースアーキテクチャでのアプリケーションの構築 Lightning コンポーネントフレームワークを使⽤用した独⾃自のコンポーネントやアプリケーションを 開発するための基本的なトピックを解説します。コンポーネントバンドル・イベントモデルなどの 基本概念念、スタイルのマークアップによるユーザインターフェースの作成、クライアントサイドの JavaScript からサーバーサイドの Apex ロジックを呼び出すコーディングなど、コンポーネント ベースアーキテクチャでのアプリケーション構築⽅方法をハンズオン演習を交えて習得します。 l 詳細・お申込み：≫ http://sfdc.co/jp-lc101
- 24. thank y u