Skip to main content
3 月 5 日～ 6 日にサンフランシスコで開催される TDX (Salesforce+ でも配信) で「Developer Conference for the AI Agent Era (AI エージェント時代に向けた開発者向けカンファレンス)」にぜひご参加ください。お申し込みはこちら。

ハイブリッドアプリケーションでの Salesforce データへのアクセス

学習の目的

この単元を完了すると、次のことができるようになります。

  • force.js ライブラリを使用して、ハイブリッドアプリケーションから Salesforce REST API にアクセスする。
  • Apex コントローラーを使用して、ハイブリッドリモートアプリケーションから Salesforce データにアクセスする。

force.js を使用した Salesforce API へのアクセス

ContactExplorer アプリケーションの説明で、force.js ライブラリの動作を確認しました。このライブラリには Salesforce レコードを操作する豊富な機能のセットが用意されています。作成、削除、更新、更新/挿入に加えて、SOQL クエリ、SOSL 検索、メタデータ記述、ファイル管理もサポートされています。

force.js とその他の Mobile SDK JavaScript ライブラリは SalesforceMobileSDK-Shared/libs と SalesforceMobileSDK-Shared/dependencies の GitHub リポジトリからダウンロードできます。

このトレイルではモバイルデバイスの自己完結型ハイブリッドアプリケーションであるハイブリッドローカルアプリケーションに焦点を絞っていますが、ハイブリッドリモートアプリケーションを作成することもできます。ハイブリッドリモートアプリケーションは、Salesforce サーバーから Visualforce ページを読み込み、それらのページを再度書式設定してモバイルデバイスに表示します。ソースコードはサーバーに残されるか、サーバーとデバイス間で分割されます。
メモ

ハイブリッドリモートアプリケーションを作成する場合、forcehybrid スクリプトによって開始ページの指定を促すメッセージが表示されます。/apex/ で始まる Visualforce ランディングページへの相対パスを入力します。たとえば、ランディングページのアドレスが https://<MyDomainName>--<PackageName>.vf.force.com/apex/BasicVFPage の場合は、/apex/BasicVFPage と入力します。

force.js と Mobile SDK を使ってみる

まずは、重要なアプリケーションリソースを Salesforce クラウドにアップロードします。

  1. cordova.js、force.js、およびプロジェクトに必要な他の静的リソースを含む、ZIP ファイルなどのアーカイブファイルを作成します。
  2. Salesforce で、[あなたの名前] | [アプリケーションの設定] | [開発] | [静的リソース] からアーカイブファイルをアップロードします。

単純な Visualforce ページの例

次のコードは、ほぼすべて Apex コードと JavaScript コードで定義された単純な Visualforce ページです。このロジックの概要は ContactsApp JavaScript コードと同じになります。force.js を読み込み、セッションを初期化してから、SOQL クエリを非同期の force.query() メソッドに渡します。クエリが正常に実行されると、アプリケーションに最初に取得した HTML <span> タグの Name 項目が表示されます。
<apex:page docType="html-5.0" sidebar="false" showHeader="false" 
    contentType="text/html" applyHtmlTag="false" applyBodyTag="false" 
    standardStylesheets="false" cache="true">
<html>
    <head>
      <meta charset="utf-8"></meta>
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"></meta>
      <apex:includeScript value="{!URLFOR($Resource.Easy, 'cordova/cordova.js')}"  />
      <apex:includeScript value="{!URLFOR($Resource.Easy, 'libs/force.js')}"  />
      <script>
(function() {
    /* Do login */
    force.login(
        function() {
            console.log("Auth succeeded"); 
            showUsersList();
        },
        function(error) {
            console.log("Auth failed: " + error); 
        }
    );
    /* This method will render a list of users from current salesforce org */
    var showUsersList = function() {
        fetchRecords(function(data) {
            var users = data.records;
            var listItemsHtml = '';
            for (var i=0; i < users.length; i++) {
                listItemsHtml += ('<li class="table-view-cell"><div class="media-body">' + 
                    users[i].Name + '</div></li>');
            }
            document.querySelector('#users').innerHTML = listItemsHtml;
        })
    }
    /* This method will fetch a list of user records from salesforce. 
    Just change the soql query to fetch another sobject. */
    var fetchRecords = function (successHandler) {
        var soql = 'SELECT Id, Name FROM User LIMIT 10';
        force.query(soql, successHandler, function(error) {
            alert('Failed to fetch users: ' + error);
        });
    };
})();
      </script>
    </head>
    <body>
      <header>
         <h1>Hello, Visualforce!</h1>
      </header>
        <!-- Placeholder to add users list -->
      <ul id="users">
      </ul>
      <p>Welcome to Mobile SDK.</p>
    </body>
</html>
</apex:page>

ハイブリッドリモートアプリケーションでの Apex コントローラーの使用

ハイブリッドリモートアプリケーションでは、通常、Visualforce ページとそれに関連する Apex コントローラーを通じて Salesforce データにアクセスします。Visualforce ページに JavaScript コードが含まれている場合、そのコードはサーバー側 Apex コントローラーとやりとりを行ったり、データを共有したりできます。

Apex では、JavaScript から Apex コントローラーメソッドを呼び出す方法として次の 2 つがサポートされています。どちらの手法も AJAX 要求を使用して JavaScript から Apex コントローラーメソッドを直接呼び出します。JavaScript コードは Visualforce ページ上でホストする必要があります。
apex:actionFunction に比べて、JavaScript Remoting にはいくつかの利点があります。
  • apex:actionFunction に比べて柔軟性に富み、パフォーマンスが高い。
  • Apex コントローラーメソッドでパラメーターと戻り値の型がサポートされ、Apex と JavaScript 間でデータ型の対応付けが自動的に行われる。
  • コールバックで非同期処理モデルを使用する。
  • apex:actionFunction と異なり、AJAX 要求に Visualforce ページのビューステートが含まれない。この結果、往復速度が速くなります。
ただし、apex:actionFunction に比べて、JavaScript Remoting ではより多くのコードを作成する必要があります。

次の例では、Visualforce ページの <script> タグに JavaScript コードを挿入しています。このコードは、Visualforce Remoting マネージャーオブジェクトで invokeAction() メソッドをコールします。Apex コントローラーオブジェクト objName で getItemId() という名前の関数をコールするのに必要なメタデータを invokeAction() に渡します。invokeAction() は非同期で実行されるため、getItemId() から返される値を処理するコールバック関数もコードで定義します。Apex コントローラーでは、@RemoteAction アノテーションにより、外部の JavaScript コードに getItemId() 関数が公開されます。

//Visualforce page code
<script type="text/javascript">
     Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.MyController.getItemId}',
        objName,
        function(result, event){
            //process response here
        },
        {escape: true}
    );
<script>
//Apex Controller code
@RemoteAction
global static String getItemId(String objectName) { ... }

getItemId() メソッドでは、たとえば、Salesforce API をコールして、戻り値を JavaScript 内に取得できます。

Salesforce ヘルプで Trailhead のフィードバックを共有してください。

Trailhead についての感想をお聞かせください。[Salesforce ヘルプ] サイトから新しいフィードバックフォームにいつでもアクセスできるようになりました。

詳細はこちら フィードバックの共有に進む