Lightning を利用した開発と ケーススタディ  株式会社セールスフォース・ドットコム ディベロッパプログラムマネージャー

岡本 充洋

 株式会社セールスフォース・ドットコム  シニアテクニカルエバンジェリスト

 中嶋 一樹

Safe harbor statement under the Private Securities Litigation Reform Act of 1995:

This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services.

The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of any litigation, risks associated with completed and any possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-K for the most recent fiscal year and in our quarterly report on Form 10-Q for the most recent fiscal quarter. These documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site.

Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

Safe Harbor

•  実際に今すぐ利用可能なAppExchangeコンポーネントの紹介 •  複数のコンポーネントの組み合わせ例 •  コンポーネントの粒度とベスト・プラクティス •  Lightningの開発環境の構築方法 •  Lightningで開発を行う際の注意点とTips

本日お話する内容 Agenda

日本のAppExchangeで公開されているコンポーネント

美しく、対話的なグラフを描画 Excelライクな表形式フォームを挿入

https://appexchangejp.salesforce.com/

Chart.js for Lightningへデータを渡す構造

オブジェクト

[{

color: #ffaa00

value: 42 },{

color: #ffbb77

value: 71 }]

Apex

Chart.js for Lightning Apex Data Provider JSONデータ

イベントを通じたコンポーネント間のコミュニケーション

Chart.js for Lightning Cell

グラフをクリックすると イベントを発火

すごい家計簿

c:ChartjsChartClick c:CellDataChange

イベントを監視

イベントを監視

グラフのクリックを検知すると イベントを発火

イベントを通じたコンポーネント間のコミュニケーション

Chart.js for Lightning Cell

保存が完了すると イベントを発火

すごい家計簿

c:ChartjsChartDataUpdate c:CellSaveComplete

イベントを監視

イベントを監視

保存完了を検知すると イベントを発火

Lightning開発のベストプラクティス

Lightning

アプリケーション Lightning

コンポーネント 用途と特徴 •  完全な機能を提供するスタンドアロンアプリ。

•  一意なURLがアサインされる。 •  Salesforce1モバイルアプリの1メニューとして。 •  他のLightningアプリ、コンポーネントのパーツとして。

ベストプラクティス •  SPA（シングルページアーキテクチャー） •  コンポーネントを活用 •  アプリケーションプルダウンメニューからアクセス（

トリックが必要）

•  できる限り多くのHeavy Liftingを内包する（価値） •  デザインとインテグレーションの自由度を確保する

（適用可能性）

具体例 •  Salesforce1 モバイルアプリ •  Lightningプロセスビルダー •  データインポートウィザード •  Cell, Chart.js for Lightningに含まれるサンプルアプリ

•  フォームのパーツ（スライダー等） •  表形式フォーム、グラフ •  カレンダー、ノート、Todo、外部サービス

粒度大

•  開発者コンソール •  ブラウザ上で直接コーディング

•  IDEや開発者向けエディターのプラグインを使用する •  Force.com IDE •  Sublime Text •  Atom

•  ビルド環境を自作する •  AntやGulpなどのビルドツールを使用して

自分で環境を整える

３種類のアプローチ Lightningコンポーネントの開発環境

 Salesforceが提供する開発環境 •  利点

•  環境構築の必要無く、すぐに利用できる •  デバッグウィンドウやクエリエディター等の機能が充実 •  コードを保存した瞬間に即座に反映される

•  課題 •  コードのバージョン管理等は行えない •  大きいファイルの取り扱いは専用エディタに比べて苦手

手軽かつ高性能なWeb IDE 開発者コンソール

 オープンソースで開発されるSalesforce用プラグイン •  利点

•  使い慣れたエディタでコードが記述できる •  他のプラグインやツールと併用して生産性向上 •  フォルダ構成やデプロイ等の作業をツールが担当

•  課題 •  新機能への対応、バグ対応はプロジェクト依存 •  Salsforceの公式サポートは無し

プラグインによる機能拡張 IDE及び開発者向けエディター

Lightning Sublime Plugin  Git リポジトリ : https://github.com/dcarroll/sublime-lightning Lightning開発のためのシンプルな機能 Lightning - Sublime Textプラグイン

プラグインをインストールすると、フォルダを右クリックして以下の機能を利用可能になる 1.  Salesforceへログイン 2.  Lightning Meta DataのFetch

インストール方法 : http://mavensmate.com/ 数多くの機能に対応 Mavens Mate – Atom & SubLimeプラグイン

Apexクラスのテスト、Static ResourceのZip化など、数多くの機能を備える

 Meta Data APIを利用してローカルのコードを手動でデプロイ •  利点

•  ビルド時に様々な自動化処理を追加しやすい •  スクリプトは別のプロジェクトなどにも流用可能 •  他のコンポーネントと競合を避ける等、高度な処理が可能

•  課題 •  ランタイムやPATHなどの環境を構築する必要 •  周辺ツールの使い方など、幅広い知識が要求される

自分向けにカスタマイズしたい開発者向け ビルド環境の自作

Lightning コンポーネントを配布する際に重要な事  そのコンポーネントは”だれが利用するか？”

同一組織内の 他のコンポーネント内で利用する

同一組織内のAppビルダーで 他のコンポーネントと共存する

AppExchangeを介して 他の組織のユーザから利用

App Builderで利用される事を想定すると・・・  コンポーネントは他のコンポーネントと同じ画面で利用される

A社 コンポーネント

B社 コンポーネント

C社 コンポーネント

App Builderで利用される事を想定すると・・・  コンポーネント毎にライブラリのバージョンが違う場合がありうる

Lightning Component

Lightning Component

Lightning Component

Lightning Component

Lightning Component 1.1１.2

2.4.2

A社 コンポーネント

2.1.2

3.8.2 B社 コンポーネント

サードパーティJavaScriptの読み込みとスコープ  ltng:require

　myHogehogeという関数はLightning Page全てから参照可能(他のコンポーネントも含

め)

Ltng:requireを使って、Javascriptファイルを読み込む

<ltng:require styles=’/resource/core,/resource/bootstrap.css’

scripts=‘/resource/commonjs1,/resource/fwjs2’ afterScriptsLoaded="{!c.allJSLoaded}"

/>

var myHogehoge = function(){ …

commonjs1

myComponent.cmp

•  例 : グローバル名前空間へのライブラリロードを極力無くす •  既にノウハウのあるOSSコミュニティの知見とテクノロジをうまく利用する •  ビルド時にクロージャ内にライブラリを押し込む

高度な追加処理を行う事が可能 ビルド環境を自作する場合の利点

…

)({

var _ = require(“lodash");

var $ = require(“jquery");

module.exports = {

jqueryVersion: function() {

return $.fn.jquery;

},

lodashVersion: function() {

return _.VERSION;

}

};

})

•  Lightning Template Coffeescript •  https://github.com/stomita/lightning-template-coffeescript

•  Lightning gulp Template •  https://github.com/SalesforceDevelopersJapan/lightning-gulp-template

•  Demoのコード •  Lightning Template CoffeescriptをJavaScriptにしたもの

AppExchangeで公開するコンポーネントを作成する際に活用 Github上で公開されているプロジェクトテンプレート

さあ、今すぐ始めましょう

Thank you