Agenda
• 会社紹介、SkyVisualEditorの紹介
• Lightning とは
• Lightning 開発する上で知っておきたいこと• 開発環境
• 外部JavaScriptライブラリの読み込み
• 複数 Lightning コンポーネントで同じJavaScript ライブラリは使える
• Lightning コンポーネント間での情報通信
• Aura と Lightning
• 最後に
3
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 FAQhttps://developer.salesforce.com/page/JP:Lightning_FAQ
Salesforce1 Lightning Advent Calendar 2014http://qiita.com/advent-calendar/2014/lightning
11
開発環境
「開発者コンソール」,「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
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
Top Related