Visualforce の概要

摘要

Visualforce は、Force.com プラットフォームで使用するコンポーネントベースのユーザインターフェースフレームワークです。このフレームワークには、HTML に似たタグベースのマークアップ言語が用意されています。各タグは、セクションのページ、項目など、大小さまざまな規模のユーザインターフェースコンポーネントに対応します。Visualforce には 60 以上もの組み込みコンポーネントがあり、開発者がカスタムのコンポーネントを作成するためのメカニズムを提供します。

Visualforce では、広く普及している MVC (Model-View-Controller: モデル-ビュー-コントローラ) パラダイムを採用しており、データベースオブジェクトを自動生成型のコントローラで制御するオプションも用意しているため、データベースとの緊密な統合を簡単に行えます。カスタムのコントローラの作成や既存のコントローラの拡張は、Apex コードを介して実行できます。また、AJAX をサポートし、アクション、データ、コンポーネントのバインド処理を行う数式言語を提供します。

このドキュメントでは、Visualforce の概要を紹介します。主要な機能について説明するほか、MVC パラダイムの実装例、データベースの統合方法、カスタムコンポーネントの作成方法などを取り上げます。

Visualforce の動作

Visualforce ページは、コンポーネント、HTML、各種スタイル要素を Force.com プラットフォーム上で組み合わせて作成します。作成した Visualforce ページには、一意の URL を割り当てます。ユーザがページにアクセスすると、Force.com によってページが表示されます。

図に示すように、Force.com 上に作成された Visualforce ページは、データベースとの通信、外部 Web サービスの呼び出しなど、ページのロジックに応じた処理を経た後、クライアント (ブラウザ) に表示されます。Visualforce ページには、次のような特徴があります。

モバイル機器用、タッチスクリーン機器用など、さまざまなクライアントブラウザのタイプに応じて動作する
すべての機能がサーバ (Force.com) 上で実行されるため、クライアント側でコールバックを行うことなく、完全なページを参照できる
あらゆる Web サービスに対して実行可能なサーバサイドでのコールアウトがオプションでサポートされている

続いて、Visualforce の仕組みを詳しく見ていきます。

Visualforce と MVC モデル

このセクションでは、単純な構造の Visualforce ページを取り上げ、MVC モデルの特性について解説します。シンプルな例を使って Visualforce に触れてみます。以下は、Visualforce ページのコードです。

<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="Edit Account for {!$User.FirstName}">
            <apex:pageMessages/>
            <apex:pageBlockButtons>
                <apex:commandButton value="Save" action="{!save}"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection>
                <apex:inputField value="{!account.name}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

page コンポーネントは、そのページが Visualforce ページであることを示します。standardController 属性は、ページで自動生成型の標準コントローラテクノロジを使用できることを示します。pageBlock、pageBlockButtons、pageBlockSection の各タグは、Salesforce CRM の標準のスタイルをページのセクションに適用します。inputField は、項目の種別に応じて適切な入力要素を生成します。commandButton は、ボタンを表示します。このコードでは、ボタンをクリックすると save() というメソッドがコントローラに呼び出されます。ブラウザでこのページにアクセスすると、Force.com によって次のようなページが表示されます。

このページでは、次のような処理が行われます。

Account コントローラが、要求に含まれるレコード ID に従ってデータベースからレコードを取得し、Visualforce ページに提供する (自動生成)
$User 変数が、現在ログインしているユーザの詳細情報へのアクセスを提供する
{!account.name} 式が、[Account (取引先)] オブジェクトの [Account Name (取引先名)] 項目に関連付けられたメタデータを取得し、適切な入力要素を表示して、データベースから取得した取引先の値を初期値として設定する
[Account (取引先)] の [Account Name (取引先名)] 項目のラベルを自動的に取得し、pageBlockSection にネストされた inputField コンポーネントにもとづいて、この入力項目を必須項目として表示する
コントローラの save() メソッドが、オブジェクトをデータベースに保持する手段を提供する。要求内にレコードが存在しない場合は、同じアクションによって、フォームに入力された取引先情報の挿入処理を試行する
pageMessages コンポーネントが、フォームの送信でエラーが発生した場合に、標準かカスタムいずれかのメッセージを表示する

