Salesforce Lightning をやってみてあれこれ

Lightning を
やってみてあれこれ
第6回 appexchange developer meeting
2015/01/19
株式会社テラスカイ
吉田寛

自己紹介
所属：株式会社テラスカイ
製品開発部マネージャー
吉田寛（Hiroshi Yoshita）
@xlouder
2

Agenda
• 会社紹介、SkyVisualEditorの紹介
• Lightning とは
• Lightning 開発する上で知っておきたいこと
• 開発環境
• 外部JavaScriptライブラリの読み込み
• 複数 Lightning コンポーネントで同じJavaScript ライブラリは使える
• Lightning コンポーネント間での情報通信
• Aura と Lightning
• 最後に
3

会社紹介
• 社名：株式会社テラスカイ
• 所在地：東京都中央区八重洲
• 特徴
• 豊富なSalesforce導入実績
• 自社製品がある
• 多くの専門技術者
4

Drag &
Drop
Visualforce
Apex
Salesforceの画面を作成することが
できるサービス
「Visualforceページ」、「Apexクラス」
を自動生成するサービス
SkyVisualEditor紹介
5

Special Thanks
http://qiita.com/advent-calendar/2014/lightning
7

Lightning とは
 Lightning コンポーネントフレームワーク
コンポーネント及びエクステンションは、再利用可能なコンポーネントの開発と既存のSalesforce1アプリケーションの挙動のカスタマイズ、さらにスタンドアロンアプリケーション
の開発を可能にします
 Lightning コンポーネント
アプリケーションの自己完結型の再利用可能なユニットで、UI の再利用可能なセクションを表します
 Lightning App Builder
素早くアプリケーションを組み立てることができる新しいグラフィカルなツールです。UIの部品にはSalesforceや他の開発者が提供するコンポーネントを利用できます
 Lightning Connect (External Data Source )
Force.comアプリケーションと外部リソースを業界標準のOData規格に従って、簡単に統合する事ができるツール
 Lightning Community Builder
コミュニティページをデザインするためのビジュアルUIツール
 Lightning Process Builder
ビジネス・プロセスの自動化を可能にするビジュアルUIツール
 Lightning Schema Builder ( 旧 Schema Builder )
オブジェクトやデータの関連を確認し、データベースデザインを行えるビジュアルUIツール
8
Lightning とは、Force.comの新しいプラットフォームサービス群。
会話の中で使っている名称
 Lightning アプリケーション
 Lightning イベント
■ Lightning コンポーネント
■ Lightning アプリケーション
■ Lightning App Builder
■ Lightning イベント

クライアントサイド
アプリケーション (*.app)
Lightning とは
 Lightning アプリケーション
• パッケージ化して配布が可能。AppExchangeで公開も可能。
• Lightning コンポーネントタブとして登録できないため、Saleforce1上で動作不可。
• Lightning コンポーネントを配置したスタンドアロンアプリケーションが作成可能。
• <script>タグが使用可能。
• 修正がリアルタイムに反映される
• 作成したアプリケーションのプレビューができる
 Lightning コンポーネント
• Lightningコンポーネントフレームワークを使用して開発を行う
• Lightning コンポーネントタブに登録すれば、Saleforce1上で単体のアプリとして
動作可能。
• Lightning App Builder でカスタムコンポーネントとして使用できる
• <script>タグを “原則” 使用することができない
• 修正がリアルタイムに反映されない
• パッケージ化して配布が可能。AppExchangeで公開も可能。
9
コンポーネント (*cmp, *.js, *.css)
コンポーネント
サーバーサイド
Apex (*.apxc)
イベント
概略図
コンポーネント

Lightning とは
10
 Lightning App Builder
• ユーザが作成したLightning コンポーネントをドラッグ & ドロップで組み合わせて利用することが出来るツール
• 現在 Pilot機能のため利用することが不可
（Dreamforce’14で一部開放したことがある。）
 Lightning イベント
• イベント駆動型プログラミングが可能
• イベントには2種類ある
• コンポーネントイベント
• コンポーネントの中で発生したイベントのみをハンドリング
できる
• アプリケーションイベント
• アプリケーション内で発生したイベントであればどこから
でもハンドリングできる

Lightning開発をするにあたってのドキュメント
 Lightning コンポーネント開発者ガイド
https://developer.salesforce.com/docs/atlas.ja-jp.lightning.meta/lightning/
 Lightning FAQ
https://developer.salesforce.com/page/JP:Lightning_FAQ
 Salesforce1 Lightning Advent Calendar 2014
http://qiita.com/advent-calendar/2014/lightning
11

Lightning 開発する上で知っておきたいこと
12

開発環境
□ 開発者コンソール
13
□ Sublime Text3 + sublime-lightning

