本セクションにはSalesforce　ClassicのVisualforceページ、拡張コントローラー、カスタムコントローラー作成手順を紹介いたします。

Visualforceページ作成

本節には、標準コントローラーの使い方とVisualforceページ作成手順を説明します。

手順
1. 画面上部自分の名前の下にある「開発者コンソール」をクリックして、開発者コンソールが、新しいウィンドウに表示されます。
2. [File (ファイル)] | [New (新規)] | [Visualforce Page (Visualforce ページ)] をクリックします。
3. 「新しいページの名前」に「vf0001」を入力し、[OK] をクリックして、開発者コンソールで、新しい空白のVisualforceページが開きます。
4. エディタで、ページに「vf0001.vfp」のマークアップを入力します。
5. [File (ファイル)] | [Save (保存)] をクリックします。
6. 新しいページを表示するには、[Preview (プレビュー)] をクリックします。

作成したVisualforceページをプレビュー表示できますけど、通常運用の場合は、タブを作成し、利用するのは多いです。タブ作成手順はClassic基本知識ーオブジェクト、タグ、アプリケーション作成をご参照ください。
※該例に、標準コントローラー「Account」の単一レコード検索アクションを利用していますので、画面開く時、表示したいAccountのIDパラメータが必要です。なので、表示URLの最後に「id=任意な存在しているAccountのID」を追加しいと、画面のラベルしか表示しない、Accountの情報は表示できません。
※vf0002.vfpのマークアップは標準コントローラーのリストアクションを利用する例です。（考え：①デフォルトえどのビュー利用しますか、②ビューを指定できますか？）

vf0001.vfp

<apex:page standardController="Account">
        <head>
        <style>
          body {
            font-family: 'Arial Unicode MS';
          }
        </style>
    </head>
    <apex:pageBlock title="Account Summary">
        <apex:pageBlockSection >

            Name: {! Account.Name } <br/>
            Phone: {! Account.Phone } <br/>
            Industry: {! Account.Industry } <br/>
            Revenue: {! Account.AnnualRevenue } <br/>

        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

vf0002.vfp

<apex:page standardController="Contact" recordSetVar="contacts">
    <apex:pageBlock title="Contacts List">

        <!-- Contacts List -->
        <apex:pageBlockTable value="{! contacts }" var="ct">
            <apex:column value="{! ct.FirstName }"/>
            <apex:column value="{! ct.LastName }"/>
            <apex:column value="{! ct.Email }"/>
            <apex:column value="{! ct.Account.Name }"/>
        </apex:pageBlockTable>

    </apex:pageBlock>
</apex:page>

拡張コントローラー作成

拡張コントローラー作成手順
1. 「開発者コンソール」を起動する。
2. [File (ファイル)] | [New (新規)] | [Apex Class] をクリックします。
3. 「新しいクラスの名前」に「myControllerExtension」を入力し、[OK] をクリックして、開発者コンソールで、新しい空白のApex Classが開きます。
4. エディタで、ページに「myControllerExtension.apxc」のソースを入力します。
5. [File (ファイル)] | [Save (保存)] をクリックします。

myControllerExtension.apxc

public class myControllerExtension {

    private final Account acct;

    // The extension constructor initializes the private member
    // variable acct by using the getRecord method from the standard
    // controller.
    public myControllerExtension(ApexPages.StandardController stdController) {
        this.acct = (Account)stdController.getRecord();
    }

    public String getGreeting() {
        return 'Hello ' + acct.name + ' (' + acct.id + ')';
    }
}

検証Visualforceページ作成手順

「Visualforceページ作成」節の手順で、「vf0003.vfp」のVisualforceページを作成します。

vf0003.vfp

<apex:page standardController="Account" extensions="myControllerExtension">
    {!greeting} <p/>
    <apex:form>
        <apex:inputField value="{!account.name}"/> <p/>
        <apex:commandButton value="Save" action="{!save}"/>
    </apex:form>
</apex:page>

カスタムコントローラー作成

カスタムコントローラー作成手順

　　「拡張コントローラー作成」節の「拡張コントローラー作成手順」により「ContactsListController.apxc」Apex Classを作成します。

ContactsListController.apxc

public class ContactsListController {
    private String sortOrder = 'LastName';

    public List<Contact> getContacts() {

        List<Contact> results = Database.query(
            'SELECT Id, FirstName, LastName, Title, Email ' +
            'FROM Contact ' +
            'ORDER BY ' + sortOrder + ' ASC ' +
            'LIMIT 10'
        );
        return results;
    }
}

検証Visualforceページ作成手順

　　「Visualforceページ作成」節の手順で、「vf0004.vfp」のVisualforceページを作成します。

vf0004.vfp

<apex:page controller="ContactsListController">
    <apex:form>
        <apex:pageBlock title="Contacts List" id="contacts_list">

            <!-- Contacts List -->
            <apex:pageBlockTable value="{! contacts }" var="ct">
                <apex:column value="{! ct.FirstName }"/>
                <apex:column value="{! ct.LastName }"/>
                <apex:column value="{! ct.Title }"/>
                <apex:column value="{! ct.Email }"/>

            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>

カスタムコントローラー作成例の進階

　　カスタムコントローラー作成例の進階として、FirstNameとLastNameでソート機能を追加します。

「ContactsListController.apxc」Apex Classに下記メソードを追記します。

public void sortByLastName() {
    this.sortOrder = 'LastName';
}

public void sortByFirstName() {
    this.sortOrder = 'FirstName';
}

「vf0004.vfp」のVisualforceページを以下のように変更します。

<apex:column value="{! ct.FirstName }">
    <apex:facet name="header">
        <apex:commandLink action="{! sortByFirstName }" 
            reRender="contacts_list">First Name
        </apex:commandLink>
    </apex:facet>
</apex:column>
<apex:column value="{! ct.LastName }">
    <apex:facet name="header">
        <apex:commandLink action="{! sortByLastName }" 
            reRender="contacts_list">Last Name
        </apex:commandLink>
    </apex:facet>
</apex:column>

結果を試してみてください。

まとめ

　　本セクションにより、自分で簡単的にVisualforceページ作成、標準コントローラー利用、拡張とカスタムコントローラー作成をできたと思います。時間があれば是非trailhead上の関連モジュールとプロジェクトを研修してください。

参考資料

Trailhead: Visualforce の基礎
 標準コントローラ
 標準リストコントローラ
 カスタムコントローラおよびコントローラ拡張

【salesforce】Classic基本知識ーVisualforceページ作成

Visualforceページ作成

拡張コントローラー作成

カスタムコントローラー作成

カスタムコントローラー作成例の進階

まとめ

参考資料