S.B.S. Salesforce技術ブログ

教えて921さん!

Visualforceを作成しよう!Ⅰ

こんにちは、Nambuです。今回はVisualforceについて説明したいと思います。Visualforceは今まで説明してきたSalesforceの機能とは異なり、開発者向けの機能になります。少し難しいかもしれませんが頑張りましょう。

Visualforceとは

Visualforce は、カスタムユーザインターフェースを開発者が作成できるようにするSalesforceフレームワークです。Visualforceを使用することで、Salesforceの組み込み機能の拡張や新機能との置き換え、新しいアプリケーションの作成、独自の完全カスタムインターフェースを作成できます。
Visualforce ページを作成するときは主にVisualforceマークアップとVisualforceコントローラの2つを用います。マークアップにはコンポーネント、HTML、スタイルがあり、さらに標準 Web テクノロジやJavaScriptを使用することで、アニメーションのあるユーザインターフェースにすることができます。コントローラはコンポーネントをユーザが操作したときの動作を指定する命令のセットです。コントローラを使用することでページに表示されるデータにアクセスでき、コンポーネントの動作を変更できます。
作成したVisualforceページには一意のURLでアクセスできます。ページにアクセスすると、そのページで要求されたデータ処理がサーバで実行され、HTMLに変換されたページがブラウザに返されて表示されます。

Visualforceを新規作成しよう

それではVisualforceについての説明ができたので、次に新規作成方法について説明したいと思います。今回説明する方法が全てというわけではなく、他にもIDEを使った開発方法などあります。
まず、設定のホームからVisualforceと検索し、Visualforceページを開きます。そして新規ボタンをクリックします。 するとページの編集が出てくるので表示ラベル、名前、説明や各種チェックボックスを入力します。実際のVisualforceページの内容は下部のマークアップに記述しますがその説明は次に行うので、今回はこれで保存します。 もう一つの方法として開発者コンソールからがあります。先ほどのVisualforceページの新規ボタンの横にある開発者コンソールボタンを押すか、右上の歯車マークから開発者コンソールをクリックします。 すると開発者コンソールが新しいウィンドウで開くので、左上のFile、New、VisualforcePageの順でクリックします。 すると、ページの名前を入力するポップアップが出てくるので、入力してOKを押すと新規作成が完了します。

Visualforceの中身を書いてみよう

それでは今度は実際のページの内容を記述していきたいと思います。今回は開発者コンソールを使います。まず、先ほど作成したVisualforcePageを開きます。File、Open、Pagesを選択して先ほどつけた名前のファイルをダブルクリックか、クリックして左下のOpenを押します。
初めにデフォルトコンテントを利用して説明したいと思います。まず、全体が<apex:page ></apex:page >で囲われていますが、これは単一のVisualforceページであることを示すコンポーネントです。なので、全てのVisualforceページはこのタグで囲まれている必要があります。HTMLを書くときに<html>タグで囲わないといけないのと同じだと思ってください。
次に出てくる<h1>はHTMLの<h1>と同じです。ここからわかるようにVisualforceページではHTMLのタグを使うことができ、書き方もHTMLに非常に似ています。なので、HTMLの書き方が分かっていればすぐに使いこなせるようになると思います。Visualforce独自の書き方が登場するのはSalesforceのオブジェクトが絡むコントローラを使用したた時です。その例を次に見ていきましょう。 これはすごく簡易的な商談の新規登録画面です。上記の例とまず違う点として<apex:page >の部分にStandardControllerというのが記載されています。これは属性というもので様々な属性を記述することで機能を制御できます。今回のStandardControllerはこのページの動作を制御するために使用するSalesforceオブジェクトの名前を記述する属性であり、ここに書いたオブジェクトの項目やあらかじめ用意されているメソッドがVisualforceページで使えるようになります。ちなみに今回紹介した標準コントローラの他にカスタムコントローラやコントローラの拡張、標準リストコントローラがあります。これら標準コントローラ以外の使い方はまた別の記事で説明したいと思います。
次に目につくこととしてすべてのタグがapex:から始まっていることが分かると思います。これらがVisualforceならではの標準コンポーネントです。役割自体はHTMLのタグと同じようなのが多いですが、様々な属性が用意されていたり、Salesforceの項目に合わせた仕様になっていたりして非常に簡単にページを作れるようになっています。
まず登場する<apex:form>はユーザの入力から送信までを行うセクションを表しており、HTMLのformタグに当たります。<apex:inputField>はinputの役割をしており、Visualforceではvalueの所に入力値を入れるオブジェクトの項目を記述します。HTMLでinputを書くときは属性としてtypeを指定しますが、Visualforceではvalueに書いてある項目のデータ型に合わせて自動的に入力フォームを作成してくれます。こういったSalesforceに合わせた便利な機能がVisualforceやApexにはあります。
<apex:commandButton>はHTMLのinput type=submitの役割をしています。action属性にコントローラにあるメソッドを書くことでボタンを押したときにそのメソッドの処理が走るようになります。
ここまで見てきて分かったかと思いますがコントローラの項目やメソッドを使うときの構文は{!項目名}{!メソッド名}となります。この書き方はVisualforceを書くことになったら何度も登場するので忘れないようにしましょう。


今回はこのくらいで、また会いましょう!