進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

ナビゲーションメニューへの Visualforce ページの追加

学習の目的

この単元を完了すると、次のことができるようになります。
  • Visualforce ページをナビゲーションメニューに追加する。
  • Salesforce アプリケーションページの sforce.one ナビゲーションライブラリを参照する。
  • sforce.one ナビゲーションライブラリを使用して実行可能なナビゲーションアクションを 4 つ以上挙げて説明する。

Salesforce アプリケーションナビゲーションメニューへの Visualforce ページの追加

Salesforce アプリケーションナビゲーションメニューでは、アプリケーション間の移動、作成したオブジェクトへのアクセス、データの変更が可能です。ナビゲーションメニューは、通常、特定のレコードのコンテキストでは動作しない自己完結型のプロセスやアプリケーション全体に使用されます。Joe Smith の個別のレコードではなく、すべての取引先責任者データにアクセスすることを考えます。モバイル対応の Visualforce ページをメニューに追加できます。
では、最近変更された取引先 10 件にすばやくアクセスできるメニュー項目を作成しましょう。
Salesforce アプリケーションナビゲーションメニューの [Latest Accounts (最近の取引先)] ページ
メモ

メモ

この簡単な機能はコードを 1 行も書かずに作成できますが、これは学習と、今後自分でスキルを身に付けるうえでよい出発点となります。

Visualforce ページの作成

ナビゲーションメニュー項目の移動先として使用する Visualforce ページを作成します。

