連載第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●ページ新規作成
[画像のクリックで拡大表示]

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

図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!

この先は会員の登録が必要です。今なら有料会員(月額プラン)が4月末まで無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら