Tune in to Trailblazers Innovate for Salesforce product news,
demos, and latest roadmaps. Register here.
close
進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

Visualforce ページの作成と編集

学習の目的

この単元を完了すると、次のことができるようになります。
  • Visualforce ページおよびその主要な属性について説明する。
  • 組織の既存の Visualforce ページをリストして開く。
  • 開発者コンソールを使用して Visualforce ページを作成および編集する。
  • Visualforce タグおよび属性をエディタで特定、追加、カスタマイズする。

Visualforce ページの作成の概要

Visualforce ページは、アプリケーション開発者にとって基本のビルディングブロックです。Visualforce ページは標準 Web ページに似ていますが、組織のデータのアクセス、表示、更新を行うための強力な機能が含まれています。従来の Web サーバの場合と同様に、一意の URL を介してページを参照したり呼び出したりできます。

Visualforce では、HTML に似たタグベースのマークアップ言語が使用されます。各 Visualforce タグは、ページのセクション、リストビュー、個々の項目など、大まかなユーザインターフェースコンポーネントときめの細かいユーザインターフェースコンポーネントのどちらにも対応しています。Visualforce には、約 150 個の組み込みコンポーネントがあり、開発者が独自のコンポーネントを作成できる方法が用意されています。Visualforce マークアップには、HTML マークアップ、CSS スタイル、JavaScript ライブラリを自由に混在させることができるため、アプリケーションのユーザインターフェースをかなり柔軟に実装できます。

Salesforce では、いくつかの異なる方法で Visualforce ページを表示、作成、編集できます。また、Salesforce API を使用して Visualforce ページを作成および変更して、さまざまな外部ツールを有効にすることもできます。

開発者コンソールでの Visualforce ページの作成

開発者コンソールを使用して、他の強力な Lightning Platform 開発ツールにアクセスできる Visualforce ページを作成および編集します。

開発者コンソールには、マークアップやコードを編集しやすくするために、構文の自動強調表示、タグのペアの照合、入力支援とオートコンプリート、スマートインデントなどの多くの機能が備えられています。同じページでしばらくの間作業する場合や、カスタムコントローラや長くて複雑なコードを含む Visualforce ページの場合に最適な組み込みツールです。

