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

CSS および JavaScript モバイルフレームワークの使用

学習の目的

この単元を完了すると、次のことができるようになります。
  • Visualforce ページのスタイル設定に Salesforce Lightning Design System (SLDS) を使用すべき理由を説明する。
  • 単一ページアプリケーションパターンを使用する Visualforce ページの開発に使用可能な JavaScript フレームワークを 2 つ以上挙げる。
  • Salesforce アプリケーション開発作業においてフレームワークで軽減可能な 2 つの技術的な課題について説明する。
  • モバイルフレームワークを組み込んだ Visualforce ページを作成する。

モバイルフレームワークの使用

モバイル Web フレームワークを使用すると、Salesforce アプリケーション向けの Visualforce ページの作成時に単一ページアプリケーションパターンを容易にサポートできます。

アプリケーションがさまざまな画面サイズに合わせて表示されるようにする作業は、単調になりがちです。最適なモバイル環境を提供するために、あらゆるユーザインターフェースコンポーネントにスタイルを設定しなければなりません。既存の CSS フレームワークを使用することで、こうした手間のかかる作業を省くことができます。モバイル向けに最適化されたユーザインターフェースを構築する場合は、Lightning Design System (SLDS) の使用をお勧めします。

Lightning Design System は CSS フレームワークで、Salesforce のこの新しいデザインを創出するために当社の開発者が使用しているアイコンやカラーパレット、フォントなどを利用できます。

他にも、Bootstrap、Ionic、and Ratchet といった CSS フレームワークが存在します。けれども、Salesforce アプリケーションとスタイルを一致させることが目的であれば、Lightning Design System がその手段になります。SLDS は継続的に更新されるため、常に Lightning Experience と一貫します。SLDS を他の CSS と併用して特殊なカスタマイズを行うことも可能です。

単一ページアプリケーションを完全に新規作成するには、複雑な作業が必要です。既存の JavaScript フレームワークを使用して、その複雑さのほとんどを軽減し、管理できます。単一ページアプリケーションアーキテクチャを使用して Visualforce ページを構築する場合は、AngularJSReact などの JavaScript フレームワークを使用できます。

これらのフレームワークは使用可能なオプションの数例にすぎません。いくつか異なるオプションを検討し、組織のスキルと要件に最も合うものを決定してください。作業の開始にあたって、ここではそのうちの 2 つを簡単に紹介します。Salesforce として推奨はしません。順を追って最初の数ステップを説明するだけです。開発方法を決めるのはあなたです。ここで紹介するオプションのいずれかを使用しても、独自のトレイルを進んでもかまいません。どちらにしても、ここで学習した原則がこの先役立つでしょう。

中級編

少なくとも検討すべきもう 1 つのオプションは、Lightning Component フレームワークです。これは、動的な単一ページアプリケーションを開発するための最新の UI フレームワークです。このフレームワークについては Visualforce という今回のトピックから外れるため、ここでは詳しく説明しません。詳細な比較および検討事項については、「Lightning Experience の開発」モジュールの単元を参照してください。

AngularJS

AngularJS は、Google が開発した人気の JavaScript フレームワークで、単一ページアプリケーションに適しています。AngularJS を使用すると、強力な組み込み機能で HTML を拡張し、開発およびテストプロセスを簡素化できます。

AngularJS の利点および他のサードパーティのフレームワークとの比較については、この単元のリソースを参照してください。

React

React は、インタラクティブ Web アプリケーションを構築するための JavaScript ライブラリです。React を使用すると、ページを再読み込みしなくてもページのデータを変更できる、高速かつ効率的なインターフェースを開発者が作成できます。

React の利点および他のサードパーティのフレームワークとの比較については、この単元のリソースを参照してください。

AngularJS と SLDS を使用したモバイル対応 Visualforce ページの作成

