中嶋 一樹テクニカルエバンジェリスト

@nkjm

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

アジェンダ• Salesforce1とは？

• アプケーションをSalesforce1へ対応させる方法• グローバルアクションでクイックな入力機能を提供する

• カスタムオブジェクトタブを中心に実装する

• 専用Visualforceページを用意する

• パッケージング

• 開発の進め方

Salesforce1とは？

プラットフォームとモバイルアプリ

Your Customers

Cloud . Social . Mobile . Connected

Sales Cloud Service Cloud ExactTargetMarketing Cloud AppExchange

Salesforce1 Platform Salesforce1モバイルアプリ

これまでのモバイルアプリとの関係

＊Chatter Mobile、Salesforce TouchはアップグレードでSalesforce1となります。

ユーザーがアクセスできる機能

Salesforce.comが提供するサービス

AppExchangeアプリ

自社開発アプリ

利用形態

モバイルアプリ モバイルブラウザー

アプリケーションをSalesforce1へ対応させる方法

カスタムオブジェクトタブ 専用Visualforce

グローバルアクション

グローバルアクションでクイックな入力機能を提供する

• クイックに何かを入力する、といった用途に最適な機能を提供します。

• 設定だけでも実装可能です。

• VisualforceまたはForce.com Canvasを利用して高度なカスタマイズをおこなうことも可能です。

フィードページ アクションリスト アクションUI

作成手順• ビルド > カスタマイズ > Chatter > 設定 で、パブリッシャーアクションを有効化をチェックします。

• ビルド > 作成 > グローバルアクション で、「新規アクション」をクリックし必要な項目を入力します。

• 続いて起動されるレイアウトエディターでフォームに表示させる項目をドラッグ＆ドロップで選択します。

• ビルド > カスタマイズ > Chatter > パブリッシャーレイアウトで、作成したグローバルアクションを追加します。

グローバルアクションでクイックな入力機能を提供する

専用Visualforceグローバルアクション

カスタムオブジェクトタブ

カスタムオブジェクトタブを中心に実装する

• カスタムオブジェクトタブをモバイルに最適なUIで表示させます。

• 設定だけでも実装可能です。

• さらにオブジェクト専用アクション、コンパクトレイアウト、モバイルカード、FlexibleページといったUIコンポーネントが利用可能になっています。

ナビゲーションメニュー レコード詳細ページ

オブジェクト専用アクション

コンパクトレイアウト

モバイルカードFlexibleページ

レコードリスト

カスタムオブジェクトタブをナビゲーションメニューに表示させる手順

• （まだなければ）カスタムオブジェクトタブを作成します。

• いずれかのアプリケーションに作成したタブを追加します。

• Salesforce1でナビゲーションメニューをプルして更新し、カスタムタブが表示されることを確認します。

カスタムオブジェクトを中心に実装する

ユーザーのマイディスプレイタブに加えられたタブは、アプリには追加されていなくてもナビゲーションメニューに表示されます。

オブジェクト専用アクションとは？

• グローバルアクションと同様、クイックなデータ入力をおこなうことができます。

• 任意のオブジェクトのレコードに関連するデータを作成するところが異なります。

カスタムオブジェクトを中心に実装する

レコード詳細ページ カスタムアクションUIアクションリスト

オブジェクト専用アクション(VFベース)を作成する手順(1/2)

• ビルド > 開発 > ページ で、新規にVisualforceページを作成し「Salesforceモバイルアプリケーションでの利用が可能」にチェックして保存します。

• ビルド > カスタマイズ > Chatter > 設定でパブリッシャーアクションを有効化をチェックします。

• ビルド > 作成 > オブジェクトで任意のオブジェクトを選択し、「ボタン、リンク、およびアクション」関連リストで「新規アクション」をクリックします。

• 下図のようにアクション種別を「カスタムVisualforce」に設定しその他の項目を適切に入力します。

カスタムオブジェクトを中心に実装する

オブジェクト専用アクション(VFベース)を作成する手順(2/2)

• 同オブジェクトのページレイアウトを編集し、パブリッシャーレイアウトに作成したカスタムアクションをドラッグ＆ドロップして保存します。

カスタムオブジェクトを中心に実装する

• Salesforce1でレコード詳細ページの「＋」ボタンをタップしてアクションが追加されていることを確認します。

コンパクトレイアウトとは？

• レコード詳細ページ上部に表示される注目エリアです。

• レコードの中で特に重要な項目をこのエリアに表示させることでデータの視認性を高めます。

カスタムオブジェクトを中心に実装する

コンパクトレイアウトを設定する手順• ビルド > 作成 > オブジェクトで任意のオブジェクトを選択し、コンパクトレイアウトセクションで新規ボタンをクリックします。

• レイアウトの名前と表示させる項目を選択して保存します。

• コンパクトレイアウト割り当てボタンをクリックし、続けて割り当ての編集ボタンをクリックします。

• 主コンパクトレイアウトを作成したレイアウトに変更して保存します。

