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 をやってみてあれこれ

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

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

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

More from 寛吉田

More from 寛吉田 (9)

Recently uploaded

Recently uploaded (8)