Lightning を利用した開発とケーススタディ
9 likes3,581 views
2015年5月12日「Salesforce1 Lightning Fast Seminar」での、岡本 充洋と中嶋 一樹によるセッションの資料です。
![Chart.js for Lightningへデータを渡す構造
オブジェクト
[{
color:
#ffaa00
value: 42
},{
color:
#ffbb77
value: 71
}]
Apex
Chart.js
for Lightning
Apex Data Provider JSONデータ](https://image.slidesharecdn.com/lightningokamotonakajima-150513043953-lva1-app6892/85/Lightning-5-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (17)
Ad
Similar to Lightning を利用した開発とケーススタディ (20)
Ad
More from Salesforce Developers Japan (20)
Lightning を利用した開発とケーススタディ
- 2. 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
- 3. • 実際に今すぐ利用可能なAppExchangeコンポーネントの紹介 • 複数のコンポーネントの組み合わせ例 • コンポーネントの粒度とベスト・プラクティス • Lightningの開発環境の構築方法 • Lightningで開発を行う際の注意点とTips 本日お話する内容 Agenda
- 5. Chart.js for Lightningへデータを渡す構造 オブジェクト [{ color: #ffaa00 value: 42 },{ color: #ffbb77 value: 71 }] Apex Chart.js for Lightning Apex Data Provider JSONデータ
- 6. イベントを通じたコンポーネント間のコミュニケーション Chart.js for Lightning Cell グラフをクリックすると イベントを発火 すごい家計簿 c:ChartjsChartClick c:CellDataChange イベントを監視 イベントを監視 グラフのクリックを検知すると イベントを発火
- 7. イベントを通じたコンポーネント間のコミュニケーション Chart.js for Lightning Cell 保存が完了すると イベントを発火 すごい家計簿 c:ChartjsChartDataUpdate c:CellSaveComplete イベントを監視 イベントを監視 保存完了を検知すると イベントを発火
- 8. Lightning開発のベストプラクティス Lightning アプリケーション Lightning コンポーネント 用途と特徴 • 完全な機能を提供するスタンドアロンアプリ。 • 一意なURLがアサインされる。 • Salesforce1モバイルアプリの1メニューとして。 • 他のLightningアプリ、コンポーネントのパーツとして。 ベストプラクティス • SPA（シングルページアーキテクチャー） • コンポーネントを活用 • アプリケーションプルダウンメニューからアクセス（ トリックが必要） • できる限り多くのHeavy Liftingを内包する（価値） • デザインとインテグレーションの自由度を確保する （適用可能性） 具体例 • Salesforce1 モバイルアプリ • Lightningプロセスビルダー • データインポートウィザード • Cell, Chart.js for Lightningに含まれるサンプルアプリ • フォームのパーツ（スライダー等） • 表形式フォーム、グラフ • カレンダー、ノート、Todo、外部サービス 粒度大
- 9. • 開発者コンソール • ブラウザ上で直接コーディング • IDEや開発者向けエディターのプラグインを使用する • Force.com IDE • Sublime Text • Atom • ビルド環境を自作する • AntやGulpなどのビルドツールを使用して 自分で環境を整える ３種類のアプローチ Lightningコンポーネントの開発環境
- 10. Salesforceが提供する開発環境 • 利点 • 環境構築の必要無く、すぐに利用できる • デバッグウィンドウやクエリエディター等の機能が充実 • コードを保存した瞬間に即座に反映される • 課題 • コードのバージョン管理等は行えない • 大きいファイルの取り扱いは専用エディタに比べて苦手 手軽かつ高性能なWeb IDE 開発者コンソール
- 11. オープンソースで開発されるSalesforce用プラグイン • 利点 • 使い慣れたエディタでコードが記述できる • 他のプラグインやツールと併用して生産性向上 • フォルダ構成やデプロイ等の作業をツールが担当 • 課題 • 新機能への対応、バグ対応はプロジェクト依存 • Salsforceの公式サポートは無し プラグインによる機能拡張 IDE及び開発者向けエディター
- 12. Lightning Sublime Plugin Git リポジトリ : https://github.com/dcarroll/sublime-lightning Lightning開発のためのシンプルな機能 Lightning - Sublime Textプラグイン プラグインをインストールすると、フォルダを右ク リックして以下の機能を利用可能になる 1. Salesforceへログイン 2. Lightning Meta DataのFetch
- 13. インストール方法 : http://mavensmate.com/ 数多くの機能に対応 Mavens Mate – Atom & SubLimeプラグイン Apexクラスのテスト、Static ResourceのZip化な ど、数多くの機能を備える
- 14. Meta Data APIを利用してローカルのコードを手動でデプロイ • 利点 • ビルド時に様々な自動化処理を追加しやすい • スクリプトは別のプロジェクトなどにも流用可能 • 他のコンポーネントと競合を避ける等、高度な処理が可能 • 課題 • ランタイムやPATHなどの環境を構築する必要 • 周辺ツールの使い方など、幅広い知識が要求される 自分向けにカスタマイズしたい開発者向け ビルド環境の自作
- 17. 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社 コンポーネント
- 18. サードパーティ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
- 19. • 例 : グローバル名前空間へのライブラリロードを極力無くす • 既にノウハウのあるOSSコミュニティの知見とテクノロジをうまく利用する • ビルド時にクロージャ内にライブラリを押し込む 高度な追加処理を行う事が可能 ビルド環境を自作する場合の利点 … )({ var _ = require(“lodash"); var $ = require(“jquery"); module.exports = { jqueryVersion: function() { return $.fn.jquery; }, lodashVersion: function() { return _.VERSION; } }; })
- 20. • 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上で公開されているプロジェクトテンプレート
- 22. さあ、今すぐ始めましょう
- 23. Thank you