Visualforceを使ってみよう
13 likes14,707 views
Force.com の画面開発言語であるVisualforceを利用すれば標準のページレイアウトだけではできない高度なカスタマイズが可能になります。 また Visualforce は HTML をベースにした言語なので、簡単なものであればWebページを少し作った経験がある方であれば十分にカスタマイズ可能です。 このセミナーでは、プログラマでない方を対象に Visualforce を使ってできることを、簡単なサンプルを交えてご紹介します。
Visualforceを使ってみよう
- 2. Developer Forceをフォローください @developerforcej/ #forcedotcomjp Developer Force Japan +Developer Force Japan Developer Force Japan Developer Force Group
- 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
- 13. リッチなユーザ・インタフェース
- 14. Webアプリケーション
- 15. マッシュアップ
- 16. モバイル・アプリ
- 17. 例 : DeveloperForce, AppExchange
- 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へのアクセス
- 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上の様々な場所へ埋め込める – カスタムページ – サイドバー – カスタムボタン、リンク – ページレイアウト – ダッシュボード – パブリッシャアクション – などなど
- 31. カスタムコンポーネント作成 1 3 2 4 <iframe height="50" src="/apex/home_tab_left" width="100%"></iframe> home_̲tab_̲leftは先ほど作成した Visualforce名
- 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}” > データへのアクセス {! ここにフィールドを記述 } の形式でアクセスする
- 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
- 41. ダッシュボード 1 2
- 42. Visualforceを使ってみよう – アジェンダ § Visualforceとは § Visualforceを使ってみる § 更に活用するには
- 43. 更に活用するには？ § 既にある高度なソースコードをコピーして利用 – 自身の業務にフィットさせたい部分だけをカスタマイズ – コードと違うオブジェクトで使いたい場合にカスタマイズ
- 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