強力なユーザインターフェースを簡単に作成できるという点は、Visualforce の大きな特徴のひとつですが、これはメタデータ、データベース、コントローラ層との緊密な連携の下に実現されています。次のセクションでは、Visualforce を構成するこうした機能について解説します。

MVC (Model-View-Controller: モデル-ビュー-コントローラ) パラダイム

Visualforce ページは Force.com 上で描画され、Web ブラウザなどのクライアントに表示されます。つまり、データやロジックへのアクセスはサーバから実行されます。先進的なプラットフォームでは、データベース、モデル、ビューを異なる層に分離しますが、これにより、さまざまな課題を明確に切り分けて別々に処理することが可能になり、結果としてアプリケーションのコーディングや保守が簡素化されます。

次の図は、Visualforce の機能を構成する主な要素が、MVC パラダイムのどの層にどのように位置づけられているかを示します。

この図について説明します。

M (モデル): データ構造を担う。SObject (保存されているデータのエンティティ定義) または Apex クラスとして定義される
V (ビュー): プレゼンテーション層に相当。ページやコンポーネントが含まれる
C (コントローラ): ロジック層に相当。Apex で記述したカスタムのコントローラロジックや、Force.com プラットフォームが生成した各ビジネスエンティティの標準動作が含まれる

次の図は、Visualforce ページで M、V、C の各層がどのように機能しているかを示します。

この図について説明します。

V (ビュー): ビューは、定義されたページを示す。apex:inputField コンポーネントが含まれる
C (コントローラ): apex:inputField コンポーネントが、value 属性の式にもとづいてコントローラの account プロパティの get メソッドにバインドされる
M (モデル): account プロパティによって、ビジネスエンティティ [Account (取引先)] オブジェクトをビューに提供する

上に示した Visualforce ページ内の [Account Name (取引先名)] 項目の描画は、Visualforce コンポーネント apex:inputField によって実現されていることがわかります。値は、このコンポーネントの value 属性の式を介して、コントローラ層から account プロパティの get メソッドを呼び出すことによって取得されます。ビューもコントローラもデータ構造 (ここでは [Account (取引先)] のエンティティ定義) を認識するため、相互に直接的なやりとりが可能です。式ではドット (.) 記号を使用して、任意の取引先の名前を参照しています。

Force.com データベースに関する詳細は Force.com データベースの概要、カスタムコントローラのコーディングで使用する Apex 言語に関する詳細は Force.com Apex コードの概要で、それぞれ解説しています。この後のセクションでは、Force.com データベースと Apex に関する知識が必要となります。

コントローラと拡張機能

Visualforce では、コントローラと拡張機能を利用して、アプリケーションのロジックや動作を定義できます。Force.com プラットフォームでは、標準およびカスタムのすべてのビジネスエンティティで使用できる標準コントローラを提供しています。このコントローラにより、保存、ロジック、ナビゲーションなどの標準的なプラットフォーム動作を実現できます。前出の例では、[Account (取引先)] オブジェクトに対して標準コントローラを指定して、標準的なアクションメソッド (例: save) をアクションをサポートするコンポーネント (例: apex:commandButton) に関連付けています。

標準コントローラにおける save アクションメソッドのシグネチャは次のとおりです。

 public PageReference save() {}

ここでは、ボタンをクリックすると、標準の保存プロセスが実行されますが、ナビゲーションは、メソッドから返される PageReference オブジェクトを介して処理されます。

さらに、Apex を使用してカスタムのコントローラを作成することもできます。これにより、ロジック、ナビゲーション、アルゴリズムのほか、データベースと Web サービス間の通信処理などをユーザが柔軟に定義できます。Visualforce のステートフルなプログラミングモデルにより、カスタムコントローラではページ間の状態を維持することができ、ウィザードの作成も簡単に行えます。カスタムコントローラでは、標準コントローラを利用することも可能です。例として、[Account (取引先)] と [Contact (取引先責任者)] という 2 つのデータベースオブジェクトに関して、取引先の作成後、その取引先の取引先責任者を作成するという 2 つのステップから成るウィザードのケースを考えてみましょう。このコントローラクラスは次のようにシンプルに定義できます。

 public class MyWizardController {
 	
 	public Account account { get; set; }
 	public Contact contact { get; set; }
 	
 	public MyWizardController() {
 		account = new Account();
 		contact = new Contact();
 	}
 	
 	public PageReference next() {
 		return Page.step2;
 	}
 	
 	public PageReference previous() {
 		return Page.step1;
 	}
 	
 	public PageReference save() {
 		Database.insert(account);
 		contact.accountId = account.id;
 		ApexPages.StandardController contactController = new ApexPages.StandardController(contact);
 		return contactController.save();
 	}
 }

