Force.com の画面開発言語であるVisualforceを利用すれば標準のページレイアウトだけではできない高度なカスタマイズが可能になります。 また Visualforce は HTML をベースにした言語なので、簡単なものであればWebページを少し作った経験がある方であれば十分にカスタマイズ可能です。 このセミナーでは、プログラマでない方を対象に Visualforce を使ってできることを、簡単なサンプルを交えてご紹介します。

1. Visualforceをつかってみよう

2. Developer Forceをフォローください
@developerforcej/ #forcedotcomjp
Developer Force Japan
+Developer Force Japan
Developer Force Japan
Developer Force Group

3. スピーカー
岡本 充洋
ディベロッパープログラムマネージャ
@mitsuhiro

4. Safe Harbor
Safe harbor statement under the Private Securities Litigation Reform Act of 1995:
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of
the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking
statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service
availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future
operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use
of our services.
The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our
service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth,
interruptions or delays in our Web hosting, breach of our security measures, the outcome of intellectual property and other litigation, risks associated with
possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and
motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-
salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial
results of salesforce.com, inc. is included in our annual report on Form 10-Q for the most recent fiscal quarter ended July 31, 2012. This documents and
others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site.
Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be
delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available.
Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.

5. Visualforceを使ってみよう – アジェンダ
§ Visualforceとは
§ Visualforceを使ってみる
§ 更に活用するには

6. Visualforceを使ってみよう – アジェンダ
§ Visualforceとは
§ Visualforceを使ってみる
§ 更に活用するには

7. Visualforceとは?
§ カスタム画面をつくるための機能
§ Force.com 上に全て保存される
§ 一体感のあるUX(ユーザエクスペリエンス)
§ 社内 & 社外向けの画面に利用可能
§ モバイルなど新たなデバイス用のカスタマイズ
§ Web技術を活用

8. Model View Controller (MVC) パターン
モデル コントローラ
ビュー

9. Model View Controller (MVC) パターン
業務データ 処理内容
画面

10. Model View Controller (MVC) パターン
標準もしくは
カスタムオブジェクト
標準コントロー
ラ及びApex
Visualforce

11. #forcewebinar
MVC例

12. で実際
Visualforceは何が
できるの?

13. リッチなユーザ・インタフェース

14. Webアプリケーション

15. マッシュアップ

16. モバイル・アプリ

17. 例 : DeveloperForce, AppExchange

18. Visualforceで何ができるのか?
カスタム
ページ
ダッシュボード
コンポーネント
カスタム
タブ
チャート
ページ
への埋め込み
カスタム
ロジック
Email
テンプレート

19. Visualforceを使ってみよう – アジェンダ
§ Visualforceとは
§ Visualforceを使ってみる
§ 更に活用するには

20. Visualforce マークアップとは
§ Visualforce タグ
– 100種類以上の標準コンポーネント
– カスタムコンポーネント
§ 以下の標準的なWebテクノロジを利用可能:
– CSS
– JavaScript
– HTML
– Flash
– その他のWebベースのテクノロジ

21. Visualforceを開発するには
§ ４つの方法
– 設定画面、開発モード
• 初心者向け
– 開発者コンソール
• 熟練者向け
– Force.com IDE
• エンジニア向け

22. https://ap.salesforce.com/apex/vfpage
Viusalforce
ページ名
apexディレクトリ
Visualforceへのアクセス

23. <apex:page >
最もシンプルVisualforceの書き方
</apex:page>
・・・（ここに表示したい画面を作る）

24. apex: もしくは chatter:
プレフィックス
コンポーネント名
(例: tables, repeats,
forms, など)
コンポーネントに
定義された属性
フィールドの参照
(“.”ドットを使う)
オブジェクト及び変数に
データバインディング
属性を定義するための
フィールド
(場合によっては
文字リテラルも可能)
<apex:outputField value=“{!Restaurant__c.Address__c}”>
標準コンポーネントの基本的な書き方とは?

25. Visualforceコントローラ
§ データへのアクセスを提供する
§ 画面とデータのヒモ付を行う
§ 標準コントローラ
– 通常のページと同じ機能を持つ
• Save, delete, 項目へのアクセスなど
§ カスタムコントローラ
– Apexで記述
– 標準の挙動を上書き
– コントローラ拡張

26. <apex:page standardConroller=“Restaurant__c” >
標準コントローラの使い方は?
extensions=“ext1, ext2”
ページの
トップに
標準のCRUD操作用の
コントローラ
もしカスタムのコントローラ
を使用したい場合
controller=“controllerName”
標準、もしくはカス
タムオブジェクト
カスタムのロジックを
標準コントローラに
追加する場合
オプション

