Visualforce ページの新規作成
メモ
日本語で受講されている方へ
このバッジの Trailhead ハンズオン Challenge は英語で受講していただく必要があります。英語の意味についてはかっこ内の翻訳をご参照ください。Trailhead Playground では (1) [Locale (地域)] を [United States (米国)] に、[Language (言語)] を [English (英語)] に切り替えて、(2) 英語の値のみをコピーして貼り付けてください。こちらの指示に従ってください。
翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。
Visualforce ページを作成する
操作内容
- シンプルな Visualforce ページを作成して、Design System が機能していることをテストします。
ステップ 1: ページを作成する
- 組織で、[Setup (設定)] に移動します。
- 左サイドバーで、[Quick Find (クイック検索)] ボックスに
pages(ページ) と入力します。
- サイドバーで、[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 サイトに他のドキュメントへのリンクを掲載しています。