Visualforce ページでは Apex 言語の優れた機能を最大限に活用しています。上記のコードでは、Page.step1 から Visualforce ページ step1 を参照します。このアクションに任意のボタンを関連付けた場合、ユーザがボタンをクリックすると、コントローラによって step1 ページへのリダイレクトが実行されます。

標準コントローラやカスタムコントローラの機能を強化するには拡張機能を使用します。これにより、データアクセスを拡張したり、ロジックや条件付きナビゲーションを追加したりできるようになります。拡張機能のクラスは、拡張対象となるコントローラの型を引数にとるコンストラクタを指定して定義します。次のクラス定義では、前出の標準コントローラを拡張します。

 public class AccountExtension {
 	
 	public Account account { get; set; }
 	public AccountExtension(ApexPages.StandardController controller) {
 		account = (Account) controller.getRecord();
 	}	
 }

このコントローラをページに追加するには、page コンポーネントタグに簡単な変更を加えます。

 <apex:page standardController="Account" extensions="AccountExtension">

標準コンポーネント

Visualforce ページでは HTML と Visualforce コンポーネントを併用できます。ページでは、HTML と Visualforce のタグを正しく記述し、page コンポーネントから記述を開始する必要があります。以下の記述は、Visualforce ページの基本となります。

<apex:page>
</apex:page>

各コンポーネントには、オプションの属性と必須の属性が用意されており、これらによってコンポーネントの詳細を規定します。たとえば、次の属性を使用すると Visualforce ページのサイドバーと上部のヘッダーが削除されます。

<apex:page showHeader="false">
</apex:page>

Developer Edition の Page Editor 内にある [Component Reference] (コンポーネントリファレンス) リンクをクリックすると、各コンポーネントとその属性に関する詳細を確認できます。

この後のサブセクションでは、標準コンポーネントの一部を簡単に紹介します。

出力コンポーネント

標準の出力コンポーネントには大小さまざまなレベルがあります。もっとも小さいのは次に示す apex:outputPanel で、HTML のレンダリング時に div 要素を生成するシンプルなコンテナです。

<apex:page >
    <apex:outputPanel layout="block" style="font-weight:bold">
        Hello World!
    </apex:outputPanel>
</apex:page>

もっとも大きなのは apex:enhancedList で、次のような単純な参照で下図のような出力が得られます。

<apex:page>
    <apex:enhancedList type="Contact" height="350"/>
</apex:page>

入力コンポーネント

フォーム作成時に使用する最も一般的な入力要素には、apex:inputCheckbox、apex:selectList、apex:inputText などの汎用のデータ型で対応します。ただし、Force.com のデータベースエンティティの定義には apex:inputField を忘れずに指定してください。これにより、項目のデータ型、必須項目の指定、編集の可否、書式などの条件が、各項目の定義に応じて自動的に提供されます。

たとえば、冒頭のコードサンプルでは apex:inputField コンポーネントを使用して、[Account Name (取引先名)] 項目に対する入力要素を作成しています。ここに標準の [Industry (業種)] 項目を追加して、データ型がどのように処理されるか確認してみましょう。

<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="Edit Account for {!$User.FirstName}">
            <apex:pageMessages/>
            <apex:pageBlockButtons>
                <apex:commandButton value="Save" action="{!save}"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection>
                <apex:inputField value="{!account.name}"/>
                <apex:inputField value="{!account.industry}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

このページでは、次のような処理が行われます。

[Account Name (取引先名)] は、そのデータ型にもとづき標準的なテキストの入力要素となり、項目の定義によって自動的に必須項目としてマークされる
[Industry (業種)] は選択リストとなり、項目作成時の定義で指定されたオプションがすべて表示される

AJAX コンポーネント

