lightning を利用した開発とケーススタディ
TRANSCRIPT
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などのビルドツールを使用して
自分で環境を整える
3種類のアプローチ 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.11.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