VisualforceはSalesforceのアプリケーションにカスタムユーザインターフェースを作成するためのForce.comプラットフォームの新機能です。Visualforceを利用することで、Salesforceのインターフェースを利用したコンポーネントや、まったく独自のインターフェースを利用することが可能になります。

サインアップとプレビュー申込み

VisualforceはまだDeveloper Editionのみのプレビューで、さらに利用にはプレビュープログラムへの申込みが必要です。まずこちらからDeveloper Editionのアカウントを取得してください。アカウントが取得できたら、こちらのページからVisualforce Developer Previewに申込みを行います。

申込みが終了したら、Salesforceにログインし、[設定]リンクをクリックし、左側の[開発]メニューから新しく[ページ]という項目が増えていることを確認してください。これでVisualforceの利用が可能になりました。

開発者モードを有効化

Visualforceの開発を行うには、開発を行うログインユーザの開発者モードを有効にしておくと便利です。[設定] [私の個人情報] [個人情報]から[編集]をクリックし、[開発モード]チェックボックスにチェックを入れ、保存します。

開発者モードを有効化すると、まるでWikiを編集するような感覚でVisualforceページの作成を行うことができます。ページを作成するには、ブラウザのアドレスバーに対して以下のようなURLを入力します。

https://<salesforceHost>.salesforce.com/apex/PageName

ここで、PageNameという名前のVisualforceページが存在しない場合、エラーメッセージとともに新たに同名のVisualforceページを作成するかどうかを問い合わせるダイアログが表示されます。作成リンクをクリックすると、同URLに対してデフォルトのVisualforceページが作成されます。たとえばHelloWorldというページを作成する場合、

https://<salesforceHost>.salesforce.com/apex/HelloWorld

というURLをアドレスバーに入力します。

VisualforceでHelloWorld

ページが作成されると、デフォルトのグリーティングメッセージとともに、画面のフッター部位にPage Editorというボタンを含むバーが現れます。これをクリックすると、上下に画面が2分割され、Visualforceページのレンダリング結果とページ定義のソース画面とを同時に表示することができます。Visualforceページの開発者は、ページ定義画面のマークアップを直接編集することで、Visualforceの画面を確認しながら開発を行います。

デフォルトのグリーティングメッセージの代わりに、以下のようなコードを入力してみましょう。

<apex:page>
  Hello {!$User.FirstName}!
</apex:page>

以下のような形でログインユーザの名前が表示されるはずです。

このように、Visualforceページの中にはSalesforceの変数を{!変数名.プロパティ名}といった形で埋め込むことができます。これはSコントロールの差し込み項目と同様です。

標準コントローラを利用する

Visualforceではapex:pageマークアップタグの属性として、standardControllerという属性を指定できます。

<apex:page standardController="オブジェクト型名">

コントローラとは、Visualforceが利用するデータおよびビジネスロジックへのアクセスを提供するものです。標準コントローラはSalesforceアプリケーションのすべてのオブジェクトに備わっています。カスタムのビジネスロジックは記述できませんが、指定したオブジェクトの型に結びついて処理を行うことが可能です。

ここではこの標準コントローラを使用して、取引先責任者の詳細を表示するページを作成します。標準コントローラとは、どのデータを取得して表示するかというコンテキスト情報を指定するものだと考えてください。コンポーネントや差し込み項目の値はコントローラから渡されます。具体的なコードとして、HelloWorld Visualforceページに以下のような記述を追加します。

<apex:page standardController="Account">
    Hello {!$User.FirstName}!
    <p>You are viewing the {!account.Name} account.</p>
</apex:page>

この状態ではまだどの取引先を表示するかといったコンテキスト情報は指定されていませんので、レコードは表示されません。もっとも簡単にコンテキストを指定するためには、まず任意の取引先の詳細ページにアクセスして、そのURLを調べてください。例えば、詳細ページのURLが以下のような形式で与えられたとします。

https://na5.salesforce.com/0017000000Lneby

このURLから、取引先のIDが 0017000000Lneby であることがわかります。この値をコピーし、先ほどのVisualforceページのURLパラメータとして以下のような形で追加します。

https://na5.salesforce.com/apex/HelloWorld?id=0017000000Lneby

これによりVisualforceページにIDで指定された取引先の名前が表示されるのを確認してください。

Visualforceのコンポーネントライブラリを使用する

ここまでは、Visualforceのタグとして必須のタグであるapex:pageタグしか利用していませんでした。HTMLで画像や表を利用するのにimgタグやtableタグを利用するのと同様に、Visualforceのコンポーネントライブラリからさまざまなユーザインターフェースのコンポーネントをページの中で利用することができます。

Salesforceの標準詳細画面におけるセクションのような外観を実現する apex:pageBlock というコンテナタグがあります。先ほどのHelloWorldページを次のように変更してみましょう。

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!"> 
            You are viewing the {!account.Name} account.
    </apex:pageBlock> 
</apex:page>

すると以下のような結果が得られます。

Salesforceの標準インターフェースである詳細画面や関連リスト、入力項目などのコンポーネントを利用するためのタグもあります。詳細画面を表示するには、apex:detail タグを利用します。

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are viewing the {!account.Name} account.
    </apex:pageBlock>
    <apex:detail/> 
</apex:page>

apex:detailの属性に何も指定しない場合、コンテキストにあるレコードの詳細情報をそのまま表示します。タグに属性値を指定することで、どのレコードを表示するか、関連リストを表示するか、タイトルバーを表示するかなどの制御が可能です。

<apex:page standardController="Account">
    <apex:pageBlock title="Hello {!$User.FirstName}!">
        You are viewing the {!account.Name} account.
    </apex:pageBlock>
    <apex:detail subject="{!account.OwnerId}" relatedList="false" title="false"/> 
</apex:page>

その他利用可能なコンポーネントライブラリについて調べるには、Page EditorのComponent Referenceリンクをクリックするか、あるいは以下のURLから参照することも可能です。

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref.htm