Salesforceの「Visualforce」とは？概要や作成方法を解説！

はじめに
セラクCCCのSalesforce推進部のNです。CRM・SFA(顧客関係管理・営業支援)ツールとしては、世界トップシェアを誇るSalesforce。より便利に使いこなすため、自社の業態に合わせたカスタマイズや、自社専用の入力画面の開発を行いたいなどのニーズをもっているユーザも多いでしょう。そのようなユーザにオススメしたいのが、Salesforce独自のWebフレームワークである「Visualforce」です。Visualforceを活用で、Salesforceの活用環境を、自社業務によりマッチしたものにできます。本記事では、SalesforceのVisualforceについて、概要や作成方法を解説します。Visualforceを使って自社アプリを作成したいと考えている担当者様は必読です。

SalesforceのVisualforceとは

世界中の企業が導入・活用していることからもわかるように、Salesforceにはさまざまな業種で共通して使えるような、「標準的」な機能が最初から備わっています。ただ、標準的であるゆえに、特定の業態・業界に特化したような機能は備わっていません。使い込んでいくうちに自社、あるいは自社が属する業界の商慣習にマッチした機能や、専用の入力画面が欲しくなるケースも珍しくないです。

標準機能では実現できない機能を実現するために役立つ方法の一つが、 Visualforceです。
Visualforce はSalesforce独自のWebフレームワークです。
Visualforceの活用で、自社の独自業務や業界独自の商慣習にマッチさせたユーザインターフェースを、Salesforceプラットフォーム上で作成が可能です。
たとえば、自社(または業界)独自の入力画面や検索画面を作成することで、データ入力や検索に関する業務の効率化ができるでしょう。
また、 Salesforce のデータを基に、自社オリジナルのレポートやダッシュボードを作成し、特定のビジネス要件に応じた情報を視覚化して表示できます。
内部向けばかりではなく、展示会への来場予約画面や、商品の注文確定画面など、顧客やリードになんらかの情報を入力してもらう画面上に、オリジナルのビジュアルコンポーネントの作成も可能です。これにより、顧客やリードに特定の情報を効果的に伝えるだけでなく、特定のアクションを実行してもらいやすくなります。
このように、Visualforceの活用で、Salesforceユーザ個々のビジネス要件に合わせた、さまざまなカスタマイズを実施できます。

Visualforceを活用するメリットとは

(１)開発の効率化

Web上で使える自社専用アプリを一から開発する場合、まず、サーバの準備(あるいは既存サーバ内の領域確保)を行い、データベースの設計や登録、コードの入力と、面倒な作業と相応の開発期間が必要になります。もちろん、表示側のフロントエンド開発、サーバ側のバックエンド開発を行うための人材も必要です。
その点、Visualforceであれば、Salesforceに登録されたデータベースをそのまま使えます。さらに、すでに準備されているユーザインターフェースを利用できるので、開発のための期間も工数も大幅に削減できます。また、Salesforceで用意されている多彩な機能との連携を図ることで、AIなど最新機能を搭載したアプリの実現も可能です。

(２)画面デザインとデータ処理の自由度

Visualforceの活用で、 Salesforce の標準画面では表現できないリッチなユーザインターフェースを作成できます。通常のWeb画面はもちろん、スマートフォンのアプリ画面のカスタマイズも可能なので、自社独自の新機能の追加や、新規自社アプリの開発などが可能です。
Salesforce レコードの検索、新規作成、編集、削除といった処理は標準機能でも可能ですが、 Visualforce を活用すると、データ処理の条件を独自に設定できます。
たとえば、標準機能にはないデザインのテキスト入力フォームと検索ボタンを作成し、検索ボタンをクリックしたときに、Salesforceレコードの検索処理を実行ができるでしょう。このとき、検索の分岐条件、並び替え、絞り込みなどを設定できます。

Visualforceの「ページ」とは

Visualforce はSalesforce独自のWebフレームワークであり、Visualforce を活用して作成する機能のひとまとまりが「Visualforce ページ」です。Visualforce ページの構成要素は、「Visualforceマークアップ」と「Visualforce コントローラ」です。

(1)Visualforceマークアップ

Visualforceマークアップは、主に画面を定義します。テキスト、入力フォーム、ボタン、リンクなどのユーザインターフェースコンポーネントを、 Visualforce タグ、 HTML、 CSS、 JavaScript などで記述します。

(2)Visualforce コントローラ

Visualforceコントローラは、主に Salesforce のデータベース操作を定義します。Visualforce コントローラには、 Salesforce レコードの検索、新規作成、編集、削除などの処理を命令するコードの記述をしましょう。標準のコードがあらかじめ用意されているため、これを記述することで Visualforceコントローラを容易に作成できます。さらに機能を拡張したい場合は、開発者が Apex で独自のコードの記述が必要です。

VisualforceマークアップとVisualforceコントローラを組み合わせることで、ページの初期読み込みやボタンのクリックなどの画面操作をトリガーにしてデータの処理を実行できます。

Visualforce ページの作成方法について

それでは、Visualforce ページの作成方法について解説します。作成方法がやや複雑で、覚えるまでは大変かもしれませんが、HTMLに似たタグベースのマークアップ言語で記述するので、HTMLに関する基礎知識があると理解しやすいかもしれません。
約150個の組み込みコンポーネントが用意されているので、慣れてくると柔軟にさまざまな機能を実装できるようになり、非常に便利です。もちろん、独自のコンポーネントの作成も可能です。

Visualforce ページ作成の流れ

• (1)画面右上の設定アイコンから「開発者コンソール」を選択
• (2)コンソールが表示されたら「File」→「New」→「Visualforce Page」をクリック
• (3)Visualforceページの名称を入力し、OKをクリック
• (4)作成したいアプリケーションの内容に応じてコード(マークアップ)を記述※コードの記述中、作成中のページがどのように表示されるか確認したい場合は、エディタ左上の「Preview」をクリックします。
• (5)「File」→「Save」をクリックして保存する

記述中の構文に誤りがあった場合、「Problems」タブにエラー表示されるため、エラーメッセージを見ながら誤っている個所を修正できます。
ここでは開発者コンソールでVisualforce ページを作成する方法の解説をしましたが、 [設定] でVisualforce ページを作成する方法もあります。[設定] で作成する方法は Salesforceのヘルプページで紹介されているので、必要に応じてご参照ください。

まとめ

今回はSalesforceのVisualforceについて、概要や作成方法を紹介しました。Visualforceは、Salesforceの柔軟性とカスタマイズ性を向上させるためのパワフルなツールです。工夫次第で、さまざまな用途に活用できます。それでも、「使い方が難しそう」「コードの記述法がわからない」といった困りごとがありましたら、セラクCCCにご相談ください。セラクCCCには300名(23年5月時点)を超える専門コンサルタントが在籍し、お客様側の視点からSalesforceのサポートサービスを行っています。効率的なSalesforceの活用を、セラクCCCのカスタマーサクセスチームがサポートいたします。お気軽に無料相談からお問い合わせください。