Salesforce1入門 for アプリケーションパートナー
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Salesforce1入門 for アプリケーションパートナー

on

  • 4,898 views

 

Statistics

Views

Total Views
4,898
Views on SlideShare
4,890
Embed Views
8

Actions

Likes
11
Downloads
100
Comments
0

4 Embeds 8

https://twitter.com 4
http://s.deeeki.com 2
https://drive.jolicloud.com 1
http://tyoshikawa1106.hatenablog.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Salesforce1入門 for アプリケーションパートナー Presentation Transcript

  • 1. Salesforce1入門 for アプリケーションパートナー 中嶋 一樹 テクニカルエバンジェリスト @nkjm
  • 2. アジェンダ • Salesforce1とは? • アプケーションをSalesforce1へ対応させる方法 • グローバルアクションでクイックな入力機能を提供する • カスタムオブジェクトタブを中心に実装する • 専用Visualforceページを用意する • パッケージング • 開発の進め方
  • 3. Salesforce1とは?
  • 4. プラットフォームとモバイルアプリ Your Customers Cloud ExactTarget Marketing Cloud Service Cloud Sales Cloud . Social . Mobile . Salesforce1 Platform AppExchange Connected Salesforce1モバイルアプリ
  • 5. これまでのモバイルアプリとの関係 *Chatter Mobile、Salesforce TouchはアップグレードでSalesforce1となります。
  • 6. ユーザーがアクセスできる機能 Salesforce.comが提供するサービス AppExchangeアプリ 自社開発アプリ
  • 7. 利用形態 モバイルアプリ モバイルブラウザー
  • 8. アプリケーションをSalesforce1へ対応させる方法
  • 9. カスタムオブジェクトタブ グローバルアクション 専用Visualforce
  • 10. グローバルアクションでクイックな入力機能を提供する フィードページ アクションリスト アクションUI • クイックに何かを入力する、といった用途に最適な機能を提供します。 • 設定だけでも実装可能です。 • VisualforceまたはForce.com Canvasを利用して高度なカスタマイズをおこな うことも可能です。
  • 11. グローバルアクションでクイックな入力機能を提供する 作成手順 • ビルド > カスタマイズ > Chatter > 設定 で、パブリッシャーアクションを有効化をチェックします。 • ビルド > 作成 > グローバルアクション で、「新規アクション」をクリックし必要な項目を入力します。 • 続いて起動されるレイアウトエディターでフォームに表示させる項目をドラッグ&ドロップで選択します。 • ビルド > カスタマイズ > Chatter > パブリッシャーレイアウトで、作成したグローバルアクションを追 加します。
  • 12. グローバルアクション 専用Visualforce カスタムオブジェクトタブ
  • 13. カスタムオブジェクトタブを中心に実装する コンパクトレイアウト レコードリスト レコード詳細ページ ナビゲーションメニュー Flexibleページ オブジェクト専用アクション モバイルカード • カスタムオブジェクトタブをモバイルに最適なUIで表示させます。 • 設定だけでも実装可能です。 • さらにオブジェクト専用アクション、コンパクトレイアウト、モバイルカード、FlexibleページといったUIコ ンポーネントが利用可能になっています。
  • 14. カスタムオブジェクトを中心に実装する カスタムオブジェクトタブをナビゲーションメニューに表示させる手順 • (まだなければ)カスタムオブジェクトタブを作成します。 • いずれかのアプリケーションに作成したタブを追加します。 ユーザーのマイディスプレイタブに加えられたタブは、アプリには追加されていなくてもナビゲーション メニューに表示されます。 • Salesforce1でナビゲーションメニューをプルして更新し、カスタムタブが表示されることを確認します。
  • 15. カスタムオブジェクトを中心に実装する オブジェクト専用アクションとは? レコード詳細ページ アクションリスト カスタムアクションUI • グローバルアクションと同様、クイックなデータ入力をおこなうことができます。 • 任意のオブジェクトのレコードに関連するデータを作成するところが異なります。
  • 16. カスタムオブジェクトを中心に実装する オブジェクト専用アクション(VFベース)を作成する手順(1/2) • ビルド > 開発 > ページ で、新規にVisualforceページを作成し「Salesforceモバイルアプリケーショ ンでの利用が可能」にチェックして保存します。 • ビルド > カスタマイズ > Chatter > 設定でパブリッシャーアクションを有効化をチェックします。 • ビルド > 作成 > オブジェクトで任意のオブジェクトを選択し、「ボタン、リンク、およびアクション」関 連リストで「新規アクション」をクリックします。 • 下図のようにアクション種別を「カスタムVisualforce」に設定しその他の項目を適切に入力します。
  • 17. カスタムオブジェクトを中心に実装する オブジェクト専用アクション(VFベース)を作成する手順(2/2) • 同オブジェクトのページレイアウトを編集し、パブリッシャーレイアウトに作成したカスタムアクションを ドラッグ&ドロップして保存します。 • Salesforce1でレコード詳細ページの「+」ボタンをタップしてアクションが追加されていることを確認し ます。
  • 18. カスタムオブジェクトを中心に実装する コンパクトレイアウトとは? • レコード詳細ページ上部に表示される注目エリアです。 • レコードの中で特に重要な項目をこのエリアに表示させることでデータの視認性を高 めます。
  • 19. カスタムオブジェクトを中心に実装する コンパクトレイアウトを設定する手順 • ビルド > 作成 > オブジェクトで任意のオブジェクトを選択し、コンパクトレイアウトセクションで新規ボ タンをクリックします。 • レイアウトの名前と表示させる項目を選択して保存します。 • コンパクトレイアウト割り当てボタンをクリックし、続けて割り当ての編集ボタンをクリックします。 • 主コンパクトレイアウトを作成したレイアウトに変更して保存します。 • Salesforce1でレコード詳細画面をプルして更新し、コンパクトレイアウトが変更されることを確認してく ださい。
  • 20. カスタムオブジェクトを中心に実装する モバイルカードとは? レコード詳細ページ 中 レコード詳細ページ 右 • 固定長レイアウトにVisualforceページまたは拡張ルックアップを表示させること ができます。 • 従来もページレイアウトエディタに同様の機能はありましたが、モバイルカードは Salesforce1でのみ表示されるところが異なります。 • 縦サイズが変動しないコンテンツを表示するのに適しています。
  • 21. カスタムオブジェクトを中心に実装する モバイルカードを作成する手順 • ビルド > 開発 > ページ で、新規にVisualforceページを作成し「Salesforceモバイルアプリケーショ ンでの利用が可能」にチェックして保存します。 • ビルド > 作成 > オブジェクトで任意のオブジェクトを選択し、ページレイアウトセクションで対象となる レイアウトの編集をクリックしてレイアウトエディターを起動します。 • 作成したVisulaforceページをモバイルカードエリアにドラッグ&ドロップし、保存します。 • Salesforce1でレコード詳細ページをプルして更新し、モバイルカードが表示されることを確認します。
  • 22. カスタムオブジェクトを中心に実装する Flexibleページとは? ナビゲーションメニュー Flexibleページ • 様々なオブジェクトのレコードリストを一画面に表示する機能です。 • Winter'14時点では、別途xmlファイルを作成し、デプロイする必要があります。 • カスタムオブジェクトタブで構成されるアプリにおいて、起点となるページを作成す るのに適しています。
  • 23. カスタムオブジェクトを中心に実装する Flexibleページを作成する手順(1/2) • xmlでFlexibleページ本体を作成します。 • パッケージをzipで圧縮します。 • workbench.developerforce.comでzipファイルを組織にデプロイします。 ここまでの手順詳細はSalesforce1 App Develper's GuideのChapter15を参照ください。
  • 24. カスタムオブジェクトを中心に実装する Flexibleページを作成する手順(2/2) • ビルド > 作成 > タブ でFlexible Pagesタブのセクションで新規ボタンをクリックし、デプロイした Flexibleページを選択してタブを作成します。 • 管理 > モバイル管理 > モバイルナビゲーションを開き、「選択済み」に作成したFlexible Pagesタブを追 加して保存します。 • Salesforce1でナビゲーションメニューをプルして更新し、Flexibleページが表示されることを確認します。
  • 25. グローバルアクション カスタムオブジェクトタブ 専用Visualforce
  • 26. 専用Visualforceページを用意する デバイスに応じて レイアウトを自動最適化 ナビゲーションメニュー スマートフォンでの表示 タブレットでの表示 • 最も柔軟・自由にSalesforce1に最適化したUIを提供するための方式です。 • コーディングが必要です。 • 従来のVisualforce開発とは異なり、HTML5やオープンフレームワークを活用した構成が推奨されます。 • アプリのフル機能をSalesforce1で提供する場合に最適です。
  • 27. 専用Visualforceページを用意する Visualforceページをナビゲーションメニューに表示させる手順 • ビルド > 開発 > ページ で、Visualforceページを作成し、「Salesforceモバイルアプリケーションでの 使用が可能」にチェックして保存します。 • ビルド > 作成 > タブ で、作成したVisualforceページに紐づくVisualforceタブを作成します。 このタブはアプリケーションに追加する必要はありませんが、他の組織に配布する場合はパッケージに追 加する必要があります。 • 管理 > モバイル管理 > モバイルナビゲーションを開き、「選択済み」に作成したVisualforceタブを追加し て保存します。 • Salesforce1でナビゲーションメニューをプルして更新し、Visualforceページが表示されることを確認しま す。
  • 28. 専用Visualforceページを用意する Force.com Canvasでページを構成する • Force.comの外部で自社サービスを提供されている場合、Force.com Canvasを利用すればそのまま Salesforce1にUIを表示させることができます。 • UIがSalesforce1と調和するように必要に応じてカスタマイズをおこなってください。 Force.com 外部アプリ レスポンシブなWebコンテンツ 参考:Force.com Canvas入門ガイド http://www.slideshare.net/nkjm/forcecom-canvas-26902705 <apex:canvas>タグを含むVisualforceタブをナビゲーションメニューに表示させる
  • 29. 専用Visualforceページを用意する Visualforceページ開発で留意すべきポイント • Salesforce1ではHTML5のレスポンシブな構成が推奨されます。弊社が提供するMobile Pack, Mobile Design Templatesやその他オープンなフレームワークを活用したユーザービリティの高いUIがベストです。 • 逆にVisualforceの<apex:PageXXX>、<apex:detail>といった抽象度の高いタグの利用は推奨されませ ん。 • UIとApex, Databaseとのやり取りにはJavascript Remotingが極めて有用です。Force.com REST Javascript Toolkitに含まれるRemoteTKの活用も検討ください。 • 画面遷移は専用APIを利用します。 • Salesforce1で表示されるVisualforceページではsforce.oneというオブジェクトが利用可能になっ ており、このオブジェクトが様々な機能を提供してくれます。詳しくはSalesoforce1 App Developer's GuideのChapter16のManaging Navigationのセクションを参照ください。 • 他のVisualforceページに遷移する際には名前空間を付与してページ名を指定してください。
  • 30. パッケージング • グローバルアクション、オブジェクト専用アクション、コンパクトレイアウト、モバイルカード(ページレイ アウト)、Flexibleページ、Salesforce1対応Visualforceページはすべてパッケージング可能です。 • ただし、どのコンポーネントをSalesforce1のナビゲーションメニューに表示するかはインストール先組織 の「モバイルナビゲーションの設定」に委ねられます。セットアップガイドに有効化手順を記載しておくこと をおすすめします。
  • 31. 開発の進め方 • 基本的に、アクション => カスタムオブジェクトタブ中心 => 専用Visualforceの順に開発工数は増加し ていきます。まずは前者から適した機能があるかどうか検討してみてください。すでにHTML5ベースの VisualforceでUIを提供されている場合、専用Visualforceも現実的な選択肢になるでしょう。 • Salesforce1では従来の「アプリケーション」に該当するコンポーネントが存在しません。 • カスタムオブジェクトを中心とするアプリではFlexibleページがその役割を担います。 • 専用Visualforceページを中心とするアプリではホームとなるVisualfroceページを作成し、それを ナビゲーションメニューに表示させるようにします。 • ブラウザとモバイルアプリ、それぞれで動作を検証してください。また、ブラウザで動作を検証する際は Visualforceページを直接参照せず、/one/one.appにアクセスしてください。
  • 32. 参考資料 • Salesforce1 App Developer Guide • http://docs.developer.salesforce.com/docs/atlas.en-us.186.0.salesforce1.meta/ salesforce1/salesforce1_guide_introduction.htm • Salesforce.comが提供するモバイル開発ライブラリ • http://www2.developerforce.com/mobile/ • Force.com Canvas入門ガイド • http://www.slideshare.net/nkjm/forcecom-canvas-26902705 • サンプルアプリケーション「すごいアンケート」のソースコード • https://github.com/nkjm/sugoisurvey (S1_*がsalesforce1対応のVisualforceページ)