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

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

Transcript of 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

Lighitning とは

6

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

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

19

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

最後に

22

試してみて気付いたこと

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

25

以上!!