• Salesforce1でレコード詳細画面をプルして更新し、コンパクトレイアウトが変更されることを確認してください。

カスタムオブジェクトを中心に実装する

モバイルカードとは？

• 固定長レイアウトにVisualforceページまたは拡張ルックアップを表示させることができます。

• 従来もページレイアウトエディタに同様の機能はありましたが、モバイルカードはSalesforce1でのみ表示されるところが異なります。

• 縦サイズが変動しないコンテンツを表示するのに適しています。

カスタムオブジェクトを中心に実装する

レコード詳細ページ 中 レコード詳細ページ 右

モバイルカードを作成する手順• ビルド > 開発 > ページ で、新規にVisualforceページを作成し「Salesforceモバイルアプリケーションでの利用が可能」にチェックして保存します。

• ビルド > 作成 > オブジェクトで任意のオブジェクトを選択し、ページレイアウトセクションで対象となるレイアウトの編集をクリックしてレイアウトエディターを起動します。

• 作成したVisulaforceページをモバイルカードエリアにドラッグ＆ドロップし、保存します。

• Salesforce1でレコード詳細ページをプルして更新し、モバイルカードが表示されることを確認します。

カスタムオブジェクトを中心に実装する

Flexibleページとは？

• 様々なオブジェクトのレコードリストを一画面に表示する機能です。

• Winter'14時点では、別途xmlファイルを作成し、デプロイする必要があります。

• カスタムオブジェクトタブで構成されるアプリにおいて、起点となるページを作成するのに適しています。

カスタムオブジェクトを中心に実装する

ナビゲーションメニュー Flexibleページ

Flexibleページを作成する手順(1/2)• xmlでFlexibleページ本体を作成します。

• パッケージをzipで圧縮します。

• workbench.developerforce.comでzipファイルを組織にデプロイします。

カスタムオブジェクトを中心に実装する

ここまでの手順詳細はSalesforce1 App Develper's GuideのChapter15を参照ください。

Flexibleページを作成する手順(2/2)• ビルド > 作成 > タブ でFlexible Pagesタブのセクションで新規ボタンをクリックし、デプロイした

Flexibleページを選択してタブを作成します。

• 管理 > モバイル管理 > モバイルナビゲーションを開き、「選択済み」に作成したFlexible Pagesタブを追加して保存します。

• Salesforce1でナビゲーションメニューをプルして更新し、Flexibleページが表示されることを確認します。

カスタムオブジェクトを中心に実装する

カスタムオブジェクトタブグローバルアクション

専用Visualforce

専用Visualforceページを用意する

• 最も柔軟・自由にSalesforce1に最適化したUIを提供するための方式です。

• コーディングが必要です。

• 従来のVisualforce開発とは異なり、HTML5やオープンフレームワークを活用した構成が推奨されます。

• アプリのフル機能をSalesforce1で提供する場合に最適です。

ナビゲーションメニュー スマートフォンでの表示 タブレットでの表示

デバイスに応じてレイアウトを自動最適化

Visualforceページをナビゲーションメニューに表示させる手順

• ビルド > 開発 > ページ で、Visualforceページを作成し、「Salesforceモバイルアプリケーションでの使用が可能」にチェックして保存します。

• ビルド > 作成 > タブ で、作成したVisualforceページに紐づくVisualforceタブを作成します。

• 管理 > モバイル管理 > モバイルナビゲーションを開き、「選択済み」に作成したVisualforceタブを追加して保存します。

• Salesforce1でナビゲーションメニューをプルして更新し、Visualforceページが表示されることを確認します。

専用Visualforceページを用意する

このタブはアプリケーションに追加する必要はありませんが、他の組織に配布する場合はパッケージに追加する必要があります。

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

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ページを用意する

パッケージング• グローバルアクション、オブジェクト専用アクション、コンパクトレイアウト、モバイルカード（ページレイアウト）、Flexibleページ、Salesforce1対応Visualforceページはすべてパッケージング可能です。

• ただし、どのコンポーネントをSalesforce1のナビゲーションメニューに表示するかはインストール先組織の「モバイルナビゲーションの設定」に委ねられます。セットアップガイドに有効化手順を記載しておくことをおすすめします。

開発の進め方• 基本的に、アクション => カスタムオブジェクトタブ中心 => 専用Visualforceの順に開発工数は増加していきます。まずは前者から適した機能があるかどうか検討してみてください。すでにHTML5ベースのVisualforceでUIを提供されている場合、専用Visualforceも現実的な選択肢になるでしょう。

• Salesforce1では従来の「アプリケーション」に該当するコンポーネントが存在しません。

• カスタムオブジェクトを中心とするアプリではFlexibleページがその役割を担います。

• 専用Visualforceページを中心とするアプリではホームとなるVisualfroceページを作成し、それをナビゲーションメニューに表示させるようにします。

• ブラウザとモバイルアプリ、それぞれで動作を検証してください。また、ブラウザで動作を検証する際はVisualforceページを直接参照せず、/one/one.appにアクセスしてください。

参考資料• 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ページ）