Downloaded 55 times
![実開発の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 エ
クステンションも公開されています。](https://image.slidesharecdn.com/lighting-151104021030-lva1-app6892/85/Lighting-40-320.jpg)
![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で画面描写](https://image.slidesharecdn.com/lighting-151104021030-lva1-app6892/85/Lighting-55-320.jpg)
![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など
があります。](https://image.slidesharecdn.com/lighting-151104021030-lva1-app6892/85/Lighting-56-320.jpg)
More Related Content
![Salesforce dug [tokyo] meetup 2016 新年会](https://cdn.slidesharecdn.com/ss_thumbnails/salesforcedugtokyomeetup2016-160128110745-thumbnail.jpg?width=640&height=640&fit=bounds)
More from Akihiro Iwaya
Lightingコンポーネントベーシック開発
- 1.
- 2. アジェンダ Lightningコンポーネント概要 実装ガイドライン Lightning Component 開発 • 開発環境 • サンプルアプリケーション作成 Lightning Component設置場所 モダンVisualforce 開発 Tip • actionFuntionタグ • sforceライブラリ • JavaScript Remoting • Remote Object Lightning Experinece有効化 LightningアプリケーションビルダーでのLightning Experinece開発 VisualforceでのLightning Experience開発 技術情報
- 3.
- 4. Lightningとは Lightningコンポーネント •フレームワーク 再利用可能なコンポーネントの作成や、Salesforce1モバイル・アプリのカスタマイズや スタンドアロンアプリの開発を可能とする、コンポーネント及びエクステンション Lightning Appビルダー Salesforce及び開発者より提供されたコンポーネントを使って高速にアプリケーション を開発できるUIツール Lightning Connect Force.comアプリとOData対応した外部データソースとを簡単に統合し利用できるツール Lightning プロセスビルダー ビジネス・プロセスを可視化し、作成を自動化できるUIツール Lightning スキーマビルダー オブジェクト、フィールド及び関連を閲覧、作成できるUIツール Lightning Experience Lightningコンポーネントフレームワーク上で動作している新しいSales Cloud
- 5.
- 6.
- 7.
- 8. Page Centric 対App Centric 2002/02/22 2013/11/05
- 9. Page Centric (Visualforce+ Apex Controller) 1. ユーザがページをリクエスト 2. サーバ側でVFタグの変換、Apexコントローラコードの実行を行い、リクエスト結果とし てHTMLページをブラウザに送信 3. ブラウザは結果を表示 4. ユーザがボタン、リンクをクリックなどのアクションを行うと新規ページをリクエストす る。（ステップ１にもどる）
- 10. App Centric (SinglePage Application) Database Apex JS Controller CMP CSS JS Helper 1. ユーザがアプリケーション、あるいはコンポーネントをリクエスト 2. クライアントにアプリケーション、あるいはコンポーネントのバンドル（必要なファイル 群）をロード 3. JavaScriptアプリケーションがUIを生成 4. ユーザとのインターラクションの結果、JavaScriptアプリケーションがUIを適時変更する
- 11. Visualforce vs LightningComponent 一般的な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 開発者コンソール
- 12.
- 13.
- 14. 特徴 標準コンポーネントセット コンポーネントセットが標準装備されているため、アプリケーションの構築にすぐに着手で きます。アプリケーションのデバイス別の最適化はコンポーネントが行うため、最適化に時 間を取られることがありません。 パフォーマンス イベント駆動型アーキテクチャ イベント駆動型アーキテクチャを使用して、個々のコンポーネントを適切に切り離します。 どのコンポーネントも、アプリケーションイベント、または表示可能なコンポーネントイベ ントを登録できます。 短時間での開発 アプリケーションをコンポーネントベースで構築するため、並列設計が可能になり、開発全 般の効率性が向上します。 デバイス対応およびブラウザ間の互換性 アプリケーションには応答性が高い設計が使用され、快適なユーザ環境を実現します。 Lightning コンポーネントフレームワークは、HTML5、CSS3、タッチイベントなど、最新の ブラウザテクノロジをサポートしています。
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. ガイドライン抜粋 コメント 私はSalesforce1モバイルアプリケーション 開発者です Lightning componentでの開発を推奨します。両技術ともタグベースのマークアッ プを使用します。例えば<apex:inputText>と<ui:inputText>です。VFではページ全 体をサーバ側でHTMLに変換しますが、Lightning componentではクライアントで 部分的に変換することによりパフォーマンスが向上します。特にモバイルではリ ソースが限られているためLightningcomponentを推奨します。 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を推奨します。ぜひ新しい技術を取得するチャンスです
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. バンドル リソース ファイル名 役割 コンポーネントま たはアプリケー ション 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 関数
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38. 組織毎ドキュメント 1. https://<your_srv>/aurad ocs にアクセス 2. Referenceボタンをク リック 3.AppExchangeから事 前にCell Lightning コン ポーネントをインストー ルしています Cell コンポーネント仕様ド キュメント、コンポーネン トのDocumentバンドルに記 載すると自動的にAura用ド キュメントに変換されます。
- 39.
- 40. 実開発の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 エ クステンションも公開されています。
- 41.
- 42.
- 43.
- 44. 2. Lightningコンポーネントタブ 1. コンポーネントの作成 （force:appHostableを指定す ることでS1へ実装可能にす る） 3.ナビゲーションへ の追加 ２. Lightningコンポー ネントタブの作成 4. S１からアクセス可 能
- 45.
- 46.
- 47. 4. VF経由での表示 1. アプリケーション作 成 2.Visualforceから作成 したコンポーネント の呼び出し 3.Visualforceタブを 作成して、アプリ ケーション、あるい はナビゲーションに 追加
- 48.
- 49. まとめ Aloha S1 Lightning Experience メモ Lightningアプリケーションビ ルダ X O X Lightning コンポーネントタブ X O X 開発者コンソールで作成した app X X X 特定URLからのみアクセス 可 Lightningコンポーネント + VF O O O
- 50.
- 51. JavaScriptの利用 Visualforce + ApexControllerで実装するよりも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からセールスフォースへリクエスト
- 52. JSからセールスフォースへの連携 手段 説明 Apexコード <apex:actionFunction>JavaSctiptからActionFunction経由 でApexコントローラメソッドを実 行 有 sforce lib 標準ライブラリ、JavaScriptから はsforce.apex.executeメソッドで Apex WebServiceを実行 どちらでも JS Remoting JavaScriptから直接Apexを実行可 能。actionFunctionに近し、 有 Remote Object CRUDのアクセスに便利 無
- 53. 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で定義さ れているコンポーネ ントをリフレッシュ する
- 54. 【Visualforce】 <script src="/soap/ajax/15.0/connection.js" type="text/javascript"></script> <scriptsrc="/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に返す
- 55. JavaScript Remotingでの実装 詳細はこちら 【Apex】 globalwith 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で画面描写
- 56. Remote Objectsでの実装 詳細はこちら 【JavaScript】 <script> varfetchWarehouse = 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など があります。
- 57. VisualforceでのLightning Component開発注意点 LightningExperienceで表示する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では修正する必要がある
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65. Lightning Experience アプリケーションビルダー 開発者用組織ではLightningExperienceのアプリケーションビルダーの有効化が可能です。取 引先詳細ページの変更をLightningアプリケーションビルダーで行う事ができます。
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78. 技術情報 タイトル 内容 Lightning ComponentsTrailhead 簡単な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
- 79.
- 80.
- 81.