連載第4回では，EclipseにForce.com IDEを組み込み，Apexコードによるビジネスロジックの作成・テストを説明しました。今回は，Force.comが備える重要かつ強力な機能である，Visualforceを利用して，ユーザー独自のユーザー・インタフェースを構築します。なお，Visualforceの開発環境は，Force.com Builderにも含まれますが，第4回連載と同様にEclipseのPlug-In（Froce.com IDE）を利用します。
Visualforceとは，HTMLに似たタグベースのユーザー・インタフェース作成用マークアップ言語です。Webアプリケーション開発では広く普及している，MVCモデルを採用しています（図1）。
■Model
SObject（Forece.com上に保存されているデータ（標準／カスタム）の定義）や，Apexコードで作成されたデータ操作を担うクラスが相当します。
■View
プレゼンテーション層に相当。表示，入出力を担当します。
■Controller
ロジック層に相当。ユーザのボタン操作などのアクションを受付け，ViewとModelを制御します。Apexコードでクラスとして実装します。
Visualforceで開発するページ構成
社内アンケートをユーザが回答するために，3つのページを作成します（図2）。
・有効なアンケート一覧ページ
・アンケート入力ページ
・アンケート入力確認ページ
有効なアンケートの一覧ページを作成する
有効なアンケート一覧を表示するためのページ「QuestionnaireList」を最初に作成します。
Hello World！
1.［ファイル］→［新規］→［Visualforce Page］をクリックします（図3）
図3●ページ新規作成
[画像のクリックで拡大表示]
2.［Label］に「QuestionnaireList」を入力します。
3.［Name］に「QuestionnaireList」を入力します。
4.［Version］は初期値をそのまま選択します。VersionはSalesforceの定期バージョンアップにより，上がっていきます。
5.［Template］は初期値の「Default」を選択します。
6.［終了］ボタンをクリックします（図4）。
図4●Create New Visualforce Page
[画像のクリックで拡大表示]
7.Visualforceページが作成されたことを確認します（図5）。
図5●作成された Visualforce Page
[画像のクリックで拡大表示]
8.QuestionnaireList.pageを右クリック→［プロパティ］をクリックします。次に，テキスト・ファイルのエンコードを「その他」とし，エンコードに「UTF-8」を選択し，［OK］ボタンをクリックします。「エンコードで競合が発生しました」の警告は，［はい］をクリックします（図6）。
図6●テキスト・ファイルのエンコード変更
[画像のクリックで拡大表示]
Windows環境で使用している場合，デフォルトで「Shift_JIS」が設定されています。このまま開発を続けると，日本語で表記した個所が文字化けしてしまいますので，忘れず設定を変更します。
9.コードをリスト1のように修正してみます。Visualforceページは，<apex:> で始まるVisualforce固有のものと，<b></b>のようなHTMLのタグとを組み合せて記述します。
リスト1●QuestionnaireList.page
<apex:page >
<b>Hello World!</b>
</apex:page>
10.連載第3回で作成したForce.com組織にログインし，Force.comインスタンスのURLの末尾に「/apex/QuestionnaireList」を追加します。例えば，Force.comインスタンスが「https://na6.salesforce.com/」の場合には，「https://na6.salesforce.com/apex/QuestionnaireList」となります。図7のように「Hello World!」が表示されれば成功です。
11.次に変数を使用して，Force.com内のデータなどをForce.com環境から取得することが可能です。ここでは，グローバル変数$Userと，Userオブジェクトのデータ項目FirstNameを使用して名前を表示してみます（リスト2，図8）。リストの太字が変更個所になります。
リスト2●QuestionnaireList.page
<apex:page >
<b>Hello {!$User.FirstName} !</b>
</apex:page>