Visualforce では、AJAX を使用してインターフェースの対話性を高めることが可能です。標準コンポーネントを組み合わせて、タスクが完了するまで画面の状態を保持できます。例として、先ほどのコードサンプルに若干の変更を加えて、ページを部分的に更新できるようにします。

 <apex:page standardController="Account">
     <apex:form >
         <apex:pageBlock id="in" title="Edit Account for {!$User.FirstName}">
             <apex:pageMessages />
             <apex:pageBlockButtons >
                 <apex:commandButton value="Save" action="{!quickSave}" rerender="out, in" status="status"/>     
             </apex:pageBlockButtons>
             <apex:pageBlockSection >
                 <apex:inputField value="{!account.name}"/>
                 <apex:inputField value="{!account.industry}"/>
             </apex:pageBlockSection>
         </apex:pageBlock>
     </apex:form>
     <apex:pageBlock id="out" title="Read View">               
         <apex:actionStatus startText="updating..." id="status"/>
         <apex:pageBlockSection>
             <apex:outputField value="{!account.name}"/>
             <apex:outputField value="{!account.industry}"/>
         </apex:pageBlockSection>
     </apex:pageBlock>
 </apex:page>

commandButton の rerender 属性を使用して処理範囲をページ全体からページの一部に変更し、どの部分を更新するかを指定する。この場合、ID を含む apex:pageBlock コンポーネントタグが対象となる
commandButton の status 属性により、対象となる apex:actionStatus コンポーネントに処理の指示がバインドされる
標準コントローラの quickSave() メソッドは、save() メソッドと同様のデータベース処理を実行するが、別のページには遷移せず、ユーザに対して同じページを返す

適切な取引先名を使用した場合の、このページの出力は以下のとおりです。

ユーザが値を変更して [Save (保存)] ボタンをクリックすると、レコードを更新中であることを示すステータスが表示されます。

更新処理が完了すると、rerender 属性の値が out であるコンポーネントが更新され、変更が反映されます。

カスタムコンポーネント

Visualforce では、標準のコンポーネントを利用できるほか、新たにカスタムのコンポーネントを作成することも可能です。カスタムコンポーネントの作成では、マークアップベースのアプローチによって、HTML や Visualforce の他のコンポーネント (標準およびカスタム) を組み合わせます。カスタムコンポーネントは、標準コンポーネントと同様に名前で参照しますが、名前空間を使用する点が異なります。

カスタムコンポーネントを含むページは、基本的に次のような構造をとります。

 <apex:page>
  	<c:mycomponent>
 </apex:page>

上記のカスタムコンポーネントの定義は次のとおりです。

 <apex:component >
     <fieldset>
         <legend>MyComponent</legend>
         <h1>Hello World!</h1>
     </fieldset>
 </apex:component>

ページの出力は次のようになります。

カスタムコンポーネントでは、強く型付けされた属性をサポートできます。常に「Hello World!」と表示するのではなく、ユーザがテキストを指定できるようにするには、次のように簡単な属性定義を行い、値を設定します。

<apex:page >
    <c:mycomponent text="Hello from the page!"/>
</apex:page>

この場合、カスタムコンポーネントの定義は次のようになります。

 <apex:component >
     <apex:attribute name="text" type="String" description="My text to display"/>
     <fieldset>
         <legend>MyComponent</legend>
         <h1>{!text}</h1>
     </fieldset>
 </apex:component>

ページの出力は次のようになります。

カスタムコンポーネントに対して専用のコントローラを割り当て、属性の値がそのコントローラに渡されるようにすることも可能です。属性としては、すべてのプリミティブ型、Apex クラス、SObject 定義およびそれぞれの配列が使用できます。

Visualforce ページの利用方法

Visualforce ページは、アプリケーション内でさまざまな形で利用することができます。ここでは 5 とおりの方法をご紹介します。

1) タブとして使用する

[My Visualforce Page] というタブを Visualforce ページによって生成しています。

2) 標準のページレイアウト内で使用する

標準のページレイアウトに Visualforce ページを追加することができます。

3) 標準のボタンやリンクのアクションを上書きする

標準のボタンのアクションを上書きして、標準の機能やページにアクセスする代わりにカスタムの Visualforce ページを呼び出すことができます。

4) カスタムのボタンやリンクのターゲットとして使用する

標準のページレイアウトに Visualforce ページを呼び出すカスタムのリンクやボタンを追加することができます。

5) ページ名をリンクのターゲットとして使用する

すべての Visualforce ページには、URL にページ名を含めることによって簡単にアクセスできます。

Visualforce ページの作成方法

Visualforce ページやページで使用する要素は、さまざまな方法で編集できます。Web ブラウザで利用できる Developer Edition、API、API が利用可能な各種ツールが用意されています。

Developer Edition

ページをオンラインで編集する最も便利な方法は、Developer Edition の開発モードを使用することです。開発モードでは、ページやコントローラを直接編集できます。開発モードを有効にするには、Developer Edition の [設定] ページにアクセスし、個人設定で [開発モード] のチェックをオンにします。これにより、作成したいページ名を URL として要求することで、ページの編集機能が呼び出せるようになります。

画面に表示されるリンクをクリックすると、編集用のページに移動します。

ページやコンポーネントも、[設定] のメニューから選択して編集することができます。

API

Visualforce ページでは、主に次のような要素が使用されます。これらは、Force.com メタデータ API と標準の Force.com Web サービス API の両方で公開されています。

ApexPage
ApexComponent
StaticResource

詳細については、ドキュメントページから各 API に関するドキュメントを参照してください。

API が利用可能な各種ツール

Force.com メタデータ API をサポートする次のようなツールを使用して、Visualforce ページや、Visualforce ページを含むアプリケーションの作成、移行、展開を行うことができます。

Force.com 移行ツール: Apache のビルドツール Ant 用のライブラリで、Visualforce ページを始めとするメタデータの展開、移行、取得を行えます。

Force.com IDE: Force.com アプリケーションを開発するための統合開発環境です。

Force.com IDE のスクリーンショットを次に示します。

Force.com IDE の主な機能については、 Force.com IDE の概要を参照してください。

その他

外観や操作性の変更

Visualforce ページの外観や操作性は、CSS を使用して対象コンポーネントの style 属性や styleClass 属性に適切な値を設定することで制御できます。次に、CSS の例を示します。

<apex:page >
  <apex:outputPanel style="border:2px solid red">
      My Styled Panel
  </apex:outputPanel>
</apex:page>

ページの出力は次のようになります。

さらに、画面全体のエクスペリエンスを変更する場合は、page コンポーネントタグで必要な属性を設定します。たとえば、以下の例では標準のヘッダーやサイドバー、すべてのスタイルシートを削除しています。

<apex:page showHeader="false" standardStyleSheets="false">
  <apex:outputPanel style="border:2px solid red">
      My Styled Panel
  </apex:outputPanel>
</apex:page>

カスタムの CSS クラス名を含むスタイルシートを使用することもできます。

<apex:page showHeader="false" standardStyleSheets="false">
  <apex:styleSheet value="{!$Resource.styles}"/>
  <apex:outputPanel styleClass="border_red">
      My Styled Panel
  </apex:outputPanel>
</apex:page>

ここで、グローバル変数 $Resource は静的リソースを参照しています。静的リソースについては、次のセクションで説明します。

静的リソース

従来型の Web 開発では、通常、静的なリソースをさまざまに組み合わせて使用します。静的リソースには CSS、画像、フラッシュ動画、JavaScript ライブラリなどがあります。Visualforce には、こうした静的なリソースを格納、参照するための優れた方法が用意されており、ブラウザキャッシュの利用によって帯域幅の使用量を削減し、ページのパフォーマンス向上を実現します。この点は、前出のスタイルシートの例からも確認できます。

前出の例では、border_red を始めとするクラス名が格納されているスタイルシート styles を指定するためにグローバル変数 $Resource を使用しています。前に述べたさまざまなタイプのリソースのほか、zip などの構造化されたアーカイブファイル形式もサポートします。これにより、最新のオープンソースの JavaScript ライブラリを利用したり、画像を参照するカスタムの CSS スタイルをカプセル化したりできます。

ここで、次のように定義されたスタイルシート styles.css を、参照対象の画像とともに構造化されたアーカイブとしてまとめてみましょう。

 .mystyle {
	background: url(img/mybackground.png);
	font-size:18pt;
	font-weight:bold;
	width:220px;
	height:59px;
 }

このスタイルシートを静的リソース styles として、Visualforce ページ内で次のように参照します。

 <apex:page showHeader="true" standardStyleSheets="false">
     <apex:styleSheet value="{!URLFOR($Resource.styles,'styles.css')}"/>
     <apex:outputPanel styleClass="mystyle" layout="block">
         My Styled Panel
     </apex:outputPanel>
 </apex:page>

