Visualforce ページの新規作成

Visualforce ページを作成する

操作内容

  • シンプルな Visualforce ページを作成して、Design System が機能していることをテストします。

ステップ 1: ページを作成する

  1. 組織で、[Setup (設定)] に移動します。
  2. 左サイドバーで、[Quick Find (クイック検索)] ボックスに「pages」(ページ) と入力します。
  3. サイドバーで、[Visualforce Pages ( Visualforce ページ)][New (新規)] の順にクリックします。

フォームに次のように入力します。

  • Label (表示ラベル): Trailhead_SLDS_Contacts
  • Name (名前): (デフォルトで Trailhead_SLDS_Contacts)
  • [Save (保存)] をクリックします。

ステップ 2: 最初のマークアップを追加する

ページを作成したら、任意の作成ツールを使用して、ページに次のマークアップを追加します。

ヒント: Trailhead の任意のコードスニペットの上にある [Copy (コピー)] をクリックすると、簡単にコードをコピーして貼り付けられます。

<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" lang="en">
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="x-ua-compatible" content="ie=edge" />
      <title>Salesforce Lightning Design System Trailhead Module</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <!-- Import the Design System style sheet -->
      <apex:slds />
    </head>
    <apex:remoteObjects >
    <apex:remoteObjectModel name="Contact" fields="Id,Name,Title,LastModifiedDate,PhotoUrl"/>
    </apex:remoteObjects>
    <body>
      <!-- REQUIRED SLDS WRAPPER -->
      <div class="slds-scope">
        <!-- MASTHEAD -->
        <p class="slds-text-heading_label slds-m-bottom_small"> Salesforce Lightning Design System Visualforce Workshop </p>
        <!-- / MASTHEAD -->
        <!-- PAGE HEADER -->
        <!-- / PAGE HEADER -->
        <!-- PRIMARY CONTENT WRAPPER -->
        <div class="myapp slds-p-horizontal_medium">
          <ul id="contact-list" class="slds-has-dividers_bottom-space"></ul>
        </div>
        <!-- / PRIMARY CONTENT WRAPPER -->
        <!-- FOOTER -->
        <!-- / FOOTER -->
      </div>
      <!-- / REQUIRED SLDS WRAPPER -->
      <!-- JAVASCRIPT -->
      <!-- / JAVASCRIPT -->
    </body>
  </html>
</apex:page>
メモ

メモ

ドキュメントの head にある <apex:slds /> タグ: このタグが Design System のスタイルとアセットを Visualforce ページにインポートします。

外側の <div class="slds-scope"> ラッパー: ここで重要な点は、Lightning Design System のすべてのマークアップをこのラッパーでラップすることです。Design System のスタイルは、このラッパー内にある要素にのみ適用されます。

ステップ 3: プレビューする

ページを保存して、[Preview (プレビュー)] ボタンをクリックします。「Salesforce Lightning Design System の Visualforce ワークショップ」というシンプルなヘッダーが表示されます。

現時点ではほとんど何も表示されませんが、このページはプロジェクトの残りの重要な基盤になります。

プロジェクトではこの後、Design System の他のコンポーネントを使用して、このページのマークアップを段階的に拡張していきます。説明を簡潔にするために、Design System の各コンポーネントクラスの構造については詳述しませんが、Design System のWeb サイトに他のドキュメントへのリンクを掲載しています。

最初のマークアップを追加後の Visualforce ページのプレビュー

無料で学習を続けましょう!
続けるにはアカウントにサインアップしてください。
サインアップすると次のような機能が利用できるようになります。
  • 各自のキャリア目標に合わせてパーソナライズされたおすすめが表示される
  • ハンズオン Challenge やテストでスキルを練習できる
  • 進捗状況を追跡して上司と共有できる
  • メンターやキャリアチャンスと繋がることができる