Visualforce + jQuery

Visualforce + jQuery
Force.com上でjQueryを有効活用
Riezel Ramos, Salesforce.com, Associate Sales Support Engineer
Kaz Kawamura, Salesforce.com, Technical Solution Architect

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.

今日の内容

・Javascript + jQuery
・Javascript + jQuery + Visualforce
・Javascript + jQuery + Visualforce + Imagination

自己紹介
ライゼールラモス (Riezel Ramos)
河村嘉之（Kaz Kawamura）
・出身：　フィリピン・会社：　Salesforce.com
・会社：　Salesforce.com ・仕事：　Technical Solution　Architect
・仕事：　Sales Support 　　　　　　
Engineer
・その他名前：　ライズ、ライコ、雷子この本の著者

Javascriptのないインターネット
・Facebook ：　メッセージとチャットが動かない
・Youtube：　ビデオが動かない

・Twitter ：　Tweetできない

・地図：　検索にリダイレクトされる

Javascriptがあるから、ウェブがインターアクティブになった

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>

問題：JavascriptだけでDOMの操作が難しい！

よく使うJavascriptの機
能をいくつまとめて、提
供しています。

jQueryでJavascriptをシンプルにする

Javascript
jQuery

var x = var x = $(‘#in1');
document.getElementById(‘in1’);

サンプル：http://jquery.com/

jQueryの良い点

・32KB (minified) ・jQuery UI
・CSS3のサポート・jQuery Mobile
・クロスブラウザーサポート
・jQuery Plugins

Javascript + jQuery +
force.com

まずは、jQueryライブラリをVFページから読みましょう
・静的リソースとして、アップロード
<script src=“{!$Resource.jQueryFile}”></script>
・CDNを使う
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>

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>

気を付けましょう！
$j = jQuery.noConflict();
　→他のライブラリとconflictしないため（標準Visualforceで使っているライブラリを含む）

Visualforce v.s. jQuery

Visualforce
jQuery

ページ
部品

Visualforce > jQuery
ボタンを押した時の
アクションなどを
基本はVFで
JavaScriptで記述
書いたページ

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の
意味に捉える
相性はあまり良くな
い…(以下略)

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に＋αを加える

Visualforce < jQuery

サーバサイドの
機能を呼び出し

ほぼHTMLで
そのまま記述

ページからforce.comにアクセス

• actionSupport
• actionFunction
• JavaScript Remoting

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で

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で

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っぽくコントローラのメソッドを呼べる
• より柔軟
• ただしコードは増える

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は一意で
なければいけ
ない

Javascript + jQuery +
Visualforce + Imagination
世界征服をしてやろう！！

Mini Page Hover デモ

・レコード名にhoverをしたら、詳細を表示する

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);
});

Mini Page Hover：　コード
アドバイス：
HTMLで作られているホームページコンポーネントのコードフォーマットが崩れるため、jsbeautifierみたいなツールを使うのがお
勧めです　（http://jsbeautifier.org/）

デモ
iPad アンケート作成用ツールデモ（iPad）
セールスフォース側

iPad側

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>

iPad アンケート作成用ツール（セールスフォース側）
アドバイス：
reRenderの使い方
ページの一部のみ、更新したい場合、
reRenderでapexタグのidを指定すれば、
指定したDOMしか更新されません。

reRenderを使う時に、できるだけ小さいDOMを
設定しないと、重くなる可能性があります。

<apex:actionFunction action="{!sortChoiceList}"
reRender="questionPanel"
name="sortChoiceList"
oncomplete="initSortable();" />
選択肢の順番を更新したいため、選択肢
を持っているパネルを更新します。全ペー
ジを更新したら、重くなりますので、小さい
範囲で更新したほうが良いです。

iPad アンケート作成用ツール（iPad側）
・jQuery + jQuery Mobile
・複数のプラットフォームで見えるページを
モバイル向けのUIで簡単に作成ができるので、
jQuery Mobileで作りました。

apex:repeatでページ、
質問、選択肢を
ループして表示している

Visualforce + jQuery

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Visualforce + jQuery

Similar a Visualforce + jQuery (20)

Más de Salesforce Developers Japan

Más de Salesforce Developers Japan (20)

Último

Último (11)

Visualforce + jQuery