2021/06/28

SalesforceのjQueryとは？jQueryでできること・できないこと・使い方を詳しくご紹介

この記事の目次

jQueryとは？
- jQueryでできること
- jQueryでできないこと
SalesforceでjQueryを使用する
SalesforceでjQueryを活用しよう！

jQueryとは？

jQueryとは、JavaScriptでできることを、より簡単に少ない記述でできるようにした、JavaScriptのライブラリのことです。 jQueryはJavaScriptを使いやすいように拡張したものです。例えば、1つの機能を実現するためにはJavaScriptだと10行ほどのコードが必要だった場合、jQueryを使用すれば1～2行ほどで済んでしまいます。 jQueryの登場によって開発が効率化され、JavaScriptを使用した複雑な記述が無くなったため、プログラミング初心者でもエンジニアとして活躍できるようになりました。

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を使用できます。 静的リソースを使用することでjQueryをSalesforceのVisualforceページで参照できます。静的リソースとは、アーカイブ(zip、jarファイルなど)、画像、スタイルシート、JavaScript、その他のファイルをSalesforceのVisualforceページで使用できるようにしたものです。

静的リソースの作成

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>