lightingコンポーネントベーシック開発
TRANSCRIPT
Lightning Component 開発概要
株式会社セールスフォース・ドットコム岩谷 昭宏
アジェンダ
Lightning コンポーネント概要 実装ガイドライン Lightning Component 開発
• 開発環境• サンプルアプリケーション作成
Lightning Component 設置場所 モダン Visualforce 開発 Tip
• actionFuntion タグ• sforce ライブラリ• JavaScript Remoting• Remote Object
Lightning Experinece 有効化 Lightning アプリケーションビルダーでの Lightning Experinece 開発 Visualforce での Lightning Experience 開発 技術情報
Lightning コンポーネント概要
Lightning とは
Lightning コンポーネント フレームワーク•再利用可能なコンポーネントの作成や、 Salesforce1 モバイル・アプリのカスタマイズやスタンドアロンアプリの開発を可能とする、コンポーネント及びエクステンション
Lightning App ビルダーSalesforce 及び開発者より提供されたコンポーネントを使って高速にアプリケーションを開発できる UI ツール
Lightning ConnectForce.com アプリと OData 対応した外部データソースとを簡単に統合し利用できるツール
Lightning プロセスビルダー ビジネス・プロセスを可視化し、作成を自動化できる UI ツール
Lightning スキーマビルダー オブジェクト、フィールド及び関連を閲覧、作成できる UI ツール
Lightning ExperienceLightning コンポーネントフレームワーク上で動作している新しい Sales Cloud
はじめに
2015 年 10 月時点
Visualforce は無くなりません
ちなみに
ユーザインターフェース移り変わり
Page Centric 対 App Centric
2002/02/222013/11/05
Page Centric (Visualforce + Apex Controller)
1. ユーザがページをリクエスト2. サーバ側で VF タグの変換、 Apex コントローラコードの実行を行い、リクエスト結果と
して HTML ページをブラウザに送信3. ブラウザは結果を表示4. ユーザがボタン、リンクをクリックなどのアクションを行うと新規ページをリクエスト
する。（ステップ１にもどる）
App Centric (Single Page Application)
Database
ApexJS Controller
CMP
CSS
JS Helper
1. ユーザがアプリケーション、あるいはコンポーネントをリクエスト2. クライアントにアプリケーション、あるいはコンポーネントのバンドル（必要なファイ
ル群）をロード3. JavaScript アプリケーションが UI を生成4. ユーザとのインターラクションの結果、 JavaScript アプリケーションが UI を適時変更す
る
Visualforce vs Lightning Component
一般的な Visualforce Lightning Component
ロジック実行 サーバ側 クライアント側、サーバ側テクノロジー Apex 、 VF 、 JS 、 CSS Apex 、 Aura 、 JS 、 CSS
データアクセス Apex 経由 Apex 経由ユーザインターフェース
HTML 、 CSS 、 VFタグ HTML 、 CSS 、 UIコンポーネント
最低限必要ファイル拡張
Apex 、 page Apex 、 cmp 、 js （クライアントコントロラー）
画面の書き換え サーバ側へのリクエスト JS でのクライアント側マルチデバイス対応 CSS での実装 フレームワーク側で対応クライアント、サーバー間フォーマット
HTML JSON
セールスフォース提供開発環境
開発者コンソール、 Force.com IDE
開発者コンソール
フレームワークとは
アプリケーションを作成する際に共通で必要とされる汎用機能をあらかじめ提供し、アプリケーションの土台として機能するソフトウェアのこと。
フレームワークを利用することで自分で必要とされる部分に注力して開発することができ、フレームワークバージョンアップに伴う新機能、パフォーマンス改善を自動的に享受できる
例えば、 Expressフレームワーク画像、 CSS 、クライアントサイドの JSを配置
ルーティングを設定するファイル
サーバーサイドのメインプログラム
Lightning Component フレームワーク
アプリケーションファイル、コンポーネントの場合は拡張子は cmp となる
アプリケーション、あるいはコンポーネントの CSS ファイル
アプリケーションファイル、あるい h がコンポーネント内のイベントを処理するクライアント側 JS コントローラ
サーバーサイドロジックを定義するApex
特徴 標準コンポーネントセットコンポーネントセットが標準装備されているため、アプリケーションの構築にすぐに着手できます。アプリケーションのデバイス別の最適化はコンポーネントが行うため、最適化に時間を取られることがありません。
パフォーマンス
イベント駆動型アーキテクチャイベント駆動型アーキテクチャを使用して、個々のコンポーネントを適切に切り離します。どのコンポーネントも、アプリケーションイベント、または表示可能なコンポーネントイベントを登録できます。
短時間での開発アプリケーションをコンポーネントベースで構築するため、並列設計が可能になり、開発全般の効率性が向上します。
デバイス対応およびブラウザ間の互換性アプリケーションには応答性が高い設計が使用され、快適なユーザ環境を実現します。 Lightning コンポーネントフレームワークは、 HTML5 、 CSS3 、タッチイベントなど、最新のブラウザテクノロジをサポートしています。
】
実装ガイドライン
ガイドライン抜粋
コメント私は Salesforce1 モバイルアプリケーション開発者です
Lightning component での開発を推奨します。両技術ともタグベースのマークアップを使用します。例えば <apex:inputText> と <ui:inputText> です。 VF ではページ全体をサーバ側で HTML に変換しますが、 Lightning component ではクライアントで部分的に変換することによりパフォーマンスが向上します。特にモバイルではリソースが限られているため Lightning component を推奨します。
AngularJS 、 React などの JS フレームワークを使用しなければいけない
Visualforce ページを JS フレームワークのコンテナーと使用して JavaScript で画面描画、データリクエストを非同期で処理。 Lightning Component でも JS フレームワークを使用することは可能であるがまだ成熟されていないためリスクあり
誰でも簡単にアプリケーションを構築させたい
Lightning App Builder を使用することにより実現できるので Lighting component で開発
認証不必要ウェブサイト Lightning コンポーネントはサイツをサポートしていないので Visualforce で開発
PDF として出力するページ Lightning コンポーネントは PDF 出力をサポートしていないのでVisualforce で開発
カスタマコミュニティの開発 Community Builder を使用できるので Lightning コンポーネントで開発パートナーコミュニティの開発 Visualforce で開発、ただし” Lightning Componenet for Visualforce” *1 ＋
Lightning コンポーネントで置き換え可能か考えるたくさんの Visualforce がある既存プロジェクトでの開発
Visualforce で開発、ただし Lightning Componenet for Visualforce ＋Lightning コンポーネントで置き換え可能か考える
新規アプリケーションの開発 Lightning Component を推奨します。ぜひ新しい技術を取得するチャンスです*1: Lightning Component for Visualforce ： Visualforce から Lightning コンポーネントを表示させることができます。この機能を使用することで Lightning コンポーネントを Aloha スキンからも表示する事が可能。
Lightning Component 開発
開発環境Lightning アプリケーションビルダー開発者コンソールで作成したコンポーネント、AppExchange でインストールしたコンポーネントを使ってドラッグ＆ドロップで画面を開発。Lightning ページタブからアクセス
開発者コンソール経由アプリケーションアプリケーションを作成すると独自 URL が振り当てられるので URL 経由でアプリケーションにアクセス
開発者コンソール経由コンポーネント作成されたコンポーネントは Lightning コンポーネントタブ経由でアクセス、 Lightning アプリケーションビルダー、開発者コンソール経由で作成されたアプリケーション、開発者コンソール経由で作成したコンポーネントで使われます
その他開発環境
Cloud9 セールスフォース開発をクラウド環境で利用できるサービス
Sublimeセールスフォース開発環境をローカルで構築
開発を始める前に
1
Lightning Component を使用する場合は私のドメイン設定が必要です
54
3
2
暫く待つと承認済みに変更されます
開発を始める前に
1
2
これで私のドメイン設定が終了されました。
バンドル
リソース ファイル名 役割コンポーネントまたはアプリケーション
sample.cmp または sample.app
バンドル内の唯一の必須リソース。コンポーネントまたはアプリケーションのマークアップが含まれます。各バンドルに含まれるコンポーネントまたはアプリケーションリソースは 1 つのみです。
CSS スタイル sample.css コンポーネントのスタイルシートコントローラー sampleController
.jsコンポーネント内のイベントを処理するためのクライアント側コントローラメソッド
設計 sample.design Lightning App Builder または Lightning ページで使用されるコンポーネントでは必須
ドキュメント sample.auradoc 説明、サンプルコード、およびコンポーネント例への 1 つ以上の参照
SVG ファイル sample.svg Lightning App Builder で使用されるコンポーネントのカスタムアイコンのリソース。
ヘルパー sampleHelper.jsコンポーネントのバンドル内の JavaScript コードからコール可能な JavaScript 関数コンポーネント名またはアプリケーション名を sample とした場合、すべてのリソースは命名規則に従い自動的に結び付けられます。例えばスタイルシートのリソースは
sample.css となり、クライアント側コントローラーは sampleController.js となります。 コンポーネントまたはアプリケーションは必ず必要であるが、それ以外のリソースは必要に応じて作成する。
開発者コンソール起動
1
2
アプリケーション作成
スタイルシート追加
クライアント側コントローラの追加
アプリケーション
コントローラ
ボタンを押すたびに１加算される
アトリビュートを取得し、１加算した値をアトリビュートに再設定
attribute はビューとコントローラからアクセス可能
ボタンが押されるとコントローラのメソッドが実行
サーバー側コントローラ追加
名前にHello が追加される
attribute はビューとコントローラからアクセス可能ボタンが押されるとコントローラのメソッドが実行 サーバサイドのコントローラを取得
Apex コントローラ設定
イベント
受信コンポーネント
イベント
アプリケーション
メッセージ： hello
送信コンポーネント
Click
Message : hello
2. イベントにはメッセージをString として格納
3. 受信コンポーネントではイベント内のメッセージを画面に表示
1. Click ボタンを押す事によりイベントを送信
メッセージ送信コンポーネント
1. ユーザがボタンを押すとコントローラの fireMyEvent メソッドが実行、また MyEventを使用するためイベントを登録
2. イベントを取得してmyMsg アトリビュートにメッセージ (hello) を設定、 fire メソッドでイベントを送信
MyEvent イベントでは任意な文字を保存することが可能。 Integer, Boolean なども指定可能
メッセージ受信コンポーネント
1. 特定のイベント（ MyEvent) が送信された際のハンドラー登録、画面ロード時は NoYet が表示される
2. 送信コンポーネントからイベントが送信された時登録したイベントハンドラのメソッド（ myReceive ）が実行、イベント内のメッセージを画面に表示
3. 受信コンポーネントではイベント内のメッセージを画面に表示
アプリケーション
アプリケーションに送信コンポーネント、受信コンポーネントを配置
アプリケーション起動
標準ページへの変移
ボタンを押した後に標準編集画面へ遷移。 JS コントローラに記述
組織毎ドキュメント1.
https://<your_srv>/auradocs にアクセス
2. Reference ボタンをクリック
3. AppExchange から事前に Cell Lightning コンポーネントをインストールしています
Cell コンポーネント仕様ドキュメント、コンポーネントの Document バンドルに記載すると自動的に Aura 用ドキュメントに変換されます。
実開発の Tip 他の JS フレームワークとの共存
Angular、 jQuery、 react.js などを使用可能（検証は必要）
Lightning ComponentをVisualforceを追加 （下記３ステップで実装）Lightning JS を VF へ追加VF にどの Lightning アプリケーションを使うか定義VF に Lightning Component を作成を JS で記述
外部 CSS の参照静的リソースとしてアップロードした外部 CSS リソースを参照するには、 .cmp または .app マークアップで <ltng:require> タグを使用します。
外部 JS ライブラリの参照静的リソースとしてアップロードした JavaScript ライブラリを参照するには、 .cmp または .app マークアップで <ltng:require> タグを使用します。
JS のデバッグChrome Developer Tools で JS コードのデバッグを行います。コードの可読性を良くするため必ず Debugモードを有効化して下さい。コンソールにログメッセージを表示するには $A.log(string[, error])を使用してください。 Lightning Component 用デバッグChrome エクステンションも公開されています。
Lightning Component 設置場所
1. Lightning アプリケーションビルダー
1
2
S1 からアクセス可能有効化すると Lightningページタブが作成され、
S1 ナビゲーションにタブが配置される
1. Lightning アプリケーションビルダー
すべてのタブに「 Lightningページタブ」は表示されない
カスタムアプリケーションの編集にも「 Lightning ページタブ」は表示されない
Lightning アプリケーションビルダーで作成したアプリケーションは S1 のみ追加可能
2. Lightning コンポーネントタブ
1. コンポーネントの作成（ force:appHostable を指定することで S1 へ実装可能にする）
3. ナビゲーションへの追加
２ . Lightning コンポーネントタブの作成
4. S １からアクセス可能
2. Lightning コンポーネントタブ
Lightning Experienceからアクセス可能
1
カスタムアプリケーションへタブ追加
すべてのタブからアクセスするとエラー
Aloha ではタブを追加しても実際のアプリケーションには反映されない
3. 開発者コンソールで作成した App
https://<myDomain>.lightning.force.com/<namespace>/<appName>.app からしかアクセスできない。 S1 、 Lightning Experienceに直接インテグレートは不可
4. VF 経由での表示
1. アプリケーション作成
2.Visualforce から作成したコンポーネントの呼び出し
3. Visualforce タブを作成して、アプリケーション、あるいはナビゲーションに追加
4. VF 経由での表示
S1 からアクセス可
Aloha からアクセス可
Lightning Experienceからアクセス可
まとめ
Aloha S1 Lightning Experience
メモLightning アプリケーションビルダ
X O X
Lightning コンポーネントタブ X O X
開発者コンソールで作成したapp
X X X 特定 URL からのみアクセス可
Lightning コンポーネント + VF O O O
モダン Visualforce 開発 Tip
JavaScript の利用
Visualforce + Apex Controller で実装するよりも Visualforce を JavaScript のコンテナとして使用してください。 UI に関しては Lightning Design Systemを使用して下さい。 Lightning Design System とはセールスフォースが提供している New UI 用の CSS フレームワークを使用することで Visualforce を簡単に New UI に沿ったデザインを開発することができます。（チュートリアルはこちら）
Visualforce を JavaScript のコンテナーとして使用することにより JavaScript で画面描写、データやり取りなどするためパフォーマンスが向上します。下記が Visualforce を JavaScriptのコンテナーとして使用したフローとなります。
1) ユーザが Visualforce ページをリクエスト2) HTML ページをブラウザに送信3) ブラウザが JavaScript アプリをロード4) JavaScript アプリが UI を生成5) ユーザのアクションに応じて JavaScript からセールスフォースへリクエスト
JS からセールスフォースへの連携
手段 説明 Apexコード<apex:actionFunction> JavaSctipt から ActionFunction 経
由で Apex コントローラメソッドを実行
有
sforce lib 標準ライブラリ、 JavaScript からは sforce.apex.execute メソッドでApex WebService を実行
どちらでも
JS Remoting JavaScript から直接 Apex を実行可能。 actionFunction に近し、
有Remote Object CRUD のアクセスに便利 無
ActionFunction での実装 詳細はこちら
【 Visualforce】<apex:commandButton onclick=“{myjsfunc()}” value=“ 実行” />
【 JS】function myjsfunc() {
actfunc();}
【 Apex Controller】public pagereference ctlfunc() {
// レコードへの CRUD 処理とかreturn null;
}
【 Visualforce】<apex:actionFunction name=“actfunc” action=“{!ctlfunc}” reRender=“dummy”/>
ユーザがボタンをクリックするとVisualforce で定義されている
JavaScript のファンクションが呼ばれる
JavaScript のファンクションで何らかの処理を行った後にactionFunction 経由で Apex コントローラを呼ぶ
サーバー側の Apexが無事実行されるとactionFunction のreRender で定義されているコンポーネントをリフレッシュする
【 Visualforce】<script src="/soap/ajax/15.0/connection.js" type="text/javascript"></script> <script src="/soap/ajax/15.0/apex.js" type="text/javascript"></script>
【 Apex】global class myClass {
webService static Id makeContact(String lastName, Account a) {Contact c = new Contact(LastName = lastName,
AccountId = a.Id); return c.id; }
}
【 JavaScript】var account = sforce.sObject("Account"); var id =sforce.apex.execute("myClass","makeContact", {lastName:"Smith", a:account});
標準 JS ライブラリでの実装 詳細はこちら Visualforce 内で標準 JS のインポート、結果として JS 内でsforce を使用可能になる
sObject メソッドを使用して任意の取引先レコードを取得。JavaScript から
Apex Web サービスをコール
引数の取引先に取引先責任者を作成してレコード ID をJavaScript に返す
JavaScript Remoting での実装 詳細はこちら
【 Apex】global with sharing class AccountRemoter {
public String accountName { get; set; } public static Account account { get; set; } public AccountRemoter() { } // empty constructor @RemoteAction global static Account getAccount(String accountName) {
account = [SELECT Id, NumberOfEmployees FROM Account WHERE Name = :accountName];
return account; }
}
【 JavaScript】 function getRemoteAccount() { Visualforce.remoting.Manager.invokeAction( '{!$RemoteAction.AccountRemoter.getAccount}', ‘AccountName’, function(result, event){
var id = result.Id; var num = result.NumberOfEmployees; }, {escape: true} ); }
【 Visualforce】<button onclick="getRemoteAccount()">送信 </button><apex:outputText id=“recordId/><apex:outputText id=“numEmployees"/>
ユーザがボタンをクリックするとVisualforce で定義されている
JavaScript のファンクションが呼ばれる
JavaScript のファンクションで何らかの処理を行った後にApex クラスをコール
取引先名から取引先レコードを取得してJavaScript にレコードを返す取引先レコード ID 、社員数を受け取り、
JS で画面描写
Remote Objects での実装 詳細はこちら
【 JavaScript】<script> var fetchWarehouse = function(){ var wh = new SObjectModel.Warehouse(); wh.retrieve({ limit: 1 }, function(err, records, event){ var record = records[0]; var name = record.get(“Name”);
var id = record.get(“Id”); }); };</script>
【 Visualforce】<apex:remoteObjects > <apex:remoteObjectModel name="Warehouse__c" jsShorthand="Warehouse" fields="Name,Id"> </apex:remoteObjectModel> </apex:remoteObjects>
【 Visualforce】<button onclick=“fetchWarehouse ()”> １件取引先表示 </button>
Visualforce 内でカスタムオブジェクト（ Warehouse__c) をRemoteObject として使用すると定義
ユーザがボタンを押して JavaScript のfetchWarehouse メソッドを呼ぶ
JavaScript 経由でセールスフォースのデータベースアクセスを行う。 Retreive ファンクションの引数として limit, offset, where などがあります。
Visualforce での Lightning Component 開発注意点
Lightning Experience で表示する Visualforce の showHeader 、 showSidebar を true にすることはできません
ページ title を設定することはできません。 Lightning Experience で表示する Visualforceは iframe内に表示されるためページ title にアクセスできません
<apex:relatedList> は使用できません
<apex:iframe> の使用はさける。 Visualforce ページは iframe内に表示されるので<apex:iframe> を使用すると非常に複雑である
JavaScript で window.location は使用できない
sforce.one JavaScript ライブラリは Salesforce1 と Lightning Experience で使用可能となる。 Salesforce1 の Visualforce ページを実装する際に sforce.one の有無でモバイルからのアクセスを判断していたが Lightning Experience では修正する必要がある
Lightning Experience 有効化
Lightning Experience 有効化
1
4
3
2
Lightning Experience 有効化
1
4
3
2
Lightning Experience 有効化
1
4
3
2
Lightning Experience 有効化
1
4
3
2
5
Aloha へ切り替え
1
2
Lightning アプリケーションビルダーでのLightning Experience 開発
Lightning Experience アプリケーションビルダー
開発者用組織では Lightning Experience のアプリケーションビルダーの有効化が可能です。取引先詳細ページの変更を Lightning アプリケーションビルダーで行う事ができます。
商談詳細画面レイアウト
1
5
3
2
4
商談詳細画面レイアウト
1
2コンポーネントをドラッグ＆ドロップしてレイアウトへ追加します
商談詳細画面レイアウト
1
2
商談詳細画面レイアウト
1
3
2
商談詳細画面レイアウト
1
スケジュール、計算機など AppExchange で入手したコンポーネントが反映
商談詳細用のLightning ページが自動的に作成される
Visualforce での Lightning Experience 開発
1. VF での Lightning Experience 開発
Visualforce ページタブをアプリケーションへ追加することによりアプリケーションランチャー経由で Visualforce ページへアクセス可能
2. VF での Lightning Experience 開発
セールスフォース Classic （ Aloha ）と同様にレコード詳細ページに Visualforce ページを埋め込むことができます
3. VF での Lightning Experience 開発
Lightning App Builder で作成したカスタムアプリケーションページに Visualforce ページを追加することができます
4. VF での Lightning Experience 開発
グローバルクイックアクションとしてレコード詳細ページへ追加可能
レイアウトエディターでの設定
5. VF での Lightning Experience 開発
セールスフォースクラシック UI と同様にユーザが標準ボタン、リンクをクリックした際に表示される画面を Visualforce ページで置き換え可能。カスタムボタン、リンクでも同様
Lightning Component 開発に必要な情報源
技術情報タイトル 内容
Lightning Components Trailhead 簡単な Lightning Component を作成します。クライアント、サーバ側コントローラの作成、またデバッグ方法も記述
Lightning Design System Trailhead Lightning Design System はセールスフォースが提供している Lightning に準拠したデザインガイドライン、 CSS フレームワークです。 LDS の使用方法を手順を踏んで解説
Lightning Component Developer Guide Lightning Component の開発者用ガイドLightning Components Quick Start Hello World を８ステップで実装ガイドCreating Lightning Components Salesforce University で提供しているビデオコースSingle Page Applications なぜ Lightning フレームワークを採用したのかの技術的説明Cloud9 クラウドベースの Salesforce 開発環境Sublime Sublime エディターを使用して Salesforce 開発環境開発者コンソール 開発者コンソールでの Ligtning リソースの操作Lightning Components Cheat Sheet Lightning Component 実装に必要なコードサンプル、仕様を掲載Debugging Lightning Components Lightning Component 開発で必要となるデバッグ方法を解説したブログVisualforce & Lightning Experience Trailhead Lightning Experience 上で動作する Visualforce 開発方法を説明ディスカッションフォーラム Lightning に特化したフォーラムSalesforce Stack Exchange Salesforce版 Stack Overflow
コンタクトリスト作成 ワークブック
コンタクトリスト表示コンタクト新規画面
コンタクト編集画面
資料はこちら
経費精算アプリケーション作成 ワークブック
経費オブジェクトの合計金額を表示
新規作成ボタン
経費オブジェクトの総数を表示
“Reimbursed?”項目編集可能
資料はこちら
トレーニングコース