開発環境
「開発者コンソール」,「Sublime Text」使用のメリット／デメリット
開発者コンソール
• 標準搭載されている。直ぐに利用可能。
• 右サイドバーのリンク集がある
• タブ表示されているエディタの移動ができない
Sublime Text + sublime-lightning
• 環境構築が必要
• 非常に軽量
• 独自設定可能、補完機能追加可能
• 他ツール（バージョン管理）との連携が可能
14
✕
<リンク集>
<タブ移動>

開発環境
• 開発時の調査（デバッグ）の方法
• 主にJavaScriptでの開発のため、通常のJavaScript開発と同様にWebブラウザのデベ
ロッパーツールを使用
• $A.log() メソッドを使用してログメッセージをJavaScript コンソールに出力する
• ⇛Winter’15 環境では出力されず…..
15
[参照] Lightning コンポーネント開発者ガイド：デバッグ
https://developer.salesforce.com/docs/atlas.ja-jp.lightning.meta/lightning/debug_intro.htm

外部JavaScriptライブラリの読み込み
• 静的リソースに格納する必要がある
• Visualforceページのように外部から直接読み込みは不可
• $Resourceは使えない
• アプリケーションに読み込み処理を記述
• コンポーネントには “基本的には” 定義できない
• 複数の外部JavaScriptライブラリを読み込む場合は読み込み順を意
識する
• <script>タグの記述順に読み込む保証がされていない
• 「RequireJSライブラリ」もしくは「Loader component」を使用して対応可能
16
<script src="/resource/js/JSLibrary.js"/>

複数 Lightning コンポーネントで同じ
JavaScript ライブラリは使えるか
• コンポーネントで<script>タグを記述することができない
• アプリケーションで定義したものを全コンポーネントで共有…？
 アプリケーション全体の設計ができているスクラッチ開発では問題なし
 現時点では、様々な人が作ったコンポーネントを利用することが出来ない
 Lightining App Builder に期待
17

Lightning コンポーネント間での情報通信
• イベントを定義することで、コンポーネント間の通信が可能。
18

Aura と Lightning
 Auraとは
• デスクトップとモバイルデバイスの両方のための動的なWebアプリケーションを
開発するためのUIフレームワーク
• Lumen -> Aura -> Lightning
• Salesforce Touch、Salesforce1、ページレイアウトはAuraで作られた
• GitHubで公開されているオープンソース
https://github.com/forcedotcom/aura
• Java EE サーバー上で動作可能
20
デモ：Aura Note

Aura と Lightning
 リファレンス
• Aura
http://documentation.auraframework.org/auradocs#reference?descriptor=ui:abstractDataGrid&defType=component
• Lightning
• Lightning Component Cheat Sheet
https://developer.salesforce.com/resource/pdfs/Lightening_Components_Cheatsheet.pdf
• Spring’15 Release Notes
http://releasenotes.docs.salesforce.com/spring15/spring15/release-notes/rn_lightning_components.htm
 UIタグの比較
• Aura ：約130
• Lightning (Winter’15) ： 15＋26 (Spring’15)
• Visualforce (Winter’15)： 146
• Lightningに存在しないAuraタグは使えない
• UnknownException が発生。JavaScriptエラーが発生してもエラー内容が表示されない
• Auraのレスポンシブ系、レイアウト系のタグも使えず
• エラーになってしまう
• Lightning App Builderに期待？
21

試してみて気付いたこと
 Lightning には inputField は存在しない。
• inputField の機能 (Validationチェック、reference項目、etc) を実装する必要がある。
• 因みに、Aura にも inputField は存在しない。
 Lightning コンポーネントはレスポンシブなUI ではない。
• Lightning App Builder はレスポンシブUIに対応している (はず) だが、コンポーネントの
集合体 (アプリケーションやコンポーネントのネスト) の中では自動的にレイアウトを変
更する機能はない。
 ステートメントの保持はサーバサイド(Apex)ではなくクライアントサイド
で行う必要がある
 HTML5 <template>タグが使えない
• HTMLタグについてもLightning フレームワークで制御している
23

疑問
 Lightning コンポーネントは内部非公開で配布可能？
• “コンポーネントはカプセル化され、内部は非公開に保たれます” とあるが…
 Salesforceが利用可能JavaScriptライブラリを定義する？
• 現在 Lightning コンポーネントでは外部JavaScriptライブラリを呼び出しできない
• 外部JavaScriptライブラリ(Angular, Polymer, React, Meteor)がincludeされるようになる
 今後のVisualforceはどうなる？
• Visualforceは引き続きサポートされる
• LightningコンポーネントはVisualforceページで利用可能になるもよう
24

Salesforce Lightning をやってみてあれこれ

More Related Content

What's hot (20)

Similar to Salesforce Lightning をやってみてあれこれ (20)

More from 寛吉田 (9)