このページでは、次のような処理が行われます。

この静的リソースの名前は styles であり、グローバル変数 $Resource を介して参照する
URLFOR() 関数を使用して、アーカイブの構造内にある対象の要素 (この場合は styles.css) を指定する
スタイルシート内の img/mybackground.png への相対参照は、img フォルダがアーカイブのルートに存在し、そのフォルダ内に各ファイルが格納されているため、構造が無効になった場合にも保持される
リソースとその参照先の要素は、バージョン管理された URL を使ってブラウザでキャッシュされる

ここでは、背景画像を使用したスタイルによって、次のような出力が得られます。

PDF の生成

Visualforce ページのデフォルトのレンダリング形式は HTML ですが、PDF 形式を選択して、動的なコンテンツを簡単に出力することもできます。レンダリング形式は、ページの renderAs 属性で制御します。次に示すシンプルな Visualforce ページでは、Force.com 上で PDF 形式への変換を行い、その結果をブラウザに表示します。

 <apex:page renderAs="pdf" showHeader="false">
   <h1>Hello PDF World!</h1>
 </apex:page>

この属性では、レンダリング形式を動的に判定する式をサポートしています。

電子メールテンプレート

電子メールテンプレートでも Visualforce のマークアップテクノロジを使用して、デザイン性の高いメッセージを作成することができます。

電子メールテンプレートでは、messaging:emailTemplate というタグを使用します。その他にも、電子メール本文の形式 (テキスト形式または HTML 形式) や添付ファイルを指定できる電子メール専用のコンポーネントが用意されています。添付ファイルでは PDF 形式でのレンダリングもサポートしています。次に、同じオブジェクトに含まれる複数のレベルのデータを電子メールで送信する場合の典型的な例を示します。

 <messaging:emailTemplate subject="Contacts for {!relatedTo.Name}" recipientType="User" relatedToType="Account">
    <messaging:plainTextEmailBody >
        Account Name: {!relatedTo.name}
        Contact Names: 
		<apex:repeat value="{!relatedTo.Contacts}" var="contact">
			{!contact.name}
		</apex:repeat>
    </messaging:plainTextEmailBody>
    <messaging:attachment renderAs="pdf" filename="contactlist">
        <h1>{!relatedTo.Name}</h1>
        <apex:dataTable value="{!relatedTo.Contacts}" var="contact">
            <apex:column value="{!contact.name}"/>
            <apex:column value="{!contact.phone}"/>            
            <apex:column value="{!contact.email}"/>            
        </apex:dataTable>
    </messaging:attachment>
 </messaging:emailTemplate>

ここで、次の点に注意してください。

メッセージの受け手であるユーザや、そのユーザに関連付けられた取引先へのアクセスは、Visualforce ページにおける動作と同様、標準コントローラによって行われる
電子メールの本文は、messaging:plainTextEmailBody コンポーネントタグで指定したとおり、テキスト形式となっている
添付ファイルでは、Visualforce ページにおける動作と同様、attachment コンポーネントの属性の指定にもとづいて HTML または PDF のいずれかでレンダリング形式が指定される

モバイル

前のセクションで Visualforce ページをタブとして使用できると述べましたが、タブの設定で [モバイル準備完了] のチェックボックスをオンにすると、モバイルデバイスでも同様のタブがサポートされるようになります。

この設定を行うと、Salesforce CRM のモバイルクライアントを搭載したモバイルデバイスに Visualforce のタブが追加されます。タブをクリックするとブラウザによる接続が行われ、対応する Visualforce ページが表示されます。たとえば、次のシンプルなページは、c:mobileSample コンポーネントで検出したデバイスの種類に応じてプラットフォームの画像を表示します。

 <apex:page showHeader="false">
    <c:mobileSample/>
 </apex:page>