27. <apex:page standardConroller=“Restaurant__c”>
最もシンプルなコントローラの利用方法
</apex:page>
・・・（ここに表示したい画面を作る）

28. どこにVisualforceは埋め込めるか
§ Force.com上の様々な場所へ埋め込める
– カスタムページ
– サイドバー
– カスタムボタン、リンク
– ページレイアウト
– ダッシュボード
– パブリッシャアクション
– などなど

29. サイドバーへの埋め込み
§ お知らせメニュー
Visualforceページ
ホームタブの
左側にVisualforce
ページ
を表⽰示させる

30. Visualforceページ作成
1
3
2

31. カスタムコンポーネント作成
1
3
2
4
<iframe height="50" src="/apex/home_tab_left" width="100%"></iframe>
home_̲tab_̲leftは先ほど作成した
Visualforce名

32. ページレイアウト編集
1
3
2
4
先ほど作成したコンポーネント名は左
側ですので、こちらにチェック

33. 1
商談一括更新リストビュー

34. <apex:page standardController="Opportunity" recordSetVar="opportunities" tabStyle="Opportunity" sidebar="false">
<apex:form >
<apex:pageBlock >
<apex:pageMessages />
<apex:pageBlockButtons >
<apex:commandButton value="保存" action="{!save}"/>
</apex:pageBlockButtons>
<apex:pageBlockTable value="{!selected}" var="opp">
<apex:column value="{!opp.name}"/>
<apex:column headerValue="フェーズ">
<apex:inputField value="{!opp.stageName}"/>
</apex:column>
<apex:column headerValue="完了予定日">
<apex:inputField value="{!opp.closeDate}"/>
</apex:column>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>
Visualforceページ作成
1
3
2
ソースコード
https://gist.github.com/10338253

35. カスタムボタン作成
1
3
2

36. 検索レイアウト編集
1
3
2

37. <apex:inputField value =“{!opp.stagename}” >
データへのアクセス
{! ここにフィールドを記述 }
の形式でアクセスする

38. Visualforce
ダッシュボードへの埋め込み

39. Visualforceページ
1
3
2
<apex:page standardController="Case" recordSetvar="cases">
<apex:pageBlock >
<apex:form id="theForm">
<apex:panelGrid columns="2">
<apex:outputLabel value="View:"/>
<apex:selectList value="{!filterId}" size="1">
<apex:actionSupport event="onchange" rerender="list"/>
<apex:selectOptions value="{!listviewoptions}"/>
</apex:selectList>
</apex:panelGrid>
<apex:pageBlockSection columns="1">
<apex:dataList var="c" value="{!cases}" id="list">
{!c.subject}
</apex:dataList>
</apex:pageBlockSection>
</apex:form>
</apex:pageBlock>
</apex:page>
ソースコード
https://gist.github.com/10338397

40. ダッシュボード
1
2
ドラッグ＆ドロップ
4
3

41. ダッシュボード
1
2

42. Visualforceを使ってみよう – アジェンダ
§ Visualforceとは
§ Visualforceを使ってみる
§ 更に活用するには

43. 更に活用するには？
§ 既にある高度なソースコードをコピーして利用
– 自身の業務にフィットさせたい部分だけをカスタマイズ
– コードと違うオブジェクトで使いたい場合にカスタマイズ

44. Google Mapの埋め込み
§ GoogleMap
Visualforce

45. Google Mapの埋め込み
§ 表示したいオブジェクトに変える
https://gist.github.com/10338691

46. まとめ
§ VisualforceでForce.comの画面をカスタマイズする
– サイドバー
– カスタムボタン
– ページレイアウト
– ダッシュボード
– etc.
§ 全て理解できなくても、コピー + 少し変更でも活用可能

47. Q & A
岡本 充洋
ディベロッパープログラムマネージャ
@mitsuhiro

48. セミナー開催日から3ヶ月
トレーニングコース
どれでも
5%OFF!割引適用方法
各コースのWebページにあるお申込みフォームのプロモーションコード欄に右記の
コードを必ず入力してお申し込みください
Ø プロモーションコードのご記入がない場合は割引を適用致しかねます
Ø セミナー開催日から3ヶ月以内の定期集合研修のお申込みに限ります
Ø 他の割引との併用はできません
JP-10314861D
＋
セミナー開催月日
エデュケーションサービス部
TEL : 03-‐‑‒4222-‐‑‒0710
URL : www.salesforce.com/jp/training
Email : jtraining@salesforce.com
例例）4⽉月1⽇日のセミナーの場合
「JP-‐‑‒10314861D0401」
Platformセミナーご参加特典！

49. Developer Forceをフォローください
@developerforcej/ #forcedotcomjp
Developer Force Japan
+Developer Force Japan
Developer Force Japan
Developer Force Group