Visualforce + jQueryForce.com上でjQueryを有効活用Riezel Ramos, Salesforce.com, Associate Sales Support EngineerKaz Kawamura, Sale...
Safe harbor Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contai...
今日の内容・Javascript + jQuery・Javascript + jQuery + Visualforce・Javascript + jQuery + Visualforce + Imagination
自己紹介ライゼール ラモス (Riezel Ramos)	   河村 嘉之(Kaz Kawamura)	・出身: フィリピン                   ・会社: Salesforce.com・会社: Salesforce.com   ...
Javascript + jQuery
Javascriptのないインターネット	                       ・Facebook : メッセージとチャットが動かない	・Youtube: ビデオが動かない	                       ・Twitter...
Javascriptがあるから、ウェブがインターアクティブになった
Javascriptの役割:HTMLドキュメントを操作するため	      ウェブページ	                         <body>                                     <div>    ...
問題:JavascriptだけでDOMの操作が難しい!	                      よく使うJavascriptの機                      能をいくつまとめて、提                      供...
jQueryでJavascriptをシンプルにする	Javascript	                        jQuery	var x =                             var x = $(‘#in1);d...
jQueryの良い点	・32KB (minified)   ・jQuery UI・CSS3のサポート         ・jQuery Mobile・クロスブラウザーサポート	    ・jQuery Plugins
Javascript + jQuery +force.com
まずは、jQueryライブラリをVFページから読みましょう ・静的リソースとして、アップロード   <script src=“{!$Resource.jQueryFile}”></script> ・CDNを使う   <script src=“h...
Apex:includeScript OR script?	<apex:page showHeader="false">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1....
気を付けましょう!$j = jQuery.noConflict(); →他のライブラリとconflictしないため(標準Visualforceで使っているライブラリを含む)
Visualforce v.s. jQuery	         Visualforce	      jQuery	ページ	                                  部品
Visualforce > jQuery	          ボタンを押した時の           アクションなどを                            基本はVFで          JavaScriptで記述	   書い...
Visualforceの部品のIDを取るには?	                                                          階層がある場合は                                ...
Visualforce+jQuery 使いどころ	                                           生成されるコードでは                                            ...
Visualforce < jQuery	                         サーバサイドの                         機能を呼び出し	           ほぼHTMLで           そのまま記述
ページからforce.comにアクセス	 • actionSupport • actionFunction • JavaScript Remoting
actionSupport	                                      コントローラ                                      のメソッドを                    ...
actionFunction	                             コントローラの            名前を                             メソッドを指定	            付ける	<ap...
JavaScript Remoting	     コントローラ名.メソッド名で          呼び出し	        引数を  <script>              渡せる	       コールバック関数	  $(function(...
IDの工夫	<apex:page standardController="Account” recordSetVar="accounts"><apex:repeat value="{!accounts}" var="account">    <...
Javascript + jQuery +Visualforce + Imagination世界征服をしてやろう!!
Mini Page Hover               デモ ・レコード名にhoverをしたら、詳細を表示する
Mini Page Hover: コード var url = $(this).attr(‘href’) + ‘ div.bDetailBlock’;   //hoverしているレコードのURLを取得 $(‘#overlay’).load(url...
Mini Page Hover: コード アドバイス: HTMLで作られているホームページコンポーネントのコードフォーマットが崩れるため、jsbeautifierみたいなツールを使うのがお 勧めです (http://jsbeautifier.o...
デモ	  iPad アンケート作成用ツール             デモ(iPad)	セールスフォース側	                     iPad側
iPad アンケート作成用ツール(セールスフォース側)・jQuery + jQuery UI$( ".answerUL1" ).sortable({   start: function (e, ui) { },   update: functi...
iPad アンケート作成用ツール(セールスフォース側)	アドバイス:reRenderの使い方ページの一部のみ、更新したい場合、reRenderでapexタグのidを指定すれば、指定したDOMしか更新されません。reRenderを使う時に、できる...
iPad アンケート作成用ツール(iPad側)	・jQuery + jQuery Mobile・複数のプラットフォームで見えるページをモバイル向けのUIで簡単に作成ができるので、jQuery Mobileで作りました。             ...
Visualforce + jQuery
Upcoming SlideShare
Loading in …5
×

Visualforce + jQuery

6,936 views

Published on

2012年12月6日 Cloudforce Japan Developer Zone内のシアターで講演された資料です。

Published in: Technology

Visualforce + jQuery

  1. 1. Visualforce + jQueryForce.com上でjQueryを有効活用Riezel Ramos, Salesforce.com, Associate Sales Support EngineerKaz Kawamura, Salesforce.com, Technical Solution Architect
  2. 2. 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.
  3. 3. 今日の内容・Javascript + jQuery・Javascript + jQuery + Visualforce・Javascript + jQuery + Visualforce + Imagination
  4. 4. 自己紹介ライゼール ラモス (Riezel Ramos) 河村 嘉之(Kaz Kawamura) ・出身: フィリピン ・会社: Salesforce.com・会社: Salesforce.com ・仕事: Technical Solution Architect・仕事: Sales Support       Engineer ・その他名前: ライズ、ライコ、雷子 この本の著者
  5. 5. Javascript + jQuery
  6. 6. Javascriptのないインターネット ・Facebook : メッセージとチャットが動かない ・Youtube: ビデオが動かない ・Twitter : Tweetできない ・地図: 検索にリダイレクトされる
  7. 7. Javascriptがあるから、ウェブがインターアクティブになった
  8. 8. Javascriptの役割:HTMLドキュメントを操作するため ウェブページ <body>            <div>                      <input  type=“text”  id=“in1”/> HTML: 構造            </div> </body> <script  type=“text/javascript”>          var  foo  =  document.getElementById(“in1”); Javascript: アクション        foo.addEventListener(“click”,  alert(“アロハ!”),  false); </script> <style>          body{ CSS: スタイル                      background:  pink;          } </style>
  9. 9. 問題:JavascriptだけでDOMの操作が難しい! よく使うJavascriptの機 能をいくつまとめて、提 供しています。
  10. 10. jQueryでJavascriptをシンプルにする Javascript jQuery var x = var x = $(‘#in1);document.getElementById(‘in1’); サンプル:http://jquery.com/
  11. 11. jQueryの良い点 ・32KB (minified) ・jQuery UI・CSS3のサポート ・jQuery Mobile・クロスブラウザーサポート ・jQuery Plugins
  12. 12. Javascript + jQuery +force.com
  13. 13. まずは、jQueryライブラリをVFページから読みましょう ・静的リソースとして、アップロード <script src=“{!$Resource.jQueryFile}”></script> ・CDNを使う <script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
  14. 14. Apex:includeScript OR script? <apex:page showHeader="false"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <apex:includeScript value="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"/></apex:page>
  15. 15. 気を付けましょう!$j = jQuery.noConflict(); →他のライブラリとconflictしないため(標準Visualforceで使っているライブラリを含む)
  16. 16. Visualforce v.s. jQuery Visualforce jQuery ページ 部品
  17. 17. Visualforce > jQuery ボタンを押した時の アクションなどを 基本はVFで JavaScriptで記述 書いたページ
  18. 18. Visualforceの部品のIDを取るには? 階層がある場合は 階層も指定 !$Component.コン<apex:outputPanel id="thePanel"></apex:outputPanel> ポーネントのIDを指定 document.getElementById("{! $Component.thePanel}").innerHTML = result; j_id0:thePanel $("#{! $Component.thePanel}").text(res ult); 注意! IDに:が入ると これは動かない jQueryは別の 実はjQueryとVFの 意味に捉える 相性はあまり良くな い…(以下略)
  19. 19. Visualforce+jQuery 使いどころ 生成されるコードでは class属性になる <apex:form > Weekday <apex:inputCheckBox value="{!weekday}" styleClass="days"/> Satday <apex:inputCheckBox value="{!satday}" styleClass="days"/> Sunday <apex:inputCheckBox value="{!sunday}" styleClass="days"/> <input type="button" id="check" value="check all"/></apex:form> $(#check).click(function() { $(.days).attr(checked, checked); }); classを指定して 一括処理 UIに+αを加える
  20. 20. Visualforce < jQuery サーバサイドの 機能を呼び出し ほぼHTMLで そのまま記述
  21. 21. ページからforce.comにアクセス • actionSupport • actionFunction • JavaScript Remoting
  22. 22. actionSupport コントローラ のメソッドを イベントを 呼び出す 指定 <apex:inputText value="{!recordInputText}"> <apex:actionSupport action="{!refresh}" event="onchange” reRender="parentPanel"> <apex:param assignTo="{!var1}" value="{!recordId}" name="recordParam"/> </apex:actionSupport> </apex:inputText> イベントの発生に合わせて、コントローラのメソッドを呼び出す • JavaScriptを書かずにイベント処理を実現 • 結果はreRenderで
  23. 23. actionFunction コントローラの 名前を メソッドを指定 付ける <apex:actionFunction action="{!methodOne}" name="methodOneInJavascript" rerender="showstate"> <apex:param name="firstParam" assignTo="{!state}" value="" 指定した名前で /></apex:actionFunction> JavaScriptから 呼び出し <script> function clickOne(){ methodOneInJavaScript(); } </script> コントローラのメソッドに名前を付けてJavaScriptから利用できるようにする • 結果はreRenderで
  24. 24. JavaScript Remoting コントローラ名.メソッド名で 呼び出し 引数を <script> 渡せる コールバック関数 $(function() { HelloRemote.sayHello(World, function(result, event) { $(#out).text(result); }); }); </script> global class HelloRemote { @RemoteAction global static String sayHello(String name) { リモートアクセス可能な メソッドをアノテーション return Hello + name + !; でマーク } } よりJavaScriptっぽくコントローラのメソッドを呼べる • より柔軟 • ただしコードは増える
  25. 25. IDの工夫 <apex:page standardController="Account” recordSetVar="accounts"><apex:repeat value="{!accounts}" var="account"> <div id=”acct_{!account.id}">{!account.name}</div></apex:repeat></apex:page> SFIDをうまく活用 すると一意性を確 <div id=”acct_001A00000090CmoIAE">A商事</div> 保するのが容易 <div id=”acct_001A000000RQgHkIAL”>B商事</div> <div id=”acct_001A000000EaawzIAB">A商事</div> IDは一意で なければいけ ない
  26. 26. Javascript + jQuery +Visualforce + Imagination世界征服をしてやろう!!
  27. 27. Mini Page Hover デモ ・レコード名にhoverをしたら、詳細を表示する
  28. 28. Mini Page Hover: コード var url = $(this).attr(‘href’) + ‘ div.bDetailBlock’; //hoverしているレコードのURLを取得 $(‘#overlay’).load(url, function () { //#overlayのdivにURLをロードする setTimeout(function () { //overlayを表示する   $(‘#overlay’).show(); }, 200); });
  29. 29. Mini Page Hover: コード アドバイス: HTMLで作られているホームページコンポーネントのコードフォーマットが崩れるため、jsbeautifierみたいなツールを使うのがお 勧めです (http://jsbeautifier.org/)
  30. 30. デモ iPad アンケート作成用ツール デモ(iPad) セールスフォース側 iPad側
  31. 31. iPad アンケート作成用ツール(セールスフォース側)・jQuery + jQuery UI$( ".answerUL1" ).sortable({ start: function (e, ui) { }, update: function (e, ui) { /*更新時にこのメッソドを行う */ $( “.answerUL .choiceLabel1”).each( function(){ /* 各選択肢のソート番号を更新する */ $(this).find(".choiceSortNumber").val($(this).index()+1); }); /* apexコントローラーを呼び出し、ソート番号を更新する */ sortChoiceList( /*パラメータ省略 */);} });<apex:actionFunction action="{!sortChoiceList}" reRender="questionPanel" name="sortChoiceList"oncomplete="initSortable();" > /* パラメータ省略 */</apex:actionFunction>
  32. 32. iPad アンケート作成用ツール(セールスフォース側) アドバイス:reRenderの使い方ページの一部のみ、更新したい場合、reRenderでapexタグのidを指定すれば、指定したDOMしか更新されません。reRenderを使う時に、できるだけ小さいDOMを設定しないと、重くなる可能性があります。<apex:actionFunction action="{!sortChoiceList}" reRender="questionPanel" name="sortChoiceList" oncomplete="initSortable();" /> 選択肢の順番を更新したいため、選択肢 を持っているパネルを更新します。全ペー ジを更新したら、重くなりますので、小さい 範囲で更新したほうが良いです。
  33. 33. iPad アンケート作成用ツール(iPad側) ・jQuery + jQuery Mobile・複数のプラットフォームで見えるページをモバイル向けのUIで簡単に作成ができるので、jQuery Mobileで作りました。 apex:repeatでページ、 質問、選択肢を ループして表示している

×