開発者コンソールで Visualforce ページを作成する手順は、次のとおりです。

  1. 自分の名前の下にある開発者コンソールまたはクイックアクセスメニュー (設定ギアアイコン) を開きます。開発者コンソールが、新しいウィンドウに表示されます。
  2. [File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。
  3. 新しいページの名前として「HelloWorld」と入力し、[OK] をクリックします。開発者コンソールで、新しい空白の Visualforce ページが開きます。
  4. エディタで、ページに次のマークアップを入力します。
    <apex:page>
        <h1>Hello World</h1>
    </apex:page>
  5. [File (ファイル)] | [Save (保存)] をクリックします。
  6. 新しいページを表示するには、[Preview (プレビュー)] をクリックします。ページが、新しいウィンドウで表示されます。このページプレビューには、Salesforce スタイル設定のないページが表示されます。Lightning Experience のコンテキストでページを表示するには、メインの Lightning Experience ブラウザウィンドウに戻ります。ブラウザの JavaScript コンソールを開いて次のコードを入力します。pageName をページ名に置き換えることを忘れないでください。
    $A.get("e.force:navigateToURL").setParams(
        {"url": "/apex/pageName"}).fire();
    この JavaScript は Lightning Experience の navigateToURL イベントを実行するもので、従来の /apex/PageName URL に入力することと同じです。この URL パターンをコードで確認することもできます。
  7. エディタで、一部のテキストをページに追加し、ページを保存します。開発者コンソール ページを保存するとプレビューウィンドウが自動的に更新され、変更内容が反映されます。今後は保存手順を省きますが、手順を完了するたびにページを保存してください。

[File (ファイル)] | [Open (開く)] をクリックすると、既存の Visualforce ページのリストが表示されます。ページをダブルクリックして開きます。また、Apex クラスとトリガ、Visualforce コンポーネントなどの他の Salesforce エンティティを開くこともできます。

入力支援機能を使用して属性を追加する

Visualforce コンポーネントの属性を設定して、その動作をカスタマイズします。入力支援機能を使用すると、属性や値を Visualforce コンポーネントタグにすばやく追加できます。

Visualforce タグで属性を追加および変更する手順は、次のとおりです。

  1. HelloWorld ページで、開く <apex:page> タグの内側 (閉じる「>」の直前) をクリックします。スペースに続けて「s」を入力します。入力支援機能により、入力内容の補完候補のリストが表示されます。他の文字の入力を進めると、一致する値に合わせて候補のリストが絞り込まれていきます。Visualforce 属性値の入力支援機能
  2. sidebar が選択されるまで、下矢印キーを押します。Enter キーを押します。サイドバー属性がマークアップの <apex:page> タグに追加され、入力支援機能により有効な値が表示されます。
  3. 矢印キーを使用するか「f」と入力して false を選択し、Enter キーを押します。コードは次のようになります。
    <apex:page sidebar="false">
        <h1>Hello World</h1>
    </apex:page>
  4. 変更内容を保存します。
  5. 上記の手順を繰り返して showHeader="false"<apex:page> タグに追加し、変更を保存します。コードは次のようになります。
    <apex:page sidebar="false" showHeader="false">
        <h1>Hello World</h1>
    </apex:page>

入力支援機能は、使用するコンポーネントや、各属性の内容と動作をすでに把握している場合に非常に効果的です。特に、Visualforce を学習しながら、「標準コンポーネントの参照」を頻繁に参照して、どのコンポーネントが存在するかを調べ、そのコンポーネントの動作や、使用およびカスタマイズする方法を学習する場合に便利です。

高度な操作

sidebarshowHeader 両方の属性は Lightning Experience では無効であり、Lightning Experience ヘッダーを抑制することはできません。showHeader のデフォルト値は true ですが、Lightning Experience では無効です。

ページには一部の Salesforce スタイルシートも引き続き含めることができるため、フォントやサイズなどを Salesforce の選択内容と同じにすることができます。Salesforce 出力をすべて抑制するには、standardStylesheets="false" を追加してスタイルも削除します。

ページ構造を形成するコンポーネントを追加および作成する

コンポーネントを Visualforce ページに追加し、それを並び替えてページの構造を作成します。

新しい Visualforce タグをページに追加し、それを使用してページ構造を作成する手順は、次のとおりです。

  1. HelloWorld ページで、<apex:pageBlock> コンポーネントをテキスト「Hello World」の下に追加します。<apex:pageBlock> は、ページ上の関連項目をグループ化する構造化されたユーザインターフェース要素です。入力支援機能を使用して追加し、title 属性を「A Block Title」に設定します。
  2. <apex:pageBlockSection> コンポーネントを <apex:pageBlock> コンポーネントの内側に追加します。title 属性を「A Section Title」に設定します。<apex:pageBlockSection> は、構造と階層をページに追加する別のコンポーネントです。<apex:pageBlockSection> 要素が表示されたら、ユーザはセクションタイトル以外のすべてを非表示にして折りたたむことができます。
  3. 「I'm three components deep!」などのテキストを <apex:pageBlockSection> コンポーネント内に追加します。コードは次のようになります。
    <apex:page>
        <h1>Hello World</h1>
        <apex:pageBlock title="A Block Title">
            <apex:pageBlockSection title="A Section Title">
                I'm three components deep!
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:page>
    最上位のタイトル、折りたたみ可能なタイトル付きセクション、プレーンテキストを含む構造を表示するページができました。ネストされたコンポーネントを含む簡単なページ
  4. 最初のコンポーネントの後に別の <apex:pageBlockSection> を追加し、title を「A New Section」に設定します。最初の <apex:pageBlockSection> と同様に、コンポーネントのボディにテキストを追加します。コードは次のようになります。
    <apex:page>
        <h1>Hello World</h1>
        <apex:pageBlock title="A Block Title">
            <apex:pageBlockSection title="A Section Title">
                I'm three components deep!
            </apex:pageBlockSection>
            <apex:pageBlockSection title="A New Section">
                This is another section.
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:page>
    <apex:pageBlockSection> タグは、<apex:pageBlock> タグ内でネストしています。子 <apex:pageBlockSection> タグは、親 <apex:pageBlock> タグ内に配置しない限り使用できません。
これで、ページの作成、ページへの属性とコンポーネントの追加、ページの構造とデザインを設定するためのコンポーネントの並び替えなど、ページ構造の形成の基礎をすべて学習しました。

もうひとこと...

開発者コンソールは、Salesforce 組織内で Lightning Platform 開発を行うための最も強力で機能が完全に装備されたツールです。
Salesforce で Visualforce ページを作成および編集するため、他にも 2 つの方法が組み込まれています。
  • 開発モードの「クイック修正」とフッターを使用して、新しいページの作成や、既存のページの簡単な編集をすばやく行う方法。簡単な変更を加えたり、新しいコードをアプリケーションページに組み込む前に、白紙状態でテストする簡単なページを作成したりする場合に効果的です。
  • 設定エディタを使用する方法。設定エディタを使用するには、[設定] で [クイック検索] ボックスに「Visualforce ページ」と入力し、[Visualforce ページ] を選択します。設定エディタは最も基本的なエディタですが、開発者コンソールまたは開発モードフッターでは使用できないページ設定にアクセスできます。

また、Eclipse のための Lightning Platform IDE プラグインなど、数多くの外部ツールもあり、Salesforce 組織に接続して Visualforce 開発に使用できます。

ページに追加した <apex:pageBlock> および <apex:pageBlockSection> コンポーネントにより、Salesforce Classic インターフェース要素と一致するユーザインターフェースがページに表示されます。また、<apex:pageBlockSectionItem><apex:pageBlockButtons> など、プラットフォームのビジュアルスタイルと一致させることが可能な他のコンポーネントもあります。<apex:pageBlockSection> 内にネストするのはどのコンポーネントでしょうか。

Visualforce には、広範囲にわたるユーザインターフェース要素と動作を提供する約 150 個の組み込みコンポーネントが含まれています。Visualforce の「標準コンポーネントの参照」では、これらのコンポーネントを一覧表示し、コンポーネントの使用方法を示すコード例を含む、コンポーネントの属性について記載しています。