c:mobileSample コンポーネントのマークアップは、mobileImages という静的リソースに保存された任意の画像を表示します。実行時に表示される画像は、コンポーネントのコントローラが検証するブラウザのユーザエージェントの値によって決まります。

 <apex:component controller="mobileSampleCon">
    <apex:image value="{!URLFOR($Resource.mobileImages, deviceType + '.jpg')}"/>
 </apex:component>

 public class mobileSampleCon {

    public String deviceType { get; set; }

    public MobileSampleCon() {
        String userAgent = ApexPages.currentPage().getHeaders().get('USER-AGENT');
        
        if(userAgent.contains('iPhone')) deviceType = 'iPhone';
        else if(userAgent.contains('BlackBerry')) deviceType = 'BlackBerry';
    }
 }

Force.com Sites

Force.com Sites は、Force.com プラットフォームでネイティブに動作する公開の Web サイトやアプリケーションの開発を支援するテクノロジです。

Force.com Sites では、Visualforce を利用して既存のアプリケーションを公開 Web サイトに簡単に作り変えることができます。

サイトの作成では、ドメイン名を決定して、そのドメイン名で公開する一連の Visualforce ページを定義します。たとえば、「mysite.force.com」というサイトを作成し、「helloWorld」という Visualforce ページを標準のページとして公開します。Web ユーザが指定したドメインにアクセスすると、このVisualforce ページの出力結果が表示されます。

Force.com Sites は、キャッシュやフィードの自動作成などさまざまな機能を備えていますが、その中核となるのは Visualforce です。Force.com Sites は現時点では正式リリースではなく、開発者プレビューとして提供されています。

まとめ

Visualforce は、コンポーネントベースの強力なユーザインターフェースフレームワークです。広く普及した MVC (Model-View-Controller: モデル-ビュー-コントローラ) 設計パターンをサポートすると同時に、再利用性を高めるさまざまな機能 (コンポーネントモデル) を提供し、PDF 生成、AJAX のサポート、モバイルデバイス向けのレンダリングなども実現しています。また、ロジック層を担う Apex とも緊密に統合されており、この Apex を使用してカスタムコントローラを作成できます。Apex は PageReference オブジェクトによって Visualforce ページをネイティブにサポートします。

Visualforce を使ってインタラクティブかつ効率性に優れたユーザエクスペリエンスを作成することにより、既存のアプリケーションの価値を高めることができます。Visualforce の機能は、標準の Force.com アプリケーションアーキテクチャで活用できるほか、まったく新しいアプリケーションを開発する場合の強力な基盤ともなります。

さらに、Visualforce は電子メールテンプレートや Force.com Sites といった、Force.com のさまざまな機能で利用可能です。たとえば、Force.com プラットフォーム上で稼動する Web サイトを開発できる Force.com Sites では、Visualforce は、Web アプリケーションのユーザインターフェースを作成するための中核的な役割を果たしています。

参考資料

Developerforce サイト: このサイトで無料の開発者用エディション Developer Edition を入手して、すぐに開発をスタートできます。ドキュメントやフォーラムなどへのリンクも用意されています。
Visualforce Wiki ページ: Visualforce に関するさまざまな記事、動画、サンプルコードなどにアクセスできます。
Visualforce 開発者向けガイド : Visualforce の製品マニュアル。このテクノロジに関する包括的な説明が記載されています。
Force.com データベースの概要 : Force.com プラットフォームのクエリ言語と永続性メカニズムの概要を紹介しています。
Apex の概要 : Apex 言語に関する包括的なドキュメント。今回のドキュメントで取り上げられていない詳細な情報が記載されています。

執筆者について

Andrew Waite は Visualforce のプロダクトマネージャです。Andrew は、DeveloperForce USブログやディスカッションボードに、mtbclimber というハンドルネームで参加しています。

コアコンテンツ

カテゴリ別

その他

カテゴリ別

By Category

By Category

サービス

ギャラリー

その他のコミュニティ

テクニカルライブラリ

Contributors

RSS Feeds

JP:An Introduction to Visualforce

Visualforce の概要

摘要

Visualforce の動作

Visualforce と MVC モデル

MVC (Model-View-Controller: モデル-ビュー-コントローラ) パラダイム

コントローラと拡張機能

標準コンポーネント

出力コンポーネント

入力コンポーネント

AJAX コンポーネント

カスタムコンポーネント

Visualforce ページの利用方法

Visualforce ページの作成方法

Developer Edition

API

API が利用可能な各種ツール

その他

外観や操作性の変更

静的リソース

PDF の生成

電子メールテンプレート

モバイル

Force.com Sites

まとめ

参考資料

執筆者について