Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScriptとVisualforceの統合
2015年2月10日
#salesforcedevjp
スピーカー
Mitsuhiro Okamoto
Developer Programs Manager
@mitsuhiro
Kazuyuki Kawamura
Technical Solution Archit...
#salesforcedevjp
Safe Harbor
Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
This presen...
#salesforcedevjp
@salesforcedevjp / #salesforcedevjp
ソーシャルアカウントをフォローしてください!
Salesforce Developers Japan
+Salesforce Develo...
#salesforcedevjp
▪  質問があったら、終わりまで待たずに
–  Questionの機能を使って質問をして下さい。
可能な場合は別のスタッフが質問について解答します。
すぐに解答出来ない場合は、後ほどスピーカーが解答します
§...
#salesforcedevjp
Agenda
1.  VisualforceをJavaScript friendlyにする方法
2.  VisualforceでJavaScript Remotingを活用する
3.  Visualfoceと既...
#salesforcedevjp
VisualforceのHTML5向け設定
DOCTYPEの設定
<apex:page
standardStylesheets="false"
showheader="false"
sidebar="false...
#salesforcedevjp
HTMLタグとBODYタグのコントロール
<apex:page
standardStylesheets="false"
showheader="false"
sidebar="false"
applyHtmlT...
#salesforcedevjp
HTML Pass-throughの利用
<apex:outputPanel layout="block" html-data-role="panel"
html-data-id="menu">
<apex:i...
#salesforcedevjp
Viewstateについて知っておこう
<apex:form>
nb20PkvDuyhYKej7X7Yg0WPs9EwUp3k+Cvicdkns390SDL3ZDt3y/ZO82y4DlZmA3ng37FZAk...
#salesforcedevjp
JavaScript Remotingを使ってJavaScriptから直接
Apexを呼び出す
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteActi...
#salesforcedevjp
JavaScript Remotingのアドバンテージ
1.  Viewstateなし。 大きいデータセットのパフォーマンスが良くなる
2.  既存のJavaScriptから直接呼び出せる
3.  APIスコー...
#salesforcedevjp
Remote Objectを使って直接データにアクセス
<apex:remoteObjects >
<apex:remoteObjectModel name="Contact" jsShorthand="con...
#salesforcedevjp
Remote Objectのアドバンテージ
1.  JavaScript Remotingと同じアドバンテージ
2.  Apexを必要としない
3.  複数のデータモデルを参照可能
4.  JavaScript...
#salesforcedevjp
JavaScriptフレームワークと
Visualforceの統合
#salesforcedevjp
Reveal.js
§  JavaScript製のプレゼンテーションフレームワーク
–  http://lab.hakim.se/reveal-js/
§  Keyboardショートカットや、バックグラウン...
#salesforcedevjp
D3.js and C3.js
§  D3.js
–  Data Driven Documents : D3
•  http://d3js.org/
•  データに基づいてHTMLやCSS,SVGを操作できる...
#salesforcedevjp
Angular.js
§  JavaScriptのMVC(MVVM,MVW etc..)フレームワーク
–  HTMLをテンプレートとして利用
–  フレームワークがDOMを自動的に更新する
•  双方向デー...
#salesforcedevjp
Isotope
§  Filter & sort magical layouts
–  付箋調のUIを簡単に実現できるライブラリ
–  Angular上での利用も想定
§  http://isotope.m...
#salesforcedevjp
React.js
§  UI専用のJavaScriptライブラリ
–  JavaScript (or JSX)にHTMLを記述する
–  Virtual DOMを活用することでパフォーマンスを向上
§  h...
#salesforcedevjp
JSForce
§  Salesforce API群のJavaScript Wrapperライブラリ
–  非常に多くのSalesforce APIに対応
–  コマンドラインでも使用可能
§  https...
#salesforcedevjp
まとめ
▪  VisualforceでJavaScriptを使用する場合は
▪  HTML5の宣言
▪  JavaScript Remoting
▪  Remote Object
▪  各フレームワークとも協調...
#salesforcedevjp
Webinar中で紹介したコード
▪  Reveal / C3.js / JS Remoting / D3.js
▪  https://github.com/joshbirk/VFWebinar
▪  Angu...
#salesforcedevjp
Survey
よろしければ今後のWebinarの品質を向上させるための
アンケートにご協力ください
https://bit.ly/jp-vfjs
#salesforcedevjp
2015年2月12日(木) 19:00~
丸の内JPタワー 12F
Salesforce DUG Meetup #8
http://salesforcedugjapan.doorkeeper.jp/events...
#salesforcedevjp
Q & A
アンケートLink: https://bit.ly/jp-vfjs
Mitsuhiro Okamoto
Developer Programs Manager
@mitsuhiro
Kazuyuki ...
ありがとうございました
JavaScriptとVisualforceの統合
Upcoming SlideShare
Loading in …5
×

