連載第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）。

図1●Force.comのMVCモデル
図1●Force.comのMVCモデル

■Model
　SObject（Forece.com上に保存されているデータ（標準／カスタム）の定義）や，Apexコードで作成されたデータ操作を担うクラスが相当します。

■View
　プレゼンテーション層に相当。表示，入出力を担当します。

■Controller
　ロジック層に相当。ユーザのボタン操作などのアクションを受付け，ViewとModelを制御します。Apexコードでクラスとして実装します。

Visualforceで開発するページ構成

　社内アンケートをユーザが回答するために，3つのページを作成します（図2）。

図2●画面遷移図
図2●画面遷移図

・有効なアンケート一覧ページ
・アンケート入力ページ
・アンケート入力確認ページ

有効なアンケートの一覧ページを作成する

　有効なアンケート一覧を表示するためのページ「QuestionnaireList」を最初に作成します。

Hello World！

1.［ファイル］→［新規］→［Visualforce Page］をクリックします（図3）

図3●ページ新規作成
図3●ページ新規作成
[画像のクリックで拡大表示]

2.［Label］に「QuestionnaireList」を入力します。

3.［Name］に「QuestionnaireList」を入力します。

4.［Version］は初期値をそのまま選択します。VersionはSalesforceの定期バージョンアップにより，上がっていきます。

5.［Template］は初期値の「Default」を選択します。

6.［終了］ボタンをクリックします（図4）。

図4●Create New Visualforce Page
図4●Create New Visualforce Page
[画像のクリックで拡大表示]

7.Visualforceページが作成されたことを確認します（図5）。

図5●作成された Visualforce Page
図5●作成された Visualforce Page
[画像のクリックで拡大表示]

8.QuestionnaireList.pageを右クリック→［プロパティ］をクリックします。次に，テキスト・ファイルのエンコードを「その他」とし，エンコードに「UTF-8」を選択し，［OK］ボタンをクリックします。「エンコードで競合が発生しました」の警告は，［はい］をクリックします（図6）。

図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!」が表示されれば成功です。

図7●Hello World!
図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>
図8●Hello World!
図8●Hello World!