JavascriptとVisualforceの統合Webinar
6 likes6,391 views
2月11日に行われたWebinarの発表資料です。
Ad
More Related Content
What's hot (20)
Similar to JavascriptとVisualforceの統合Webinar (20)
Ad
More from Salesforce Developers Japan (20)
Ad
JavascriptとVisualforceの統合Webinar
- 2. #salesforcedevjp スピーカー Mitsuhiro Okamoto Developer Programs Manager @mitsuhiro Kazuyuki Kawamura Technical Solution Architect @kazkawamura
- 3. #salesforcedevjp Safe Harbor 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 intellectual property and other litigation, risks associated with 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- Q for the most recent fiscal quarter ended July 31, 2012. This 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.
- 4. #salesforcedevjp @salesforcedevjp / #salesforcedevjp ソーシャルアカウントをフォローしてください! Salesforce Developers Japan +Salesforce Developers Japan Salesforce Developers Japan Salesforce Developers 録画ビデオはYouTubeと webinarのページにポストされます (登録ページと同じURL). このwebinarは録画されています
- 5. #salesforcedevjp ▪ 質問があったら、終わりまで待たずに – Questionの機能を使って質問をして下さい。 可能な場合は別のスタッフが質問について解答します。 すぐに解答出来ない場合は、後ほどスピーカーが解答します § 最後のQ&Aセッションでもご質問を – お時間が許せば、講演者が質問にお答えします。 ▪ 開発者フォーラムをご活用ください – さらに質問がある場合は? http://developer.salesforce.com/jp/forums へ 質問がある場合には?
- 6. #salesforcedevjp Agenda 1. VisualforceをJavaScript friendlyにする方法 2. VisualforceでJavaScript Remotingを活用する 3. Visualfoceと既存のフレームワークの統合
- 9. #salesforcedevjp HTML Pass-throughの利用 <apex:outputPanel layout="block" html-data-role="panel" html-data-id="menu"> <apex:insert name="menu"/> </apex:outputPanel> <div data-id="menu" data-role="panel"> <!-- contents of menu --> </div> VisualforceのHTML5向け設定
- 11. #salesforcedevjp JavaScript Remotingを使ってJavaScriptから直接 Apexを呼び出す Visualforce.remoting.Manager.invokeAction( '{!$RemoteAction.ContactExtension.makeContact}', “003i000000cxdHP”, “Barr” function(result, event) { //...callback to handle result alert(result.LastName); }); @RemoteAction global static Contact makeContact (String cid, String lname) { return new Contact(id=cid,Last_Name=lname); } ApexVisualforce
- 12. #salesforcedevjp JavaScript Remotingのアドバンテージ 1. Viewstateなし。 大きいデータセットのパフォーマンスが良くなる 2. 既存のJavaScriptから直接呼び出せる 3. APIスコープを利用しない
- 13. #salesforcedevjp Remote Objectを使って直接データにアクセス <apex:remoteObjects > <apex:remoteObjectModel name="Contact" jsShorthand="contact" fields="FirstName,LastName,Id,Email"/> contacts.retrieve({},function(error, records) { if(error) { console.log(error.message); } else { data = records; });
- 14. #salesforcedevjp Remote Objectのアドバンテージ 1. JavaScript Remotingと同じアドバンテージ 2. Apexを必要としない 3. 複数のデータモデルを参照可能 4. JavaScript Remotingの特定の機能を置き換え可能
- 16. #salesforcedevjp Reveal.js § JavaScript製のプレゼンテーションフレームワーク – http://lab.hakim.se/reveal-js/ § Keyboardショートカットや、バックグラウンドの細かな設定な ど、数多くの機能を持つ § <section>タグを入れ子にすることで、サブスライドを生成す ることも可能
- 17. #salesforcedevjp D3.js and C3.js § D3.js – Data Driven Documents : D3 • http://d3js.org/ • データに基づいてHTMLやCSS,SVGを操作できるライブラリ § C3.js – D3-based reusable chart library • http://c3js.org/ • D3ベースの再利用可能なChartを作成することができるライブラリ
- 18. #salesforcedevjp Angular.js § JavaScriptのMVC(MVVM,MVW etc..)フレームワーク – HTMLをテンプレートとして利用 – フレームワークがDOMを自動的に更新する • 双方向データバインディング § https://angularjs.org/
- 19. #salesforcedevjp Isotope § Filter & sort magical layouts – 付箋調のUIを簡単に実現できるライブラリ – Angular上での利用も想定 § http://isotope.metafizzy.co/
- 20. #salesforcedevjp React.js § UI専用のJavaScriptライブラリ – JavaScript (or JSX)にHTMLを記述する – Virtual DOMを活用することでパフォーマンスを向上 § http://facebook.github.io/react/
- 21. #salesforcedevjp JSForce § Salesforce API群のJavaScript Wrapperライブラリ – 非常に多くのSalesforce APIに対応 – コマンドラインでも使用可能 § https://jsforce.github.io/
- 22. #salesforcedevjp まとめ ▪ VisualforceでJavaScriptを使用する場合は ▪ HTML5の宣言 ▪ JavaScript Remoting ▪ Remote Object ▪ 各フレームワークとも協調動作可能 ▪ Reveal.js, C3.js, D3.js, Angular.js , Isotope , React.js ▪ Salesforceと連携を行う前提のライブラリもある ▪ ngRemote ▪ jsForce
- 23. #salesforcedevjp Webinar中で紹介したコード ▪ Reveal / C3.js / JS Remoting / D3.js ▪ https://github.com/joshbirk/VFWebinar ▪ Angular.js / Isotope / Streaming API ▪ https://github.com/unvar/remote-object-ops-dashboard ▪ React.js ▪ http://coenraets.org/blog/2015/01/belgian-beer-explorer-with-react- and-salesforce/
- 25. #salesforcedevjp 2015年2月12日(木) 19:00~ 丸の内JPタワー 12F Salesforce DUG Meetup #8 http://salesforcedugjapan.doorkeeper.jp/events/20400 直近のイベント
- 26. #salesforcedevjp Q & A アンケートLink: https://bit.ly/jp-vfjs Mitsuhiro Okamoto Developer Programs Manager @mitsuhiro Kazuyuki Kawamura Technical Solution Architect @kazkawamura