JavaScript フレームワークである AngularJS と Salesforce CSS フレームワークである SLDS (Salesforce Lightning Design System) を使用して、モバイル向けのインタラクティブ名刺のテンプレートを作成してみましょう。
  1. 開発者コンソールを開き、[File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。ページ名に「MobileFrameworks」と入力します。
  2. エディタで、コンテンツを次のコードで置き換えます。
    <apex:page showHeader="false" standardStylesheets="false" sidebar="false"
          applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    
      <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ng-app="MobileFrameworksApp">
        <head>
          <meta charset="utf-8" />
          <meta http-equiv="x-ua-compatible" content="ie=edge" />
          <title>SLDS Visualforce Page in Salesforce Mobile</title>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
    
          <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    
          <!-- Import the Design System style sheet -->
            <apex:slds />
        </head>
    
        <body>
        <!-- REQUIRED SLDS WRAPPER -->
          <div class="slds-scope">
                                
          <!-- PRIMARY CONTENT WRAPPER -->
    
          <!-- / PRIMARY CONTENT WRAPPER -->
    
        </div>
        <!-- / REQUIRED SLDS WRAPPER -->
    
        <!-- JAVASCRIPT -->
              <!-- / JAVASCRIPT -->
        </body>
      </html>
    </apex:page>
    このコードは、SLDS と AngularJS を使用する簡単なサンプルコードです。SLDS マークアップの多くは、以前の単元で記述した内容と似ています。次に、新しい AngularJS 要素を詳しく見ていきましょう。
    • <script> src 属性は、外部の AngularJS ファイルを指し示します。
    • ng-app ディレクティブは AngularJS に、「MobileFrameworksApp」が AngularJS アプリケーションのルート要素であることを伝えます。どの AngularJS アプリケーションにもルート要素が必要です。
  3. では、<!-- PRIMARY CONTENT WRAPPER --> タグの下に、入力項目と仮想名刺を作成するコードを追加しましょう。
      <div class="myapp">
    <!-- HEADING -->
      <div class="slds-text-heading_small slds-p-top_medium slds-p-bottom_medium">Virtual Business Card Template</div>
    <!-- / HEADING -->
    
    <!-- INPUT FIELDS -->
      <div class="slds-col slds-size--1-of-2 slds-small-size--1-of-6 slds-medium-size--1-of-6" >
        <input type="text" ng-model="yourName" placeholder="Name:" class="slds-input"/>
        <input type="text" ng-model="yourCompany" placeholder="Company Name:" class="slds-input"/>
        <input type="tel" ng-model="yourNumber" placeholder="Phone Number:" class="slds-input"/>
        <input type="email" ng-model="yourEmail" placeholder="Email:" class="slds-input"/>
      </div>
    <!-- / INPUT FIELDS -->
    
    <!-- BUSINESS CARD -->
      <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-3 slds-medium-size--1-of-3" >
        <div class="slds-box slds-m-top_x-large">
    
          <div class="slds-text-heading_large slds-text-align_center">{{ yourName }}</div>
          <div class="slds-text-heading--medium slds-text-align_center">{{ yourCompany }}</div>
    
          <!-- ICON -->
            <div class="slds-align_absolute-center">
              <span class="slds-icon_container slds-icon-standard-avatar
                           slds-icon-align_center slds-m-bottom_small slds-m-top_small">
                <svg aria-hidden="true" class="slds-icon">
                  <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#avatar')}"></use>
                </svg>
              </span>
            </div>                    
          <!-- / ICON -->
    
          <div class="slds-text-body_regular slds-text-align_center">{{ yourNumber }}</div>
          <div class="slds-text-body_regular slds-text-align_center">{{ yourEmail }}</div>
        </div>
      </div>
    
    <!-- / BUSINESS CARD -->
    </div>    
    • ng-model ディレクティブによって入力項目の値を変数にバインドできます。
    • AngularJS は、{{ yourInput }} 式を使用してモデルからコンテンツを表示します。この「Input」は各自の名前、会社、電話番号、メールです
  4. 最後に、次の JavaScript コードを追加します。
    <script>
      angular.module('MobileFrameworksApp', []);
    </script>
    • マークアップの JavaScript セクションにある angular.module('MobileFrameworksApp', []); コールは、AngularJS アプリケーションを保有するモジュールを定義します。AngularJS モジュールは、アプリケーションの起動時に実行される関数のコンテナです。
Visualforce ページをプレビューします。入力すると同時に名刺が動的に更新されていく様子を確認できます。これで Salesforce アプリケーションに Visualforce ページが表示されました。このページを Salesforce アプリケーションのどこに追加しようと思いますか? どのような方法で追加しますか? 今から 5 分で覚えたことをテストしてください。前回の単元を見直さなくても、このページを Salesforce アプリケーションに追加できますか?
retargeting