Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (14)
Semelhante a Salesforce1入門
Semelhante a Salesforce1入門 (20)
Mais de Kazuki Nakajima
Mais de Kazuki Nakajima (20)
Salesforce1入門
- 2. アジェンダ • Salesforce1とは？ • アプケーションをSalesforce1へ対応させる方法 • グローバルアクションでクイックな入力機能を提供する • カスタムオブジェクトタブを中心に実装する • 専用Visualforceページを用意する • パッケージング • 開発の進め方
- 4. プラットフォームとモバイルアプリ Your Customers Cloud . Social . Mobile . Connected Sales Cloud Service Cloud ExactTarget Marketing Cloud AppExchange Salesforce1 Platform Salesforce1モバイルアプリ
- 10. グローバルアクションでクイックな入力機能を提供する • クイックに何かを入力する、といった用途に最適な機能を提供します。 • 設定だけでも実装可能です。 • VisualforceまたはForce.com Canvasを利用して高度なカスタマイズをおこな うことも可能です。 フィードページ アクションリスト アクションUI
- 11. 作成手順 • ビルド > カスタマイズ > Chatter > 設定 で、パブリッシャーアクションを有効化をチェックします。 • ビルド > 作成 > グローバルアクション で、「新規アクション」をクリックし必要な項目を入力します。 • 続いて起動されるレイアウトエディターでフォームに表示させる項目をドラッグ＆ドロップで選択します。 • ビルド > カスタマイズ > Chatter > パブリッシャーレイアウトで、作成したグローバルアクションを追 加します。 グローバルアクションでクイックな入力機能を提供する
- 13. カスタムオブジェクトタブを中心に実装する • カスタムオブジェクトタブをモバイルに最適なUIで表示させます。 • 設定だけでも実装可能です。 • さらにオブジェクト専用アクション、コンパクトレイアウト、モバイルカード、FlexibleページといったUIコ ンポーネントが利用可能になっています。 ナビゲーションメニュー レコード詳細ページ オブジェクト専用アクション コンパクトレイアウト モバイルカードFlexibleページ レコードリスト
- 14. カスタムオブジェクトタブをナビゲーションメニューに表示させる手順 • （まだなければ）カスタムオブジェクトタブを作成します。 • いずれかのアプリケーションに作成したタブを追加します。 • Salesforce1でナビゲーションメニューをプルして更新し、カスタムタブが表示されることを確認します。 カスタムオブジェクトを中心に実装する
- 15. オブジェクト専用アクションとは？ • グローバルアクションと同様、クイックなデータ入力をおこなうことができます。 • 任意のオブジェクトのレコードに関連するデータを作成するところが異なります。 カスタムオブジェクトを中心に実装する レコード詳細ページ カスタムアクションUIアクションリスト
- 16. オブジェクト専用アクション(VFベース)を作成する手順(1/2) • ビルド > 開発 > ページ で、新規にVisualforceページを作成し「Salesforceモバイルアプリケーショ ンでの利用が可能」にチェックして保存します。 • ビルド > カスタマイズ > Chatter > 設定でパブリッシャーアクションを有効化をチェックします。 • ビルド > 作成 > オブジェクトで任意のオブジェクトを選択し、「ボタン、リンク、およびアクション」関 連リストで「新規アクション」をクリックします。 • 下図のようにアクション種別を「カスタムVisualforce」に設定しその他の項目を適切に入力します。 カスタムオブジェクトを中心に実装する
- 19. コンパクトレイアウトを設定する手順 • ビルド > 作成 > オブジェクトで任意のオブジェクトを選択し、コンパクトレイアウトセクションで新規ボ タンをクリックします。 ! ! ! ! ! ! ! ! ! • レイアウトの名前と表示させる項目を選択して保存します。 • コンパクトレイアウト割り当てボタンをクリックし、続けて割り当ての編集ボタンをクリックします。 • 主コンパクトレイアウトを作成したレイアウトに変更して保存します。 • Salesforce1でレコード詳細画面をプルして更新し、コンパクトレイアウトが変更されることを確認してく ださい。 カスタムオブジェクトを中心に実装する
- 20. モバイルカードとは？ • 固定長レイアウトにVisualforceページまたは拡張ルックアップを表示させること ができます。 • 従来もページレイアウトエディタに同様の機能はありましたが、モバイルカードは Salesforce1でのみ表示されるところが異なります。 • 縦サイズが変動しないコンテンツを表示するのに適しています。 カスタムオブジェクトを中心に実装する レコード詳細ページ 中 レコード詳細ページ 右
- 21. モバイルカードを作成する手順 • ビルド > 開発 > ページ で、新規にVisualforceページを作成し「Salesforceモバイルアプリケーショ ンでの利用が可能」にチェックして保存します。 • ビルド > 作成 > オブジェクトで任意のオブジェクトを選択し、ページレイアウトセクションで対象となる レイアウトの編集をクリックしてレイアウトエディターを起動します。 • 作成したVisulaforceページをモバイルカードエリアにドラッグ＆ドロップし、保存します。 ! ! ! ! ! ! ! ! • Salesforce1でレコード詳細ページをプルして更新し、モバイルカードが表示されることを確認します。 カスタムオブジェクトを中心に実装する
- 22. Flexibleページとは？ • 様々なオブジェクトのレコードリストを一画面に表示する機能です。 • Winter'14時点では、別途xmlファイルを作成し、デプロイする必要があります。 • カスタムオブジェクトタブで構成されるアプリにおいて、起点となるページを作成す るのに適しています。 カスタムオブジェクトを中心に実装する ナビゲーションメニュー Flexibleページ
- 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ページが表示されることを確認します。 カスタムオブジェクトを中心に実装する
- 26. 専用Visualforceページを用意する • 最も柔軟・自由にSalesforce1に最適化したUIを提供するための方式です。 • コーディングが必要です。 • 従来のVisualforce開発とは異なり、HTML5やオープンフレームワークを活用した構成が推奨されます。 • アプリのフル機能をSalesforce1で提供する場合に最適です。 ナビゲーションメニュー スマートフォンでの表示 タブレットでの表示 デバイスに応じて レイアウトを自動最適化
- 27. Visualforceページをナビゲーションメニューに表示させる手順 • ビルド > 開発 > ページ で、Visualforceページを作成し、「Salesforceモバイルアプリケーションでの使 用が可能」にチェックして保存します。 • ビルド > 作成 > タブ で、作成したVisualforceページに紐づくVisualforceタブを作成します。 ! ! ! • 管理 > モバイル管理 > モバイルナビゲーションを開き、「選択済み」に作成したVisualforceタブを追加し て保存します。 • Salesforce1でナビゲーションメニューをプルして更新し、Visualforceページが表示されることを確認しま す。 専用Visualforceページを用意する このタブはアプリケーションに追加する必要はありませんが、他の組織に配布する場合はパッケージに追 加する必要があります。
- 28. Force.com Canvasでページを構成する • Force.comの外部で自社サービスを提供されている場合、Force.com Canvasを利用すればそのまま Salesforce1にUIを表示させることができます。 • UIがSalesforce1と調和するように必要に応じてカスタマイズをおこなってください。 専用Visualforceページを用意する Force.com 外部アプリ <apex:canvas>タグを含むVisualforceタブをナビゲーションメニューに表示させる レスポンシブなWebコンテンツ 参考：Force.com Canvas入門ガイド http://www.slideshare.net/nkjm/forcecom-canvas-26902705
- 29. 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ページに遷移する際には名前空間を付与してページ名を指定してください。 専用Visualforceページを用意する
- 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/ • Salesforce1スタイルガイド • http://sfdc-styleguide.herokuapp.com • Force.com Canvas入門ガイド • http://www.slideshare.net/nkjm/forcecom-canvas-26902705 • サンプルアプリケーション「すごいアンケート」のソースコード • https://github.com/nkjm/sugoisurvey (S1_*がsalesforce1対応のVisualforceページ）
- 33. Force.com アプリケーションPaaS 開発者 製品 appexchange ビジネスアプリのマーケットプレイス ユーザー 出品 フィードバック 開発 i appexchange開発者向けに用意された無償トレーニングで開発と公開のノウハウを学べます。 appexchangeであれば全国のお客様にビジネスアプリを販売できますGetting Started!