JavascriptとVisualforceの統合Webinar

3,796 views

Published on

2月11日に行われたWebinarの発表資料です。

Published in: Technology
  • Be the first to comment

JavascriptとVisualforceの統合Webinar

  1. 1. JavaScriptとVisualforceの統合 2015年2月10日
  2. 2. #salesforcedevjp スピーカー Mitsuhiro Okamoto Developer Programs Manager @mitsuhiro Kazuyuki Kawamura Technical Solution Architect @kazkawamura
  3. 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. 4. #salesforcedevjp @salesforcedevjp / #salesforcedevjp ソーシャルアカウントをフォローしてください! Salesforce Developers Japan +Salesforce Developers Japan Salesforce Developers Japan Salesforce Developers 録画ビデオはYouTubeと webinarのページにポストされます (登録ページと同じURL). このwebinarは録画されています
  5. 5. #salesforcedevjp ▪  質問があったら、終わりまで待たずに –  Questionの機能を使って質問をして下さい。 可能な場合は別のスタッフが質問について解答します。 すぐに解答出来ない場合は、後ほどスピーカーが解答します §  最後のQ&Aセッションでもご質問を –  お時間が許せば、講演者が質問にお答えします。 ▪  開発者フォーラムをご活用ください –  さらに質問がある場合は? http://developer.salesforce.com/jp/forums へ 質問がある場合には?
  6. 6. #salesforcedevjp Agenda 1.  VisualforceをJavaScript friendlyにする方法 2.  VisualforceでJavaScript Remotingを活用する 3.  Visualfoceと既存のフレームワークの統合
  7. 7. #salesforcedevjp VisualforceのHTML5向け設定 DOCTYPEの設定 <apex:page standardStylesheets="false" showheader="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" >
  8. 8. #salesforcedevjp HTMLタグとBODYタグのコントロール <apex:page standardStylesheets="false" showheader="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0" > VisualforceのHTML5向け設定
  9. 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向け設定
  10. 10. #salesforcedevjp Viewstateについて知っておこう <apex:form> nb20PkvDuyhYKej7X7Yg0WPs9EwUp3k+Cvicdkns390SDL3ZDt3y/ZO82y4DlZmA3ng37FZAkRbDv8lMHSWO7v8e8AEtPHfX6fTHA5Gn+0hMmY2U0RX2BpYZy/ ZlQhGRb1A3GnJqrE0Xf2870KV01kde5ubUja3+mZG/bFGiTJO91qgYvs9Z617jl2Uj1r58aDjpjB3WqWr0InDPjiKoinADwje/76ruit5vEzfMzzJ +2XIb9eoeo1l4iRfre234PSUL1tDiQXUohhG4A/635Pj0deSG93vGJYcM5Xk/ woa5Z2dBjotK4DEgPzZ22Q8nbC8qTZVh3MyiebCUgP1yFWDo7hCRzenxwpP26ORu4ISSryWFZKJZ+7F/3kh8T8biSxSC4rE2zjBzUL63ndxssXTMlnxf8OnST70qnVKfcr +mwRDEnEJ+LtiEfgfaluiSGabe8+hRRapYnkcAl3LH6QSAAGLKL8CRP+xbBmmjcghxTQ6TuhUDqskjRbW6pOpC15MvPw5kBwxWr/ EaCRdXCmHw6S8RNv2SvjsdWdHtwa04eFtLX/lnQLDXTZlIXeNLmzBmfGFkJ18InyEiJ9cvRZ8z2aZyG3AI/ UoBdXfm5CGp0+5p2klBYpxuxLILJHBejsWZ7nEJDkqAYaVLirhuDc0lLKkgELB/Y7b1M4yt/ CCSQWWGh4pCzomegSIMV31MJCxHWVdc5bzD7VbLjWrXIO5Svf1tCUUR9GgYi4Mog1cDWAlLRSxqQTweuwN1bCWxZzMgC/ NfhTdxfCv5WV2h8ak1jTDDiWYn6HUfpV3qeiiUY67MmvSpcSgcMOWxWKEo6yEdzSADWNIQNiyMVVWW8KqYnV35bcaxJkPZBRKrdC4Ppye/ X217jlkJxoP8IcRG7kNmAsg0DBlLZmDU56/qNU3Od1PMOMjtNI/Cyw8pVvAJxCvPtbG0dV/V2FcIrr7Y/5pUN +iQ4Arf2Mnf75kbSLdTTlsaFa4xXq23Gb1tiFgo3ujSVVXuUbViNh13pAC39fnQ7uxoaf9H9/ EGZYhJW7SrR9HVPPUswq2dEmJpauTNNcoJvVeoMeEmk1UuP0EQxBJ7q9XLEcTq6xYlcQD0gCgLeOUMyIY9/ YbulAtlsIP9nC5EWEZnXWexBFOQtFBOShaoUBWDfubIVrJPytEoXEZpSBXdrvXof6n9iY7X+xaq9YE9XOUx9VQW/zG+9UwCS0/Asq8n/ 0ryt5cMwgYmc9G8Djrjqkjc2gGXyXgoT6dXRYg+xizPB1A7MrTtuVuJsONzr71ff2Opbf83K0lquX+ZrM4yy68ue3wtxMDSA0q9FaU3zb9kFP7MaRN5mMyzKtsliaze +KZojInnJ1qFUFY0VfTjLEI6NC2UYHK </apex:form>
  11. 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. 12. #salesforcedevjp JavaScript Remotingのアドバンテージ 1.  Viewstateなし。 大きいデータセットのパフォーマンスが良くなる 2.  既存のJavaScriptから直接呼び出せる 3.  APIスコープを利用しない
  13. 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. 14. #salesforcedevjp Remote Objectのアドバンテージ 1.  JavaScript Remotingと同じアドバンテージ 2.  Apexを必要としない 3.  複数のデータモデルを参照可能 4.  JavaScript Remotingの特定の機能を置き換え可能
  15. 15. #salesforcedevjp JavaScriptフレームワークと Visualforceの統合
  16. 16. #salesforcedevjp Reveal.js §  JavaScript製のプレゼンテーションフレームワーク –  http://lab.hakim.se/reveal-js/ §  Keyboardショートカットや、バックグラウンドの細かな設定な ど、数多くの機能を持つ §  <section>タグを入れ子にすることで、サブスライドを生成す ることも可能
  17. 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. 18. #salesforcedevjp Angular.js §  JavaScriptのMVC(MVVM,MVW etc..)フレームワーク –  HTMLをテンプレートとして利用 –  フレームワークがDOMを自動的に更新する •  双方向データバインディング §  https://angularjs.org/
  19. 19. #salesforcedevjp Isotope §  Filter & sort magical layouts –  付箋調のUIを簡単に実現できるライブラリ –  Angular上での利用も想定 §  http://isotope.metafizzy.co/
  20. 20. #salesforcedevjp React.js §  UI専用のJavaScriptライブラリ –  JavaScript (or JSX)にHTMLを記述する –  Virtual DOMを活用することでパフォーマンスを向上 §  http://facebook.github.io/react/
  21. 21. #salesforcedevjp JSForce §  Salesforce API群のJavaScript Wrapperライブラリ –  非常に多くのSalesforce APIに対応 –  コマンドラインでも使用可能 §  https://jsforce.github.io/
  22. 22. #salesforcedevjp まとめ ▪  VisualforceでJavaScriptを使用する場合は ▪  HTML5の宣言 ▪  JavaScript Remoting ▪  Remote Object ▪  各フレームワークとも協調動作可能 ▪  Reveal.js, C3.js, D3.js, Angular.js , Isotope , React.js ▪  Salesforceと連携を行う前提のライブラリもある ▪  ngRemote ▪  jsForce
  23. 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/
  24. 24. #salesforcedevjp Survey よろしければ今後のWebinarの品質を向上させるための アンケートにご協力ください https://bit.ly/jp-vfjs
  25. 25. #salesforcedevjp 2015年2月12日(木) 19:00~ 丸の内JPタワー 12F Salesforce DUG Meetup #8 http://salesforcedugjapan.doorkeeper.jp/events/20400 直近のイベント
  26. 26. #salesforcedevjp Q & A アンケートLink: https://bit.ly/jp-vfjs Mitsuhiro Okamoto Developer Programs Manager @mitsuhiro Kazuyuki Kawamura Technical Solution Architect @kazkawamura
  27. 27. ありがとうございました JavaScriptとVisualforceの統合

×