この記事の目次
jQueryとは?

jQueryでできること
jQueryの主な特徴は、以下の3つができるところです。 1.ブラウザの違いを意識しなくても良い 2.HTMLのDOM操作が簡単に行える 3.Ajax処理が簡単に書けるブラウザの違いを意識しなくても良い
jQueryでは、ブラウザの違いを意識する必要はありません。 JavaScriptでは、Chrome、FireFox、Internet Explorer、Safariなど、各ブラウザで使用可能なメソッドや記述方法が異なる場合があり、ブラウザの違いを意識する必要がありました。 しかし、jQueryでは、ブラウザの違いを自動で吸収してくれるので、ブラウザの違いを意識せずにプログラミングが可能になります。HTMLのDOM操作が簡単に行える
jQueryでは、DOMの操作が簡単に実現できます。 DOMとは、「Document Object Model」の略で、プログラムからHTMLやXMLを自由に操作するための仕組みです。以下のような操作があり、jQueryではこれらの操作が簡単に実現できます。 1)テキストボックスの中身を取得したり変更できる 2)画面部品の表示をボタン一つで非表示できる 3)ユーザー操作に合わせてCSSを変更できるAjax処理が簡単に書ける
jQueryでは、Ajax処理を簡単に記述できます。 Ajaxとは、「Asynchronous JavaScript And XML」の略で、非同期通信のことを指します。HTMLとは無関係に裏方のJavaScriptプログラムだけでサーバと通信できるので、サーバとクライアントが通信中でも、ユーザーはHTML画面の操作が可能となります。jQueryでできないこと
jQueryでは、JavaScript内部における処理はできません。 jQueryは基本的にはHTMLのDOM操作やAjaxの記述するためのもので、JavaScript内部の処理はできません。JavaScript内部の処理は、JavaScriptコードで記述する必要があります。 例えば次のような処理です。 1.変数同士のたし算をする 2.配列データを操作する 3.オブジェクト型データを操作する 4.JavaScript内でループをするSalesforceでjQueryを使用する

静的リソースの作成
SalesforceのVisualforceページでjQueryを使用する場合、静的リソースを作成しアップロードします。 その手順を以下に説明します。 1.jQuery JavaScriptライブラリの最新版をダウンロードします。 2.Salesforceの「設定」→「クイック検索」ボックスに「静的リソース」と入力し、「静的リソース」を選択して「新規」を選びます。 3.「名前」には「jQuery」を入力します。 4.「ファイル選択」でダウンロードした最新版のjQueryを選択します。 5.「キャッシュコントロール」が表示される場合は「公開」を選択します。 6.「保存」します。 これで、jQueryを「{! $Resource.jQuery }」などの式で参照できます。また、静的リソースの参照を更新すれば、Visualforceページを変更することなく最新のjQueryに更新することが可能です。静的リソースをVisualforceページに追加
SalesforceのVisualforceページにjQueryを追加する方法を説明します。 「$Resource」グローバル変数と「.」表記で参照します。その手順を以下に説明します。 1.Salesforceの「File」→「New」→「Visualforce Page」を選択し、ページ名は「Hello JQuery」とします。 2.エディタで次のようなプログラムを記載します。<apex:page>
<!-- Add the static resource to page's <head> -->
<apex:includeScript value="{! $Resource.jQuery }"/>
<!-- A short bit of jQuery to test it's there -->
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#message").html("Hello from jQuery!");
});
</script>
<!-- Where the jQuery message will appear -->
<h1 id="message"></h1>
</apex:page>
3.「Preview」を開いてjQueryのメッセージ「Hello from jQuery!」が表示されるか確認します。
圧縮された静的リソースの作成
圧縮された静的リソースを作成して、関連ファイルをグループ化しておけば扱いが便利になります。 関連するアプリケーションアイコンやjQueryなどをグループ化し、ZIPファイルを作成しておけば、そのZIPファイルをアップロードすることで関連ファイルが使用できます。 その手順を以下に説明します。 1.jQuery Mobile JavaScriptライブラリの最新版をZIP形式でダウンロードします。 2.ZIPファイルを開いて「/demos/」ディレクトリとその中身を削除します。 3.フォルダを圧縮して「jquery.zip」という名前にします。 4.Salesforceの「設定」→「クイック検索」ボックスに「静的リソース」と入力し、「静的リソース」を選択して「新規」を選びます。 5.「名前」には「jQueryMobile」を入力します。 6.「ファイル選択」でjquery.zipを選択します。 7.「保存」します。圧縮された静的リソースをVisualforceページに追加
SalesforceのVisualforceページに圧縮された静的リソースを追加する方法を説明します。 圧縮された静的リソース内の参照は、「$Resource」グローバル変数と「URLFOR()」関数を使用します。以下はサンプルコードです。<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
<!-- Add static resources to page's <head> -->
<apex:stylesheet value="{!
URLFOR($Resource.jQueryMobile,'jquery/jquery.mobile-1.4.5.css')}"/>
<apex:includeScript value="{! $Resource.jQueryMobile }"/>
<apex:includeScript value="{!
URLFOR($Resource.jQueryMobile,'jquery/jquery.mobile-1.4.5.js')}"/>
<div style="margin-left: auto; margin-right: auto; width: 50%">
<!-- Display images directly referenced in a static resource -->
<h3>Images</h3>
<p>A hidden message:
<apex:image alt="eye" title="eye"
url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/eye-black.png')}"/>
<apex:image alt="heart" title="heart"
url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/heart-black.png')}"/>
<apex:image alt="cloud" title="cloud"
url="{!URLFOR($Resource.jQueryMobile, 'jquery/images/icons-png/cloud-black.png')}"/>
</p>
<!-- Display images referenced by CSS styles, all from a static resource. -->
<h3>Background Images on Buttons</h3>
<button class="ui-btn ui-shadow ui-corner-all
ui-btn-icon-left ui-icon-action">action</button>
<button class="ui-btn ui-shadow ui-corner-all
ui-btn-icon-left ui-icon-star">star</button>
</div>
</apex:page>
SalesforceでjQueryを活用しよう!

この記事の監修者・著者

-
未経験からITエンジニアへのキャリアチェンジを支援するサイト「キャリアチェンジアカデミー」を運営。これまで4500人以上のITエンジニアを未経験から育成・排出してきました。
・AWS、salesforce、LPICの合計認定資格取得件数:2100以上(2023年6月時点)
・AWS Japan Certification Award 2020 ライジングスター of the Year 受賞
最新の投稿
- 2023年11月21日キャリア・転職ITエンジニアへのキャリアチェンジに多い理由は?
- 2023年11月20日キャリア・転職フリーターからの就職でおすすめの職業は?
- 2023年11月20日キャリア・転職経理へのキャリアチェンジ転職・志望動機は?
- 2023年11月20日キャリア・転職法務からのキャリアチェンジおすすめの業界は?