まず、ページにリンクするナビゲーションメニュー項目を作成する前に、ページそのものを作成しましょう。

  1. 開発者コンソールを開き、[File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。ページ名に「LatestAccounts」と入力します。
  2. エディタで、任意のマークアップを次のように置き換えます。
    <apex:page docType="html-5.0" title="Latest Accounts">
        
    <apex:remoteObjects>
        <apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/>
    </apex:remoteObjects>
        
    <div class="mypage">
        <h2>Latest Accounts</h2>
        <ul id="accountList"/>
    </div>    
        
    <script>
    var ul = document.getElementById("accountList");
    var account = new SObjectModel.Account();
    account.retrieve(
        {orderby: [{LastModifiedDate: 'DESC'}], limit: 10}, 
        function(error, records) {
            if (error) {
                alert(error.message);
            } else {
                var html = "";
                records.forEach(function(record) {
                    html = html + "<li><a data-id=" + record.get("Id") + ">" + 
                                   record.get("Name") + "</a></li>";
                });
                ul.innerHTML = html;
            }
        }
    );
    </script>
        
    </apex:page>
  3. [File (ファイル)] | [Save (保存)] をクリックします。
    今後は保存手順を省きますが、手順を完了するたびにページを保存してください。
ページを確認するために [Preview (プレビュー)] ボタンをクリックすると、開発者コンソールで新しいウィンドウが開き、ページが表示されます。ただし、Salesforce アプリケーションではなく、標準の Salesforce ユーザインターフェースに表示されるだけです。
Salesforce Desktop の [Latest Accounts (最近の取引先)] ページ

ページを確認する一番よい方法は、Salesforce アプリケーションに直接表示することです。次のステップでページをアプリケーションに追加します。

このコードの次の特性に注意してください。
  • 「Visualforce の基礎」モジュールを修了している場合、このページがそのモジュールで見た Visualforce コードとあまり似ていないことがわかるでしょう。Visualforce タグはほとんどなく、ページのほとんどが HTML と JavaScript です。この理由は別の単元で説明しますが、ここではその点に注目してください。
  • 標準コントローラ、というよりもコントローラが一切見当たりません。代わりに、このページでは Visualforce リモートオブジェクトを使用して取引先レコードを取得します。リモートオブジェクトは、数多くある組織データへのアクセス方法の 1 つです。優れたアクセス方法であり、このモジュールの間はリモートオブジェクトを使用します。

中級編

リモートオブジェクトが「優れたアクセス方法」で、ここで他のデータアクセス方法ではなくリモートオブジェクトを選んだ理由はあとで説明します。ここでは、一歩下がって Visualforce を使用して Salesforce データにアクセスして変更できる 3 つの方法を見ていきましょう。

標準の Visualforce
これが、「Visualforce の基礎」Trailhead モジュールで説明されている Visualforce です。組み込みコンポーネントと標準コントローラを使用して、数分もあればとても簡単にカスタム Web アプリケーションを作成できます。

標準の Visualforce は通常、帯域幅と待ち時間の状況が良好な組織の内部ネットワークで使用されるアプリケーションに適しています。他方、モバイルデバイス、特に信頼性が比較的低い接続では、標準の Visualforce にオーバーヘッドが発生してモバイルアプリケーションのパフォーマンスが低下する場合があります。速度が極めて重要であるため、Salesforce アプリケーションには他のいずれかのアプローチをお勧めします。

リモートオブジェクト
このモジュールを通して使用するリモートオブジェクトは、標準の Visualforce と同程度に使いやすく構築されていますが、モバイルアプリケーションなど他の使用事例向けに最適化されています。
リモートオブジェクトは、その 2 つの特性により、Salesforce アプリケーションでの使用に適しています。1 つ目は、標準の Visualforce に含まれるビューステートがないことです。ビューステートは、要求ごとにクライアントブラウザとサーバの間で受け渡される追加のデータです。標準の Visualforce が実装しやすい一因でもあるのですが、追加のデータと要求はモバイル接続の負担になりかねません。

2 つ目は、リモートオブジェクトが JavaScript ベースであることです。これにより、JavaScript を使用するさまざまなモバイルフレームワークと自然に連携できます。これについては、このモジュールの最後の単元で説明します。

JavaScript Remoting
JavaScript Remoting も、その名から想像できるとおり、JavaScript をベースにしています。ただし、リモートオブジェクトが単純明快である一方で、JavaScript Remoting は柔軟で強力です。JavaScript Remoting では、提供するアプリケーションエクスペリエンスを望むとおりに作成でき、それらのアプリケーションで最適なパフォーマンスを実現できます。一方でそのために、自分でより多くのコードを記述し、いくつか複雑な概念も習得しなければなりません

ここでは、リモートオブジェクトを使用します。JavaScript Remoting よりもシンプルですが、機能はそれを上回ります。リモートオブジェクトを使用して開発されたアプリケーションには多くの用途があり、ほとんどの要求の厳しいアプリケーションにとってリモートオブジェクトはよい選択肢となります。

Salesforce アプリケーションナビゲーションメニューへのページの追加

Salesforce アプリケーションナビゲーションメニューに Visualforce ページを追加するには、まずモバイルアプリケーション用にページを有効にします。次に、ページのタブを作成し、そのタブを Salesforce アプリケーションメニューに追加します。
  1. Visualforce ページを Salesforce モバイルアクセスで有効にします。
    1. [設定] から、[クイック検索] ボックスに「Visualforce ページ」と入力し、[Visualforce ページ] を選択します。
    2. リストで [LatestAccounts (最新の取引先)] Visualforce ページの横にある [編集] をクリックします。
    3. [Lightning Experience、Lightning コミュニティ、モバイルアプリケーションで利用可能] を選択します。
      モバイルアプリケーション用に Visualforce ページを有効にする
    4. [保存] をクリックします。
    この手順を、Salesforce アプリケーションで使用するページごとに実行する必要があります。これ以降、この手順を「モバイルアプリケーション用のページの有効化」と呼びます。
  2. Visualforce ページのタブを作成します。
    1. [設定] から、[クイック検索] ボックスに「タブ」と入力し、[タブ] を選択します。
    2. [Visualforce タブ] セクションで、[新規] をクリックします。
    3. [Visualforce ページ] ドロップダウンリストで、[LatestAccounts] を選択します。
    4. [タブの表示ラベル] 項目に「最近の取引先」と入力します。
      [タブ名] 項目は自動的に入力されます。
    5. [タブスタイル] 項目をクリックして [ビル] スタイルを選択します。
      このスタイルのアイコンは、Salesforce アプリケーションナビゲーションメニューのページのアイコンとして表示されます。
      Visualforce タブの作成
    6. [次へ] をクリックし、[次へ] をクリックしてから [保存] をクリックします。
    これで、[Latest Accounts (最近の取引先)] Visualforce ページを表示する新しいタブができました。タブを標準の Salesforce Web インターフェースまたは Salesforce アプリケーションに別個に追加できます。さっそくやってみましょう。
  3. タブを Salesforce アプリケーションナビゲーションメニューに追加します。
    1. [設定] から、[クイック検索] ボックスに「モバイルアプリケーション」と入力し、[Salesforce] | [Salesforce ナビゲーション]を選択します。
    2. [Latest Accounts (最近の取引先)] タブを選択し、[追加] をクリックします。
      [Latest Accounts (最近の取引先)] 項目が [選択済み] リストの一番下に追加されます。
    3. [保存] をクリックします。

ページが Salesforce アプリケーションで使用できるようになりました。やりました! では、実際に試してみましょう。

新しいナビゲーション項目およびページのテスト

ページとナビゲーションメニューへの変更を、Salesforce アプリケーションで表示してテストします。

Salesforce アプリケーションをテストする最もよい方法は、モバイルデバイスの Salesforce アプリケーションで表示することです。デスクトップ上でデバイスエミュレータを使用することもできます。

  1. モバイルデバイスで Salesforce アプリケーションを開きます。プルダウンしてアプリケーションを更新します。
  2. ナビゲーションメニュー をタップしてナビゲーションメニューにアクセスします。
    [アプリケーション] セクションの下に [Latest Accounts (最新の取引先)] が表示されます。
    Salesforce アプリケーションナビゲーションメニューの [Latest Accounts (最近の取引先)]
    メモ

    メモ

    • ブラウザバージョンを使用している場合、ブラウザを更新しないと、ナビゲーションメニューにこのページが表示されないことがあります。
    • モバイルアプリケーションを使用している場合、ログアウトしてから再度ログインしないと変更が反映されないことがあります。
  3. [Latest Accounts (最新の取引先)] をタップします。
    ページが読み込まれました。
    Salesforce アプリケーションの [Latest Accounts (最近の取引先)] ページ

これで完成です。このように、とても簡単に、モバイルユーザがページとタブを利用できるようにすることができます。

けれども、こうした取引先をクリックできればいいのにと思いませんか? では次にそれをやってみましょう。

sforce.one を使用したナビゲーションコントロールの追加

sforce.one ナビゲーション関数を使用して Salesforce アプリケーションナビゲーションシステムにページを接続します。

Salesforce アプリケーションで実行される Visualforce ページで、アプリケーションの他のページに対する操作やリンクが必要になることがあります。一般的なナビゲーション関数は sforce.one オブジェクトを介して使用できます。この JavaScript ユーティリティライブラリは、Salesforce アプリケーションで実行時に自動的に使用可能になります。

  1. 開発者コンソールを開き、[File (ファイル)] | [Open (開く)] をクリックしてページを開きます。
  2. ページのスクリプトブロックの最後、</script> 終了タグの前に次のコードを追加します。
    ul.addEventListener("click", function(e) {
        sforce.one.navigateToSObject(e.target.getAttribute("data-id"));
    });
  3. アプリケーションを再読み込みして変更を確認します。各自のページが表示されない場合は、モバイルアプリケーション向けのページをもう一度有効にします。
このミニアプリケーションは最初、変わったようには見えませんが、取引先をタップしてみてください。取引先の詳細ページに移動し、そこに取引先、取引先フィードなどが表示されます。さらに、sforce.one を使用して前に移動すると、Salesforce アプリケーションの [戻る] 矢印を使用して開始場所である [Latest Accounts (最近の取引先)] ページに戻ることもできます。

中級編

sforce.one で提供されるナビゲーション関数を使用すると、カスタムアプリケーション機能を全体的な Salesforce アプリケーションナビゲーションシステムに結び付けることができます。これにより、ページのナビゲーションは、まるで組み込み機能のように動作します。さまざまな sforce.one 関数を使用して、個々のレコード、特定のフィードやフィード項目、リストや関連リスト、さらには一般的な URL にまで移動できます。この便利なライブラリの詳細は、この単元のリソースを参照してください。

成功です。ですが、やや素っ気ないような気がします。そして、取引先をタップするのも気が引けます。次の単元では、Salesforce Lightning Design System を使用してページにスタイルを設定します。