Salesforce1 モバイルアプリケーション開発者ガイド

Salesforce1 モバイルアプリケーション開
発者ガイド
バージョン 6, 2015 年 12 月
作成者
Dianne Siebold
Samantha Ready
Michelle Chapman-Thurber
寄稿者
Michael Alderete
Cliff Armstrong
Jay Hurst
Dean Moses
Tammy Rahn
Samantha Reynard
Jim Sinai
Quinton Wall
Emily Wilska
Salesforce1 の宣言型 (ポイント & クリック) の機能とプログラムによる (コー
ドベース) 機能の両方について説明します。Salesforce1 でのモバイルの操作
性のために Visualforce ページおよびクイックアクションなどの既存の機能
を最適化する方法を示すことを目的として、本書では、既存の組織をモバ
イル対応にするプロセスについて説明します。
Salesforce1 モバイルアプリケーション開発者ガイド
© Copyright 2000–2016 salesforce.com, inc. All rights reserved. Salesforce およびその他の名称や商
標は、salesforce.com, inc. の登録商標です。本ドキュメントに記載されたその他の商標
は、各社に所有権があります。
それぞれの商標は、それぞれの商標所有者に帰属します。
本出版物のいかなる部分も、発行者の事前の承諾なしに、電子的、機械的、写真複
写、録音、またはその他のいかなる手段を問わず、いかなる様式でも、複製、情報検
索システムへの保存、および伝達を禁止します。
目次
第 1 章: はじめに . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Salesforce App Cloud アプリケーションの概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Salesforce App Cloud の機能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Salesforce1 アプリケーションの概要 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Salesforce1 での操作方法 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
他のモバイルアプリケーションとの連携 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
第 2 章: 本書について . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
本書の対象読者 . . . . . . . . .
使用開始方法 . . . . . . . . . .
サンプルシナリオについて
Acme Wireless について . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
14
14
15
15
第 3 章: 作業環境の設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
拡張 Warehouse データモデルをインストールする . . . . . . . . . . . . . . . . . . . . . . . 18
Salesforce1 アプリケーションをダウンロードする . . . . . . . . . . . . . . . . . . . . . . . . 19
Salesforce1 の管理 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
第 4 章: Salesforce1 の設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Salesforce1 を使用できるユーザの定義 . . . . .
通知について . . . . . . . . . . . . . . . . . . . . . . .
実際に試す: 通知の有効化 . . . . . . . . . . . . . .
Salesforce1 でのオフラインアクセスについて
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
22
23
25
25
第 5 章: Salesforce1 ナビゲーションメニューのカスタマイズ . . . . . . . . . . . . 29
Salesforce1 ナビゲーションメニューについて . . . . . . . . . . . . . .
実際に試す: Salesforce1 ナビゲーションメニューを設定する
Salesforce1 ナビゲーションメニューをテストする . . . . . . .
Salesforce1 ナビゲーションメニューの仕組み . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
30
32
33
34
第 6 章: Salesforce1 でのデータの表示方法のカスタマイズ . . . . . . . . . . . . . 37
Salesforce1 でのページレイアウトの機能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
目次
モバイル用ページレイアウトの見直し . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
実際に試す: モバイル技術者プロファイル用のカスタムページレイアウ
トを作成する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
ページレイアウトをテストする . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
モバイル用ページレイアウトの最適化のヒント . . . . . . . . . . . . . . . . . . . . . . 45
コンパクトレイアウトについて . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
実際に試す: コンパクトレイアウトを作成する . . . . . . . . . . . . . . . . . . . . . . 47
コンパクトレイアウトをテストする . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
もうひとこと: コンパクトレイアウト . . . . . . . . . . . . . . . . . . . . . . . . . . 51
第 7 章: Salesforce1 でのアクションの使用 . . . . . . . . . . . . . . . . . . . . . . . . . . 53
クイックアクションについて . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
アクションのカテゴリ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
ポイント & クリック操作によるアクション . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
実際に試す: オブジェクト固有のアクションを作成する . . . . . . . . . . . . . . . . 58
実際に試す: アクションを取引先ページレイアウトに割り当てる . . . . . 59
グローバルクイックアクションについて . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
もうひとこと: アクション . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
アクションレイアウトについて . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
実際に試す: オブジェクト固有のアクションレイアウトをカスタマイズす
る . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
オブジェクト固有のクイックアクションをテストする . . . . . . . . . . . . . 66
アクションの定義済みの値について . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
実際に試す: アクションの定義済み項目値を設定する . . . . . . . . . . . . . . . . . 69
定義済みの値をテストする . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
カスタムアクションについて . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
第 8 章: システム管理者のためのガイドラインとベストプラクティス . . . . 73
アクションのガイドラインとベストプラクティス . . . . . . . . . . . . . . . . . . . . . . . . 74
カスタムアイコンのガイドラインとベストプラクティス . . . . . . . . . . . . . . . . . . . 75
Salesforce1 向けの開発
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
第 9 章: Salesforce App Cloud 開発へようこそ . . . . . . . . . . . . . . . . . . . . . . . . 77
シナリオ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
第 Ⅱ 部の対象読者 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
目次
Salesforce1 アプリケーションを作成するときに宣言型ツールを使用するケースと
プログラム型ツールを使用するケース . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Salesforce App Cloud の使用とカスタムアプリケーションの作成の違い . . . . . . . . 80
Salesforce App Cloud の開発プロセス . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
開発の前提条件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
システム管理者のページレイアウトの割り当てを変更する . . . . . . . . . . . . . 83
第 10 章: モバイル優先のユーザインターフェースの設計 . . . . . . . . . . . . . . 85
モバイル用の設計 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
ナビゲーションを簡潔に保つ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
重要な情報を上部に配置する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86
項目の数を最小限に抑える . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
項目のデフォルトを使用する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
ユーザインターフェーステキストを最小限に抑える . . . . . . . . . . . . . . . . . . . . . . 89
タップターゲットのサイズ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
第 11 章: Visualforce ページを使用した Salesforce1 の拡張 . . . . . . . . . . . . . . . 91
実際に試す: Visualforce ページを作成する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
タブを新規作成する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
ナビゲーションメニューにタブを追加する . . . . . . . . . . . . . . . . . . . . . . . . . 97
Visualforce ページをテストする . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
もうひとこと: Salesforce1 で Visualforce ページを表示できる場所 . . . . . . . . . . . . 100
もうひとこと: コードについて . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
第 12 章: Visualforce カスタムアクションを使用した機能の追加 . . . . . . . . 105
カスタムアクションシナリオ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
実際に試す: Visualforce カスタムアクションを作成する . . . . . . . . . . . . . . . . . . . 106
Visualforce カスタムアクションをページレイアウトに追加する . . . . . . . . . . 107
Visualforce カスタムアクションをテストする . . . . . . . . . . . . . . . . . . . . . . . 108
もうひとこと: コードについて . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
第 13 章: Force.com Canvas を使用した Salesforce1 への Web アプリケー
ションの統合 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Force.com Canvas について . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
キャンバスカスタムアクションを使用した Salesforce1 の拡張 . . . . . . . . . . . . . . . 121
実際に試す: Shipify Web アプリケーションをコピーする . . . . . . . . . . . . . . . 121
目次
Shipify キャンバスアプリケーションを作成する . . . . . . . . . . . . . . . . . . 123
Shipify キャンバスアプリケーションにアクセスできるユーザを設定す
る . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
Heroku 環境変数を設定する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
アクションをグローバルパブリッシャーレイアウトに追加する . . . . . . 128
キャンバスカスタムアクションをテストする . . . . . . . . . . . . . . . . . . . 129
もうひとこと: キャンバスアプリケーションでコンテキストを取得する . . . . 131
フィードのキャンバスアプリケーションを使用した Salesforce1 の拡張 . . . . . . . . 136
実際に試す: DeliveryTrakr Web アプリケーションをコピーする . . . . . . . . . . . 137
DeliveryTrakr キャンバスアプリケーションを作成する . . . . . . . . . . . . . 139
DeliveryTrakr キャンバスアプリケーションにアクセスできるユーザを設
定する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Heroku 環境変数を設定する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
グローバルアクションを作成する . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
アクションをグローバルパブリッシャーレイアウトに追加する . . . . . . 145
DeliveryTrakr キャンバスアプリケーションをテストする . . . . . . . . . . . 146
もうひとこと: フィード項目を作成するコードについて . . . . . . . . . . . . . . . 152
第 14 章: API からのクイックアクションのコール . . . . . . . . . . . . . . . . . . . . 155
実際に試す: 請求書アクションを作成する . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
アクションをコールするコードを追加する . . . . . . . . . . . . . . . . . . . . . . . . 157
API からのアクションのコールをテストする . . . . . . . . . . . . . . . . . . . . . . . 159
もうひとこと: クイックアクションと REST API . . . . . . . . . . . . . . . . . . . . . . . . . . 162
第 15 章: Lightning ページを使用したユーザインターフェースの拡張 . . . . 175
Lightning ページとは? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Lightning ページ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Lightning ページ: 全体像 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
作業を開始する前に: Deliveries アプリケーションをダウンロードする . . . . . 180
Lightning ページの作成 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
実際に試す: Lightning ページを作成する . . . . . . . . . . . . . . . . . . . . . . . 182
Lightning ページへのクイックアクションの割り当て . . . . . . . . . . . . . . . . . . 184
実際に試す: クイックアクションを Lightning ページに追加する . . . . . . 184
Lightning ページのリリース . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
実際に試す: Lightning ページをリリースする . . . . . . . . . . . . . . . . . . . . . . . 186
目次
[Lightning ページ] タブについて . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
実際に試す: [Lightning ページ] タブを作成する . . . . . . . . . . . . . . . . . . . . . . 187
もうひとこと: [Lightning ページ] タブ . . . . . . . . . . . . . . . . . . . . . . . . . 189
Salesforce1 で Lightning ページを使用できるようにする方法 . . . . . . . . . . . . . . . . 190
実際に試す: Lightning ページを Salesforce1 ナビゲーションメニューに追加す
る . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
Salesforce1 で Lightning ページをテストする . . . . . . . . . . . . . . . . . . . . . . . . 190
もうひとこと: Lightning ページ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
第 16 章: 開発のガイドラインとベストプラクティス . . . . . . . . . . . . . . . . . 195
ナビゲーションメニューまたはアクションバーを使用する状況 . . . . . . . . . . . . . 196
Visualforce のガイドラインとベストプラクティス . . . . . . . . . . . . . . . . . . . . . . . 198
モバイルとデスクトップでの Visualforce ページの共有 . . . . . . . . . . . . . . . . 199
モバイルまたはデスクトップからの Visualforce ページの除外 . . . . . . . . . . . 200
Salesforce1 の Visualforce ページのアーキテクチャの選択 . . . . . . . . . . . . . . 200
標準の Visualforce ページ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Visualforce と HTML の組み合わせ . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
JavaScript Remoting と静的 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Salesforce1 で避けるべき Visualforce のコンポーネントおよび機能 . . . . . . . . 211
サポート対象外の Visualforce のコンポーネント . . . . . . . . . . . . . . . . . 212
効果的なページレイアウトの選択 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
ユーザの入力と操作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
ナビゲーションの管理 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
sforce.one オブジェクトを使用したナビゲーション . . . . . . . . . . . . . . 224
sforce.one での API バージョンの処理方法 . . . . . . . . . . . . . . . . . . . . . 229
ビジュアルデザインの考慮事項 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
カスタムアクションとしての Visualforce ページの使用 . . . . . . . . . . . . . . . . 236
モバイルとデスクトップの両方で機能する Visualforce ページの作成 . . . . . . 237
Visualforce ページのパフォーマンスチューニング . . . . . . . . . . . . . . . . . . . 239
Force.com Canvas のガイドラインとベストプラクティス . . . . . . . . . . . . . . . . . . 240
Chatter パブリッシャーと Salesforce1 アクションバーのキャンバスアプリケー
ション . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 240
フィードのキャンバスアプリケーション . . . . . . . . . . . . . . . . . . . . . . . . . . 242
キャンバスアプリケーションコンテキスト . . . . . . . . . . . . . . . . . . . . . . . . 243
キャンバスアプリケーションのカスタムアイコン . . . . . . . . . . . . . . . . . . . 244
目次
第 17 章: 補足 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
第1章
トピック:
•
Salesforce App
Cloud アプリケー
ションの概要
•
Salesforce App
Cloud の機能
•
Salesforce1 アプリ
ケーションの概要
•
Salesforce1 での操作
方法
•
他のモバイルアプ
リケーションとの
連携
はじめに
モバイルは、プライベートと仕事の両方でインターネット
に接続する標準的なツールになりました。インターネット
に接続することは生活の中でますます当然のことになって
います。ただし、デスクで利用するのではなく、飛行機、
タクシー、ホテルの中や、会議の合間、コーヒーを待つ時
間に接続するようになりました。友人のフォロー、状況
フィードの更新、現地のビジネスの調査、同僚とのコラボ
レーション、取引先とのメールの送受信など、すべてをま
すます外出中に行うようになりました。
また同時に、企業は革新を起こして競合他社に打ち勝つた
めに、日々熱意とスピード感を持って事業に取り組んでい
ます。今後ビジネスで成功するには、モバイルファースト
の社会と、場所や状況に関係なく利用できるモバイルがも
たらす自由を受け入れる必要があります。
Salesforce1 は、ソーシャルファーストとモバイルファースト
の社会を対象にしたアプリケーション開発に画期的な方法
をもたらすことによって、革新の鈍化やモバイルの専門家
不足といった問題を解決します。Salesforce1 はすべてのユー
ザの生産性を劇的に改善します。その理由は、顧客だけで
なく、従業員、パートナー、消費者、デバイスをすべての
中心に据えているからです。
この結果、サービスとしてのソフトウェア (Software as a Service)
と同じくらい強烈な可能性を持つ高速接続のモバイルソ
リューションが生まれました。Salesforce1 で未来を構築しま
しょう。
1
第1章
はじめに
Salesforce App Cloud アプリケーションの概要
Salesforce1 は、万人向けのモバイルアプリケーション開発プラットフォームです。
Salesforce1 により、ISV、開発者、システム管理者、そしてすべてのユーザが自在にイ
ノベーションに取り組めます。
組織のモバイルアプリケーション開発をこれまでになく促進するこのアプローチは、
モバイルソリューションやソーシャルソリューションを数日あるいは数週間で提供し
なければならないという今日のニーズに応えて考案されたものです。メタデータ駆動
のアプリケーションが、ユーザの操作に応じたコンテキストをインテリジェントに提
示します。これらのアプリケーションには情報ベースのモバイルデバイス機能が装備
され、たとえば、地図上の住所の表示や、タップによる電話番号ダイヤル、フィード
中心のワークフローの作成などが可能になります。
ビジネスユーザやシステム管理者は、コードなしのクリック操作でアプリケーション
を開発して、高性能のワークフロールール、承認プロセス、動的なユーザインター
フェースを完備できます。ビジネスユーザが独自のアプリケーションを作成して IT 部
門がその安全性や信頼性をほとんど確認できない他のソリューションとは異なり、
Salesforce1には、イノベーションというビジネスニーズを制限することなく、システム
管理者がアプリケーションを一元的に管理するツールが用意されています。
進展性や統合性のためのオープン API による拡張を念頭に置いた設計と、強力な開発
者ツールにより、開発者や ISV がこのプラットフォーム上で構築できるものに限界は
ありません。Salesforce1の柔軟な開発モデルでは、各システム管理者や開発者がモバイ
ルバックエンドサービスで支えられたカスタムアプリケーションを作成でき、独創的
ながら、使いやすいモバイルユーザ環境が実現します。Salesforce App Cloud で開発をす
る ISV は、Salesforce App Cloud 内のパッケージ化やバージョン管理の高度な制御機能、
AppExchange を含む優れたエンタープライズクラスのマーケットプレイス機能、アプリ
ケーションのフィードファースト検出を活用するアプリケーションを開発できます。
Salesforce App Cloud の機能
Salesforce App Cloud は、Force.com、Heroku、ExactTarget Fuel が結集され、1 つの極めて強力
なソーシャル、モバイル、そしてクラウドサービスの体系を構成しています。これら
のサービスはすべて API ファーストで構築されています。
Salesforce App Cloud は次の機能を備えています。
2
第1章
はじめに
ソーシャルデータ
このプラットフォームの中核をなすのが、Salesforce1 内で共有したり、フォローした
り、コラボレーションしたり、データに対してビジネスアクションを直接実行したり
できる機能です。ユーザは 1 回のタップでレコードやデータをフォローできます。リ
アルタイムで変更の通知を受信することや、レコードフィード内で直接コラボレー
ションすることもできます。こうした操作へのフィードベースのアプローチにより、
ユーザは各自にとって最も重要性の高い内容にフォーカスできます。
データをソーシャルツールと位置づけ、ビジネスに積極的に関与させることで、
Salesforce1では、更新を共有したり、ワークフローをトリガしたりするほか、作業者や
チーム、パートナーや顧客とのコラボレーションプロセスの一環としてデータを活用
します。その結果、ビジネスの生産性を高める新しいビジネスアプリケーションやプ
ロセスを作成する、かつてない機会が生まれます。
宣言型およびプログラム型の開発
IT 部門は、競争上の優位性を保つために、ビジネスに求められる変化のペースに遅れ
を取らないよう必死に取り組んでいます。IT 部門は、既存の社内システムを管理しな
がら、特にモバイルアプリケーションの開発経験を持つ専門的な開発者を採用および
保持する必要があるため、リソース面で制約されることがよくあります。
Salesforce1では、データの保存や操作、ワークフローでのクラウドベースのロジックの
定義、承認プロセスや数式の作成、モバイル対応アプリケーションの作成を直観的な
ドラッグ & ドロップツールで行えるようにすることで、この問題を解決します。
専門開発者は、ごく一般的なオープンソースの言語やツール、標準を使用して、完全
カスタム仕様のアプリケーションやユーザインターフェースを構築できます。Salesforce1
は、他のプラットフォームとは異なり、開発者とシステム管理者が同じプラットフォー
ム上でアプリケーションを作成するユニークな環境となるため、複雑なインテグレー
ションソリューションを構築する手間が省けます。
アクションベースのアプリケーションモデル
Salesforce1の開発プロセスの中心にあるのは顧客です。複雑な開発サイクルを要さず、
注文の作成、納品日の設定、経路の選択など、アクションを介してアプリケーション
を宣言できます。システム管理者は、アクションのデフォルト値を定義してアプリ
3
第1章
はじめに
ケーションをスリム化し、マウスのクリックや指でのスワイプで操作できるようにし
ます。
デスクトップ経由で定義したアクションは、モバイルデバイス上の状況に応じたメ
ニューにすぐに反映されます。さらに、開発者が Salesforce1 とのインテグレーション
を構築する場合、XML または JSON データエンベロープを受け入れることができる RESTful
エンドポイントでアクションが自動的に有効になります。
オープン API ですべてに接続
Salesforce は柔軟性が高く、1 日に 13 億件を超えるトランザクションを実行する効率的
でスケーラブルな API を使用して、あらゆるものに接続するアプリケーションを作成
できます。オブジェクトやデータエンティティがすぐに REST に対応します。
salesforce.com の API には、データを読み込む Bulk API、どこでも自在にコラボレーション
するソーシャル API、転送通知のインテグレーションをサポートする最先端のストリー
ミング API、権限やデータアクセスポリシー、項目種別、ユーザの操作性など、ビジ
ネスのあらゆる面を記述するメタデータ API が含まれます。
Salesforce1 アプリケーションの概要
Salesforce1 アプリケーションは、外出先で使用できる Salesforce です。これらのエンター
プライズクラスのモバイルアプリケーションを使用すると、オフィスで表示するのと
同じ情報にリアルタイムでアクセスできますが、情報は外出先での作業用に整理され
て表示されるため、顧客とのミーティングの合間、飛行機の待ち時間などの貴重な自
由時間や、コーヒーを待っているわずかな時間でも迅速に作業できます。
Salesforce1 は、次のように異なる方法で取得できます。
• App Store および Google Play™ からダウンロード可能アプリケーションとして取得す
る。
• モバイルブラウザアプリケーションとして取得する。モバイルブラウザアプリケー
ションは、サポートされるモバイルブラウザで実行されます。この方法では、何
もインストールする必要はありません。
4
第1章
はじめに
サポートされるデバイス
Salesforce1にアクセスする方法は、使用するアプリケーションがダウンロード可能アプ
リケーションかモバイルブラウザアプリケーションかに応じて異なります。
Salesforce1 アプリサポートされるデバ
ケーション
イス
サポートされるモバサポートされるモバ
イル OS
イルブラウザ
iOS v7.3.3 以降のダ iPhone 5 以降のモデル iOS 8 以降
ウンロード可能ア iPad 4 以降のモデル
プリケーション
(iPad Air 2 および iPad
Pro を含む)
該当なし
iPad mini 2 以降のモデ
ル
Apple Watch (転送通知
のみ)
Android v8.0 以降の Android 端末
ダウンロード可能
アプリケーション
Android 4.4 以降
モバイルブラウザ iPhone 5 以降のモデル iOS 8 以降
アプリケーション iPad 4 以降のモデル
(iPad Air 2 および iPad
Pro を含む)
該当なし
Apple Safari
Good Access
iPad mini 2 以降のモデ
ル
Android 端末
Android 4.4 以降
Google Chrome
Android タブレット
Good Access
Nokia Lumia 1020 および Windows 8.1 Update
HTC 8X 端末
Microsoft Internet
Explorer 11
BlackBerry Z10 端末
BlackBerry OS 10.2 以降 BlackBerry ブラウザ
5
第1章
はじめに
Salesforce1 アプリサポートされるデバ
ケーション
イス
サポートされるモバサポートされるモバ
イル OS
イルブラウザ
(Winter '17 でサポート
終了)
BlackBerry Z30 端末
(Winter '17 でサポート
終了)
BlackBerry OS
10.2.1.3175 以降
BlackBerry ブラウザ
本書では、ダウンロード可能アプリケーションのみを扱います。Salesforce1モバイルブ
ラウザアプリケーションについての情報は、Salesforce ヘルプの「Salesforce1 モバイルブ
ラウザアプリケーションの有効化」を参照してください。
Salesforce1 での操作方法
Salesforce1 アプリケーションの概要を確認してみましょう。
ユーザが Salesforce1 にログインすると、最初にランディングページが表示されます。
Salesforce1ナビゲーションメニューの最初の項目は、デフォルトではユーザのランディ
ングページになります。組織で Chatter を有効にしていて、Salesforce1 ナビゲーション
メニューをカスタマイズしてメニューの最初の項目を他の項目に変更していない場合
は、ユーザのフィードがランディングページになります。
フィード
Chatter フィードには、自分の更新、フォローするレコードと人への更新、フォローす
るグループの更新が表示されます。フィード項目をタップすると、項目の詳細がすべ
て表示されます。フィードでプルダウンすると、検索バー (1)、並び替えオプションと
検索条件オプション (2)、フィードドロップダウンメニュー (3)、フィード項目 (4) が表
示されます。
6
第1章
はじめに
フィード、レコードページ、および Salesforce1 の他の場所から、ユーザはアクション
バーを使用してアクションにアクセスします。
アクションバーとアクションメニュー
表示しているフィードまたはレコードページによっては、アクションバーとアクショ
ンメニューに異なるアクションが表示されます。たとえば、フィードからは、グロー
バルアクションのセットが表示されます。しかし、レコードページからは、生産性ア
クションの組み合わせ、標準ボタンとカスタムボタン、[投稿] や [ファイル] などの標
準 Chatter アクション、そのレコードタイプのレイアウトに割り当てられたグローバル
アクションとオブジェクト固有のアクションが表示されます。アクションバーから
をタップすると、オブジェクトに使用できるすべてのアクションのセットが含ま
れたアクションメニューが開きます。
7
第1章
はじめに
「Salesforce1 でのアクションの使用」 (ページ 53)で、アクションの作成およびカスタ
マイズを確認しましょう。
Salesforce1 ナビゲーションメニュー
Salesforce1 で
が表示される場所ならどこでも、タップしてナビゲーションメニュー
にアクセスできます。
メニューに表示される内容は、システム管理者が行った設定、組織で利用可能な機
能、各ユーザがそれぞれのユーザ権限とプロファイルを基にアクセスした内容によっ
て決定されます。
8
第1章
はじめに
1. 検索ボックス
2. メニュー項目 — ナビゲーションメニューをカスタマイズするときに [スマート
検索項目] の要素の上部に配置する項目
3. スマート検索項目 — [最近] セクションの最近検索したオブジェクトのセット
や、[さらに表示] リンクにあるサポート対象の多数のオブジェクトのセットを
含む
4. [アプリケーション] セクション — [スマート検索項目] の要素の下に配置したす
べての項目を含む
ユーザは、ナビゲーションメニューから、フィード、オブジェクト、アプリケーショ
ン、ToDo、メモ、およびメニューに追加したすべての項目にアクセスできます。
「Salesforce1 ナビゲーションメニューについて」 (ページ 30)で、ナビゲーションメ
ニューのコンポーネントの詳細を確認しましょう。ここではまず、レコードを見てみ
ましょう。
9
第1章
はじめに
レコードビュー
レコードビューは、レコードフィード、詳細、関連情報ページで構成されます。これ
らを参照するには、画面を左右にスワイプします。組織でChatterを有効化していない
場合、レコードビューに表示されるのは詳細ページおよび関連情報ページのみです。
各レコードページの上部にレコードの [特長] 領域があります。標準オブジェクトのア
イコンはSalesforceで事前定義されていますが、カスタムオブジェクトのアイコンはカ
スタムオブジェクトのタブスタイルを使用して選択できます。
コンパクトレイアウトを使用して、レコードの [特長] セクションに表示される項目を
カスタマイズできます。コンパクトレイアウトは、「コンパクトレイアウトについ
て」 (ページ 47)で確認します。
10
第1章
はじめに
1. [戻る] 矢印 — 前のページに戻る
2. レコードの [特長] — オブジェクトのコンパクトレイアウトに割り当てられた最
初の 4 つの項目が表示されます。
他にどのようなことを知る必要がありますか?
ほとんどのページの上部から、
をタップして通知にアクセスできます。
最近使ったオブジェクトのページ、検索ページ、関連リストページの上部の [新規] を
タップして、新しいレコードを作成できます。組織で作成アクションが設定されてい
る場合は、アクションを使用してレコードを作成および更新することもできます。
他のモバイルアプリケーションとの連携
Salesforce1 アプリケーションが他の Salesforce Mobile 製品とどのように連携するのか気に
なることと思います。
• SalesforceA により、システム管理者は、ビジネスの要となる組織管理タスクにモバ
イルアクセスできます。このアプリケーションでは、ユーザアカウントの編集、
ロック解除、凍結、無効化や、パスワードのリセット、権限セットの割り当てな
どを行います。
• Salesforce Classic Mobile は、現在も Salesforce Mobile 製品の一部です。Salesforce Classic
Mobile ユーザが、Salesforce1 のほうが自分のニーズに適していると思う可能性もあ
りますが、オフラインモードで作成や編集が必要な場合は引き続き Salesforce Classic
Mobile が最適な選択肢となります。
Salesforce モバイルアプリケーションのフルスイートの詳細は、Salesforce ヘルプの
「Salesforce Mobile 製品の比較」を参照してください。
11
第2章
トピック:
•
本書の対象読者
•
使用開始方法
•
サンプルシナリオ
について
•
Acme Wireless につ
いて
本書について
このガイドでは、Salesforce1 の宣言型 (ポイント & クリック)
機能とプログラムによる (コードベース) 機能の両方につい
て説明します。
Salesforce App Cloud を構成する各側面をご理解いただくため、
また、Visualforce ページやアクションなどの既存の機能を
Salesforce1 のモバイルでの操作用に最適化する方法を説明す
るため、本書では、既存の組織をモバイル対応の組織に強
化するプロセスについて解説します。
13
第2章
本書について
本書の対象読者
このガイドは、2 つの主要セクションで構成されています。最初の「Salesforce1 の管
理」のセクションはシステム管理者を対象としており、[設定] の宣言型Salesforce1ツー
ルについて説明します。このツールを使用すると、ポイント & クリック操作だけで
Salesforce1モバイル環境に対応できるように組織の準備を整えることができます。この
セクションには、モバイル用ページレイアウトの最適化、Salesforce1ナビゲーションメ
ニューのカスタマイズ、アクションの作成、モバイル通知の設定などを行う方法が記
載されています。
2 つ目の「Salesforce1 向けの開発」のセクションは、コードの作業に慣れた上級システ
ム管理者および開発者向けです。この章の内容を完全に理解するには、Visualforce、
XML、およびキャンバスアプリケーションに精通している必要があります。モバイル
用のVisualforceページの最適化、カスタムアクションの作成、およびLightning ページを
使用した Salesforce1 用のカスタムアプリケーションホームページの作成について説明
します。
ヒント: ポイント & クリック操作を行うシステム管理者でも躊躇する必要はあり
ません。大部分にコードサンプルが記載されているため、経験豊富な開発者でな
くても、各章の手順を試してみて Salesforce1 でどのようなことができるのかを感
じ取ることができます。
使用開始方法
好きなところから使用を開始できます。たとえば、ポイント & クリック操作による
「Salesforce1 の設定」から始めて、「Salesforce1 でのアクションの使用」まで順に進む
ことが考えられます。その後は開発者として、カスタムアクションを作成したり、
キャンバスアプリケーションや Lightning ページを追加して、Salesforce1 のユーザ操作性
を向上させていきます。
経験豊富な開発者であれば、「Salesforce App Cloud 開発へようこそ」の章を参照して、
最初から難易度の高い開発に取り組むこともできます。
14
第2章
本書について
サンプルシナリオについて
本書のサンプルシナリオは、『Force.com ワークブック』で作成したサンプル Warehouse
データおよびコードを基に作成されています。そのデータセットを取得して、いくつ
かの追加を行っています。そこで作成されたデータをベースとしてさらに多くのもの
を追加し、サンプルの組織を使ってSalesforce1のモバイルの世界へと入っていきます。
これを行うために、Acme Wireless という架空の会社のシステム管理者権限を持つユー
ザとして手順を実行します。
Acme Wireless について
例として取り上げる架空の企業について簡単に説明します。
Acme Wireless は、携帯電話、タブレット、ゲーム機などのデバイスを修理する大手企
業です。同社には、顧客が修理を依頼するデバイスを持ち込める店舗が多数ありま
す。これらの店舗では、タブレットや携帯電話のカバー、電源コード、充電器などの
付属品も販売しています。
Acme Wireless には、修理部品や付属品をすべてまとめて保管する倉庫があります。各
店舗は倉庫に部品を注文し、店内に一定数の商品を用意しています。在庫のない特殊
な部品が必要なときは、店舗が倉庫に特別注文します。
Acme Wireless では、店舗での修理サービス以外に出張サービスも実施しています。モ
バイル技術者が、顧客の自宅やホテル、事務所、会議場などさまざまな場所に出向い
て客先で修理や保守を行います。
Acme Wireless の Salesforce の利用法
Acme Wireless は、Salesforce で顧客を追跡しています。対象の顧客の多くは店舗を訪れ
る個人客ですが、Acme Wireless とデバイスサポート契約を締結している小規模ビジネ
スも含まれます。Acme Wireless では Salesforce を利用して、倉庫の品目や在庫数を追跡
するほか、請求処理も管理しています。同社には 2 種類のカスタム Web アプリケー
ションがあり、1 つは注文を追跡して商品発送を処理し、もう 1 つは出荷品の店舗ま
での配達状況を追跡しています。
Acme Wireless の店舗および本社の従業員は、在庫数や顧客取引先、注文についての社
内連絡に Chatter を使用しています。
15
第2章
本書について
Acme Wireless が望む Salesforce1 アプリケーションの
活用法
Acme Wireless では、Salesforce1 を使用して、既存の Salesforce 組織を基に、モバイル技術
者が顧客データや商品データにアクセスできるようにしたいと思っています。技術者
が、その日の各自の修理伝票をすべて参照し、顧客の所在地を確認し、必要な部品の
在庫を調べ、部品を発注し、注文状況を確認するなど、さまざまな作業をできるよう
にする必要があります。
Acme Wireless ではまた、倉庫から店舗に商品を配達するトラック運転手が、別個のア
プリケーションを使用することなく、その日の配達を追跡および更新できるようにし
たいと考えています。さらには、倉庫の作業者が顧客の注文を追跡して、出荷処理を
できるようにすることも望んでいます。
Acme Wireless は、注文を管理する従来の Web アプリケーションを Salesforce1 と統合した
いとも考えています。
16
第3章
トピック:
•
拡張 Warehouse
データモデルをイ
ンストールする
•
Salesforce1 アプリ
ケーションをダウ
ンロードする
作業環境の設定
本書の練習問題に沿って進めるには、Salesforceアカウントと
Developer Edition 組織が必要です。Developer Edition 組織を所持
していない場合は http://sforce.co/1om1gHf にアクセ
スし、無償の Developer Edition アカウントにサインアップし
てください。Developer Edition は、Salesforce アプリケーション
の開発に使用できるSalesforceのフル機能のバージョンです。
無料バージョンのため、許可されるユーザ数、帯域幅、ス
トレージ容量が制限されますが、Salesforceのすべての機能が
組み込まれています。
次に、拡張 Warehouse データモデルを組織にインストールし
てから、Salesforce1 アプリケーションをダウンロードする必
要があります (まだ実行していない場合)。
17
第3章
作業環境の設定
拡張 Warehouse データモデルをインストールする
このガイドの練習問題用の Developer Edition 組織を準備するには、Warehouse データモデ
ルをインポートする必要があります。『Force.com ワークブック』のチュートリアルの
実践が、Warehouse アプリケーションの理解に役立つでしょう。このガイドでは、ワー
クブックから Warehouse データを取得し、いくつか補足して、Salesforce1 で実行できる
ことを示しています。
1. www.salesforce.com にアクセスし、Developer Edition のログイン情報を使用し
て Salesforce にログインします。
2. 新しいブラウザタブまたはブラウザウィンドウを開き、
https://github.com/forcedotcom/Salesforce1-Dev-Guide-Setup-Package
に移動します。
Developer Edition 組織へのログインに使用したブラウザでこれを実行します。
3. README ファイルを開きます。
4. README ファイルの bit.ly リンクをクリックします。
これは拡張 Warehouse データパッケージのインストールリンクです。[パッケー
ジインストールの詳細] ページの開発組織に直接移動できます。
5. [次へ] をクリックします。
6. [次へ] をクリックします。
7. [次へ] をクリックします。
8. [インストール] をクリックします。
9. インストールが完了するのを待ちます。
10. Force.com アプリケーションメニューから、Warehouse を選択します。
11. [データ] タブをクリックします。
12. [データを作成] をクリックします。
うまくいきました。最後のステップで Salesforce1 アプリケーションをダウンロードす
ると、使用を開始する準備が完了します。
18
第3章
作業環境の設定
Salesforce1 アプリケーションをダウンロードする
Salesforce1をすでにダウンロードしている場合は、このステップをスキップしてくださ
い。
1. www.salesforce.com/mobile/ にアクセスし、ご使用のデバイス用のSalesforce1
をダウンロードします。
セキュリティ PIN を作成するように要求される場合があります。
2. Salesforce1 を開きます。
3. Developer Edition 組織のログイン情報を使用してログインします。
19
Salesforce1 の管理
第4章
トピック:
•
Salesforce1 を使用で
きるユーザの定義
•
通知について
•
実際に試す: 通知の
有効化
•
Salesforce1 でのオフ
ラインアクセスに
ついて
Salesforce1 の設定
Salesforce1 は、自動有効化を無効にしている組織を除く、す
べての組織に対して自動的に有効になっています。
Salesforce1では、最初から多くを設定する必要はありません。
ただし、Salesforce1 を使用し始める前に、次の設定が必要で
す。
1. Salesforce1 モバイルアプリケーションにアクセスでき
るユーザを定義します。
2. 通知を有効にします。
Developer Edition 組織を使用しているため、ユーザの有効化を
気にする必要はありません。次のセクションでユーザの有
効化についての情報を確認し、通知を有効にして使用を開
始しましょう。
21
第4章
Salesforce1 の設定
Salesforce1 を使用できるユーザの定義
重要: この情報は参照のみを目的としています。このガイドではユーザを有効に
しませんが、このステップは、本番組織でSalesforce1を設定するときに重要です。
ダウンロード可能アプリケーション
Salesforce1 ダウンロード可能アプリケーションは接続アプリケーションです。結果とし
て、アプリケーションおよびその他のセキュリティポリシーへのアクセス権を持つ
ユーザを制御できます。デフォルトでは、組織のすべてのユーザが Salesforce1 ダウン
ロード可能アプリケーションにログインできます。
管理Salesforce1接続アプリケーションパッケージからインストールされる設定コンポー
ネントを使用して各 Salesforce1 ダウンロード可能アプリケーションのセキュリティポ
リシーおよびアクセスポリシーを制御できます。次のコンポーネントがSalesforceにイ
ンストールされている必要があります。
• Salesforce1 for Android
• Salesforce1 for iOS
ユーザの 1 人がモバイルデバイスに App Store または Google Play から Salesforce1 ダウン
ロード可能アプリケーションをインストールして、モバイルアプリケーションにログ
インして組織に認証されると、これらのコンポーネントが自動的にインストールされ
ます。
または、Salesforce1 ダウンロード可能アプリケーションをユーザにロールアウトする前
に、デフォルトのセキュリティ設定およびアクセス設定を確認して変更できるよう
に、Salesforce1 および Chatter アプリケーションの接続アプリケーションパッケージを
手動でインストールできます。
Salesforce1接続アプリケーションコンポーネントがインストールされると、接続アプリ
ケーションページに追加されます。([設定] から、[クイック検索] ボックスに「接続ア
プリケーション」と入力し、接続アプリケーションの管理オプションを選択します。)
ここでは、プロファイル、権限、IP 範囲制限へのユーザアクセスの制御を含む、各ア
プリケーションの設定を表示および編集できます。制限されているユーザがSalesforce1
ダウンロード可能アプリケーションにログインしようとすると、エラーメッセージが
表示されます。
22
第4章
Salesforce1 の設定
モバイルブラウザアプリケーション
モバイルブラウザから Salesforce にログインするときに Salesforce1 モバイルブラウザア
プリケーションにアクセスできるかどうかを制御できます。デフォルトで、組織のモ
バイルブラウザアプリケーションは有効になっています。
1. [設定] から、[クイック検索] ボックスに「Salesforce1 設定」と入力し、
[Salesforce1 の設定] を選択します。
2. [Salesforce1 モバイルブラウザアプリケーションを有効化] を選択すると、組
織のすべてのユーザがアプリケーションにアクセスできます。アプリケーショ
ンへのアクセスを無効にするには、このオプションを選択解除します。
3. [保存] をクリックします。
このオプションがオンになっていると、サポートされているモバイルブラウザから
Salesforce にログインしたユーザは、Salesforce1 インターフェースに自動的に転送されま
す。サポートされていないモバイルブラウザからログインすると、このオプションが
選択されていても Salesforce Classic フルサイトが読み込まれます。
重要: モバイルブラウザでの Salesforce Classic フルサイトの使用はサポートされて
いません。組織でSalesforce1モバイルブラウザアプリケーションを無効にし、個々
のユーザが各自でアプリケーションをオフにできますが、モバイルブラウザでの
フルサイトの常用はお勧めしません。Salesforceカスタマーサポートが調査できな
い問題が発生する可能性があります。
Lightning Experience フルサイトには、どのモバイルブラウザからもアクセスできま
せん。
通知について
通知により、Salesforce で特定のイベントが発生した場合にユーザに知らせることがで
きます。たとえば、ユーザが承認申請を受信した場合やChatterでメンションされた場
合にユーザに通知します。
Salesforce1 ユーザには次の 2 種類の通知が表示されます。
23
第4章
Salesforce1 の設定
アプリケーション内通知
アプリケーション内通知は、ユーザが Salesforce1 を使用しているときに関連活動を
常にユーザに知らせます。をタップすると、過去 90 日以内に受信した最新の 20
件の通知を参照できます。
組織で Salesforce Communities を有効にすると、ユーザに各自がメンバーになってい
るすべてのコミュニティからの通知が表示されます。通知がどのコミュニティか
ら発信されたものかをユーザが識別しやすいように、タイムスタンプの後にコミュ
ニティ名がリスト表示されます。
転送通知
転送通知とは、ユーザによってインストールされた Salesforce1 ダウンロード可能ア
プリケーションが使用されていないときに、モバイルデバイスに表示されるアラー
トです。これらのアラートは、デバイスの種類に応じて、テキスト、アイコン、
音で構成されます。システム管理者が組織に対して転送通知を有効にすると、各
ユーザは自分のデバイスに転送通知を受信するかどうかを選択できます。
一部の通知には、Salesforceでユーザが入力したテキストが含まれます。適切な認証
のないサードパーティサービスを通じて機密情報が配信されないようにするため、
転送通知の完全なコンテンツを有効にしない限り、転送通知には最小限の情報 (ユー
ザ名など) のみが含まれます。たとえば、アプリケーション内通知が「Allison Wheeler
さんがあなたにメンションしました: @John Smith さん、お知らせです。Acme 取引先
の新しい営業戦略です。」であるとします。デフォルトでは、同等の転送通知は、
「Allison Wheeler さんがあなたにメンションしました」となります。ただし、転送
通知の完全なコンテンツを有効にした場合は、アプリケーション内通知と同じ (完
全な) コンテンツがこの転送通知に含まれます。
転送通知の完全なコンテンツを含めるオプションを有効にすると、設定を保存す
るときに表示される契約条件に会社の代わりに同意したことになります。詳細は、
Salesforce ヘルプの「Salesforce1 モバイルアプリケーション通知」を参照してくださ
い。
未変更の新しい開発組織の最初の作業で、すべての Acme Wireless モバイルユーザの通
知を設定しましょう。
24
第4章
Salesforce1 の設定
実際に試す: 通知の有効化
Acme Wireless 組織のすべての Salesforce1 ユーザが、承認申請やメンションなど、Salesforce
フルサイトで起きるイベントの通知を受信できるようにします。
1. [設定] から、[クイック検索] ボックスに「Salesforce1 通知」と入力し、
[Salesforce1 通知] を選択します。
2. まだ選択されていない場合は、[アプリケーション内通知を有効化]と[転送通知
を有効化] の両方を選択します。
3. [保存] をクリックします。
メモ: アプリケーション内通知の有効化は、オールオアナッシングのプロセスで
す。全員に対して有効にするか、全員に対して無効にするかのどちらかです。モ
バイルユーザが自分でアプリケーション内通知をカスタマイズ、有効化または無
効化することはできません。
通知についての説明が完了したので、Salesforce1のオフラインアクセスを確認してみま
しょう。
Salesforce1 でのオフラインアクセスについて
オフラインアクセスは、Salesforce1 ダウンロード可能アプリケーションのユーザのみが
使用できます。このガイドでは、Salesforce1のオフラインモードについては説明しませ
んが、オフラインモードを利用するユーザがいる場合、この情報は重要です。
Salesforce1は最近アクセスしたデータをキャッシュできるため、ユーザのデバイスがオ
フラインの場合やSalesforceに接続できない場合にそのデータを使用できます。現在オ
フラインアクセスは参照のみで、iOS および Android デバイスの Salesforce1 ダウンロード
可能アプリケーションで使用できます。
組織内のユーザがいずれかの Salesforce1 ダウンロード可能アプリケーションを最初に
インストールしたときに、オフラインアクセスが有効になります。この設定は、[設
定] の [Salesforce1 オフライン] ページで管理できます。
キャッシュデータは暗号化され、安全な永続データストアに保存されます。
25
第4章
Salesforce1 の設定
Salesforce1 要素
オフライン使用可能
ナビゲーションメニュー
可
グローバル検索
以前の検索のみ
通知
以前に参照したもののみ
フィード、グループ、人
以前に参照したもののみ
Salesforce Today
以前に参照されたメインページおよびモ
バイル行動レコード
Salesforce の行動
以前に参照された場合のみ
最近のオブジェクト
可 (上位 5 件)
その他のオブジェクト
不可
レコードの詳細
可 (最近のレコード 30 件)
関連レコード
以前に参照された場合のみ
リストビュー
以前に参照された場合のみ
ToDo
[私の ToDo] リストの最初のページの ToDo
のみ (最大 10 件)、ただし、リストが以前
に参照されたか、ユーザが手動でキャッ
シュを更新した後に限る
ダッシュボード
可 (上位 5 件)
承認 (申請、承認、却下)
不可
Visualforce ページ
不可
キャンバスアプリケーション
不可
Lightning ページ
不可
設定
可
26
第4章
Salesforce1 の設定
キャッシュデータは、ユーザが Salesforce1 に切り替えたときに更新されます。ユーザ
が別のアプリケーションに切り替えたときに、既存のデータストアが 1 時間以上前の
ものであれば、ユーザのキャッシュデータが自動的に更新されます。
ユーザは、機内モードに切り替える前やサービスを利用できないエリアに入る前な
ど、いつでも手動でデータをキャッシュできます。Salesforce1ナビゲーションメニュー
から、[設定] > [オフラインキャッシュ] > [今すぐキャッシュ] を選択します。
メモ: キャッシュの保存期間は 2 週間です。Salesforce1 アプリケーションからログ
アウトすると、キャッシュがクリアされます。
うまくいきました。通知とオフラインアクセスについての説明が完了したので、
Salesforce1 ナビゲーションメニューを確認してみましょう。
27
第5章
トピック:
Salesforce1 ナビゲーションメ
ニューのカスタマイズ
ユーザを Salesforce1 のモバイルの冒険に送り出す前に、目的
地への順路を示す地図を用意する必要があります。
•
Salesforce1 ナビゲー
ションメニューに
ついて
Salesforce1 ナビゲーションメニューがその地図になります。
どのような地図を描くかはあなた次第です。
•
Salesforce1 ナビゲー
ションメニューの
仕組み
ナビゲーションメニューの表示項目と順序を設定して、モ
バイルユーザが作業をすばやく簡単に実行できるようにし
ます。
29
第5章
Salesforce1 ナビゲーションメニューのカスタマイズ
Salesforce1 ナビゲーションメニューについて
Salesforce1 で
アイコンが表示されている場所であれば、どこでもそのアイコンを
タップしてメニューにアクセスできます。システム管理者は、メニューの内容をカス
タマイズできます。
メニューに含めることができる項目
組織の設定方法やアクセス権によっては、ユーザのナビゲーションメニューに複数の
項目が表示されることがあります。
メニュー項目
説明
承認申請
ユーザの保留中の承認のリストを表示します。ユーザは承認項
目をタップして、Salesforce1 からその項目を承認または拒否で
きます。iOS 用のSalesforce1 ダウンロード可能アプリケーション
および Salesforce1 モバイルブラウザアプリケーションでサポー
トされています。
キャンバスアプリ
ケーション
組織がSalesforce1ナビゲーションメニューでこのアプリケーショ
ンを有効にしている場合に表示されます。
ダッシュボード
エディションおよびユーザ権限によって使用可能かどうかが決
まります。この項目をメニューに組み込んでいない場合、[ダッ
シュボード] 項目は [スマート検索項目] のセットに自動的に追
加されます。
行動
リストに、ユーザが所有する行動、ユーザ自身が作成した行
動、およびユーザまたはユーザのグループが招待された行動が
表示されます。
フィード
Chatter を有効にしている組織に表示されます。
Lightning コンポーネ Salesforce1 ナビゲーションメニューには、Lightning コンポーネン
ントのタブ
トタブが関連付けられているカスタムLightningコンポーネント
のみが表示されます。
Lightning ページ
Salesforce1 アプリケーションのカスタムページです。
30
第5章
Salesforce1 ナビゲーションメニューのカスタマイズ
メニュー項目
説明
グループ
Chatter を有効にしている組織に表示されます。この項目をメ
ニューに組み込んでいない場合、[グループ] 項目は [スマート
検索項目] のセットに自動的に追加されます。
一時停止中のフローユーザが一時停止したフローインタビューのリストが表示され
インタビュー
ます。インタビューは、フローの実行中のインスタンスです。
ユーザは、インタビューをタップして、Salesforce1 内から再開
または削除できます。Salesforce1 モバイルブラウザアプリケー
ションでのみ使用できます。
人
Chatter を有効にしている組織に表示されます。この項目をメ
ニューに組み込んでいない場合、[人] 項目は [スマート検索項
目] のセットに自動的に追加されます。
スマート検索項目
メニューの [最近] セクションに Salesforce オブジェクトを追加し
ます。また、最近検索された一連のオブジェクトを [最近] セク
ションに追加したり、[さらに表示] 項目を追加したりできま
す。これにより、ユーザは使用権限を持ち Salesforce1 でサポー
トされているすべてのオブジェクトにアクセスできるようにな
ります。この項目をナビゲーションメニューに追加しない場
合、ユーザはSalesforce1のオブジェクトにアクセスできません。
メモ: ユーザに最近使ったオブジェクトの履歴がまだな
い間は、[最近] セクションに一連のデフォルトオブジェ
クトが表示されます。Salesforce1 と Salesforce フルサイトの
両方でユーザが常時操作するオブジェクトが [最近] セク
ションに表示されるまでに最大 15 日かかることがありま
す。[最近] セクションにオブジェクトがすぐに表示され
るようにするには、フルサイトの検索結果画面からそれ
らのオブジェクトを固定します。
ToDo
ユーザの未完了の ToDo、完了した ToDo、および代理 ToDo のリ
ストです。
Today
モバイルカレンダーの行動を関連する Salesforce の ToDo、取引
先、および取引先責任者と統合することで、1 日のスケジュー
ルの計画や管理をサポートするアプリケーションです。このア
31
第5章
Salesforce1 ナビゲーションメニューのカスタマイズ
メニュー項目
説明
プリケーションでは、ユーザがカンファレンスコールにすぐに
参加したり、行動に関するメモをすばやく記録したりすること
もできます。Salesforce1 ダウンロード可能アプリケーションで
のみ使用できます。
Visualforce ページのタ Salesforce1 では、[Salesforce モバイルアプリケーションでの
ブ
使用が可能] チェックボックスがオンになっている Visualforce
ページのみが表示されます。
これらの練習問題ではVisualforceページについて説明しませんが、この詳細やSalesforce1
での機能を学習する場合は、「Visualforce ページを使用した Salesforce1 の拡張」 (ページ
91)を参照してください。
実際に試す: Salesforce1 ナビゲーションメニューを設
定する
1. [設定] から、[クイック検索] ボックスに「ナビゲーション」と入力し、[Salesforce1
ナビゲーション] を選択します。
一部の項目は自動的にメニューに追加されます。
ナビゲーションメニューには、[選択済み] リストに配置した順序と同じ順序で
項目が表示されます。また、リストの最初の項目がユーザの Salesforce1 のラン
ディングページになります。Acme Wireless のモバイル技術者は、[Today] および
[ToDo] メニュー項目を最も使用すると考えられるため、それらの項目を上位に
配置します。
2. [上へ] または [下へ] 矢印を使用して、[選択済み] リストの上位項目を次の順序
で配置します。
• Today
• ToDo
• フィード
• スマート検索項目
• ダッシュボード
32
第5章
Salesforce1 ナビゲーションメニューのカスタマイズ
これで、モバイル技術者が Salesforce1 にログインするたびに、[Today] ページが
最初に表示されます。
3. [保存] をクリックします。
それでは、変更した結果を確認してみましょう。
Salesforce1 ナビゲーションメニューをテストする
1. モバイルデバイスで Salesforce1 アプリケーションを開きます。
2.
をタップしてナビゲーションメニューにアクセスします。
3. ナビゲーションメニューをプルダウンして離し、更新します。
[Today]、[ToDo]、および [フィード] 項目が上部に表示され、[スマート検索項目]
の要素から作成された [最近] セクションがその下に表示されます。
4. [アプリケーション] セクションまでスクロールダウンします。
このセクションには、実際の「アプリケーション」であるかどうかに関係な
く、[スマート検索項目] の要素の下に配置されたメニュー項目が表示されます。
33
第5章
Salesforce1 ナビゲーションメニューのカスタマイズ
Salesforce1ナビゲーションメニューの設定が完了しましたので、モバイル用のデータの
設定を見ていきましょう。
Salesforce1 ナビゲーションメニューの仕組み
• [選択済み] リストの最初の項目が、ユーザの Salesforce1 のランディングページに表
示されます。
• ユーザの種別ごとに異なるメニューを設定することはできません。
34
第5章
Salesforce1 ナビゲーションメニューのカスタマイズ
• メニュー項目を編成するときは、ユーザが頻繁に使用する項目を上部に配置しま
す。[スマート検索項目] の要素は 8 つ以上のメニュー項目から成る 1 つのセットに
拡張できます。このセットをメニューの上部付近に配置すると、他の要素がスク
ロールポイントの下に押し下げられることがあります。[スマート検索項目] の要素
の下に配置したものはすべて、ナビゲーションメニューの [アプリケーション] セ
クションに表示されます。
• Visualforce ページ、Lightning ページ、または Lightning コンポーネントを Salesforce1 ナ
ビゲーションメニューに含める前に、それらのタブを作成します。[設定] から、
[クイック検索] ボックスに「タブ」と入力し、[タブ] を選択します。
• 標準オブジェクトおよびカスタムオブジェクト、Visualforceページ、フィード、人、
グループなど、Salesforceのタブによって表示される内容は、ユーザのプロファイル
設定に基づいて Salesforce1 メニューに表示されます。たとえば、[グループ] タブが
[タブを隠す] に設定されているプロファイルにユーザが割り当てられている場合、
システム管理者が [グループ] をメニューに組み込んでいても、そのユーザの
Salesforce1 には [グループ] メニュー項目が表示されません。
一部のオブジェクトは、最近アクセスしていても、Salesforce1ナビゲーションメニュー
の [最近] セクションから除外されます。
• ToDo と行動
• 人、グループ、およびダッシュボード (これらの項目がナビゲーションメニューに
直接追加された場合)
• オブジェクトのホームページのみに表示され、ナビゲーションメニューには表示
されないリストビュー
• Salesforce フルサイトにタブがないオブジェクトを含む、Salesforce1 で使用できない
オブジェクト
ダッシュボード、人、グループのメニュー項目につい
て
ダッシュボード、人、グループのメニュー項目をナビゲーションメニューの [選択済
み] リストに追加していない場合、これらの項目はオブジェクトのスマート検索項目
セットに自動的に組み込まれ、Salesforce1のメニューの [最近] セクションに表示されま
す。ダッシュボード、人、グループをナビゲーションメニューの [選択済み] リストに
個別に追加した場合、これらの項目は [最近] セクション外に表示され、ToDo や Today、
35
第5章
Salesforce1 ナビゲーションメニューのカスタマイズ
その他の個別のメニュー項目と同様に Salesforce1 メニューでの位置をカスタマイズで
きます。
オブジェクトを [最近] セクションに固定
ユーザは、Salesforce1 ナビゲーションメニューの [最近] セクションに表示されるオブ
ジェクトをカスタマイズできます。オブジェクトをフルサイトで検索する場合は、オ
ブジェクトの名前の上にマウスを置いて、
をクリックすると、そのオブジェクト
が検索結果の上部に固定されます。フルサイトに固定されたオブジェクトの順序に
よって、ナビゲーションメニューの [最近] セクションの上部に固定されるオブジェク
トの順序が決まります。ただし、この方法でオブジェクトを固定すると、[最近] セク
ションの固定されていない残りのオブジェクトが [その他] 要素にドロップされる可能
性があります。
36
第6章
トピック:
•
Salesforce1 でのペー
ジレイアウトの機
能
•
コンパクトレイア
ウトについて
Salesforce1 でのデータの表示方法
のカスタマイズ
Salesforce1アプリケーションの基本設定が完了したので、ユー
ザに最高のモバイル環境を提供できるように Salesforce フル
サイトの要素を最適化する方法を検討します。まず、モバ
イルコンテキストでの Salesforce データの表示方法をカスタ
マイズします。
Salesforce1 での情報の表示方法には、Salesforce の 2 つの要素
が影響します。1 つは従来のページレイアウトです。もう 1
つは新しいコンパクトレイアウトです。この章では、この
両方について説明します。
37
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
Salesforce1 でのページレイアウトの機能
高度なページレイアウトエディタを使用して、オブジェクトのレコード詳細ページの
レイアウトをカスタマイズし、アクションを設定し、Salesforce1に表示される項目と関
連リストを調整します。
Salesforce1 では、ページレイアウトでモバイル環境の次の領域を決定します。
レコードの関連情報および詳細ページ
Salesforce1 でレコードを参照する場合、レコードタイプやユーザのプロファイルに
基づいて、項目、Visualforce ページ、および関連リストが表示されます。関連リス
トは、ページまたは関連リストの名前が記載された 1 行のカードとして表示されま
す。関連リストカードをタップすると、その詳細が表示されます。
モバイルカード
ページレイアウトの [モバイルカード] セクションに拡張ルックアップ、コンポー
ネント、キャンバスアプリケーション、および Visualforce ページを追加すると、
Salesforce1 にモバイルカードとして表示できます。このセクションに配置した要素
は、Salesforceフルサイトのレコードの詳細ページには表示されません。これらは、
Salesforce1 のレコードの関連情報ページにのみ表示されます。
メモ: Spring '14 より後に作成された組織では、ページレイアウトの [モバイル
カード] セクションに、サポートオブジェクトとして Twitter コンポーネントが
デフォルトで追加されます。
アクション
Salesforce1 では、ページレイアウトの [Salesforce1 および Lightning Experience アクショ
ン]セクションのアクションは、オブジェクトのレコードページのアクションバー
とアクションメニューに表示されます。
サンプル取引先 Edge Communications のレコード詳細ページ、関連情報ページ、アクショ
ンメニューは、次のようになります。
38
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
アクションについては後の章で説明します。現時点では、レコードページとモバイル
カードを重点的に確認しましょう。
モバイル用ページレイアウトの見直し
数十個の項目と多くの関連リストが表示されるページレイアウトは、コンピュータの
画面でレコードを表示するときは処理しやすい場合もありますが、小さいモバイルデ
バイスでは同じレコードの表示には全く適さない可能性があります。モバイルデバイ
スを使用して情報にアクセスするユーザは必要な情報をすばやく入手する方法を求め
ています。数百の項目や関連リストから取捨選択させることは意味がありません。
たとえば、Warehouse データモデルには、カスタムページレイアウトに 32 個の標準項
目およびカスタム項目があります。それほど多くないように思えますが、モバイルコ
ンテキストでは項目がすぐにいっぱいになってしまいます。Salesforce フルサイトで
は、Warehouse スキーマの取引先レイアウトを使用する取引先レコード詳細ページは
次のようになります。
39
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
Salesforce1 では、同じ取引先詳細ページが次のように表示されます。
40
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
スクロールするのは 3 ページですが、これは項目が 32 個しか含まれないページレイア
ウトです。モバイルユーザが、携帯電話で数十項目のレコード詳細の中から特定の項
目を見つけようとすると、何度もスクロールしなければならなくなります。これは最
適なユーザ環境とは言えません。ユーザの生産性は確実に低下します。
モバイルユーザのページレイアウトは、2 つの方法 (既存のページレイアウトを再設計
する方法、またはモバイルで使いやすい新しいページレイアウトを最初から作成する
方法) で処理できます。
以降では、両方の方法について確認します。まず、モバイルで使いやすい新しいペー
ジレイアウトを作成する方法について説明し、次に既存の長いレイアウトをモバイル
ユーザ向けに最適化するためのヒントをご紹介します。
実際に試す: モバイル技術者プロファイル用のカスタムペー
ジレイアウトを作成する
Acme Wireless のモバイル技術者のようなユーザは、モバイルデバイスから Salesforce に
アクセスするために大部分の時間を費やしています。合理的で、モバイル用に最適化
された、現場で必要な項目のみが表示されるページレイアウトを作成し、モバイル技
術者プロファイルに割り当てることができます。このようにすることで、すぐに生産
性が向上します。
さらに、ページレイアウトの特殊な [モバイルカード] セクションで、Visualforce ページ
やルックアップカードを追加して Salesforce1 レコードの関連情報ページを拡張できま
す。
1. 取引先のオブジェクトの管理設定から、[ページレイアウト] に移動します。
2. [新規] をクリックします。
3. [既存のページレイアウト] ドロップダウンリストを [– なし –] のままにします。
このページレイアウトは白紙の状態から始めるため、既存のページレイアウト
をコピーしません。
4. [ページレイアウト名] 項目に、「Account Mobile Technician Layout」(取
引先モバイル技術者レイアウト) と入力します。
5. [保存] をクリックします。
必須項目と [常にレイアウトに表示] 項目は、ページレイアウトに自動入力され
ます。モバイル技術者に関連する残り数個の項目を追加するだけで済みます。
41
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
6. これらの項目をパレットからページの既存の項目の下にある取引先詳細部分に
ドラッグします。
• 住所(納入先)
• 営業時間
• 電話
7. パレットで [Visualforce ページ] カテゴリをクリックし、取引先所在地を [モバイ
ルカード] セクションにドラッグします。
取引先所在地は、事前設定されたVisualforceページで、選択した取引先所在地が
Google マップでユーザに表示されます。Salesforce1では、取引先レコードの関連
情報ページにモバイルカードとして表示されます。
メモ: Salesforce1 では、[Salesforce モバイルアプリケーションでの使用
が可能] チェックボックスがオンになっている Visualforce ページのみが表
示されます。モバイル対応のVisualforceページでは、パレットにモバイル
非対応のページとは若干異なる色の要素が表示されます。パレットで
Visualforce ページ要素にマウスを置くと、Visualforce ページがモバイル対応
であるかどうかが表示されます。
Salesforce1 での Visualforce の使用についての詳細は、「Visualforce ページを使用し
た Salesforce1 の拡張」 (ページ 91)を参照してください。
8. [拡張ルックアップ] カテゴリをクリックし、[親取引先] を取引先所在地モバイ
ルカードの上にある [モバイルカード] セクションにドラッグします。
[親取引先] は参照項目です。この項目を [モバイルカード] セクションに配置す
ると、Salesforce1の取引先の関連情報ページ上の関連ルックアップカードとして
表示されます。
9. [関連リスト] カテゴリをクリックし、[ケース] および [取引先責任者] 関連リスト
を [関連リスト] セクションにドラッグします。
関連リストが、Salesforce1でレコードの関連情報ページに表示されます。モバイ
ル技術者が取引先の関連情報ページに移動すると、関連リストのプレビュー
カードが表示されます。これをタップすると、その場所のケースおよび取引先
責任者に関する詳細情報を取得できます。
10. [保存] をクリックします。
42
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
11. ユーザのカスタマイズ済み関連リストを上書きするかどうかが尋ねられたら、
[いいえ] をクリックします。
12. [ページレイアウトの割り当て] をクリックします。
13. [割り当ての編集]をクリックします。
通常、この手順で、モバイル用に最適化された新しいページレイアウトをモバ
イル技術者のユーザプロファイルに割り当てます。ただし、ここでは、システ
ム管理者としてログインしているので、代わりにこれをシステム管理者プロ
ファイルに割り当てることにします。
14. [システム管理者] 品目をクリックして選択します。
15. [使用するページレイアウト] ドロップダウンリストから [Account Mobile Technician
Layout (取引先モバイル技術者レイアウト)] を選択します。
これで、システム管理者プロファイルが [Account Mobile Technician Layout (取引先
モバイル技術者レイアウト)] に割り当てられました。
16. [保存] をクリックします。
次に、変更の内容を Salesforce1 アプリケーションで確認しましょう。
ページレイアウトをテストする
1. モバイルデバイスで Salesforce1 アプリケーションを開き、ログインします。
2.
をタップしてナビゲーションメニューにアクセスします。
3. [最近] セクションで [取引先] をタップします。見つからない場合は、[追加...] を
タップしてください。
4. 検索バーをタップします。
5. 「Barbary」と入力します。
6. [検索] をタップします。
7. [Barbary Coast Wireless] をタップします。
Barbary Coast Wireless レコード詳細ページが表示されます。このページは、レコー
ドにアクセスするときのデフォルトビューです。少し下にスクロールすると、
ページレイアウトに追加したものと同じ項目が同じ順序で表示されます。
43
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
8. [関連] をタップして関連情報ページに移動します。
最初に Visualforce ページの [親取引先] ルックアップカードとプレビューカードが
表示されます。
44
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
下へスクロールすると、ページレイアウトに追加した関連リストが表示されま
す。関連リストをタップすると、その詳細が表示されます。
この専用ページレイアウトが作成され、モバイル技術者に必要な項目が追加されいる
ため、客先での作業がはかどります。たとえば、Salesforce1の取引先レコードの関連情
報ページにアクセスしたときに、実際に必要な項目を見つけるために、不要な項目の
長いリストを探し回る必要がなくなります。さらに、Visualforceページをモバイルカー
ドとして追加したため、取引先の所在地を Google マップで確認できます。
「Salesforce1 でのアクションの使用」の章では、モバイル技術者向けに作成した特別な
アクションで、このページレイアウトを拡張します。ここでは、既存のページレイア
ウトを簡略化して、モバイルで使いやすくするための推奨事項について説明します。
モバイル用ページレイアウトの最適化のヒント
多くの場合、モバイル専用のページレイアウトを新しく作成する意味はありません。
次に、既存のページレイアウトをモバイルで使いやすくするためのヒントと使用方法
を示します。
45
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
ページレイアウトを最適化するときに、次の点に留意してください。
• 一目でわかるようにすべき重要な情報は?
• Salesforce1 で作業するユーザにとって重要なタイミングは?
• ユーザが手動で操作する必要がないように自動化できるアクションまたはプロセ
スは?
重要: 項目を整理し、最小限にする
• セクションを使用して情報を論理的に整理します。最も重要な情報は、最初に表
示されるようにページ上部に配置します。ユーザは、いくつもの項目をそれぞれ
探すことを好みません。類似した項目をセクションで整理すると、必要な情報が
見つかりやすくなります。これにより、関心があるセクションまでページを容易
に下へスクロールできます。
• 取引先、取引先責任者、リードの場合、上部付近に電話項目やメール項目を配置
する必要はありません。これらの項目にはすでに、各レコードページのアクショ
ンバーにある
および
なっています。
アイコンを使用してすばやくアクセスできるように
• ページは参照しているデバイスに基づいて動的に表示されるため、項目を 1 列に揃
える必要はありません。電話では項目が 1 列に並び替えられ、タブレットまたはデ
スクトップでは 2 列で表示されます。
• 最も重要な項目をコンパクトレイアウトに配置します。コンパクトレイアウトで
は、Salesforce1 のレコードの特長とレコードプレビューカードを利用できます。そ
のため、項目が目につきやすく、モバイルユーザがレコード詳細までドリルダウ
ンする必要はありません。コンパクトレイアウトの詳細については、後ほど説明
します。
• 必須項目数は最小限にする。項目を必須に設定すると、すべてのページレイアウ
トの詳細ページに表示されることになります。そのため、各項目が本当に必須か
どうかを検討してください。レコードの特定の項目は実際には保存する必要はな
いことを関係者に知らせる必要がある場合があります。
• すべてのレコードに共通するとは限らない項目をすべてのレコードで表示する必
要がないように、組織で利用可能な場合はレコードタイプの使用を検討してくだ
さい。
• 画面に表示するレコード数を削減するには、ユーザにデータを入力させる代わり
に、新しいレコードにデフォルト値を使用することを検討してください。
46
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
ページレイアウトについてひと通り確認しました。次に、モバイル用に作成された別
の種別のレイアウト (コンパクトレイアウト) について説明します。
コンパクトレイアウトについて
前のセクションでは、ページレイアウトがSalesforce1アプリケーションの外観とレコー
ドの内容に与える影響について学習しました。ただし、モバイル環境でSalesforceデー
タの表示方法をカスタマイズできる方法は、ページレイアウトだけではありません。
コンパクトレイアウトは、レコードの重要な項目を一目で確認できるよう表示するた
めに Salesforce1 と Lightning Experience で使用されます。
Salesforce フルサイトでは、ユーザがクイックアクションを使用してレコードを作成し
た後で Chatter フィード項目にどの項目が表示されるかは、コンパクトレイアウトに
よって決まります。
Salesforce1では、コンパクトレイアウトに割り当てた最初の 4 つの項目が、次の場所に
表示されます。
• オブジェクトのレコードの [特長] 領域
• レコードの関連情報ページの拡張ルックアップカード
コンパクトレイアウトに割り当てたいずれかの項目に対してユーザにアクセス権がな
い場合は、レイアウトの次の項目が使用されます。
コンパクトレイアウトに割り当てた最初の 4 つの項目が、Salesforce1の各レコードビュー
の上部にあるレコードの [特長] セクションに入力されるので、モバイル技術者が最も
参照すると思われる項目をリストに配置します。
Salesforce1ではシステムのデフォルトが標準装備されているため、オブジェクトのコン
パクトレイアウトの作成とカスタマイズは必須ではありません。ただし、モバイル
ユーザが必要な情報をすばやく取得できるようにするには、コンパクトレイアウトを
使用して、重要な項目をオブジェクトレコードヘッダー (および他の場所) に配置する
ことをお勧めします。それでは、試してみましょう。
実際に試す: コンパクトレイアウトを作成する
オブジェクトにカスタムコンパクトレイアウトを作成しない場合、そのオブジェクト
のレコードの [特長] 項目、プレビューカード、アクション関連フィード項目はすべ
て、定義済みの一連の項目を含む、参照のみのシステムデフォルトコンパクトレイア
47
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
ウトによって決定されます。カスタムコンパクトレイアウトを 1 つ以上作成したら、
その 1 つをオブジェクトのプライマリコンパクトレイアウトとして設定できます。そ
の後、プライマリコンパクトレイアウトがこのオブジェクトのデフォルトとして使用
されます。
カスタムコンパクトレイアウトを作成し、それを Merchandise オブジェクトのプライマ
リコンパクトレイアウトとして設定します。新しいコンパクトレイアウトを使用し
て、Acme Wireless モバイル技術者向けの Salesforce1 に重要な Merchandise レコード項目が
最初に表示されるようにします。
ただし、実際のコンパクトレイアウトを参照するには、組織に Merchandise レコードが
必要です。すぐに作成してみましょう。
1. Force.com アプリケーションメニューから、Warehouse を選択します。
2. [Merchandise (商品)] タブをクリックします。
3. [新規] をクリックします。
4. [Merchandise Name (商品名)] に、「iPhone 4」と入力します。
5. [Price (価格)] に、「299」と入力します。
6. [Quantity (数量)] に、「1」と入力します。
7. [Warehouse (倉庫)] ルックアップをクリックし、[Oaklandia] を選択します。
8. [Condition (条件)] を [Refurbished (修復済み)] に設定します。
9. [保存] をクリックします。
現在、Merchandise オブジェクトでは、[Merchandise Name (商品名)] 項目のみが割
り当てられているシステムデフォルトコンパクトレイアウトが使用されています。次
に、iPhone 4 レコードが Salesforce1 でどのように表示されるのかを示します。
48
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
モバイルユーザがより適切な情報を Merchandise レコードページの最上部で参照できる
ように、この「iPhone4」に項目を追加しましょう。
1. 商品のオブジェクト管理設定から、[コンパクトレイアウト] に移動し、[新規]
をクリックします。
2. [表示ラベル] 項目に、「Customized Compact Layout」(カスタマイズされ
たコンパクトレイアウト) と入力します。
3. コンパクトレイアウトの次の項目を選択し、[追加] をクリックします。
これらは、モバイル技術者が客先で参照する最重要項目になります。これらの
項目は個別に選択して追加できますが、CTRL キーを使用してまとめて選択する
こともできます。
• Condition (条件)
• Merchandise Name (商品名)
• Price (価格)
• Quantity (数量)
49
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
4. [上へ] または [下へ] ボタンを使用して、項目が [Merchandise Name (商品
名)]、[Quantity (数量)]、[Condition (条件)]、[Price (価格)] の順序
になるようにリストを調整します。
5. [保存] をクリックします。
次に、これをプライマリコンパクトレイアウトに設定する必要があります。
6. [コンパクトレイアウトの割り当て] をクリックします。
ここでは、プライマリコンパクトレイアウトが [システムデフォルト] に設定さ
れています。これを変更する必要があります。
7. [割り当ての編集]をクリックします。
8. プライマリコンパクトレイアウトとして使用するために作成したコンパクトレ
イアウトを選択します。
9. [保存] をクリックします。
Merchandise オブジェクトのコンパクトレイアウトのカスタマイズが完了しました。次
に、その関連情報ページがSalesforce1でどのように表示されるのかを確認しましょう。
コンパクトレイアウトをテストする
すでに実行したように、コンパクトレイアウトをカスタマイズしてデフォルトとして
割り当てると、変更はただちに Salesforce1 に反映されます。
1. モバイルデバイスで Salesforce1 アプリケーションを開きます。
2.
をタップしてナビゲーションメニューにアクセスします。
3. [最近] セクションで[Merchandise (商品)]をタップします。見つからない場合は、
[追加...] をタップしてください。
4. [iPhone 4] 項目をタップします。
50
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
このように、レコードの [特長] 領域には、新しく作成したカスタムコンパクトレイア
ウトから項目が表示されます。システムのデフォルトレイアウトのように商品名のみ
が表示されるのではなく、Acme Wirelessモバイル技術者には、メーカー再生品の iPhone
4 の在庫が倉庫にあり、価格は 299.00 ドルであるという他の情報も表示されるように
なりました。
もうひとこと: コンパクトレイアウト
ここまでコンパクトレイアウトについて学習してきましたが、ここではその仕組みに
ついてもう少し説明します。
コンパクトレイアウトでは、次を除くすべての項目種別がサポートされています。
• テキストエリア
• ロングテキストエリア
• リッチテキストエリア
• 複数選択リスト
51
第6章
Salesforce1 でのデータの表示方法のカスタマイズ
Salesforce の特定の項目へのアクセス権がない場合、コンパクトレイアウトにその項目
は表示されません。
ページレイアウトから項目を削除しても、オブジェクトのコンパクトレイアウトから
は削除されません。2 つのレイアウトタイプは独立しています。
コンパクトレイアウトとレコードタイプ
オブジェクトに関連付けられているレコードタイプがある場合、プライマリコンパク
トレイアウトの割り当てを上書きして、特定のコンパクトレイアウトを各種レコード
タイプに割り当てることができます。デフォルトでは、レコードタイプの上書きを設
定しないと、すべてのレコードタイプでオブジェクトのプライマリコンパクトレイア
ウトが使用されます。
コンパクトレイアウトとレコードタイプについての詳細は、Salesforce ヘルプの「レ
コードタイプへのコンパクトレイアウトの割り当て」を参照してください。
52
第7章
トピック:
•
クイックアクショ
ンについて
•
ポイント & クリッ
ク操作によるアク
ション
•
アクションレイア
ウトについて
•
アクションの定義
済みの値について
•
カスタムアクショ
ンについて
Salesforce1 でのアクションの使用
システム管理者は、固有のアクションを作成して、すべて
のユーザが貴重なわずかな時間も無駄にしないようにする
ことができます。Salesforce1 に固有のアクションを作成する
場合、モバイル環境でどのような操作を希望するかをユー
ザに確認します。
たとえば、食品サービス会社のシステム管理者なら、配送
者が客先にいる間に余分な食品や足りない食品を携帯電話
からすぐに注文できる「緊急注文」アクションを作成する
ことができます。Salesforce1 用のアクションを作成すること
によって組織での導入が推進されるため、ユーザにも大変
喜ばれます。
この章では、アクションの種別とカテゴリ、ポイント & ク
リックツールを使用して Salesforce でアクションを作成およ
びカスタマイズする方法、外出中でもモバイルユーザが重
要な作業を行うのにアクションがどのように役立つかにつ
いて説明します。
53
第7章
Salesforce1 でのアクションの使用
クイックアクションについて
アクションを作成し、ホームページ、Chatterタブ、Chatterグループ、レコード詳細ペー
ジで、Chatter パブリッシャーにそれらを追加します。Salesforce Classic では、アクショ
ンは Chatter パブリッシャーに表示されます。Lightning Experience では、アクションはそ
の種別に応じてユーザインターフェースの異なる領域に表示されます。Salesforce1 で
は、アクションは、アクションバーおよび関連するアクションメニューにリスト項目
アクションとして表示されます。さらに、アクションには独自のアクションレイアウ
トがあり、アクション内に含まれる項目と、その順序も指定できます。
アクションが表示される場所
Salesforce1アプリケーションの場合、アクションはアクションバーとそのアクションメ
ニューに表示されます。
アクションは、Salesforce1 の ToDo リストおよび関連レコードリストなどのリスト項目
上にあるアクションバーにも表示されます。これにより、モバイルユーザは、リスト
から直接レコードを操作し、レコードを開かずに更新できます。リスト項目のアク
ションにアクセスするには、ToDo リストに移動するか、オブジェクトの関連情報ペー
ジで関連リストを開きます。それから、目的のレコードで左にスワイプします。
54
第7章
Salesforce1 でのアクションの使用
アクションの種類
Salesforce のポイント & クリックツールを使用して、次の数種類のクイックアクション
を作成できます。
• 作成アクションではレコードを作成できます。これらは、Salesforceホームページの
[簡易作成] 機能および [新規作成] 機能とは異なります。この作成アクションでは、
入力規則や項目の必須性が遵守され、各アクションの項目を選択できるからです。
• 活動の記録アクションを使用すると、ユーザは通話やその他の顧客とのやりとり
の詳細を記録できます。これらの活動ログは、完了した ToDo として保存されます。
• 質問アクションを使用すると、ユーザは、操作しているレコードに関する質問を
したり、質問を検索したりできます。
• ケースでのみ使用できる [メールを送信] アクションでは、ユーザは Salesforce1 の
ケースフィードの [メール] アクション (簡易版) を利用できるようになります。
• 更新アクションでは、ユーザがレコードを変更できます。
この章の最後で説明する作成アクション、活動の記録アクション、カスタムアクショ
ンでは、オブジェクト固有のクイックアクションまたはグローバルクイックアクショ
ンのいずれかを作成できます。更新アクションはオブジェクト固有である必要があり
ます。
オブジェクト固有のクイックアクション
オブジェクト固有のアクションにより、関連レコードに自動的に関連付けられるレ
コードが作成されます。たとえば、取引先オブジェクトにオブジェクト固有のアク
ションを追加して、取引先責任者を作成できるようにします。ユーザが、そのアク
ションで Acme 取引先の詳細ページに取引先責任者を作成すると、新しい取引先責任
者は自動的に Acme と関連付けられます。そのオブジェクトのページレイアウトに追
加できるのは、オブジェクト固有のアクションのみです。
グローバルクイックアクション
ホームページ、Chatter タブ、オブジェクトページなど、アクションをサポートする
ページにグローバルアクションを追加できます。グローバル作成アクションにより、
ユーザはオブジェクトレコードを作成することができますが、新規レコードと他のレ
コードとの間にリレーションはありません。
55
第7章
Salesforce1 でのアクションの使用
[活動の記録] アクションをグローバルレイアウトに追加して、ユーザがグローバルペー
ジから通話の詳細を記録できるようにします。たとえば、ユーザはSalesforceフルサイ
トの [ホーム] ページおよび Chatter タブや、Salesforce1 の [フィード] ページまたは [グルー
プ] ページから活動を記録できます。また、Salesforce1 の使用中に活動の詳細を電話端
末から直接記録することもできます。
メモ: 主従関係の従オブジェクトであるオブジェクトのレコードを作成するアク
ションは、グローバルではなく、オブジェクト固有にする必要があります。
オブジェクト固有のアクションおよびグローバルアクションでサポートされるオブ
ジェクトのリストについては、Salesforce ヘルプの「オブジェクト固有のアクション」
および「グローバルアクション」を参照してください。
アクションのカテゴリ
アクションは、次のカテゴリに分類されます。組織の存続期間および設定に応じて、
一部のアクションしか表示されない場合があります。
標準アクション
標準アクションは、Chatter が有効化されたときに自動的に含まれるアクション (投
稿、ファイル、リンク、アンケート)、および work.com を使用する組織に自動的に
含まれるアクション (感謝) です。標準アクションには、作成アクションや活動の
記録アクションなど、組織でポイント & クリック方法を使用して作成したアクショ
ンも含まれます。
デフォルトアクション
デフォルトアクションは、組織のシステム管理者とユーザがアクションの使用を
開始できるようにする、Salesforceの事前定義済みアクションです。デフォルトアク
ションをパブリッシャーレイアウトに追加すると、Salesforceフルサイトと、Salesforce1
のアクションバーでユーザが使用できます。
Winter '14 以降に作成された組織では、デフォルトアクションは、取引先、ケース、
取引先責任者、リード、および商談オブジェクトのグローバルパブリッシャーレ
イアウトとパブリッシャーレイアウトに追加されます。Winter '14 より前に作成さ
れた組織では、デフォルトアクションは、ページレイアウトエディタのパレット
で使用できますが、パブリッシャーレイアウトに自動的に追加されることはあり
ません。
56
第7章
Salesforce1 でのアクションの使用
開発組織は新規であるため、一連のデフォルトアクションが含まれます。デフォ
ルトのグローバルアクションを確認するには、[設定] から [クイック検索] ボック
スに「グローバルアクション」と入力し、[グローバルアクション] を選択します。
各オブジェクトに表示されるデフォルトアクションのリストについては、Salesforce
ヘルプの「デフォルトアクション」を参照してください。
モバイルスマートアクション
モバイルスマートアクションも、デフォルトアクションと同様に事前設定された
アクションで、同じ一連のオブジェクトでサポートされます。ただし、Salesforce1
でのみ、Winter '14 より前の組織で表示されます。
Salesforce1 では、モバイルスマートアクション要素は、一連の異なる作成アクショ
ンに展開され、ユーザがフィードでレコードを直接作成できるようになります。
モバイルスマートアクションには、存在する項目数に関係なく、関連オブジェク
トで組織のすべての必須項目が取り込まれます。たとえば、モバイルスマートア
クションバンドルの [新規ケース] アクションには、ケースの必須項目がすべて含
まれます。モバイルスマートアクションの項目は編集できません。オブジェクト
のどの項目が必須であるかを変更した場合にのみ、表示される項目が変わります。
モバイルスマートアクションは、どのページレイアウトに追加するかに関係なく、
Salesforce のフルサイトには表示されません。Salesforce1 のユーザにのみ表示されま
す。
モバイルスマートアクションの詳細、およびサポートされている各オブジェクト
に展開されて含まれるモバイルスマートアクション要素のリストについては、
Salesforce ヘルプの「モバイルスマートアクション」を参照してください。
カスタムアクション
カスタムアクションは、定義された機能を備えた Visualforce ページまたはキャンバ
スアプリケーションです。たとえば、ユーザが 5,000 文字よりも長いコメントを作
成できるようにするカスタムアクションや、サポートエージェントが顧客と視覚
的にやりとりするためのビデオ会議アプリケーションを統合するカスタムアクショ
ンを作成できます。
57
第7章
Salesforce1 でのアクションの使用
カスタムアクションについては、後ほど「カスタムアクションについて」で簡単
に説明しますが、詳細は「Visualforce カスタムアクションを使用した機能の追加」
の章を参照してください。
生産性アクション
生産性アクションは Salesforce によって事前定義され、制限されたオブジェクトの
セットに適用されます。生産性アクションを編集または削除することはできませ
ん。
ポイント & クリック操作によるアクション
次の一連のタスクでは、オブジェクト固有のアクションを作成します。ただし、それ
は最初のステップにすぎません。Salesforce1 アプリケーションおよび Salesforce フルサ
イトの両方でアクションが適切な場所に表示され、モバイル環境用に最適化されるよ
うにするため、アクションの作成後にいくつかの操作が必要です。
アクションの設定では、次の手順に従う必要があります。すべての手順について説明
します。
1. グローバルアクションまたはオブジェクト固有のアクションを作成します。
2. 使用時にユーザに表示される項目を選択して、アクションのレイアウトをカス
タマイズします。
3. オブジェクト固有のアクションを作成した場合は、そのオブジェクトの 1 つ以
上のページレイアウトに追加します。グローバルアクションを作成した場合
は、グローバルパブリッシャーレイアウトに追加します。
4. 可能な場合は、必須項目の定義済み項目値を設定します。
では始めましょう。
実際に試す: オブジェクト固有のアクションを作成す
る
オブジェクト固有のアクションにより、関連レコードに自動的に関連付けられるレ
コードが作成されます。
Acme Wireless のモバイル技術者がまだ客先にいる間にすばやくケースを登録できるよ
うにしましょう。取引先オブジェクトに、ケースを対象オブジェクトとするレコード
58
第7章
Salesforce1 でのアクションの使用
作成アクションを配置すると、技術者は自分のモバイルデバイスで顧客の取引先レ
コードを参照し、そこから直接ケースを登録することができます。
1. 取引先のオブジェクト管理設定から、[ボタン、リンク、およびアクション] に
移動します。
2. [新規アクション]をクリックします。
3. [アクション種別] で [レコードを作成] を選択します。
4. [対象オブジェクト] で [ケース] を選択します。
5. [表示ラベル] に「ケースの作成」と入力します。
6. [保存] をクリックします。
保存するとアクションレイアウトエディタが表示されるので、アクションに割り当て
られた項目をカスタマイズできます。アクションレイアウトはこの後すぐに取り上げ
ます。ただしその前にもう 1 つ必要な作業があります。アクションを取引先ページレ
イアウトに割り当てます。
実際に試す: アクションを取引先ページレイアウトに割り当
てる
Salesforce1にオブジェクト固有のクイックアクションが表示されるようにするには、ア
クションをページレイアウトに追加する必要があります。
1. 現在、取引先の [ボタン、リンク、およびアクション] 領域が表示されていま
す。次に、ページレイアウトに移動します。
2. [Account Mobile Technician Layout (取引先モバイル技術者レイアウト)] の横にある [編
集] をクリックします。
これはページレイアウトの章で作成したレイアウトです。[Salesforce1 および
Lightning Experience アクション] セクションは空になっており、このレイアウトの
アクションが Salesforce で事前に定義されていることを示すメッセージが表示さ
れます。ただし、このページレイアウトは Acme Wireless のモバイル技術者用で
あるため、現場で技術者が行う必要のある作業に合わせてアクションをカスタ
マイズします。
3. [Salesforce1 および Lightning Experience アクション] セクションで、[定義済みアク
ションを上書き] をクリックします。
59
第7章
Salesforce1 でのアクションの使用
ヒント: ページレイアウトの [Salesforce1 および Lightning Experience アクショ
ン]セクションをカスタマイズしていない場合、そのオブジェクトのアク
ションは、デフォルトの事前定義済みアクションのセットになります。
[Salesforce Classic パブリッシャーのクイックアクション] セクションでアク
ションをカスタマイズしてレイアウトを保存している場合、[Salesforce1
および Lightning Experience アクション] セクションは、クリックして上書
きしたときの [Salesforce Classic パブリッシャーのクイックアクション] セク
ションのアクションを継承します。
4. パレットの [Salesforce1 アクション] カテゴリをクリックし、このリストに合わせ
て [Salesforce1 および Lightning Experience アクション] セクションのアクションを調
整します。
• ケースの作成
• 活動の記録
• 新規取引先責任者
• 新規商談
• 新規 ToDo
• 投稿
• ファイル
モバイル技術者にとって [ケースの作成] アクションは重要であるため、リスト
の先頭に置き、アクションバーから直接アクセスできるようにします。
パレットには [新規ケース] 項目もあります。[新規ケース] 項目は、取引先オブ
ジェクトに関連付けられたグローバルデフォルトアクションです。今回は、オ
ブジェクト固有の [ケースの作成] をカスタマイズして使用するので、重複する
グローバルアクションは必要ありません。
ヒント: オブジェクトページレイアウトでは、[Salesforce1 アクション] カ
テゴリに、クイックアクション、生産性アクション、標準およびカスタ
60
第7章
Salesforce1 でのアクションの使用
ムボタンをはじめ、オブジェクトに使用可能な全種類のアクションが含
まれます。
5. [保存] をクリックします。
すべてのモバイル技術者の Salesforce1 の取引先レコードのアクションバーに、新しい
[ケースの作成] アクションが表示されます。
すべて終了したので、グローバルアクションに進みましょう。その後で、アクション
レイアウトに戻り、[ケースの作成] アクションをカスタマイズします。
グローバルクイックアクションについて
グローバル作成アクションにより、ユーザはオブジェクトレコードを作成することが
できますが、新規レコードと他のレコードとの間にリレーションはありません。特定
のオブジェクトに関連付けられたアクションは、そのオブジェクトのレコードページ
からのみアクセスできますが、グローバルアクションはサポートされているオブジェ
クトのページレイアウトにもグローバルレイアウトにも追加できるため、レコードを
すばやく作成するのに便利です。
グローバルクイックアクションの作成
グローバルアクションも [設定] から作成しますが、オブジェクト固有のアクションを
作成したときとは場所が異なります。グローバルアクションを作成するには、[設定]
から [クイック検索] ボックスに「アクション」と入力し、[グローバルアクション] を
選択します。グローバルアクションと呼ばれる理由は、アクションがサポートされて
いるどの場所にも配置できるためです。
グローバルパブリッシャーレイアウト
グローバルパブリッシャーレイアウトにより、各種Salesforceインターフェースに表示
されるグローバルアクションが決まります。Salesforce Classic の場合、これらのレイア
ウトでグローバルページ (ホームページなど) や Chatter ページの Chatter パブリッシャー
のアクションをカスタマイズします。Lightning Experience の場合、これらのレイアウト
を使用して、行動、メモ、および ToDo オブジェクトを参照する [活動の記録] アクショ
ンと [レコードを作成] クイックアクションをグローバルアクションメニューに入力し
ます。また、Salesforce1 の場合、これらのレイアウトにより、[フィード] ページと [人]
61
第7章
Salesforce1 でのアクションの使用
ページのアクションバーに表示されるアクションが決まります。グローバルパブリッ
シャーレイアウトには、グローバルアクションのみを含めることができます。グロー
バルパブリッシャーレイアウトを作成したら、各種ユーザプロファイルに割り当て、
グローバルページでユーザにデフォルトで表示されるアクションをカスタマイズでき
ます。
Salesforce1では、グローバルアクションは、グローバルパブリッシャーレイアウトが適
用されるページのアクションバーとアクションメニューに表示されます。Salesforce フ
ルサイトまたは Salesforce1 のいずれかでグローバルアクションが表示されるようにす
るには、あらかじめグローバルパブリッシャーレイアウトに追加する必要がありま
す。
もうひとこと: アクション
• アクションをページレイアウトに追加したが、そのページレイアウトを使用する
プロファイルに割り当てられたユーザに Salesforce フルサイトまたは Salesforce1 でア
クションが表示されない場合、次のような原因が考えられます。
– 作成アクションの場合、アクションのレコードタイプに対する作成のアクセス
権がプロファイルに含まれていない可能性がある。
– アクションのリレーション項目に対する「参照」権限と「編集」権限がユーザ
に付与されていない。リレーション項目は、ユーザがアクションを使用してレ
コードを作成したときに自動的に入力される対象オブジェクトの項目です。た
とえば、ユーザが子ケースを作成できるようにするケースのアクションの場
合、デフォルトのリレーション項目は [親ケース] です。ユーザが [子ケースの
作成] アクションを表示できるようにするには、[親ケース] 項目に対する「参
照」権限と「編集」権限の両方がユーザに付与されていることを確認します。
• 必須項目をアクションレイアウトから削除できますが、項目に事前定義値がある
ことを確認してください。定義済みの値がない場合は、レコードを作成できませ
ん。
ヒントについては、「アクションのガイドラインとベストプラクティス」 (ページ 74)
を参照してください。
62
第7章
Salesforce1 でのアクションの使用
アクションレイアウトについて
オブジェクトレコードページにカスタマイズ可能なページレイアウトがあるのと同じ
ように、アクションにもカスタマイズ可能なアクションレイアウトを指定できます。
この操作は、アクションレイアウトエディタで行います。
アクションを作成するとき、レイアウトにはデフォルトの項目セットが入力されま
す。アクションレイアウトエディタを使用して、アクションレイアウトで項目の追
加、削除、順序変更を行います。
エディタの上部にはパレットがあり、パレットの下にアクションレイアウトがありま
す。パレットに含まれるのは、アクションレイアウトに追加可能なアクションの対象
オブジェクトの項目ですが、サポートされていない次の種別の項目は除外されます。
• レコードタイプ項目
• 積み上げ集計項目、数式項目、自動採番項目など、参照のみの項目種別
63
第7章
Salesforce1 でのアクションの使用
• [作成者] や [最終更新者] など、参照のみのシステム項目
無効な項目
アクションレイアウト上にすでに置かれている項目は、パレットにも表示されま
すが無効になります。パレット上で無効になっている項目を選択すると、Salesforce
では、アクションレイアウト上のその項目が強調表示されます。
項目種別の変換
項目の種別をアクションでサポートされている種別からサポートされていない種
別に変換すると、項目はアクションレイアウトから削除されます。アクションレ
イアウトを変更せずに項目をサポートされている種別に再変換した場合、項目は
自動的にレイアウトに再追加されます。アクションレイアウトを編集してから項
目をサポートされている種別に再変換した場合は、項目を手動でレイアウトに再
追加します。
[活動の記録] アクションに使用されるレイアウト
[活動の記録] アクションでは、次の場合を除き、有効な ToDo のページレイアウト
が使用されます。
• 組織にオブジェクトの [活動の記録] カスタムアクションが存在する場合。カス
タムアクションでは、それに定義されたカスタムアクションレイアウトが使用
されます。
• 組織に [活動の記録] カスタムグローバルアクションが存在する場合。このアク
ションでは、それに定義されたカスタムレイアウトが使用されます。ただし、
オブジェクトの [活動の記録] カスタムアクションも存在する場合を除きます (オ
ブジェクトのカスタムアクションにより、カスタムグローバルアクションが上
書きされます)。
単純な [新規 ToDo] フォームを Salesforce1 ユーザに表示するには、[活動設定] でフォー
ムを有効にし、使用するレイアウトに [件名] 項目が含まれていることを確認しま
す。
レイアウト監査
Salesforceでは、アクションレイアウトのカスタマイズが設定変更履歴で追跡されま
す。
64
第7章
Salesforce1 でのアクションの使用
実際に試す: オブジェクト固有のアクションレイアウ
トをカスタマイズする
作成したアクションのレイアウトを初めて表示する場合、対象オブジェクトのデフォ
ルト項目、標準必須項目、全般的に必須のカスタム項目など、特定の項目は事前入力
されます。[ケースを作成] アクションに項目を追加し、モバイル技術者がAcme Wireless
のサポート担当者のケースにより多くの情報を入力できるようにします。
1. 取引先のオブジェクト管理設定から、[ボタン、リンク、およびアクション] に
移動します。
2. [ケースの作成] アクションの横にある [レイアウト] をクリックします。
デフォルトの設定により、アクションには [取引先責任者名]、[状況]、[件
名]、および [説明] という 4 つの項目がすでに存在します。[状況] 項目の横に
ある赤いアスタリスクは、必須項目であることを示します。他の項目をいくつ
か追加してみましょう。
3. [優先度] をクリックして、[状況] の直後の位置にドラッグします。
4. [商品] をクリックして、[優先度] の直後の位置にドラッグします。
この項目により、顧客が問題を抱えている商品を技術者が示すことができま
す。
65
第7章
Salesforce1 でのアクションの使用
5. [保存] をクリックします。
これで、Acme Wireless のモバイル技術者は、Salesforce1 で取引先を参照し、取引先レ
コードページからケースを作成できるようになりました。それでは、試してみましょ
う。
オブジェクト固有のクイックアクションをテストする
ここまで、アクションを作成し、ページレイアウトに割り当てて、そのアクションレ
イアウトをカスタマイズしましたが、これらの変更はただちに Salesforce1 に反映され
ます。
1. モバイルデバイスで Salesforce1 アプリケーションを開きます。
2.
をタップしてナビゲーションメニューにアクセスします。
3. [最近] セクションで [取引先] をタップします。
4. [Barbary Coast Wireless] をタップします。
5. アクションバーの
をタップしてアクションメニューにアクセスします。
[ケースの作成] および追加した他のアクションがアクションメニューに表示さ
れます。
66
第7章
Salesforce1 でのアクションの使用
6. [ケースの作成] アクションをタップします。
7. [取引先責任者名] 項目をタップします。
8. [Lloyd Benjamin] をタップしてケースに割り当てます。
9. 状況は [新規] のままにします。
10. ケースに [優先度低] を割り当てます。
11. [商品] をタップし、リストの最初の商品を選択します。
12. 件名と説明を入力します。
13. [保存] をタップします。
取引先レコードの詳細ページに戻りました。[フィード]をタップします。作成したケー
スについて新しいフィード項目が表示されます。
67
第7章
Salesforce1 でのアクションの使用
成功です。
アクションの定義済みの値について
アクションの特定の項目に対して定義済みの値を設定すると、モバイルユーザの生産
性が向上し、同時にモバイル環境のアクションを最適化することができます。
アクションレイアウトを設定するときは、使用する項目数が少ないほうが便利です。
ほとんどのユーザ (特にモバイルユーザ) は、多くの必須項目に入力することを好みま
せん。作業をすばやく完了して、次の操作に進むことを希望します。アクションレイ
アウトで使用する項目数を削減するには、できる限り多くの項目に定義済みの値を使
用します。定義済みの値を設定できる項目が多くなれば、レイアウトから削除できる
項目が増え、アクションを簡単かつ迅速に使用できるようになります。使いやすさと
必須情報の量のバランスを取ってください。ただし、必須項目については、アクショ
ンレイアウトから削除する場合は必ず定義済みの値を設定してください。このように
しないと、そのアクションをユーザが適用するときに、レコードが正しく保存されな
くなります。
68
第7章
Salesforce1 でのアクションの使用
アクションを使用して作成したオブジェクトレコードの項目に定義済みの値を設定す
ると、それらの項目をアクションレイアウトに追加する必要がなくなります。たとえ
ば、ユーザが商談を作成するアクションを設定する場合、[フェーズ] 項目の定義済み
の値として [見込み客] を設定します。そのアクションを使用してユーザが新規に作成
するすべての商談は、[見込み客] フェーズに自動的に割り当てられます。[フェーズ]
項目には値が自動的に割り当てられるため、この項目をアクションのレイアウトから
削除できます。
アクションレイアウトエディタで使用できる任意の項目に定義済みの値を設定できま
す。ただし、次の項目は除きます。
• リッチテキストエリア項目
• 複数選択リスト
• 自動採番項目、数式項目、積み上げ集計項目など、参照のみの項目種別
アクションの項目の定義済みの値は、レコードの項目に設定できるデフォルト値とは
異なります。項目がアクションに含まれている場合は、アクションの定義済みの値の
セットとデフォルト値のセットの両方を設定できます。アクションの項目に定義済み
の値とデフォルト値のセットの両方が含まれている場合、デフォルト値ではなく定義
済みの値がアクションで使用されます。
[ケースの作成] アクションのいずれかの項目で、定義済みの値を設定してみましょう。
実際に試す: アクションの定義済み項目値を設定する
[ケースの作成] アクションをカスタマイズする場合、[状況] はケースの必須項目であ
るためすでに存在します。Acme Wireless のモバイル技術者が外出中にケースを開く必
要がある場合、ケース状況は常に「新規」となります。ケースを開くたびに [状況]
項目を入力するように要求するのではなく、「新規」という定義済み項目値を設定し
てみましょう。その後、この項目はアクションレイアウトから削除でき、[ケースの作
成] アクションを使用してケースを作成するたびに、状況が自動的に「新規」に設定
されます。
1. 取引先のオブジェクト管理設定から、[ボタン、リンク、およびアクション] に
移動します。
2. [ケースを作成] をクリックします。
3. [定義済みの値] 関連リストで、[新規] をクリックします。
4. [項目名] ドロップダウンリストから、[状況] を選択します。
69
第7章
Salesforce1 でのアクションの使用
5. 値を「新規」に設定します。
6. [保存] をクリックします。
次に、[状況] 項目をアクションレイアウトから削除する必要があります。
7. アクションの詳細ページで、[レイアウトを編集する] をクリックします。
8. レイアウトで [状況] 項目をクリックし、それをパレットにドラッグします。
ヒント: 必須項目をアクションレイアウトから削除できますが、項目に
事前定義値があることを確認してください。定義済みの値がない場合は、
レコードを作成できません。
9. [保存] をクリックします。
では、実際に確認してみましょう。
定義済みの値をテストする
1. モバイルデバイスで Salesforce1 アプリケーションを開きます。
2.
をタップしてナビゲーションメニューにアクセスします。
3. [最近] セクションで [取引先] をタップします。見つからない場合は、[追加...] を
タップしてください。
4. [Barbary Coast Wireless] をタップします。
5. アクションバーの
をタップしてアクションメニューにアクセスします。
6. [ケースを作成] アクションをタップします。
[状況] 項目がなくなっています。
7. ケースに [優先度高] を割り当てます。
8. [商品] をタップし、リストでいずれかの商品を選択します。
9. 件名と説明を入力します。
10. [保存] をタップします。
11. [フィード] をタップします。作成したケースについて新しいフィード項目が表
示されます。
12. フィード項目のケース番号をタップし、[詳細] をタップします。
70
第7章
Salesforce1 でのアクションの使用
ケースレコードページのレコードの [特長] 領域に、件名、優先度 (高)、状況 (新
規)、およびケース番号が表示されます。定義済みの値を利用して [状況] 項目
が入力されています。
うまくいきました。これでアクションについてはほぼ終了です。次にもう 1 つの種別
であるカスタムアクションについて簡単に説明します。
カスタムアクションについて
オブジェクト固有のカスタムアクションは、オブジェクトレコードと関係があるレ
コードをユーザが操作または作成できるようにする Visualforce ページまたはキャンバ
スアプリケーションです。オブジェクト固有のカスタムアクションの Visualforce ペー
ジには、関連するオブジェクト用の標準コントローラを含める必要があります。たと
えば、ユーザが取引先責任者の Twitter プロファイルをインポートし、その情報を取引
先責任者レコードに追加することができるカスタムアクションを作成するには、標準
取引先責任者コントローラを使用します。
71
第7章
Salesforce1 でのアクションの使用
特定のオブジェクトと関係のあるレコードをユーザが使用する必要がないタスクのグ
ローバルカスタムアクションを作成するには、Visualforceページまたはキャンバスアプ
リケーションを使用します。カスタムアクションとして使用するキャンバスアプリ
ケーションでは、場所としてパブリッシャーが必要です。グローバルカスタムアク
ションとして使用する Visualforce ページでは、標準コントローラが使用できません。
たとえば、ユーザが住所を入力して地図、現地時間、現地の天候を表示するカスタム
アクションを作成するとします。このアクションでは、標準コントローラを一切使用
しない Visualforce ページを作成し、それをカスタムグローバルアクションとして追加
します。
カスタムアクションはポイント & クリックツールでは作成できないため、システム管
理者向けのこの練習問題では扱いません。カスタムアクションについての詳細は、
「Visualforceカスタムアクションを使用した機能の追加」 (ページ105)を参照してくださ
い。
72
第8章
トピック:
•
アクションのガイ
ドラインとベスト
プラクティス
•
カスタムアイコン
のガイドラインと
ベストプラクティ
ス
システム管理者のためのガイドラ
インとベストプラクティス
ここまで、ポイントアンドクリックツールを使用して組織
を Salesforce1 とモバイルユーザ向けに最適化するための主要
な機能について学習してきました。通知を有効化し、ペー
ジレイアウトとコンパクトレイアウトを作成し、クイック
アクションを設定して、Salesforce1 ナビゲーションメニュー
をカスタマイズしました。
この章では、モバイルユーザの操作性の大幅な向上を可能
にするアクションとカスタムアイコンについて、いくつか
の推奨事項とベストプラクティスを取り上げます。「モバ
イル用ページレイアウトの最適化のヒント」 (ページ 45)の
ページレイアウトに関するガイドラインをまだ読んでいな
い場合は、必ず確認してください。
73
第8章
システム管理者のためのガイドラインとベストプラクティス
アクションのガイドラインとベストプラクティス
アクションは、ユーザがすばやく作業を行うために非常に有効な方法です。システム
管理者は、ユーザに必要な的確なアクションを提供するという重要な役割を果たしま
す。
どのような種類のアクションを作成するかを検討するとき、または実際にアクション
を作成するときも、次の推奨事項を考慮してください。
• アクションレイアウトをカスタマイズするときは、ユーザがそれで何を実行する
かを考慮します。最小限に抑えることが重要です。モバイルユーザにとって、ま
た、これらのアクションから発生するケース、通話、レコードを処理するすべて
のユーザにとって必要な項目のみを含めます。
• アクションを簡易ナビゲーションショートカットとして使用しないでください。
アクションは機能の実行を目的として設計されています。
• アクションにタスク指向の名前を付け、ユーザに機能がわかるようにします。新
規、作成、共有、更新、インポートのような用語を使用します。名前は簡潔なも
のにします。
• どこからでもアクセスでき、特定のオブジェクトに結び付けられていないアクショ
ンをユーザが必要としている場合は、グローバルアクションを作成します。
• 各アクションに関する作成者自身のメモを作成するには、[説明] 項目を使用しま
す。メモはたとえば、さまざまなレコードタイプで似たアクションを複数作成す
る場合に特に便利です。説明は、オブジェクト固有のアクションのボタン、リン
ク、アクションのリストまたはグローバルアクションのリスト、およびアクショ
ンの詳細ページに表示されます。作成者のメモはユーザには表示されません。
• アクションレイアウトに追加できる項目数にハードリミットはありません。ただ
し、最適な使いやすさを得るため、項目は 8 個以下にすることをお勧めします。20
項目以上を追加すると、ユーザの効率が大幅に低下します。レイアウトの項目数
を減らすには、必須項目の定義済みの値を作成して、その項目をレイアウトから
削除します。項目の定義済みの値は、アクションの詳細ページから設定できます。
74
第8章
システム管理者のためのガイドラインとベストプラクティス
カスタムアイコンのガイドラインとベストプラク
ティス
組織に [ドキュメント] タブへのアクセス権がある場合、アクションまたはカスタムタ
ブにカスタムアイコンを追加できます。
独自のアクションまたはタブアイコンを作成することを決めたら、アイコンを [ドキュ
メント] フォルダにアップロードして [外部参照可] が選択されていることを確認しま
す。
カスタムアイコンを作成するときには、画像に関する次のガイドラインに従います。
アイコンは次の条件を満たしている必要があります。
• サイズが 10 K 未満である
• 120×120 ピクセルである
• PNG 形式で背景が透明色である
• 解像度が 72 dpi である
• 背景色を含まない
• 内部アイコングラフィックの周囲に影が設定されていない
さらに、ビジュアルに関する次のガイドラインに従います。
• 80×80 ピクセルの領域の中央に内部アイコングラフィックを配置し、その周囲に 20
ピクセルの余白を残して最終的に 120×120 ピクセルの形式にします。
• アイコングラフィックは白か、背景色よりも明るい色にします。
• 内部や周囲に濃い影を付けないようにします。
• Salesforce1アイコンファミリに似た、シンプルでフラットなスタイルを使用します。
例については、『Salesforce1 スタイルガイド』を参照してください。
アクションまたはタブを作成するときには、[変更アイコン] リンクを使用してカスタ
ムアイコンを割り当てます。
キャンバスアプリケーションのナビゲーションメニューアイコンに使用するアイコン
をカスタマイズすることもできます。「キャンバスアプリケーションのカスタムアイ
コン」 (ページ 244)を参照してください。
75
Salesforce1 向けの開発
第9章
トピック:
•
シナリオ
•
第 Ⅱ 部の対象読者
•
Salesforce1 アプリ
ケーションを作成
するときに宣言型
ツールを使用する
ケースとプログラ
ム型ツールを使用
するケース
•
Salesforce App
Cloud の使用とカス
タムアプリケー
ションの作成の違
い
•
Salesforce App
Cloud の開発プロセ
ス
•
開発の前提条件
Salesforce App Cloud 開発へようこ
そ
Salesforce App Cloud の開発へようこそ。第 I 部「Salesforce1 の管
理」では、Salesforce1の組織を設定する方法を学習しました。
また、宣言的プログラミング機能を使用して Salesforce1 アプ
リケーションをモバイルユーザ向けにカスタマイズする方
法も学習しました。ここでは、Salesforce App Cloud の機能を
使用して、コードで Salesforce1 アプリケーションを拡張し、
ユーザ向けに新機能を追加する方法を学習します。
Salesforce1 のモバイルユーザ向けの開発では、既存のスキル
を活用してアプリケーションをユーザ向けに拡張し、カス
タマイズできます。Salesforce App Cloud を使用して組織を拡
張し、それらの変更をモバイルユーザと Salesforce フルサイ
トのユーザの両方が使用できるようにすることが可能です。
77
第9章
Salesforce App Cloud 開発へようこそ
シナリオ
引き続き Acme Wireless のビジネスシナリオを使用して、モバイル技術者と倉庫の作業
者のニーズを満たす機能を作成します。
ここでは、次の方法を学習します。
• モバイル優先のユーザインターフェース設計を採用してモバイル操作を最適化す
る。
• モバイルユーザが Salesforce1 のナビゲーションメニューまたはアクションバー、レ
コード、あるいは Salesforce フルサイトのパブリッシャーからアクセスできるよう
に Visualforce ページを実装する。
• Visualforce ページを Salesforce1 のアクションバーまたは Salesforce フルサイトのパブ
リッシャーから使用できるように Visualforce カスタムアクションを作成する。
• Force.com Canvas アプリケーションを Salesforce1 のアクションバーまたは Salesforce フ
ルサイトのパブリッシャーから使用できるようにキャンバスカスタムアクション
を作成する。
• ユーザにフィード内の機能へのアクセス権を付与し、Chatter フィードにキャンバ
スアプリケーションを埋め込む。
• カスタムアクションを API からコールすることで既存のロジックを利用する。
• Lightning ページを作成して Salesforce1 ユーザインターフェースを拡張する。
• Salesforce1 を拡張するときに開発のベストプラクティスを実践する。
第 Ⅱ 部の対象読者
本書の第 II 部は、初心者から熟練した上級者まで、コードでSalesforce1アプリケーショ
ンをカスタマイズする必要があるすべての開発者を対象としています。
Force.com プラットフォームのプログラミングに習熟している場合や、Mobile SDK を使
用した開発の経験がある場合は通常、容易に Salesforce App Cloud での開発を始めること
ができます。
このプラットフォームを初めて使用する場合や、宣言的プログラミングの経験が大半
の場合でも心配はいりません。それぞれの章で、架空の企業 Acme Wireless に各機能を
実装するプロセスをステップごとに説明していきます。そのため、実際に試しながら
78
第9章
Salesforce App Cloud 開発へようこそ
学習できます。これらのセクションには「実際に試す」というタイトルが付けられて
います。
各章には、機能の概要、そのしくみ、および使用する状況についての情報も含まれて
います。これらのセクションには「もうひとこと」というタイトルが付けられていま
す。機能の詳細を調べるには、これらのセクションを参照してください。
Salesforce1 アプリケーションを作成するときに宣
言型ツールを使用するケースとプログラム型ツー
ルを使用するケース
Salesforce モバイルユーザの機能を開発する場合、宣言機能 (クリック) またはプログラ
ム型ツール (コード) を使用できます。コーディングを開始する前に次の事項を考慮し
てください。
宣言型ツールで作成される Salesforce1 機能には、次のような特徴があります。
• 一般的に迅速かつ低コストで作成できる。
• 一般的にメンテナンス作業が少ない。
• ツールが改善されると自動にアップグレードされる。
• ガバナ制限が適用されない。
Salesforce1 アプリケーションで使用できる一般的な宣言型ツールは次のとおりです。
• クイックアクション
• ページレイアウトのカスタマイズ
• 数式項目および積み上げ集計項目
• 入力規則
• ワークフローおよび承認プロセス
• カスタム項目およびカスタムオブジェクト
Visualforceなどのプログラム型ツールを使用して新機能の開発を確定する前に、代わり
に宣言型ツールで機能を実装できるかどうかを検討してください。
もちろん、宣言型ツールで作成できないアプリケーションもあります。多くの場合、
プログラム型ツールは次の内容を実現する機能で必要になります。
• 特殊または複雑なビジネスプロセスをサポートする。
79
第9章
Salesforce App Cloud 開発へようこそ
• 高度にカスタマイズされたユーザインターフェースまたはカスタマイズされたク
リックスルーパスを提供する。
• サードパーティシステムに接続したり、サードパーティシステムと統合したりす
る。
コードではなくクリックを選択した場合の明確なルールはありません。クリックを選
択した場合、解決しようとしている問題や解決のために使用できるリソースを考慮し
てください。
Salesforce App Cloud の使用とカスタムアプリケー
ションの作成の違い
Salesforceモバイルユーザ用の機能を開発する場合には、2 つのオプションがあります。
Salesforce1 アプリケーションの拡張と Mobile SDK またはその他ツールを使用したカスタ
ムアプリケーションの作成には違いがいくつかあります。
Salesforce App Cloud
• 定義されたユーザインターフェースがある。
• Salesforce データにフルアクセスできる。
• Salesforce1 アプリケーションに統合された操作性を作成するために使用できる。
• クイックアクションにより、独自のアプリケーション/機能を含める方法が提供さ
れる。
• ポイント & クリックまたはプログラムによるカスタマイズを使用して、Salesforce1
をカスタマイズできる。
• Visualforce ページ、Force.com Canvas アプリケーション、および Lightning コンポーネン
トフレームワークを使用して、プログラムにより機能を追加できる。
• 定義されたナビゲーションポイントがある。Salesforce1 のカスタマイズまたはアプ
リケーションは、Salesforce1 ナビゲーションに準拠します。このため、たとえば
Visualforce ページなどをナビゲーションメニューまたはアクションバーのカスタム
アクションからコールできます。
• 既存の Salesforce 開発手法 (ポイント & クリックおよびプログラムの両方) を活用で
きる。
80
第9章
Salesforce App Cloud 開発へようこそ
• すべての Salesforce エディションに含まれ、Salesforce でサポートされている。
カスタムアプリケーション
カスタムアプリケーションは、Salesforce Mobile SDK で作成する独立型アプリケーション
の場合と、プレーン HTML5 および jQuery Mobile/Ajax を使用するブラウザアプリケーショ
ンの場合があります。カスタムアプリケーションでは、次のことができます。
• カスタムユーザ環境を定義する。
• ネイティブおよびハイブリッドのローカルアプリケーションで REST API を使用する
か、JavaScript Remoting を使用するハイブリッドアプリケーションで Visualforce を使
用して、Salesforce データにアクセスする。HTML5 アプリケーションでは、jQuery
Mobile および Ajax を使用して同じ操作を行います。
• 顧客向けアプリケーションで注目度を上げるためにユーザインターフェースをブ
ランド設定する (カスタムアプリケーションアイコンなど)。
• Java for Android または Objective-C for iOS を使用するネイティブ API を使用するか、
JavaScript および HTML5 を使用するハイブリッドコンテナを使用して、スタンドアロ
ンモバイルアプリケーションを作成する (Mobile SDK のみ)。
• Apple App Store や Google Play などのモバイル業界チャネルを使用して、アプリケー
ションを配布する (Mobile SDK のみ)。
• 複雑なオフライン動作を設定および制御する (Mobile SDK のみ)。
• 転送通知を使用する (Mobile SDK ネイティブアプリケーションでのみ使用可能)。
• 独自の OAuth モジュールを使用して、カスタムセキュリティコンテナを設計する
(Mobile SDK のみ)。
Mobile SDK のその他の重要な考慮事項:
• オープンソース SDK は、npm インストーラおよび GitHub から無料でダウンロードで
きます。ライセンスは必要ありません。
• アプリケーションを外部開発環境 (iOS の場合は Xcode、Android の場合は Eclipse また
はそれに類似するもの) で開発およびコンパイルする必要があります。
• 開発費用は 0 ～ 100万ドルまたはそれ以上で、さらにメンテナンス費用がかかりま
す。
81
第9章
Salesforce App Cloud 開発へようこそ
Salesforce App Cloud の開発プロセス
Salesforce1アプリケーションは、携帯端末やタブレットのようなモバイルデバイスで実
行されるように設計されていますが、モバイルデバイスで開発しなければならないわ
けではありません。特に Salesforce1 アプリケーションと Salesforce フルサイトの両方に
表示する Visualforce ページを作成する場合は、デスクトップで開発すると便利です。
デバイスエミュレータで Salesforce1 アプリケーションにアクセスすることで、変更す
るたびにデバイスでテストしなくても、デスクトップ上で反復して開発できます。
重要: Salesforce1アプリケーションをエミュレータで実行することは、通常の使用
ではサポートされていません。また、組織でサポートされているモバイルデバイ
スでのカスタムアプリケーションおよびページの完全なテストの代わりになるも
のではありません。開発中に、リリース先となるすべてのデバイスおよびプラッ
トフォームでアプリケーションを定期的にテストする必要があります。
デバイスエミュレータに Salesforce1 カスタムページおよびアプリケーションを表示す
るには、サポートされるデバイスに適した SDK をダウンロードしてインストールしま
す。
• iPhone および iPad 向け Apple iOS シミュレータ
developer.apple.com/library/ios/documentation/IDEs/
Conceptual/iOS_Simulator_Guide/
• 電話端末およびタブレット向け Android 仮想デバイスエミュレータ
developer.android.com/tools/devices/emulator.html
Salesforce1 での Visualforce のテストに、標準の
https://<Salesforce_instance>/apex/yourPageName という URL を使用するこ
とはできません。このテストを行うには、Salesforce1内のページにアクセスする必要が
あります。
開発の前提条件
これらの練習問題を始める前に、次の前提条件を満たす必要があります。
• Developer Edition 組織にアクセスします。
82
第9章
Salesforce App Cloud 開発へようこそ
まだ Force.com 開発者コミュニティのメンバーではない場合、
http://sforce.co/1om1gHf にアクセスし、Developer Edition 組織のサインアップ
の説明に従ってください。すでに Enterprise Edition、Unlimited Edition、またはPerformance
Edition を所有している場合でも、組織の使用中のデータを保護するために、サンプ
ルデータに対するソリューションの開発、ステージングおよびテストには Developer
Edition を使用します。
• Developer Edition 組織で「API の有効化」権限を有効にする必要があります。この権
限はデフォルトで有効になっていますが、システム管理者によって変更されてい
る場合があります。
• Warehouse データモデルが Developer Edition 組織にインストールされ、Salesforce1 アプ
リケーションがモバイルデバイスにインストールされている必要があります。こ
れらの項目をまだ設定していない場合は、「作業環境の設定」 (ページ 17)を参照
してください。
システム管理者のページレイアウトの割り当てを変更
する
このガイドの一部の概念をわかりやすく説明するためにカスタムページレイアウトを
作成しました。開始する前に、システム管理者プロファイルのページレイアウトの割
り当てをこの新しいレイアウトに切り替えましょう。
1. [設定] から、[クイック検索] ボックスに「プロファイル」と入力し、[プロファ
イル] を選択します。
2. システム管理者プロファイルを選択します。
3. [ページレイアウト] セクションで、取引先を検索して[割り当ての参照]をクリッ
クします。
4. [割り当ての編集]をクリックします。
5. [システム管理者] 品目をクリックします。
6. [使用するページレイアウト] ドロップダウンリストから Warehouse スキーマの取
引先レイアウトを選択します。
7. [保存] をクリックします。
うまくいきました。これで、準備が整いました。
83
第 10 章
トピック:
•
モバイル用の設計
•
ナビゲーションを
簡潔に保つ
•
重要な情報を上部
に配置する
•
項目の数を最小限
に抑える
•
項目のデフォルト
を使用する
•
ユーザインター
フェーステキスト
を最小限に抑える
•
タップターゲット
のサイズ
モバイル優先のユーザインター
フェースの設計
この章では、Salesforce1 モバイルユーザ用の機能を開発する
場合に留意するユーザインターフェース設計の考慮事項に
ついて学習します。
モバイルを念頭に置いてユーザインターフェースを設計す
ることは、アプリケーションの成功に不可欠です。アプリ
ケーションの機能を簡単に使用できて、他のモバイルアプ
リケーションのように操作できれば、ユーザの満足度がさ
らに向上します。この章のユーザインターフェースガイド
ラインでは、次のようなモバイルプラットフォームの主な
違いやユーザーがそこで行う操作方法への対応を説明しま
す。
• モバイルデバイスの画面は小さい。
• タップやスワイプなどのジェスチャで移動する。
• 通常、ユーザはモバイルデバイスから特定の作業 (新し
いレコードの追加など) を実行する。
このガイドの例を通じて、これらのベストプラクティスに
ついて説明します。Salesforce App Cloud を使用して独自のカ
スタマイズやアプリケーションを開発および作成する場合、
これらのガイドラインに留意してください。
85
第 10 章
モバイル優先のユーザインターフェースの設計
モバイル用の設計
Salesforce1ユーザ向けのユーザインターフェースを設計するときには、端末が小さいこ
とと、ユーザーがどのような操作を行うかを最初から考慮します。
モバイル環境では、ユーザの操作は非常に速く、1 つのタスクに 1 ～ 2 分程度しかか
けません。そのため、ユーザの操作方法に合わせてアプリケーションを設計する必要
があります。
デスクトップ環境向けに設計されたフォームとワークフローを取り込んで、単に
Salesforce1で使用できるようにすることは避けてください。たとえば、デスクトップの
Web ブラウザでのユーザ操作では、1 つのフォームに多くの項目と関連するリストを
含めても許容される場合があります。一方で、その同じフォームをモバイルデバイス
から使用すると、ユーザの操作性が適切ではなくなるおそれがあります。
以下に示すユーザインターフェースガイドラインに従い、モバイル環境専用に設計し
たフォームであれば、ユーザの操作性ははるかに向上します。
ナビゲーションを簡潔に保つ
ユーザがすばやく画面にアクセスし、アプリケーション内のどこにいるのかを把握で
きるようにカスタマイズを設計します。
フォームを作成する場合、簡潔で論理的なフローになるようにします。これにより、
ユーザが自分がいる場所を把握できるため、アクセス元を覚えておく必要がなくなり
ます。たとえば、フィード項目を作成する場合、そのフィード項目から別のフォーム
にリンクし、さらに別のフォームにリンクするようなことは避けてください。
重要な情報を上部に配置する
最も重要な情報を画面の上部に配置し、ユーザがすぐに参照して簡単にアクセスでき
るようにします。
たとえば、モバイル技術者がすべての修理予定を表示するために使用する画面では、
最も重要な顧客データ (名前、住所、および電話番号など) を上部に配置します。画面
ごとに、ユーザの作業と、その作業を完了させるために必要なデータを特定してくだ
さい。別の例としてフィード項目を生成する場合を考えます。この場合、次の例に示
86
第 10 章
モバイル優先のユーザインターフェースの設計
すように、テキストはできるだけ簡潔で、最も重要な情報が投稿の最初に表示される
必要があります。
項目の数を最小限に抑える
画面の表示項目に関しては、少ない方が効率的です。目の前の作業を完了させるため
に必要な項目のみをユーザに提供します。
たとえば、新しい倉庫を追加する画面を作成する場合、倉庫名項目のみを表示できま
す。こうすることで、ユーザは新しい倉庫をすばやく追加できます。ユーザは詳細情
報を収集したら、詳細ビューで新しいレコードを編集して情報を追加できます。
このガイドラインは、参照のみの情報を表示する場合に特に重要です。たとえば、モ
バイル技術者が顧客を検索するために使用するフォームを作成する場合、モバイル技
術者は顧客名、住所、および電話番号のみを参照する必要があると考えられます。商
品の検索ページでは、商品名と配送距離の 2 つの項目しか必要ありません。
87
第 10 章
モバイル優先のユーザインターフェースの設計
画面に表示するレコード数を削減するには、ユーザにデータを入力させる代わりに、
新しいレコードにデフォルト値を使用することを検討してください。
項目のデフォルトを使用する
ユーザが入力する必要のある項目が画面にある場合、できる限り多くの項目にデフォ
ルトを作成します。
たとえば、複数選択リストがあるフォームを作成する場合、項目をデフォルトの特定
の値にすることを検討してください。こうすることで、ユーザは必要な場合はその値
を変更し、必要ない場合は単純にデフォルトを受け入れることで、ワークフローが迅
速化されます。
88
第 10 章
モバイル優先のユーザインターフェースの設計
ユーザインターフェーステキストを最小限に抑え
る
デバイスのフォーム要素およびサイズに注意して、表示ラベルとユーザインターフェー
ステキストを短く簡潔に保ちます。
項目およびメニュー表示ラベルをできる限り短く保ちつつ、ユーザがその項目の意味
を十分に理解できるようにします。ユーザがユーザインターフェースをすばやく理解
できるように、できる限り直感的なアイコンや記号を使用します。ユーザインター
フェーステキストでの目標は、ユーザがやるべきことを理解できる程度の十分な情報
を提供しながら、ユーザインターフェースをクリーンで簡潔な状態に保つことです。
一般的なベストプラクティスは、項目の上に表示ラベルを配置することと、項目を横
に並べて表示するのではなく縦 1 列に表示することです。
また、テキストのブロックも簡潔で要領を得たものにする必要があります。たとえ
ば、Salesforce1に表示されるフィード項目を自動的に作成する場合、テキストを短く保
ち、必要な情報のみが含まれるようにします。
倉庫のシナリオでは、倉庫で注文品の処理が完了したときに、カスタマー取引先フィー
ドにフィード項目を表示して、重要な情報 (請求書番号や注文番号など) と、短いメッ
セージや請求書へのリンクを示します。
89
第 10 章
モバイル優先のユーザインターフェースの設計
タップターゲットのサイズ
モバイルユーザは Salesforce1 ユーザインターフェースを指で操作するため、最適なサ
イズになるようにユーザインターフェース要素を設計してください。
画面コントロールは、ユーザが簡単にタップするのに十分な大きさにする必要があ
り、ユーザによって手の大きさが異なるということを考慮する必要があります。コン
トロールが小さすぎると、ユーザは複数回タップしなければならなくなり、ストレス
を感じることになります。ただし、コントロールが大きすぎると、ユーザが意図して
いないコントロールをタップしてしまう可能性があります。
タップターゲットの最小サイズは 44 ピクセル (幅) × 44 ピクセル (高さ) にすることをお
勧めします。カスタムアイコンについての詳細は、「カスタムアイコンのガイドライ
ンとベストプラクティス」 (ページ 75)を参照してください。
90
第 11 章
トピック:
•
実際に試す:
Visualforce ページを
作成する
•
もうひとこと:
Salesforce1 で
Visualforce ページを
表示できる場所
•
もうひとこと: コー
ドについて
Visualforce ページを使用した
Salesforce1 の拡張
Visualforce の知識を利用して、Salesforce1 アプリケーションを
拡張し、モバイルユーザが必要とする機能を提供できます。
この章では、Acme Wireless 組織を拡張し、近くの倉庫を検索
する手段をモバイル技術者に提供します。たとえば、モバ
イル技術者が依頼を受けて出掛けた先で部品が必要になっ
た場合、このページを使用して半径 20 マイル以内にある倉
庫を探すことができます。
既存の Visualforce ページを取り込んで、Salesforce1 で表示でき
ますが、モバイルデバイスでそのページがどのように表示
され、どう機能するかを考慮する必要があります。多くの
場合、モバイル環境専用に設計された新しいページを作成
したくなるものです。
ユーザインターフェースの Visualforce ページを表示できる場
所についての詳細は、「もうひとこと: Salesforce1 で Visualforce
ページを表示できる場所」 (ページ100)を参照してください。
では始めましょう。
91
第 11 章
Visualforce ページを使用した Salesforce1 の拡張
実際に試す: Visualforce ページを作成する
次に、Visualforceページを作成し、ナビゲーションメニューから利用できるようにしま
しょう。
この Visualforce ページは次の項目を参照します。
• googleMapsAPI という名前の静的リソース
• FindNearby という名前の Apex クラス
これらはダウンロードしたパッケージに含まれていて、このガイドで使用するために
インストールされています。
Visualforce ページの FindNearbyWarehousesPage も、パッケージに含まれています。
パッケージに含まれているページを使用する場合は、次のステップ「タブを新規作成
する」 (ページ 96)に進んでください。
このページのコードはユーザの現在の場所を使用し、Google Maps と統合して、20 マイ
ル以内に存在する倉庫を示した地図を表示します。近くに倉庫がある場合、倉庫の名
前、住所、電話番号と共にピンが地図に表示されます。
1. Salesforce アプリケーションで、[設定] から [クイック検索] ボックスに
「Visualforce ページ」と入力し、[Visualforce ページ] を選択します。
2. [新規] をクリックします。
3. [表示ラベル] 項目に、「FindNearbyWarehousesPage」と入力します。
FindNearbyWarehousesPage ページは、インストールしたパッケージに含ま
れます。そのため、このコードをコピーして新しいページを作成する場合、
ページを別の名前に変更する必要があります。
4. [Salesforce モバイルアプリケーションおよび Lightning ページでの使用が
可能] チェックボックスをオンにします。
このチェックボックスを選択することは、ページがモバイルに対応していて
Salesforce1 で使用できることを示します。
5. 次のコードをコピーして [Visualforce Markup] タブに貼り付けます。
92
第 11 章
Visualforce ページを使用した Salesforce1 の拡張
コード内の改行によってエラーが生じる可能性があるため、一部の改行の削除
が必要になる場合があります。
<apex:page sidebar="false" showheader="false"
standardController="Warehouse__c"
recordSetVar="warehouses" extensions="FindNearby">
<apex:includeScript value="{!$Resource.googleMapsAPI}" />




<style>
html, body { height: 100%; }
.page-map, .ui-content, #map-canvas
{ width: 100%; height:100%; padding: 0; }
#map-canvas { height: min-height: 100%; }
</style>
<script>
function initialize() {
var lat, lon;
// Check to see if the device has geolocation
// detection capabilities with JS
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position){
lat = position.coords.latitude;
lon = position.coords.longitude;
//Use VF Remoting to send values to be
//queried in the associated Apex Class
Visualforce.remoting.Manager.
invokeAction(
'{!$RemoteAction.FindNearby.
getNearby}',
lat, lon,
93
第 11 章
Visualforce ページを使用した Salesforce1 の拡張
function(result, event){
if (event.status) {
console.log(result);
createMap(lat, lon, result);
} else if (event.type ===
'exception') {
//exception case code
} else {
}
},
{escape: true}
);
});
} else {
//Set default values for map if the device
//doesn't have geolocation capabilities
/** San Francisco **/
lat = 37.77493;
lon = -122.419416;
var result = [];
createMap(lat, lon, result);
}
}
function createMap(lat, lng, warehouses){
//Grab the map div and center the map at
//the proper latitude/longitude
var mapDiv = document.getElementById(
'map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(lat, lng),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//Set up the markers for the map using the
//variable we queried for in our controller
var warehouse;
for(var i=0; i<warehouses.length;i++){
warehouse = warehouses[i];
console.log(warehouses[i]);
94
第 11 章
Visualforce ページを使用した Salesforce1 の拡張
setupMarker();
}
function setupMarker(){
var content='<a href src="/'+ warehouse.Id +
'" >'+
warehouse.Name + '</a><br/>'+
warehouse.Street_Address__c +
'<br/>' + warehouse.City__c +
'<br/>' + warehouse.Phone__c;
//Create the callout that will pop up
//on the marker
var infowindow = new google.maps.
InfoWindow({
content: content
});
//Place the marker
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(
warehouse.Location__Latitude__s,
warehouse.Location__Longitude__s)
});
//Create an action to open the callout
google.maps.event.addListener(
marker, 'click', function(){
infowindow.open(map, marker);
});
}
}
//Run the initialize function when the window loads
google.maps.event.addDomListener(
window, 'load', initialize);
</script>
<body style="font-family: Arial; border: 0 none;">
<div id="map-canvas"></div>
</body>
</apex:page>
95
第 11 章
Visualforce ページを使用した Salesforce1 の拡張
6. [保存] をクリックします。
これで、倉庫を検索するVisualforceページを作成できました。次のステップでは、ペー
ジのタブを作成します。その後に、Salesforce1のナビゲーションメニューにページを追
加します。
タブを新規作成する
次に、タブを新規作成し、先ほど作成した Visualforce ページを追加します。
1. [設定] から、[クイック検索] ボックスに「タブ」と入力し、[タブ] を選択しま
す。
2. [Visualforce タブ] セクションで、[新規] をクリックします。
3. [Visualforce ページ] ドロップダウンリストで、[FindNearbyWarehousesPage] または前
のステップで作成したページを選択します。
4. [タブの表示ラベル] 項目に、「Find Warehouses」(倉庫の検索) と入力しま
す。
この表示ラベルは Salesforce1 のナビゲーションメニューに表示されます。
5. [タブスタイル] 項目をクリックし、[地球] スタイルを選択します。
このスタイルのアイコンは、Salesforce1ナビゲーションメニューのページのアイ
コンとして表示されます。
96
第 11 章
Visualforce ページを使用した Salesforce1 の拡張
6. [次へ] をクリックします。
7. [次へ] をクリックしてデフォルト表示を使用します。
8. 組織のアプリケーションにこのタブが含まれないように、[タブを含める]チェッ
クボックスを選択解除します。ユーザがモバイルデバイスで参照しているとき
のみ、このタブを表示する必要があります。
9. [保存] をクリックします。
Visualforceページとタブを作成したので、新しいタブをナビゲーションメニューに追加
する準備が整いました。
ナビゲーションメニューにタブを追加する
このステップでは、ナビゲーションメニュー項目としてタブを追加します。アクセス
権を持つ Salesforce1 アプリケーションユーザは即座に利用できます。
1. [設定] から、[クイック検索] ボックスに「ナビゲーション」と入力し、[Salesforce1
ナビゲーション] を選択します。
2. [Find Warehouses (倉庫の検索)] を選択し、[追加] をクリックして [選択済み] リスト
に移動します。
3. [保存] をクリックします。
Salesforce1 ユーザがログインすると、ナビゲーションメニューに [Find Warehouses (倉庫
の検索)] メニュー項目が表示されます。では、試してみましょう。
97
第 11 章
Visualforce ページを使用した Salesforce1 の拡張
Visualforce ページをテストする
ここでは、Acme Wirelessモバイル技術者として、近くの倉庫をデバイスで検索します。
1. モバイルデバイスで Salesforce1 アプリケーションを開きます。
2.
をタップしてナビゲーションメニューにアクセスします。
[アプリケーション] セクションの下に [Find Warehouses (倉庫の検索)] が表示され
ます。
3. [Find Warehouses (倉庫の検索)] をタップします。
4. 現在の場所の使用を確認するメッセージが表示されたら、[OK] をクリックしま
す。20 マイル以内にあるすべての倉庫の場所を示す地図が表示されます。
98
第 11 章
Visualforce ページを使用した Salesforce1 の拡張
パッケージのサンプルデータの倉庫は、すべてサンフランシスコ地区に存在し
ます。他の場所からテストする場合は、20 マイル以内に存在する倉庫を必ず追
加してください。新しい倉庫を追加するには、Force.com アプリケーションメ
ニューから [Warehouse (倉庫)] を選択して [Warehouse] タブをクリックし、[最近
使った Warehouse] セクションで [新規] をクリックします。
これで完成です。このように、とても簡単に、モバイルユーザが標準ページと標準タ
ブを利用できるようにすることができます。
Visualforce ページの開発ガイドラインについての詳細は、「Visualforce のガイドラインと
ベストプラクティス」 (ページ 198)を参照してください。
99
第 11 章
Visualforce ページを使用した Salesforce1 の拡張
もうひとこと: Salesforce1 で Visualforce ページを表
示できる場所
Visualforce ページを作成すると、Salesforce1 ユーザインターフェースのさまざまな場所
から利用可能にできます。
• ナビゲーションメニュー — Salesforce1 モバイルアプリケーションから
すると利用可能
をタップ
• アクションバーとアクションメニュー — アクションをサポートする Salesforce1 ア
プリケーションのすべてのページ下部から利用可能
100
第 11 章
Visualforce ページを使用した Salesforce1 の拡張
• レコード関連情報ページ (モバイルカードとして) — レコードに移動したときに利
用可能
別のVisualforceページを参照し、リンクすることもできます。この場合、Visualforceマー
クアップでは $Page グローバル変数を使用します。Apex カスタムコードでは
PageReference オブジェクトを作成してアクションメソッドからそのオブジェクト
を返します。このようなページの参照は、複数ページのプロセスでは一般的です。複
数ページのプロセスのすべてのページで必ず [Salesforce モバイルアプリケーショ
ンでの使用が可能] を選択してください。
参照されるページで [Salesforce モバイルアプリケーションでの使用が可能] が選択
されていない場合でも、参照元のページ、つまり親ページは問題なく Salesforce1 に表
示されます。ただし、ユーザがモバイル非対応のページにアクセスしようとすると、
「Unsupported Page」(サポートされていないページ) エラーメッセージが表示されます。
もうひとこと: コードについて
倉庫を検索する Visualforce ページの背後にあるコードを見てみましょう。
FindNearby Apex クラスのクエリ
次のスニペットは、Visualforceページから渡される変数を使用して、ページにアクセス
しているデバイスから 20 マイル以内にある倉庫を検索する動的な SOQL クエリです。
101
第 11 章
Visualforce ページを使用した Salesforce1 の拡張
このページは、すべてのモバイルデバイスと、HTML5 対応のデスクトップブラウザで
機能します。
ページで場所を取得できないときは、サンフランシスコを中心に検索が行われます。
この機能をブラウザでテストする場合、デバイスのセキュリティ設定によっては、
ページが場所にアクセスすることを承認する必要のあることがあります。
String queryString =
'SELECT Id, Name, Location__Longitude__s,
Location__Latitude__s, ' +
Street_Address__c, Phone__c, City__c ' +
'FROM Warehouse__c ' +
'WHERE DISTANCE(Location__c,
GEOLOCATION('+lat+','+lon+'), \'mi\') < 20 ' +
'ORDER BY DISTANCE(Location__c,
GEOLOCATION('+lat+','+lon+'), \'mi\') ' +
'LIMIT 10';
Visualforce ページの initialize 関数
Visualforce ページの initialize 関数では、HTML5 地理位置情報 API を使用して、ユー
ザの座標を取得します。ブラウザがプラグインや外部ライブラリを使用せずに位置を
取得し、続いて、JavaScript Remoting を使用して Apex コントローラの getNearby 関数
を呼び出し、座標を渡します。
function initialize() {
var lat, lon;
// Check to see if the device has geolocation
// detection capabilities with JavaScript
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function(position){
lat = position.coords.latitude;
lon = position.coords.longitude;
//Use VF Remoting to send values to be
//queried in the associated Apex Class
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.FindNearby.getNearby}', lat, lon,
function(result, event){
if (event.status) {
102
第 11 章
Visualforce ページを使用した Salesforce1 の拡張
console.log(result);
createMap(lat, lon, result);
} else if (event.type === 'exception') {
//exception case code
} else {
}
},
{escape: true}
);
});
} else {
//Set default values for map if the device doesn't
//have geolocation capabilities
/** San Francisco **/
lat = 37.77493;
lon = -122.419416;
var result = [];
createMap(lat, lon, result);
}
Visualforce ページのリダイレクトコード
FindNearbyWarehousesPage ページでは、Google Maps の JavaScript API v3 を使用して、
付近の倉庫の位置を地図上に示します。SOQLクエリによって返されたレコードに基づ
いて地図が拡大縮小され、地図上に各レコードのマーカーが表示されます。
このコードの最も重要な部分は、このページが Salesforce1 アプリケーションで表示さ
れているかどうかを判断している部分です。表示されている場合は、倉庫レコードへ
のリダイレクトリンクのコードが若干異なります。このページがSalesforce1アプリケー
ションで実行される場合は、navigateToSobjectRecord メソッドを使用して、ア
プリケーションを実行したままレコード詳細ページにアクセスする必要があります。
この点は簡単な try/catch コンストラクトでチェックして、その結果に応じてリダイレ
クトリンクを設定できます。
try{
if(sforce.one){
warehouseNavUrl =
'javascript:sforce.one.navigateToSObject(
\'' + warehouse.Id + '\')';
103
第 11 章
Visualforce ページを使用した Salesforce1 の拡張
}
} catch(err) {
console.log(err);
warehouseNavUrl = '\\' + warehouse.Id;
}
var warehouseDetails =
'<a href="' + warehouseNavUrl + '">' +
warehouse.Name + '</a><br/>' +
warehouse.Street_Address__c + '<br/>' +
warehouse.City__c + '<br/>' +
warehouse.Phone__c;
104
第 12 章
トピック:
•
カスタムアクショ
ンシナリオ
•
実際に試す:
Visualforce カスタム
アクションを作成
する
•
もうひとこと: コー
ドについて
Visualforce カスタムアクションを
使用した機能の追加
アクションは Salesforce1 モバイルアプリケーションのアク
ションバーおよびアクションメニューに表示され、モバイ
ルユーザはこれらのアクションを介してよく使用するタス
クまたは機能にすばやくアクセスできます。
「Salesforce1 でのアクションの使用」 (ページ 53)では、ポイ
ント & クリックツールを使用して設定可能な標準アクショ
ンについて学習しました。この章では、独自に定義できる
カスタムアクションの概要を説明します。カスタムアクショ
ンには次の 2 つの種別があります。
• Visualforce — Chatter パブリッシャーまたは Salesforce1 アク
ションバーからコールされる Visualforce ページを示しま
す。
• キャンバス — Chatter パブリッシャーまたは Salesforce1 ア
クションバーからコールされるキャンバスアプリケー
ションを示します。キャンバスカスタムアクションにつ
いての詳細は、「キャンバスカスタムアクションを使用
したSalesforce1の拡張」 (ページ121)を参照してください。
カスタムアクションはモバイルユーザ専用ではないので、
Salesforce1 アプリケーションと Salesforce フルサイトの両方に
表示されます。Salesforce1モバイルアプリケーションの場合、
カスタムアクションはアクションバーに表示されます。
Salesforce フルサイトの場合、カスタムアクションは Chatter
パブリッシャーに表示されます。
105
第 12 章
Visualforce カスタムアクションを使用した機能の追加
カスタムアクションシナリオ
この章では、Acme Wireless 組織をさらに拡張して、モバイル技術者がすばやく注文を
作成できるようにします。具体的には Visualforce ページを作成し、アクションバーか
らカスタムアクションとして使用できるようにします。それによって、技術者が客先
で部品を注文する必要がある場合にすばやくページに移動できます。
このカスタムアクションでは、技術者が部品名と半径距離を入力すると、Visualforce
ページがその半径内にあるすべての倉庫から部品を検索できます。倉庫が特定される
と、技術者は数量のみを入力して、ボタンをタップして注文を作成します。これをす
べて、カスタマー取引先のコンテキスト内で実行します。
実際に試す: Visualforce カスタムアクションを作成
する
まず、Visualforce ページを参照する Visualforce カスタムアクションを作成します。
ここで作成するカスタムアクションでは、このガイド用にダウンロードしてインス
トールしたパッケージ内の次の要素を使用します。
• QuickOrderPage Visualforce ページ
• QuickOrderController Apex クラス
• ページのスタイル設定に使用する Mobile_Design_Templates 静的リソース
コードについては、本章の後半で詳しく確認していきます。ここではまず、アクショ
ンを作成して試してみます。
このページの Visualforce コードは、現在のカスタマー取引先の場所を使用して、指定
した距離内 (マイル単位) にある倉庫で、特定の部品の在庫があるものを見つけます。
1. 取引先のオブジェクトの管理設定から、[ボタン、リンク、およびアクション]
に移動します。
2. [新規アクション]をクリックします。
3. [アクション種別] ドロップダウンリストで、[カスタム Visualforce] を選択します。
4. [Visualforce ページ] ドロップダウンリストで、[QuickOrderPage] を選択します。
106
第 12 章
Visualforce カスタムアクションを使用した機能の追加
5. [表示ラベル] 項目に「Create Quick Order」(注文の簡易作成) と入力しま
す。
この表示ラベルが、Salesforce1 アプリケーションのアクションメニューまたは
Salesforce フルサイトのパブリッシャーでアクション名としてユーザに表示され
ます。
6. [保存] をクリックします。
カスタムアクションの作成を完了したので、次にこのアクションを [取引先] ページレ
イアウトに追加します。この操作により、[取引先] ページにアクセスしたときに、パ
ブリッシャーにこのカスタムアクションが表示されます。
Visualforce カスタムアクションをページレイアウトに
追加する
次に、カスタムアクションを取引先ページレイアウトに追加します。
1. 取引先のオブジェクト管理設定から、[ページレイアウト] に移動します。
2. Warehouse スキーマの取引先レイアウトの横にある[編集]リンクをクリックしま
す。
3. パレットの [Salesforce1 アクション] カテゴリをクリックします。
4. [Salesforce1 および Lightning Experience アクション] セクションで、[定義済みアク
ションを上書き] をクリックします。
107
第 12 章
Visualforce カスタムアクションを使用した機能の追加
5. 左側の最初の要素として表示されるように、[Create Quick Order (注文の簡易作成)]
要素を [Salesforce1 および Lightning Experience アクション] セクションにドラッグし
ます。
モバイル技術者はこのカスタムアクションを頻繁に使用するため、リストの先
頭に配置して、アクションバーの最初のアクションの 1 つとして表示されるよ
うにします。
6. 存在する場合は、[モバイルスマートアクション] 要素をセクションからパレッ
トにドラッグして戻します。
7. [保存] をクリックします。
カスタムアクションを作成して、それをページレイアウトに追加したので、その動作
を実際に確認する準備が整いました。
Visualforce カスタムアクションをテストする
次に、顧客訪問時の Acme Wireless モバイル技術者として、Salesforce1 でカスタムアク
ションをテストします。
1. モバイルデバイスで Salesforce1 アプリケーションを開きます。
2.
をタップしてナビゲーションメニューにアクセスします。
3. ナビゲーションメニューで [取引先] をタップして、取引先に移動します。
4. アクションバーの
をタップしてアクションメニューにアクセスします。
5. [Create Quick Order (簡易注文を作成)] アクションをタップします。
108
第 12 章
Visualforce カスタムアクションを使用した機能の追加
6. [Merchandise Name (商品名)] 項目に、項目の名前 (iPhone 5 など) を入力
します。
7. [Max Delivery Distance (miles) (最大配送距離 (マイル))] 項目に、
「10」と入力します。
8. [実行] をタップします。
109
第 12 章
Visualforce カスタムアクションを使用した機能の追加
9. 下部にある [検索結果] セクションに、検索内容に一致する商品のリストが表示
されます。リストには、現在の取引先の 10 マイル以内にある倉庫の部品が表示
されます。[iPhone 5S Gold] をタップします。
10. [Quantity (数量)] 項目に、「1」と入力します。
探している部品がある近くの倉庫を特定したら、この画面で数量を入力して部
品の注文を作成できます。注文は現在の取引先に関連付けられます。
ヒント: 検索画面に戻るには、[戻る] ボタンを使用します。[キャンセル]
をタップすると、品目のない請求書が作成されます。
11. [実行] をタップします。
注文が作成されました。3 つ目のページインジケータをスワイプすると、[請求
書] 関連リストが表示されます。[請求書] 関連リストをタップすると、新しい請
求書が表示されます。請求書をタップしてから、[関連] ページの [品目] をタッ
プすると、iPhone 5S Gold の部品のために作成された品目が表示されます。
110
第 12 章
Visualforce カスタムアクションを使用した機能の追加
成功しました。これで、モバイル技術者が倉庫の部品をすばやく検索して注文を作成
できるようにするプロセスをすべて実行しました。
Visualforce ページの開発ガイドラインについての詳細は、「Visualforce のガイドラインと
ベストプラクティス」 (ページ 198)を参照してください。
もうひとこと: コードについて
Visualforce カスタムアクションの背後には 2 つのコードオブジェクト (Apex クラス
QuickOrderController と Visualforce ページ QuickOrderPage) があります。
Apex クラスは、Visualforce ページのコントローラで、メソッドの @RemoteAction アノ
テーションを使用します。このアノテーションを使用すると、Visualforce ページは
JavaScript 対応の方法でロジックをラップします。これは、Visualforce Remoting と呼ばれ
ます。
Visualforce Remoting を使用すると、Apex と JavaScript 間を迅速かつ緊密に統合できます。
この通信モデルは、従来の Visualforce/Apex MVC パラダイムの同期モデルと異なり、非
同期で動作します。そのため、パラメータをコントローラに渡したら、DOM 操作を実
行して、モバイルテンプレートやフレームワークを使用してページを作成する前に、
レスポンスハンドラ関数から結果を取得し、追加のクライアント側ロジックを記述で
きます。
Visualforce Remoting は、Salesforceオブジェクトへのサーバ側の直接アクセスを簡素化し、
迅速なプラットフォーム開発のための Apex ツール (SOQL や Apex メソッドなど) を使用
できるため、Salesforce App Cloud のモバイル開発者に最適です。また、ビューステート
を処理する必要がないため、ページのパフォーマンスが向上します。
Apex クラス QuickOrderController
このクラスはVisualforce Remoting を使用します。また、このクラスには、倉庫を検索し
て注文および品目を作成するために Visualforce ページによってコールされるロジック
が含まれています。
global class QuickOrderController{
public static List<Merchandise__c> merchandise;
public static Line_Item__c quickOrder;
111
第 12 章
Visualforce カスタムアクションを使用した機能の追加
public QuickOrderController(ApexPages.
StandardController controller){
}
@RemoteAction
global static List<Merchandise__c> findWarehouses(String accId,
String merchName, String warehouseDist){
merchandise = new List<Merchandise__c>();
String queryString = '';
String queryName = '%' + merchName + '%';
Account acc = [Select Location__Longitude__s,
Location__Latitude__s, Name, Id
from Account where Id =: accId];
//Finds warehouses nearby if you have location
//specified on the Account
if(acc.Location__Latitude__s != null &&
acc.Location__Longitude__s != null){
queryString = 'SELECT Id, (SELECT Id, Name, Quantity__c,
Warehouse__r.Name, Warehouse__r.Id,
Warehouse__r.Street_Address__c,
Warehouse__r.City__c '+
'FROM Merchandise__r WHERE Name
like :queryName) '
+'FROM Warehouse__c WHERE '
+'DISTANCE(Location__c, GEOLOCATION('
+acc.Location__Latitude__s+','
+acc.Location__Longitude__s+'), \'mi\')';
if(warehouseDist != null){
queryString += ' <'+ warehouseDist;
}
}
//If no location defined on the Account, this will run
//query against the merchandise name only
else {
queryString = 'SELECT Id, Name,
Location__Longitude__s,
Location__Latitude__s, '
+'(SELECT Id, Name, Warehouse__r.Name,
Quantity__c
FROM Merchandise__r WHERE Name
112
第 12 章
Visualforce カスタムアクションを使用した機能の追加
like :queryName) '
+'FROM Warehouse__c limit 25';
}
//This creates a list of merchandise
//to display in the search results
Warehouse__c[] warehouses = Database.Query(queryString);
for(Warehouse__c warehouse : warehouses){
Merchandise__c[] merch =
warehouse.getSObjects('Merchandise__r');
if (merch != null) {
for (Merchandise__c m : merch){
merchandise.add(m);
}
}
}
return merchandise;
}
//This remote action creates the invoice for the quick order
@RemoteAction
global static Line_Item__c createQuickOrder(
String accId, String merchandiseId){
Invoice__c newInvoice = new Invoice__c();
newInvoice.Account__c = accId;
insert newInvoice;
quickOrder = new Line_Item__c();
Merchandise__c m = [Select Id, Name from Merchandise__c
where Id=: merchandiseId limit 1];
quickOrder.Merchandise__c = m.Id;
quickOrder.Invoice__c = newInvoice.Id;
return quickOrder;
}
//This remote action creates the line item related to the
//invoice for the quick order
@RemoteAction
global static Boolean insertQuickOrder(String o, String q){
try {
Integer quantity = integer.valueof(q);
113
第 12 章
Visualforce カスタムアクションを使用した機能の追加
Line_Item__c order = new Line_Item__c();
/* The order variable being passed in as a param is being
passed in the form of a JSON object. You need to use
the JSON deserialize method in Apex to convert it
into a SObject */
order = (Line_Item__c)JSON.deserialize(
o, Line_Item__c.class);
order.Quantity__c = quantity;
insert order;
//Need to requery for the name for the post to chatter
//since it wasn't explicitly specified
Line_Item__c li = [Select Name, Merchandise__r.Name, Id,
Quantity__c, Invoice__c from Line_Item__c
where Id =: order.Id];
FeedItem post = new FeedItem();
post.ParentId = aId;
post.Body = UserInfo.getName() + ' just created a quick order';
post.type = 'LinkPost';
post.LinkUrl = '/' + li.Invoice__c;
post.Title = li.Merchandise__r.Name + ': ' + li.quantity__c;
insert post;
} catch(System.Exception ex) {
system.debug(ex.getMessage());
}
return true;
}
//This remote action handles deleting the invoice if
//the user doesn't want to insert the line item
@RemoteAction
global static Boolean goBack(String invoiceId){
// Delete created invoice and return to original
//search screen
Invoice__c cancelledInvoice = [select Id from Invoice__c
where Id=: invoiceId];
delete cancelledInvoice;
return true;
}
114
第 12 章
Visualforce カスタムアクションを使用した機能の追加
}
メモ: 静的クエリとバインド変数を使用して SOQL インジェクション攻撃を防止し
ます。たとえば、\'%'+merchName+'%\' ではなく :queryName を使用します。
詳細は、Salesforce ヘルプの「Apex 開発および Visualforce 開発のセキュリティのヒ
ント」を参照してください。
次のコードスニペットに示すように、Apexコントローラには、取引先フィードの新し
い注文に関するフィード項目を作成する insertQuickOrder メソッドもあります。
フィード項目は、請求書にリンクするリンク投稿です。
FeedItem post = new FeedItem();
post.ParentId = aId;
post.Body = UserInfo.getName() + ' just created a quick order';
post.type = 'LinkPost';
post.LinkUrl = '/' + li.Invoice__c;
post.Title = li.Merchandise__r.Name + ': ' + li.quantity__c;
insert post;
Visualforce ページ QuickOrderPage
このページは、ユーザ入力を使用してコントローラをコールし、商品および倉庫情報
をユーザに表示します。ユーザが注文を作成する場合、このページはコントローラを
コールし、カスタマー取引先に関連付けられている注文を作成して品目を追加しま
す。また、コードはページの最初でSalesforceモバイル設計テンプレートを使用して、
ページのスタイル設定も行います。
<apex:page standardController="Account"
extensions="QuickOrderController" docType="html-5.0"
standardStylesheets="false"
showheader="false" sidebar="false">

<apex:stylesheet value="{!URLFOR(
$Resource.Mobile_Design_Templates,
'Mobile-Design-Templates-master/
common/css/app.min.css')}"/>
<apex:includeScript value="{!URLFOR(
$Resource.Mobile_Design_Templates,
'Mobile-Design-Templates-master/common/js/
115
第 12 章
Visualforce カスタムアクションを使用した機能の追加
jQuery2.0.2.min.js')}"/>
<apex:includeScript value="{!URLFOR(
$Resource.Mobile_Design_Templates,
'Mobile-Design-Templates-master/common/js/
jquery.touchwipe.min.js')}"/>
<apex:includeScript value="{!URLFOR(
$Resource.Mobile_Design_Templates,
'Mobile-Design-Templates-master/common/
js/main.min.js')}"/>
<style>
/* Default S1 color styles */
.list-view-header, .data-capture-buttons a {
background: -webkit-linear-gradient(
#2a93d5,#107abb);
background: linear-gradient(#2a93d5,#107abb);
box-shadow: 0 1px 3px rgba(0,0,0,.2),
inset 0 1px 0 rgba(255,255,255,.21);
color: white;
font-weight: bold;
}
#resultPage, #searchPage {
padding-bottom: 50px;
}
</style>
また、QuickOrderPage は、Force.com Canvas SDK をコールし、パブリッシャーの [登
録] ボタンを有効にして、パブリッシャーウィンドウを閉じます。
まず、SDK への参照を指定します。

<script type='text/javascript'
src='/canvas/sdk/js/publisher.js'></script>
次に、setValidForSubmit メソッドをコールして、パブリッシャーの [登録] ボタン
を有効にします。
//This method will activate the publish button
//so the form can be submitted
Sfdc.canvas.publisher.publish({
116
第 12 章
Visualforce カスタムアクションを使用した機能の追加
name: "publisher.setValidForSubmit",
payload:"true"});
setValidForSubmit がコールされて、ユーザが [登録] をクリックすると、この
subscribe メソッドが起動します。このメソッドは、JavaScript Remoting を使用して品
目を挿入し (これにより、簡易注文が完了する)、フィード項目を取引先に投稿する最
終的な JavaScript 関数を呼び出します。
<script type='text/javascript'>
Sfdc.canvas.publisher.subscribe({name: "publisher.post",
onData:function(e) {
//This subscribe fires when the user hits
//Submit in the publisher
insertQuickOrder();
}});
</script>
最後に、Remoting メソッドからのコールバックが正常に返されたら、このメソッドは
パブリッシャーウィンドウを閉じます。
// Success - close the publisher and refresh the feed
Sfdc.canvas.publisher.publish({name: "publisher.close",
payload:{ refresh:"true"}});
117
第 13 章
トピック:
•
Force.com Canvas に
ついて
•
キャンバスカスタ
ムアクションを使
用した Salesforce1
の拡張
•
フィードのキャン
バスアプリケー
ションを使用した
Salesforce1 の拡張
Force.com Canvas を使用した
Salesforce1 への Web アプリケー
ションの統合
Force.com Canvas を使用すれば、簡単にサードパーティ Web
アプリケーションを Salesforce1 に統合できます。
Force.com Canvas SDK は、オープンソースの JavaScript ライブラ
リのスイートで、既存の Salesforce1 API (REST API、SOAP API、
Chatter REST API) を使用するシンプルなメソッドによって、モ
バイルユーザ向けのシームレスなエンドユーザ操作性を構
築できます。
119
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
Force.com Canvas について
Force.com Canvas には、次のような機能があります。
• 言語への非依存 — 開発は自由に行い、それを Salesforce に表示できます。Force.com
Canvas では、任意の言語で開発し、そのアプリケーションを容易に Salesforce1 アプ
リケーション内部に表示できます。
キャンバスアプリケーションとして公開するサードパーティアプリケーションは、
どの言語でも作成できます。唯一の要件として、アプリケーションに安全な URL
(HTTPS) がある必要があります。
• JavaScript SDK — 軽量で使いやすい JavaScript ライブラリにより、アプリケーション
は、クロスドメインネットワークの問題に対処することなく認証や通信ができま
す。これにより、ユーザは一元的なコマンドセンターを使用してすべてのアプリ
ケーションを制御できます。
• 簡略化された認証 — OAuth 2.0 または署名付き要求を使用して認証できます。つま
り、ユーザにとってはシームレスなまま、アプリケーションはデータレイヤで
Salesforce に接続できます。
• アプリケーションの登録と管理 — 開発者はアプリケーションを作成し、ユーザは
そのアプリケーションを 1 クリックでインストールできます。システム管理者は、
開発者のアプリケーションを容易にインストールでき、組織のどのユーザがアプ
リケーションを使用できるかをすぐに管理できます。
120
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
キャンバスカスタムアクションを使用した
Salesforce1 の拡張
キャンバスカスタムアクションを使用すると、Salesforce フルサイトのパブリッシャー
と、Salesforce1のアクションバーおよびアクションメニューの両方からキャンバスアプ
リケーションを使用できます。
この章では、Acme Wireless 組織をさらに拡張するために、Force.com Canvas を使用してプ
ラットフォームにサードパーティアプリケーションを統合します。Acme Wirelessには、
Heroku 上で実行される Shipify という Web アプリケーションがあります。これは、注文
を処理するために使用されています。ここでは、Heroku で実行される Shipify アプリケー
ションをコピーし、Salesforce1アクションバーからキャンバスカスタムアクションとし
て使用できるようにします。
このシナリオでは、モバイルデバイスを使用する倉庫の作業者は、未処理の顧客の注
文のリストを表示できます。また、注文を選択してその発送処理ができます。注文が
処理されると、Shipify により Salesforce で注文状況が設定され、関連付けられたカスタ
マー取引先にフィード項目が投稿されます。簡単に Web アプリケーションを統合して
Salesforce と通信させることができます。これにより、モバイルユーザ向けのシームレ
スな操作性が作成されます。
実際に試す: Shipify Web アプリケーションをコピーす
る
Shipify Web アプリケーションをコピーして、キャンバスカスタムアクションの作成処
理を開始します。
このガイドの「開発の前提条件」 (ページ 82)に記載されている前提条件に加えて、次
のものも必要です。
• 「アプリケーションのカスタマイズ」および「すべてのデータの編集」ユーザ権
限。ほとんどの場合、管理者にはすでにこれらの権限があります。管理者以外の
場合、キャンバスアプリケーションのプレビューアを表示してキャンバスアプリ
ケーションを作成できるようにこれらの権限を追加する必要があります。
• Git のインストール。https://help.github.com/articles/set-up-git に移
動し、Git をインストールして設定します。
121
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
Git のインストール後、keygen ツールを使用した SSH の設定が必要になることがあ
ります。詳細は、https://help.github.com/articles/generating-ssh-keys
を参照してください。Windows を使用している場合、このツールは Git \bin ディレ
クトリにあります。このディレクトリは、Git をインストールしてもパスに追加さ
れません。コントロールパネルを使用してパスに \bin ディレクトリを追加しま
す。インストールディレクトリに応じて、パスは C:\Program Files
(x86)\Git\bin のようになります。
• コード例をコピーする GitHub アカウント。https://github.com/plans に移動
し、GitHub アカウントを設定します。
• Web アプリケーションは Heroku で実行されるため Heroku アカウント。
https://api.heroku.com/signup に移動し、Heroku アカウントを作成します。
• コマンドラインから Heroku アプリケーションを管理する Heroku Toolbelt。
https://toolbelt.heroku.com に移動し、Heroku Toolbelt をダウンロードしてイ
ンストールします。
Shipify は、顧客の注文、顧客の発送、配送の状況を追跡するために Acme Wireless で使
用する Web アプリケーションです。倉庫の作業者はこのアプリケーションを使用し
て、未処理の注文を調べ、注文を完了し、発送状況を更新します。Shipify Web アプリ
ケーションには、一部の注文処理ロジックが含まれていますが、完全な注文処理アプ
リケーションではありません。このアプリケーションの目的は、Web アプリケーショ
ンと Salesforce1 アプリケーションをどのように統合できるかを示すことにあります。
Shipify は、Heroku で実行される Node.js アプリケーションです。アプリケーションで実
行中の各インスタンスは、組織で作成する接続アプリケーションに対してコンシュー
マの秘密を参照する必要があります。したがって、キャンバスアプリケーションとし
て追加できる Shipify の独自のインスタンスが Heroku で必要となります。このステップ
では、処理の最初のステップであるアプリケーションのコピーを行います。
1. コマンドウィンドウを開き、Shipify をダウンロードするディレクトリに移動し
ます。アプリケーションをコピーすると、Shipify-Node-App というディレ
クトリが作成され、ここからコピーコマンドを実行できます。
• Windows を実行しているコンピュータの場合は、[スタート] > [ファイル名を
指定して実行...]をクリックしてコマンドウィンドウを開き、「cmd」と入力
します。
• Mac OS を実行しているコンピュータの場合は、Command + Space キーを押し
てコマンドウィンドウを開き、「terminal」と入力します。
122
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
2. git clone https://github.com/forcedotcom/Shipify-Node-App コマ
ンドを入力します。
3. Shipify-Node-App ディレクトリに移動します。たとえば、
Shipify-Node-App ディレクトリが C:\Users\yourname にある場合、cd
C:\Users\yourname\Shipify-Node-App というコマンドを入力します。
4. heroku login コマンドを入力して、Heroku にログインします。
要求されたら、メールアドレスとパスワードを入力します。
5. heroku apps:create コマンドを入力して、新しい Heroku アプリケーション
を作成します。
アプリケーションが作成されたことを示す次のような確認メッセージが表示さ
れます。
Creating deep-samurai-7923... done, stack is cedar
http://deep-samurai-7923.herokuapp.com/ |
[email protected]:deep-samurai-7923.git
Git remote heroku added
6. Heroku アプリケーションの URL をコピーします。これは、次のタスクで使用し
ます。この例では、URL は http://deep-samurai-7923.herokuapp.com と
なっていますが、独自の Heroku アプリケーションの URL をコピーしてください。
URL は https:// で始まる必要があります。
Heroku で Shipify Web アプリケーションを作成しましたが、リリースする必要が
あるため、このままではまだ動作しません。この操作は、後のステップで行い
ます。
次のステップでは、このアプリケーションをSalesforceでキャンバスアプリケーション
として追加します。
Shipify キャンバスアプリケーションを作成する
このステップでは、Shipify Web アプリケーションをキャンバスアプリケーションとし
て公開します。
キャンバスアプリケーションを作成するユーザには、「アプリケーションのカスタマ
イズ」権限と「すべてのデータの編集」権限が必要です。
123
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
1. Salesforce アプリケーションで、[設定] から [クイック検索] ボックスに「アプリ
ケーション」と入力し、[アプリケーション] を選択します。
2. [接続アプリケーション] 関連リストで、[新規] をクリックします。
3. [接続アプリケーション名] 項目に「Shipify」と入力します。
4. [取引先責任者メール] 項目で、メールアドレスを入力します。
5. API ([OAuth 設定の有効化]) セクションで、[OAuth 設定の有効化] を選択します。
6. [コールバック URL] 項目に、作成した Heroku アプリケーションの URL を貼り付
け、プロトコルを HTTPS に変更します。たとえば、最終的な URL は、
https://deep-samurai-7923.herokuapp.com のようになります。
7. [選択した OAuth 範囲] 項目で [フルアクセス] を選択し、[追加] をクリックし
ます。
ベストプラクティスとして、OAuth はキャンバスアプリケーションの機能に必
要な最小限の範囲に抑えることをお勧めします。
8. [キャンバスアプリケーション設定] セクションで、[Force.com キャンバス]
を選択します。
9. [キャンバスアプリケーションの URL] 項目に、[コールバック URL] 項目で入
力した URL に /signedrequest を付加して入力します。たとえば、URL は
https://deep-samurai-7923.herokuapp.com/signedrequest のように
なります。
10. [アクセス方法] ドロップダウンリストで、[署名付き要求 (POST)] を選択します。
124
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
11. [場所] 項目で、[Chatter タブ] と [パブリッシャー] を選択し、[追加] をクリック
します。
キャンバスアプリケーションを Salesforce フルサイトのパブリッシャーまたは
Salesforce1のアクションバーに表示する場合、パブリッシャーの場所のみを指定
する必要があります。このシナリオでは、[Chatter タブ] も選択して、Chatter タ
ブを見るだけでキャンバスアプリケーションを簡単にテストできるようにしま
す。
12. [アクションの自動作成] を選択します。
この項目を選択すると、キャンバスアプリケーションにグローバルカスタムア
クションが作成されます。
13. [保存]をクリックします。キャンバスアプリケーションを保存すると、詳細ペー
ジが表示されます。
125
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
キャンバスアプリケーションが追加されたので、次にアクセスできるユーザを指定し
ましょう。
Shipify キャンバスアプリケーションにアクセスできるユーザ
を設定する
キャンバスアプリケーションを作成しても、ユーザアクセスを設定するまでは、誰も
アプリケーションを表示できません。
1. [設定] から、[クイック検索] ボックスに「接続アプリケーション」と入力し、接
続アプリケーションを管理するオプションを選択します。
2. Shipify アプリケーションをクリックし、[編集] をクリックします。
3. [許可されているユーザ] ドロップダウンリストで、[管理者が承認したユーザは
事前承認済み] を選択します。表示されるポップアップメッセージで [OK] をク
リックします。
126
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
4. [保存] をクリックします。
ここで、キャンバスアプリケーションを表示できるユーザを定義します。これ
を行うには、プロファイルと権限セットを使用します。この例では、システム
管理者プロファイルを持つユーザにアプリケーションへのアクセスを許可しま
す。
5. [接続アプリケーション] ページの [マスタ表示ラベル] 列で [Shipify] をクリックし
ます。
6. [接続アプリケーションの詳細] ページの [プロファイル] 関連リストで、[プロ
ファイルを管理する] をクリックします。
7. [システム管理者] プロファイルを選択し、[保存] をクリックします。
これで完成です。次のステップでは、Heroku で環境変数をいくつか設定します。
Heroku 環境変数を設定する
キャンバスアプリケーションを作成したら、コンシューマの秘密に環境変数を設定す
る必要があります。
1. [設定] から、[クイック検索] ボックスに「アプリケーション」と入力し、[アプ
リケーション] を選択します。
2. [接続アプリケーション] 関連リストで、[Shipify] をクリックします。
3. [コンシューマの秘密] 項目の横にある [クリックして公開] リンクをクリックし
ます。
4. コンシューマの秘密をコピーします。
5. コマンドウィンドウを開き、Shipify-Node-App ディレクトリに移動し、
heroku config:add APP_SECRET='Your_Consumer_Secret' コマンドを入
力して環境変数を作成します。
Windows コンピュータで作業を行っている場合は、一重引用符を二重引用符 (")
に置き換えなければならないことがあります。
6. heroku config:add RUNNING_ON_HEROKU='true' コマンドを入力します。
127
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
このコマンドは、アプリケーションが Heroku で実行されることを指定します。
これで、変更を加えるたびに再リリースする必要がなくなるので、テストを行
うのに便利です。Windows コンピュータで作業を行っている場合は、一重引用
符を二重引用符 (") に置き換えなければならないことがあります。
7. git push heroku master コマンドを入力して、アプリケーションを Heroku
にリリースします。
このプロセスが正常に完了すると、次のような出力が表示されます。
-----> Compiled slug size: 11.2MB
-----> Launching... done, v6
http://deep-samurai-7923.herokuapp.com deployed to Heroku
To [email protected]:deep-samurai-7923.git
* [new branch]
master -> master
「権限が拒否されました」というエラーメッセージが表示された場合、必要に
応じて SSH キーを設定して Heroku に追加します。
https://devcenter.heroku.com/articles/keys を参照してください。
Chatter タブをクリックすると、キャンバスアプリケーションが Salesforce フルサイトで
動作していることをすばやくテストできます。左側の [Shipify] リンクをクリックする
と、Heroku アプリケーションが Salesforce の右側に表示され、前の章で作成した注文を
含む、未処理の注文のリストが表示されます。次に、キャンバスカスタムアクション
をパブリッシャーレイアウトに追加して、ユーザが表示できるようにします。
アクションをグローバルパブリッシャーレイアウトに追加す
る
キャンバスアプリケーションの作成時には、アクションの自動作成を選択しました。
このステップでは、アクションをグローバルパブリッシャーレイアウトに追加して、
Salesforce1 アプリケーションのアクションバーに表示されるようにします。
1. Salesforceアプリケーションで、[設定] から [クイック検索] ボックスに「パブリッ
シャーレイアウト」と入力し、[パブリッシャーレイアウト] を選択します。
2. グローバルレイアウトの横にある [編集] をクリックします。
これは、パブリッシャーのデフォルトレイアウトです。
128
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
3. [Salesforce1 および Lightning Experience アクション] セクションで、[定義済みアク
ションを上書き] をクリックします。
4. 最初の要素として表示されるように、Shipify 要素を [Salesforce1 および Lightning
Experience アクション] セクションにドラッグします。
倉庫の作業者はこのカスタムアクションを頻繁に使用するため、リストの先頭
に配置して、アクションバーの最初のアクションの 1 つとして表示されるよう
にします。
メモ: キャンバスカスタムアクションは自動的に作成されているため、
キャンバスアプリケーション名がアクション名として使用されます (この
場合は Shipify)。本番シナリオでは、ユーザが実行できる操作を示すよう
にアクション名を変更します。たとえば、このアクションの名前を「注
文の発送」などに変更します。
5. [保存] をクリックします。
カスタムアクションを作成し、それをパブリッシャーレイアウトに追加したので、こ
れで実際に使用できる状態になりました。
キャンバスカスタムアクションをテストする
ここでは、Salesforce1モバイルアプリケーションでカスタムアクションをテストすると
きに、Acme Wireless の倉庫の作業者として注文を処理します。
1. モバイルデバイスで、
をタップしてアクションメニューにアクセスします。
2. [Shipify] アクションをタップします。
未処理のすべての請求書のリストがカスタマー取引先および倉庫情報と一緒に
表示されます。
3. いずれかの請求書をタップすると、画面にその請求書の合計額と [納入] ボタン
が表示されます。
129
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
4. [納入] をタップします。
これで、Shipify Web アプリケーションで注文処理が開始されます。Shipify によっ
て請求書の状況が [完了] に設定されます。また、取引先のフィード項目も作成
されます。このフィード項目には、請求書が発送されたことと、関連する注文
番号、および請求書へのリンクが表示されます。
130
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
これで完了です。これで、Force.com Canvas とキャンバスカスタムアクションを使用し
て、Web アプリケーションを Salesforce1 アプリケーションに統合するプロセス全体が
終了しました。倉庫の作業者は、顧客の注文の検索、注文の発送、注文と取引先フィー
ドの更新ができるようになりました。
パブリッシャーおよびアクションバーのキャンバスアプリケーションの開発ガイドラ
インについての詳細は、「Chatter パブリッシャーと Salesforce1 アクションバーのキャ
ンバスアプリケーション」 (ページ 240)を参照してください。
もうひとこと: キャンバスアプリケーションでコンテ
キストを取得する
Force.com Canvas SDK には、アプリケーションや現在のユーザに関するコンテキスト情
報を Salesforce から取得できるコールとオブジェクトが備えられています。
131
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
コンテキストの取得
署名付き要求を使用してキャンバスアプリケーションを認証すると、キャンバスアプ
リケーション URL への POST の一部として CanvasRequest オブジェクト (Context オブジェ
クトが含まれる) を取得します。認証に OAuth を使用する場合やコンテキスト情報を取
得するためにコールする場合は、JavaScript コールを行います。この情報を使用して、
後続のコールで情報を取得してアプリケーションコードを作成できるため、Salesforce1
ユーザインターフェースと完全に統合されているように見えます。
次のコードサンプルは、JavaScript コールでコンテキストを取得する例を示していま
す。このコードでは、テキストが「Get Context」のリンクを作成し、そのリンクから
Sfdc.canvas.client.ctx 関数をコールします。
<script>
function callback(msg) {
if (msg.status !== 200) {
alert("Error: " + msg.status);
return;
}
alert("Payload: ", msg.payload);
}
var ctxlink = Sfdc.canvas.byId("ctxlink");
var client = Sfdc.canvas.oauth.client();
ctxlink.onclick=function() {
Sfdc.canvas.client.ctx(callback, client)};
}
</script>
<a id="ctxlink" href="#">Get Context</a>
コンテキストのオブジェクト
キャンバスアプリケーションでコールを行ってコンテキストを取得すると、応答で
CanvasRequest オブジェクトが返されます。このオブジェクトには、アプリケーション
とユーザに関するすべてのコンテキスト情報が含まれます。コンテキストのオブジェ
クトは、次のとおりです。
オブジェクト
説明
CanvasRequest
Context オブジェクトと Client オブジェクトを返します。
132
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
オブジェクト
説明
Client
クライアントアプリケーションに関するコンテキスト情報を返
します。
Context
キャンバスアプリケーションのコンシューマに関する情報を返
します。Application、Environment、Links、Organization、User オブ
ジェクトが含まれます。
Application
バージョン、アクセス方法、URL などのキャンバスアプリケー
ションに関する情報を返します。
Environment
場所、UI テーマなどの環境に関する情報を返します。
Links
メタデータ URL、ユーザ URL、Chatter グループ URL などのリンク
を返します。これらのリンクを使用して、アプリケーションか
ら Salesforce へのコールを行うことができます。
Organization
名前、ID、通貨コードなどの組織に関する情報を返します。
User
ロケール、名前、ユーザ ID、メールアドレスなどの現在ログイ
ンしているユーザに関する情報を返します。
次のコードスニペットは、CanvasRequest オブジェクトの例を示しています。
{
"context":
{
"application":
{
"applicationId":"06Px000000003ed",
"authType":"SIGNED_REQUEST",
"canvasUrl":"http://instance.salesforce.com:8080
/canvas_app_path/canvas_app.jsp",
"developerName":"my_java_app",
"name":"My Java App",
"namespace":"org_namespace",
"referenceId":"09HD00000000AUM",
"samlInitiationMethod": "None",
"version":"1.0.0"
},
133
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
"user":
{
"accessibilityModeEnabled":false,
"currencyISOCode":"USD",
"email":"[email protected]",
"firstName":"Sean",
"fullName":"Sean Forbes",
"isDefaultNetwork":false,
"language":"en_US",
"lastName":"Forbes",
"locale":"en_US",
"networkId":"0DBxx000000001r",
"profileId":"00ex0000000jzpt",
"profilePhotoUrl":"/profilephoto/005/F",
"profileThumbnailUrl":"/profilephoto/005/T",
"roleId":null,
"siteUrl":"https://mydomain.force.com/",
"siteUrlPrefix":"/mycommunity",
"timeZone":"America/Los_Angeles",
"userId":"005x0000001SyyEAAS",
"userName":"[email protected]",
"userType":"STANDARD"
},
"environment":
{
"parameters":
{
"complex":
{
"key1":"value1",
"key2":"value2"
},
"integer":10,
"simple":"This is a simple string.",
"boolean":true
},
"dimensions":
{
"height": "900px",
"width": "800px",
"maxHeight":"2000px",
"maxWidth":"1000px",
134
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
"clientHeight":"80px",
"clientWidth":"968px"
},
"displayLocation":"Chatter",
"locationUrl": "http://www.salesforce.com
/some/path/index.html",
"uiTheme":"Theme3",
"record":{},
"version":
{
"api":"36.0",
"season":"SUMMER"
},
},
"organization":
{
"currencyIsoCode":"USD",
"multicurrencyEnabled":true,
"name":"Edge Communications",
"namespacePrefix":"org_namespace",
"organizationId":"00Dx00000001hxyEAA"
},
"links":
{
"chatterFeedItemsUrl":"/services/data/v36.0/
chatter/feed-items",
"chatterFeedsUrl":"/services/data/v36.0/
chatter/feeds",
"chatterGroupsUrl":"/services/data/v36.0/
chatter/groups",
"chatterUsersUrl":"/services/data/v36.0/
chatter/users",
"enterpriseUrl":"/services/Soap/c/36.0/
00Dx00000001hxy",
"loginUrl":"http://login.salesforce.com",
"metadataUrl":"/services/Soap/m/36.0/00Dx00000001hxy",
"partnerUrl":"/services/Soap/u/36.0/00Dx00000001hxy",
"queryUrl":"/services/data/v36.0/query/",
"recentItemsUrl":"/services/data/v36.0/recent/",
"restUrl":"/services/data/v36.0/",
"searchUrl":"/services/data/v36.0/search/",
"sobjectUrl":"/services/data/v36.0/sobjects/",
"userUrl":"/005x0000001SyyEAAS"
}
135
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
},
"client":
{
"instanceId":"06Px000000002JZ",
"instanceUrl":"http://instance.salesforce.com:
8080",
"oauthToken":"00Dx0000X00Or4J!ARQAKowP65p8FDHkvk.Uq5...",
"targetOrigin":"http://instance.salesforce.com:
8080"
},
"algorithm":"HMACSHA256",
"userId":"005x0000001SyyEAAS",
"issuedAt":null
}
コンテキストのオブジェクトおよび Force.com Canvas SDK についての詳細は、『Force.com
Canvas 開発者ガイド』を参照してください。
フィードのキャンバスアプリケーションを使用し
た Salesforce1 の拡張
Force.com Canvas を使用すると、Salesforce1 アプリケーションでキャンバスアプリケー
ションをフィード項目として公開することによって、さらに多くの機能をフィードに
追加できます。
この機能を使用して、次のことができます。
• Salesforce1 アクションバーのキャンバスカスタムアクションから公開されたキャン
バスアプリケーションを使用するか、Salesforce フルサイトのパブリッシャーを使用
して、フィードに投稿する。
• Chatter API を使用してフィードに投稿する。
• フィード項目内にキャンバスアプリケーションを直接表示する。
この章では、Force.com Canvas を使用してフィードでサードパーティの Web アプリケー
ションを統合することによって、Acme Wireless 組織をさらに拡張します。
Acme Wireless には、Heroku で実行される DeliveryTrakr という Web アプリケーションがあ
り、このアプリケーションを使用して顧客の注文の配送が処理されます。Heroku で実
行される DeliveryTrackr アプリケーションをコピーし、グローバルアクションとしてパ
ブリッシャーから使用できるようにします。
136
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
このシナリオでは、モバイルデバイスを持つ倉庫の作業者が配送のリストを表示でき
ます。倉庫の作業者がパブリッシャーからアプリケーションにアクセスすると、さま
ざまなフィード投稿を作成できます。アプリケーションでは、配送に関する情報を含
むフィード項目であるテキスト投稿、DeliveryTrakr アプリケーションへのリンクを含む
フィード項目であるリンク投稿、または別のキャンバスアプリケーションへのリンク
を含むフィード項目であるキャンバス投稿を作成できます。このリンクをクリックし
て、配送を承認または拒否できるキャンバスアプリケーションにアクセスできます。
実際に試す: DeliveryTrakr Web アプリケーションをコ
ピーする
DeliveryTrakr Web アプリケーションをコピーして、フィードのキャンバスアプリケー
ションの統合処理を開始します。
このガイドの「開発の前提条件」 (ページ 82)に記載されている前提条件に加えて、次
のものも必要です。
• 「アプリケーションのカスタマイズ」および「すべてのデータの編集」ユーザ権
限。ほとんどの場合、管理者にはすでにこれらの権限があります。管理者以外の
場合、キャンバスアプリケーションのプレビューアを表示してキャンバスアプリ
ケーションを作成できるようにこれらの権限を追加する必要があります。
• Git のインストール。https://help.github.com/articles/set-up-git に移
動し、Git をインストールして設定します。
Git をインストールした後、keygen ツールを使用して SSH を設定する必要が生じる
場合があります。詳細は、
https://help.github.com/articles/generating-ssh-keysを参照してくだ
さい。Windows を使用している場合、このツールは Git \bin ディレクトリにありま
す。このディレクトリは、Git をインストールしてもパスに追加されません。コン
トロールパネルを使用してパスに \bin ディレクトリを追加します。インストー
ルディレクトリに応じて、パスは C:\Program Files (x86)\Git\bin のように
なります。
• コード例をコピーする GitHub アカウント。https://github.com/plans に移動
し、GitHub アカウントを設定します。
• Web アプリケーションは Heroku で実行されるため Heroku アカウント。
https://api.heroku.com/signup に移動し、Heroku アカウントを作成します。
137
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
• コマンドラインから Heroku アプリケーションを管理する Heroku Toolbelt。
https://toolbelt.heroku.com に移動し、Heroku Toolbelt をダウンロードしてイ
ンストールします。
アプリケーションの機能に関係なく、キャンバスアプリケーションの作成手順および
実行手順は同じです。したがって、この章の手順は、前の章「キャンバスカスタムア
クションを使用した Salesforce1 の拡張」 (ページ 121)の手順と似ています。
DeliveryTrakr は、顧客の注文の配送を追跡するために Acme Wireless で使用する Web アプ
リケーションです。倉庫の作業者はこのアプリケーションを使用して、配送済みの注
文を確認し、配送情報をフィードに投稿します。DeliveryTrakr Web アプリケーションに
は、一部の配送処理ロジックが含まれていますが、完全なアプリケーションではあり
ません。このアプリケーションの目的は、Web アプリケーションと Salesforce1 アプリ
ケーションをどのように統合できるかを示すことにあります。
DeliveryTrakr は、Heroku で実行される Java アプリケーションです。アプリケーションで
実行中の各インスタンスは、組織で作成する接続アプリケーションに対してコンシュー
マの秘密を参照する必要があります。したがって、キャンバスアプリケーションとし
て追加できる DeliveryTrakr の独自のインスタンスが Heroku で必要となります。このス
テップでは、処理の最初のステップであるアプリケーションのコピーを行います。
1. コマンドウィンドウを開き、DeliveryTrakr をダウンロードするディレクトリに移
動します。アプリケーションをコピーすると、Delivery-Tracker-Java-App
というディレクトリが作成され、ここからコピーコマンドを実行できます。
• Windows を実行しているコンピュータの場合は、[スタート] > [ファイル名を
指定して実行...]をクリックしてコマンドウィンドウを開き、「cmd」と入力
します。
• Mac OS を実行しているコンピュータの場合は、Command + Space キーを押し
てコマンドウィンドウを開き、「terminal」と入力します。
2. git clone
https://github.com/forcedotcom/Delivery-Tracker-Java-App コマン
ドを入力します。
3. Delivery-Tracker-Java-App ディレクトリに移動します。たとえば、
Delivery-Tracker-Java-App ディレクトリが C:\Users\yourname にある
場合、cd C:\Users\yourname\Delivery-Tracker-Java-App というコマ
ンドを入力します。
4. heroku login コマンドを入力して、Heroku にログインします。
138
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
要求されたら、メールアドレスとパスワードを入力します。
5. heroku apps:create コマンドを入力して、新しい Heroku アプリケーション
を作成します。
アプリケーションが作成されたことを示す次のような確認メッセージが表示さ
れます。
Creating deep-samurai-7923... done, stack is cedar
http://deep-samurai-7923.herokuapp.com/ |
[email protected]:deep-samurai-7923.git
Git remote heroku added
6. Heroku アプリケーションの URL をコピーします。これは、次のタスクで使用し
ます。この例では、URL は http://deep-samurai-7923.herokuapp.com と
なっていますが、独自の Heroku アプリケーションの URL をコピーしてください。
Heroku で DeliveryTrakr Web アプリケーションを作成しましたが、リリースする必
要があるため、このままではまだ動作しません。この操作は、後のステップで
行います。
次のステップでは、このアプリケーションをSalesforceでキャンバスアプリケーション
として追加します。
DeliveryTrakr キャンバスアプリケーションを作成する
このステップでは、DeliveryTrakr Web アプリケーションをキャンバスアプリケーション
として公開します。
キャンバスアプリケーションを作成するユーザには、「アプリケーションのカスタマ
イズ」権限と「すべてのデータの編集」権限が必要です。
1. Salesforce アプリケーションで、[設定] から [クイック検索] ボックスに「アプリ
ケーション」と入力し、[アプリケーション] を選択します。
2. [接続アプリケーション] 関連リストで、[新規] をクリックします。
3. [接続アプリケーション名] 項目に、「DeliveryTrakr」と入力します。
4. [取引先責任者メール] 項目で、メールアドレスを入力します。
5. API ([OAuth 設定の有効化]) セクションで、[OAuth 設定の有効化] を選択します。
139
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
6. [コールバック URL] 項目に、作成した Heroku アプリケーションの URL を貼り付
け、プロトコルを HTTPS に変更します。たとえば、最終的な URL は、
https://deep-samurai-7923.herokuapp.com のようになります。
7. [選択した OAuth 範囲] 項目で [フルアクセス] を選択し、[追加] をクリックし
ます。
キャンバスアプリケーションの機能に必要な OAuth は最小限に抑えることをお
勧めします。
8. [キャンバスアプリケーション設定] セクションで、[Force.com キャンバス]
を選択します。
9. [キャンバスアプリケーションの URL] 項目に、[コールバック URL] 項目で入
力した URL に /canvas.jsp を付加して入力します。たとえば、URL は
https://deep-samurai-7923.herokuapp.com/canvas.jsp のようになり
ます。
140
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
10. [アクセス方法] ドロップダウンリストで、[署名付き要求 (POST)] を選択します。
11. [場所] 項目で、[Chatter フィード] と [パブリッシャー] を選択し、[追加] をクリッ
クします。
キャンバスアプリケーションはパブリッシャーとフィードに表示されるため、
これらの値を選択しています。
12. [保存]をクリックします。キャンバスアプリケーションを保存すると、詳細ペー
ジが表示されます。
キャンバスアプリケーションが追加されたので、次にアクセスできるユーザを指定し
ましょう。
DeliveryTrakr キャンバスアプリケーションにアクセスできる
ユーザを設定する
キャンバスアプリケーションを作成しても、ユーザアクセスを設定するまでは、誰も
アプリケーションを表示できません。
1. [設定] から、[クイック検索] ボックスに「接続アプリケーション」と入力し、接
続アプリケーションを管理するオプションを選択します。
2. DeliveryTrakr アプリケーションをクリックし、[編集] をクリックします。
141
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
3. [許可されているユーザ] ドロップダウンリストで、[管理者が承認したユーザは
事前承認済み] を選択します。表示されるポップアップメッセージで [OK] をク
リックします。
4. [保存] をクリックします。
ここで、キャンバスアプリケーションを表示できるユーザを定義します。これ
を行うには、プロファイルと権限セットを使用します。この例では、システム
管理者プロファイルを持つユーザにアプリケーションへのアクセスを許可しま
す。
5. [接続アプリケーションの詳細] ページの [プロファイル] 関連リストで、[プロ
ファイルを管理する] をクリックします。
6. [システム管理者] プロファイルを選択し、[保存] をクリックします。
これで完成です。次のステップでは、Heroku で環境変数をいくつか設定します。
Heroku 環境変数を設定する
キャンバスアプリケーションを作成したら、コンシューマの秘密に環境変数を設定す
る必要があります。
1. [設定] から、[クイック検索] ボックスに「アプリケーション」と入力し、[アプ
リケーション] を選択します。
2. [接続アプリケーション] 関連リストで、[DeliveryTrakr] をクリックします。
3. [コンシューマの秘密] 項目の横にある [クリックして公開] リンクをクリックし
ます。
4. コンシューマの秘密をコピーします。
5. コマンドウィンドウを開き、Delivery-Tracker-Java-App ディレクトリに
移動し、heroku config:add APP_SECRET='Your_Consumer_Secret' コマ
ンドを入力して環境変数を作成します。
Windows コンピュータで作業を行っている場合は、一重引用符を二重引用符 (")
に置き換えなければならないことがあります。
6. Delivery-Tracker-Java-App\src\main\webapp\scripts ディレクトリに
移動します。
7. エディタで shipment.js を開きます。onGetPayload 関数で、YOUR_APP_URL
を、Heroku の DeliveryTrakr アプリケーションの URL である p.url =
142
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
"https://[YOUR_APP_URL]/signed-request.jsp?shipment=" +
shipment; に置き換えます。
このコードは、231 行目あたりにあります。この例では、コードの行は次のよ
うになります。
p.url = "https://deep-samurai-7923.herokuapp.com/
signed-request.jsp? shipment=" + shipment;
8. shipment.js に加えた変更を保存し、Delivery-Tracker-Java-App ディレ
クトリに戻ります。
9. heroku config:add RUNNING_ON_HEROKU='true' コマンドを入力します。
このコマンドは、アプリケーションが Heroku で実行されることを指定します。
これで、変更を加えるたびに再リリースする必要がなくなるので、テストを行
うのに便利です。Windows コンピュータで作業を行っている場合は、一重引用
符を二重引用符 (") に置き換えなければならないことがあります。
10. git add —A コマンドを入力して、ファイルのコミット準備をします。
11. git commit —m 'MyChangeComments' コマンドを入力して、コメントと一
緒に変更をコミットします。
Windows コンピュータで作業を行っている場合は、一重引用符を二重引用符 (")
に置き換えなければならないことがあります。
12. git push heroku master コマンドを入力して、アプリケーションを Heroku
にリリースします。
このプロセスが正常に完了すると、次のような出力が表示されます。
-----> Compiled slug size: 11.2MB
-----> Launching... done, v6
http://deep-samurai-7923.herokuapp.com deployed to Heroku
To [email protected]:deep-samurai-7923.git
* [new branch]
master -> master
「権限が拒否されました」というエラーメッセージが表示された場合、必要に
応じて SSH キーを設定して Heroku に追加します。
https://devcenter.heroku.com/articles/keys を参照してください。
[設定] から [キャンバスアプリケーションのプレビューア] をクリックすると、キャン
バスアプリケーションがSalesforceフルサイトで動作していることをすばやくテストで
143
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
きます。左側の [DeliveryTrakr] リンクをクリックすると、実行中の Heroku アプリケー
ションがプレビューアに表示され、発送およびその配送状況を示すリストが表示され
ます。次に、キャンバスアプリケーションにグローバルアクションを作成して、モバ
イルユーザが作成したアプリケーションの使用を開始できるようにします。
グローバルアクションを作成する
DeliveryTrakr アプリケーションにグローバルカスタムアクションを作成して、それをグ
ローバルパブリッシャーレイアウトに追加できるようにします。
キャンバスの前回の例では、Salesforce でキャンバスアプリケーションを作成するとき
に [アクションの自動作成] を選択しました。したがって、グローバルアクションは作
成されています。このシナリオでは、その項目を選択しなかったため、アクションを
手動で作成していきます。
1. キャンバスのプレビューアがまだ開いている場合は、[閉じる] をクリックしま
す。[設定] から、[クイック検索] ボックスに「アクション」と入力し、[グロー
バルアクション] を選択します。
2. [新規アクション]をクリックします。
3. [アクション種別] ドロップダウンリストで、[カスタムキャンバス] を選択しま
す。
4. [キャンバスアプリケーション] ドロップダウンリストで、[DeliveryTrakr] を選択し
ます。
5. [表示ラベル] 項目に、「Track Deliveries」(配送の追跡) と入力します。
これは、Salesforce1 アプリケーションのアクションバーおよびアクションメ
ニュー、または Salesforce フルサイトのパブリッシャーでユーザに表示される表
示ラベルです。
144
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
6. [保存] をクリックします。
グローバルカスタムアクションの作成を完了したので、次にこのアクションをグロー
バルパブリッシャーレイアウトに追加します。これにより、モバイルユーザがアクセ
スできるアクションバーにアクションが確実に表示されます。
アクションをグローバルパブリッシャーレイアウトに追加す
る
キャンバスアプリケーションのグローバルアクションを作成しました。次に、アク
ションをグローバルパブリッシャーレイアウトに追加して、Salesforce1アプリケーショ
ンのアクションバーに表示されるようにします。
1. [設定] から、[クイック検索] ボックスに「パブリッシャーレイアウト」と入力
し、[パブリッシャーレイアウト] を選択します。
2. グローバルレイアウトの横にある [編集] をクリックします。
3. 「Track Deliveries」(配送の追跡) 要素を [Salesforce1 および Lightning Experience アク
ション] セクションの先頭位置にドラッグします。
倉庫の作業者はこのカスタムアクションを頻繁に使用するため、リストの先頭
に配置して、アクションバーの最初のアクションの 1 つとして表示されるよう
にします。
145
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
4. [保存] をクリックします。
カスタムアクションを作成して、それをパブリッシャーレイアウトに追加したので、
その動作を実際に確認する準備が整いました。
DeliveryTrakr キャンバスアプリケーションをテストする
Acme Wireless の倉庫の作業者として配送処理を実際に行って、Salesforce1 アプリケー
ションでキャンバスアプリケーションをテストします。
DeliveryTrakr アプリケーションでは、キャンバスアプリケーションによってフィードで
次の 3 種類の投稿をどのように作成できるかを示します。
• テキスト投稿 — 配送に関する情報を含むフィード項目。
• リンク投稿 — DeliveryTrakr アプリケーションへのリンクを含むフィード項目。
• キャンバス投稿 — 別のキャンバスアプリケーションへのリンクを含むフィード項
目。このアプリケーションは、配送を承認または拒否する倉庫の作業者が使用し
ます。
1. モバイルデバイスのナビゲーションメニューで、[フィード] をタップします。
2. アクションバーの
をタップしてアクションメニューにアクセスします。
3. [Track Deliveries (配送を追跡)] アクションをタップします。
146
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
DeliveryTrakr アプリケーションが開き、発送リストが表示されます。
4. グリッド内のいずれかの配送をタップします。
5. [テキスト投稿] をタップします。
[今何をしていますか?]ペインに独自のテキストを入力して、投稿することもで
きます。
147
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
6. [共有] をタップします。
これで、発送に関するテキストフィード投稿が作成され、その投稿が現在の
ユーザのフィードに表示されます。
148
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
7. リンク投稿の作成をテストするには、アクションバーの [Track Deliveries (配送を
追跡)] アクションをタップします。
8. グリッド内のいずれかの配送をタップします。
9. [リンク投稿] をタップします。
[今何をしていますか?]ペインに独自のテキストを入力して、投稿することもで
きます。
149
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
10. [共有] をタップします。
これで、発送に関するリンクフィード投稿が作成され、その投稿が現在のユー
ザのフィードに表示されます。リンクをクリックすると、Heroku で実行されて
いる DeliveryTrakr アプリケーションが表示されます。
150
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
11. キャンバス投稿の作成をテストするには、[Track Deliveries (配送を追跡)]アクショ
ンを再度タップします。
12. グリッド内のいずれかの配送をタップします。
13. [承認の投稿] をタップします。
[今何をしていますか?]ペインに独自のテキストを入力して、投稿することもで
きます。
14. [共有] をタップします。
これで、発送に関するキャンバスフィード投稿がリンクで作成されます。リン
クをクリックすると、発送を完了またはキャンセルできる実際のキャンバスア
プリケーションにアクセスできます。
151
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
これで完了です。テキストフィード項目やリンクフィード項目を投稿するキャンバス
アプリケーションの作成手順、さらに最も重要なフィードのキャンバスアプリケー
ションの作成手順をすべて終了しました。
フィードのキャンバスアプリケーションの開発に関するガイドラインについては、
「フィードのキャンバスアプリケーション」 (ページ 242)を参照してください。
もうひとこと: フィード項目を作成するコードについ
て
DeliveryTrakr Web アプリケーションのコードでは、shipment.js ファイルにさまざま
なフィード項目を作成するロジックが含まれています。
152
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
キャンバスフィード項目の作成
onGetPayload 関数の次のコードスニペットは、CanvasPost 型のフィード項目を作
成します。これでわかるように、すべての投稿値を動的に設定し、namespace や
developerName などのキャンバスアプリケーションに関する情報を署名付き要求か
ら取得します。また、URL に付加されキャンバスアプリケーションのフィード項目で
使用されるパラメータを渡すこともできます。
else if ("approval" === action)
{
p.feedItemType = "CanvasPost";
p.auxText = "Please confirm this shipment status: " +
shipments[shipment].description;
p.namespace = sr.context.application.namespace;
p.developerName = sr.context.application.developerName;
p.thumbnailUrl = "https://cdn1.iconfinder.com/data/icons/
VISTA/project_managment/png/48/deliverables.png";
p.parameters = "{\"shipment\":\"" + shipment + "\"}";
p.title = shipments[shipment].description;
p.description = "This is a travel shipment for Shipment - " +
shipments[shipment].description +
". Click the link to open the canvas app.";
}
[共有] ボタンの有効化
次のコードスニペットは、draw 関数の一部です。このステートメントをコールする
と、[共有] ボタンが有効化されます。これにより、キャンバスアプリケーションの必
須要素をユーザがすべて選択するまで、フィード項目を作成できなくなります。
$$.client.publish(sr.client, {
name : 'publisher.setValidForSubmit',
payload : true});
153
第 13 章
Force.com Canvas を使用した Salesforce1 への Web アプリケーションの統合
フィード項目の公開
ユーザが [共有] ボタンをクリックすると、次のコードスニペットにより、フィード項
目がフィードに公開されます。作成されるフィード項目の種別は、選択する種別 (テ
キスト、リンク、キャンバス) によって異なります。
$$.client.publish(sr.client, {name : 'publisher.setPayload',
payload : p});
154
第 14 章
トピック:
•
実際に試す: 請求書
アクションを作成
する
•
もうひとこと: ク
イックアクション
と REST API
API からのクイックアクションの
コール
アクションを REST API からコールすることで、アクションの
機能をさらに拡張できます。
このガイド全体を通して、アクションがいかに強力である
かについて説明してきました。アクションを使用すること
で、Salesforce1 アプリケーションをすばやく拡張し、ユーザ
が必要な機能をパブリッシャー内ですぐに使用できること
をお分かりいただけたと思います。アクションを REST API か
らコールすると、この機能を Salesforce1 アプリケーション外
で活用できます。
この章では、Invoice オブジェクトからアクションを作成し、
それを Shipify Web アプリケーションからコールする方法につ
いて説明します。変更を加えた後でユーザが Shipify キャンバ
スアプリケーションにアクセスし、[納入] をクリックする
と、Salesforce で配送レコードが追加されます。
メモ: この章は、「キャンバスカスタムアクションを
使用した Salesforce1 の拡張」 (ページ 121)セクションで完
了したタスクを基にしています。この章のタスクを開
始する前に、Shipify Web アプリケーションのダウンロー
ド手順と、キャンバスアプリケーションの作成手順を
完了してください。
155
第 14 章
API からのクイックアクションのコール
実際に試す: 請求書アクションを作成する
このステップでは、配送レコードを追加する請求書アクションを作成します。
1. カスタムオブジェクトのオブジェクト管理設定から、[請求書] をクリックしま
す。
2. [ボタン、リンク、およびアクション] 関連リストまでスクロールダウンし、[新
規アクション] をクリックします。
3. [アクション種別] ドロップダウンリストで、[レコードの作成] を選択します。
4. [対象オブジェクト] ドロップダウンリストで、[配送] を選択します。
5. [表示ラベル] 項目に、「Create Delivery」 (配送の作成) と入力します。
アクション名はデフォルトで Create_Delivery です。これは、API でアクションを
参照するときの名前です。
6. [保存] をクリックします。
7. アクションを保存すると、ページレイアウトエディタが表示されます。[請求
書]、[注文番号]、[所有者] の各項目をページレイアウトにドラッグします。
8. [保存] をクリックします。
156
第 14 章
API からのクイックアクションのコール
アクションの作成を完了したので、Heroku で実行されている Shipify Web アプリケーショ
ンにコードを追加します。
アクションをコールするコードを追加する
REST APIを使用して Create_Delivery アクションをコールするコードを追加します。
1. Shipify Web アプリケーションをダウンロードした Shipify-Node-App ディレク
トリに移動します。shipment_with_action_api_call.js ファイルを
shipment.js ファイルにコピーします。
• Windows コンピュータの場合、コマンドは copy
shipment_with_action_api_call.js shipment.js です。
• Mac OS コンピュータの場合、コマンドは cp
shipment_with_action_api_call.js shipment.js です。
2. shipment.js を上書きすることを確認します。
3. git add —A コマンドを入力して、ファイルのコミット準備をします。
4. git commit —m 'MyChangeComments' コマンドを入力して、コメントと一
緒に変更をコミットします。
157
第 14 章
API からのクイックアクションのコール
Windows コンピュータで作業を行っている場合は、一重引用符を二重引用符 (")
に置き換えなければならないことがあります。
5. git push heroku master コマンドを入力して、アプリケーションを Heroku
にリリースします。
例: 配送レコードを作成する shipment.js のコードを見る
と、/quickActions/Create_Directory リソースに請求書 ID を渡し、POST
を実行することがわかります。
Shipment.prototype.createDelivery = function createDelivery(so) {
var self = this;
var authorization = this._formatAuthHeader(so.authorization);
if(!so.invoiceId) {
var err = new Error("Must Pass InvoiceId to Ship!");
err.statusCode = '400';
err.err = err.message;
this.emit('create-delivery', err);
return;
}
var quickActionBody = {
contextId: so.invoiceId,
record: {
Order_Number__c: so.orderNumber
}
};
var deliveryReq = {
url: so.instanceUrl + '/services/data/v29.0/
sobjects/Invoice__c/quickActions/Create_Delivery/',
method: 'POST',
headers: {
'Authorization': authorization,
'Content-Type': 'application/json'
},
body: JSON.stringify(quickActionBody)
};
//Make Ajax request and emit 'create-delivery'
//with result data or error back to listner.
request(deliveryReq, this.handleAJAXResponse(
158
第 14 章
API からのクイックアクションのコール
'create-delivery'));
};
API コールの準備ができているため、顧客の注文を発送してテストしてみましょう。
API からのアクションのコールをテストする
ここでは、Salesforce1アプリケーションでアクションをコールし、配送レコードを追加
するコードをテストします。
1. モバイルデバイスのアクションバーで、[Shipify] アクションをタップします。
未処理のすべての請求書のリストが顧客情報と一緒に表示されます。
2. いずれかの請求書をタップします。請求書の総額と [納入] ボタンを示す画面が
表示されます。
159
第 14 章
API からのクイックアクションのコール
3. [納入] をタップします。
これで、Shipify Web アプリケーションで注文処理が開始されます。Shipify で請求
書状況が [完了] に設定され、取引先にフィード項目が作成されます。ただし、
この請求書には配送レコードも作成されます。注文が発送されると、確認画面
が表示されます。
4. [キャンセル] をタップします。
フィードに、新しい配送レコード
160
第 14 章
API からのクイックアクションのコール
が表示されます。
5. 完了した請求書を表示するには、
をタップし、[取引先] をタップします。
6. 発送済み注文の取引先をタップし、フィードまでスワイプします。注文が発送
されたことをユーザに知らせるフィード項目が表示されます。
161
第 14 章
API からのクイックアクションのコール
成功です。これで、作成したアクションを REST API コールで呼び出すように Shipify Web
アプリケーションを更新できました。
もうひとこと: クイックアクションと REST API
REST API には、アクションの操作時に使用できるリソースとコールがいくつか含まれ
ています。
Quick Actions
Quick Actions リソースは、アクションと、フィードに表示されるカスタム項目およびオ
ブジェクトのリストを返すために使用します。リソースでは、
services/data/v36.0/quickActions/ 形式の URI が使用されます。
SalesforceAPIの操作に特定のツールを使用しているユーザもいます。好みのツールがな
い場合、ワークベンチを使用すれば簡単に始めることができます。ワークベンチにつ
162
第 14 章
API からのクイックアクションのコール
いての詳細は、https://developer.salesforce.com/page/Workbench を参照してください。REST
API についての詳細は、『Force.com REST API 開発者ガイド』を参照してください。
グローバルアクション
グローバルアクションを返すには、services/data/v36.0/quickActions/ を
使用します。
このリソースへのコールでは、次の応答のスニペットに示すように、Shipify キャン
バスカスタムアクションを含む、グローバルアクションに関する情報が返されま
す。
...
{
"urls" : {
"quickAction" : "/services/data/v36.0/
quickActions/LogACall",
"defaultValues" : "/services/data/v36.0/
quickActions/LogACall/defaultValues",
"describe" : "/services/data/v36.0/
quickActions/LogACall/describe"
},
"name" : "LogACall",
"type" : "LogACall",
"label" : "Log a Call"
},
{
"urls" : {
"quickAction" : "/services/data/v36.0/
quickActions/Shipify",
"describe" : "/services/data/v36.0/
quickActions/Shipify/describe"
},
"name" : "Shipify",
"type" : "Canvas",
"label" : "Shipify"
},
...
オブジェクトアクション
グローバルアクションだけでなく特定のオブジェクトのアクションを返すには、
services/data/v36.0/sobjects/object/quickActions/ を使用します。
163
第 14 章
API からのクイックアクションのコール
/services/data/v36.0/sobjects/Invoice__c/quickActions コールでは、
次の応答のスニペットに示すように、グローバルアクションおよび請求書の
Create_Delivery アクションに関する情報が返されます。
...
{ "urls" : {
"quickAction" : "/services/data/v36.0/
quickActions/Shipify",
"describe" : "/services/data/v36.0/
quickActions/Shipify/describe"
},
"name" : "Shipify",
"type" : "Canvas",
"label" : "Shipify"
},
{
"urls" : {
"defaultValuesTemplate" : "/services/data/v36.0/
sobjects/Invoice__c/quickActions/Create_Delivery/
defaultValues/{ID}",
"quickAction" : "/services/data/v36.0/
sobjects/Invoice__c/quickActions/Create_Delivery",
"defaultValues" : "/services/data/v36.0/
sobjects/Invoice__c/quickActions/Create_Delivery/
defaultValues",
"describe" : "/services/data/v36.0/
sobjects/Invoice__c/quickActions/Create_Delivery/
describe"
},
"name" : "Invoice__c.Create_Delivery",
"type" : "Create",
"label" : "Create Delivery"
},
...
特定のアクション
特定のアクションを返すには、
services/data/v36.0/sobjects/object/quickActions/Action_Name を使
用します。
164
第 14 章
API からのクイックアクションのコール
/services/data/v36.0/sobjects/Invoice__c/
quickActions/Create_Delivery コールでは、次の応答に示すように、
Create_Delivery アクションに関する情報のみが返されます。
{
"colors": [
{
"theme": "theme4",
"color": "AA8E0A",
"context": "primary"
},
{
"theme": "theme3",
"color": "AA8E0A",
"context": "primary"
}
],
"miniIconUrl": "https://instance.salesforce.com/img/
icon/custom51_100/truck16.png",
"sourceSobjectType": "Invoice__c",
"targetParentField": "Invoice__c",
"targetRecordTypeId": null,
"targetSobjectType": "Delivery__c",
"visualforcePageName": null,
"iconUrl": "https://instance.salesforce.com/img/
icon/custom51_100/truck32.png",
"iconName": null,
"canvasApplicationName": null,
"height": null,
"icons" : [ ],
...
"layout": {
"layoutRows": [{
"layoutItems": [
{
"layoutComponents": [{
"details": {
"namePointing": false,
"custom": true,
"htmlFormatted": false,
"dependentPicklist": false,
"calculatedFormula": null,
"defaultValueFormula": null,
165
第 14 章
API からのクイックアクションのコール
"defaultedOnCreate": false,
"digits": 0,
"groupable": true,
"permissionable": false,
"referenceTo": ["Invoice__c"],
"relationshipOrder": 0,
"soapType": "tns:ID",
"nameField": false,
"sortable": true,
"filterable": true,
"restrictedPicklist": false,
"caseSensitive": false,
"calculated": false,
"scale": 0,
"nillable": false,
"externalId": false,
"idLookup": false,
"controllerName": null,
"deprecatedAndHidden": false,
"inlineHelpText": null,
"writeRequiresMasterRead": false,
"createable": true,
"updateable": false,
"relationshipName": "Invoice__r",
"autoNumber": false,
"unique": false,
"picklistValues": [],
"displayLocationInDecimal": false,
"cascadeDelete": true,
"restrictedDelete": false,
"length": 18,
"name": "Invoice__c",
"type": "reference",
"defaultValue": null,
"byteLength": 18,
"label": "Invoice",
"precision": 0
},
"displayLines": 1,
"tabOrder": 1,
"value": "Invoice__c",
"type": "Field"
}],
"placeholder": false,
166
第 14 章
API からのクイックアクションのコール
"editable": true,
"required": true,
"label": "Invoice"
},
{
"layoutComponents": [],
"placeholder": true,
"editable": false,
"required": false,
"label": ""
}
],
"numItems": 2
}],
"useCollapsibleSection": false,
"useHeading": false,
"columns": 2,
"heading": null,
"rows": 1
},
"defaultValues": [],
"width": null,
"urls": {
"defaultValuesTemplate": "/services/data/v36.0/
sobjects/Invoice__c/quickActions/
Create_Delivery/defaultValues/{ID}",
"quickAction": "/services/data/v36.0/
sobjects/Invoice__c/quickActions/Create_Delivery",
"defaultValues": "/services/data/v36.0/
sobjects/Invoice__c/quickActions/
Create_Delivery/defaultValues",
"describe": "/services/data/v36.0/
sobjects/Invoice__c/quickActions/
Create_Delivery/describe"
},
"name": "Invoice__c.Create_Delivery",
"type": "Create",
"label": "Create Delivery"
}
167
第 14 章
API からのクイックアクションのコール
アクションの詳細
特定のアクションの説明の詳細を返すには、
services/data/v36.0/sobjects/object/quickActions/Action_Name/describe/
を使用します。
アクションのデフォルト値と項目値
デフォルトの項目値を含む、特定のアクションのデフォルト値を返すには、
services/data/v36.0/sobjects/object/quickActions/Action_Name/defaultValues/
を使用します。
/services/data/v36.0/sobjects/Invoice__c/
quickActions/Create_Data/defaultValues コールでは、次の応答のスニペッ
トに示すように、請求書の Create_Delivery アクションのデフォルトに関する
情報が返されます。
...
{
"attributes":{
"type":"Delivery__c"
}
}
...
アクションのデフォルト値
アクションのデフォルト値を返すには、/services/data/v36.0/subjects/
object/quickActions/Action_Name/defaultValues/Parent_ID を使用しま
す。
Describe Layouts
Global Describe Layouts リソースは、アクションオブジェクトを含む、オブジェクトのグ
ローバルレイアウト情報を取得するために使用します。このリソースでは、
services/data/v36.0/ sobjects/Global/describe/layouts/ 形式の URI が使
用されます。
このリソースへのコールでは、次の応答に示すように、グローバルアクション (Shipify
キャンバスカスタムアクションを含む) のレイアウト情報が返されます。
{
"recordTypeSelectorRequired":[
168
第 14 章
API からのクイックアクションのコール
false
],
"recordTypeMappings":[
],
"layouts":[
{
"relatedLists":[
],
"relatedContent":null,
"detailLayoutSections":[
],
"editLayoutSections":[
],
"multirowEditLayoutSections":[
],
"offlineLinks":[
],
"buttonLayoutSection":null,
"highlightsPanelLayoutSection":null,
"quickActionList":{
"quickActionListItems":[
{
"quickActionName":"Shipify",
"colors":[
],
"miniIconUrl":null,
"targetSobjectType":null,
"iconUrl":null,
"urls":{
"quickAction":"/services/data/v36.0/
quickActions/Shipify",
"describe":"/services/data/v36.0/
quickActions/Shipify/describe"
},
"icons":[
],
169
第 14 章
API からのクイックアクションのコール
"type":"Canvas",
"label":"Shipify"
},
{
"quickActionName":"FeedItem.TextPost",
"colors":[
],
"miniIconUrl":null,
"targetSobjectType":null,
"iconUrl":null,
"urls":{
},
"icons":[
],
"type":"Post",
"label":"Post"
},
{
"quickActionName":"FeedItem.ContentPost",
"colors":[
],
"miniIconUrl":null,
"targetSobjectType":null,
"iconUrl":null,
"urls":{
},
"icons":[
],
"type":"Post",
"label":"File"
},
{
"quickActionName":"NewTask",
"colors":[
{
"color":"44A12C",
"theme":"theme4",
"context":"primary"
170
第 14 章
API からのクイックアクションのコール
},
{
"color":"1797C0",
"theme":"theme3",
"context":"primary"
}
],
"miniIconUrl":"https://instance.
salesforce.com/img/icon/tasks16.png",
"targetSobjectType":"Task",
"iconUrl":"https://instance.
salesforce.com/img/icon/home32.png",
"urls":{
"quickAction":"/services/data/v36.0/
quickActions/NewTask",
"defaultValues":"/services/data/v36.0/
quickActions/NewTask/defaultValues",
"describe":"/services/data/v36.0/
quickActions/NewTask/describe"
},
"icons":[
{
"url":"https://instance.
salesforce.com/img/icon/home32.png",
"height":32,
"theme":"theme3",
"width":32,
"contentType":"image/png"
},
{
"url":"https://instance.
salesforce.com/img/icon/tasks16.png",
"height":16,
"theme":"theme3",
"width":16,
"contentType":"image/png"
},
...
],
"type":"Create",
"label":"New Task"
},
{
171
第 14 章
API からのクイックアクションのコール
"quickActionName":"NewContact",
...
],
"type":"Create",
"label":"New Contact"
},
...
"type":"Create",
"label":"New Lead"
},
{
"quickActionName":"FeedItem.LinkPost",
"colors":[
],
"miniIconUrl":null,
"targetSobjectType":null,
"iconUrl":null,
"urls":{
},
"icons":[
],
"type":"Post",
"label":"Link"
},
{
"quickActionName":"FeedItem.PollPost",
"colors":[
],
"miniIconUrl":null,
"targetSobjectType":null,
"iconUrl":null,
"urls":{
},
"icons":[
],
"type":"Post",
"label":"Poll"
172
第 14 章
API からのクイックアクションのコール
}
]
},
"id":"00hR0000000MpLAIA0"
}
]
}
Describe Layouts リソースは、アクションオブジェクトを含む、特定のオブジェクトの
レイアウトの説明を取得するために使用します。このリソースでは、services/data/
v36.0/sobjects/object/describe/layouts/ 形式の URI が使用されます。
173
第 15 章
トピック:
•
Lightning ページと
は?
•
Lightning ページ: 全
体像
•
Lightning ページの
リリース
•
[Lightning ページ] タ
ブについて
•
Salesforce1 で
Lightning ページを
使用できるように
する方法
•
もうひとこと:
Lightning ページ
Lightning ページを使用したユーザ
インターフェースの拡張
この章では、各種モバイルユーザ向けにAcme Wireless組織を
拡張します。このシナリオの場合、Acme Wireless には、修理
部品や付属品をすべてまとめて保管する倉庫があります。
各店舗は倉庫に部品を注文し、店内に一定数の商品を用意
しています。在庫のない特殊な部品が必要なときは、店舗
が倉庫に特別注文します。
このガイドの大部分ではモバイル技術者に焦点を当ててき
ましたが、今回は倉庫から店舗に在庫を輸送する配送運転
手に焦点を当てます。現在、運転手はカスタムアプリケー
ションを使用して、配送の作成、更新、および追跡を行っ
ています。Salesforce1 に組み込むことができるように、
Lightning ページを使用して、そのアプリケーションのホーム
ページを作成します。こうすることで、運転手は単一のソー
スで配送の管理に必要な情報を得られるようになります。
175
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
Lightning ページとは?
Lightning ページは、Salesforce1 モバイルアプリケーションまたは Lightning Experience で使
用するページを設計できるカスタムレイアウトです。
Lightning ページは、ページレイアウトと Visualforce ページの中間に位置します。ページ
レイアウトと同様、Lightning ページではページにカスタム項目を追加できます。ただ
し、これらのカスタム項目は、項目やVisualforceコンポーネントではなくLightningコン
ポーネントであるため、高い柔軟性があります。
Lightning ページを使用して、アプリケーションホームページを作成し、そのページを
Salesforce1 ナビゲーションメニューに追加できます。アプリケーションホームページ
は、モバイルホームページになり、ユーザはこのページを使用して、そのアプリケー
ションで最も重要なオブジェクトと項目にすばやくアクセスできます。
さらに、Lightning ページ XML でグローバルクイックアクションを指定することで、
Lightning ページにそれらのアクションを割り当てることもできます。ユーザがLightning
ページにアクセスすると、割り当てたすべてのグローバルアクションがページ下部の
アクションバーに表示されます。
Lightning ページ
Lightning ページは、ComponentInstance を含む範囲のリストで構成されます。
ComponentInstance には、特定のコンポーネントのインスタンスのプロパティ (インスタ
ンスがどの Lightning コンポーネントを参照するかなど)、および Lightning コンポーネン
トの属性のサブセットを表す名前/値のペアのセットが含まれます。
使用可能な標準 Lightning コンポーネント
一部の Lightning コンポーネントは ComponentInstance で指定できません。コンポーネン
トが許可されている場合でも、そのすべての属性を指定できるとは限りません。現
在、次の Lightning コンポーネントがすべての種類の Lightning ページで使用できます。
flexipage:filterListCard
リストビューを参照し、そのビューから最初の数レコードを表示します。
flexipage:filterListCard コンポーネントでは、次を除く標準オブジェクト
およびカスタムオブジェクトに関連付けられた、すべてのリストビューがサポー
トされます。
176
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
• Activity
• ContentVersion (Files)
• Task
• User
• UserProfile
flexipage:recentItems
指定されたプロパティに基づく、次のオブジェクトをサポートする最近使用した
項目のリストです。
• すべてのカスタムオブジェクト
• 次の両方の条件を満たすすべての標準オブジェクト
– オブジェクトにコンパクトレイアウトが定義されている。
– 最近使用したオブジェクトのリストでオブジェクトが追跡されている。
最近使用したオブジェクトのリストでオブジェクトが追跡されている場合、
LastViewedDate と LastReferencedDate のいずれかまたは両方の項目が表
示されます。
最近使ったデータコンポーネントでは、次のオブジェクトはサポートされていま
せん。
• ContentVersion (Files)
• User
• UserProfile
flexipage:reportChart
レポートグラフコンポーネントを使用して、Lightning ページにレポートのグラフを
表示します。
プロパティ:
• label: このプロパティを空白のままにすると、コンポーネントの表示ラベルは、
代わりにレポートの表示ラベルから取得されます。
• reportName: レポートの API 名
このコンポーネントは、API バージョン 32.0 以降でサポートされています。このコ
ンポーネントは、[私の非公開カスタムレポート] フォルダにあるレポートでは機能
しません。レポートをパッケージに含めると、[未整理公開レポート] フォルダ内の
レポートを参照するレポートグラフコンポーネントはリリースできません。
177
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
flexipage:richText
リッチテキストコンポーネントを使用して、テキストやシンプルな HTML マーク
アップを Lightning ページに追加します。
プロパティ:
• richTextValue: 表示する HTML またはテキスト
メモ: JavaScript、CSS、iframe、およびその他の高度なマークアップは、サ
ポートされていません。高度な HTML 要素をコンポーネントで使用する場
合は、VisualforceページコンポーネントまたはカスタムLightningコンポーネ
ントを使用することをお勧めします。
リッチテキストコンポーネントは 4,000 文字までに制限されます。このコンポーネ
ントは、API バージョン 32.0 以降でサポートされています。
flexipage:tab (パイロット)
タブコンポーネントを使用してLightning ページの範囲にタブセットを追加します。
標準タブセットから選択するか、カスタムタブを作成して、Lightning Experienceユー
ザ向けのレコードページを拡張します。
タブコンポーネントには最大 25 個のタブを配置できます。このコンポーネントは、
API バージョン 36.0 以降でサポートされています。
レポートグラフコンポーネントを使用して、Lightning ページにレポートのグラフを
表示します。
タブコンポーネントは、Lightning Experience でのレコードページの作成と編集のた
めのパイロット機能の一部です。
メモ: Lightning アプリケーションビルダーを使用した Lightning Experience のレ
コードページの作成と編集は、現在、パイロットプログラムを通じて Developer
Edition 組織で使用できます。パイロットプログラムは変更される可能性があ
るため、特定の期間にこの機能を有効化することは保証できません。このド
キュメント、プレスリリース、または公式声明で参照されている未リリース
のサービスまたは機能は現在利用できず、提供が遅れたり中止されたりする
可能性があります。サービスのご購入を検討中のお客様は、現在利用可能な
機能に基づいて購入をご決定ください。
flexipage:visualforcePage
Visualforce ページコンポーネントを使用して、Visualforce ページを Lightning ページに
追加します。
178
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
プロパティ:
• label: コンポーネントの表示ラベルこのプロパティを空白のままにすると、コン
ポーネントの表示ラベルは Visualforce ページの表示ラベルから取得されます。
• pageName: 表示する Visualforce ページの API 名
• height: Visualforce ページの高さ (ピクセル単位)。この値は正の整数である必要が
あります。このプロパティを空白のままにすると、デフォルトの高さの 300 ピ
クセルが割り当てられます。
このコンポーネントは、API バージョン 32.0 以降でサポートされています。
Salesforce1 で表示するには、Visualforce ページで [Salesforce モバイルアプリケー
ションおよび Lightning ページでの使用が可能] オプションが選択されている必
要があります。このオプションは、API バージョン 27.0 以降に設定されたページで
使用できます。
salesforceIdentity:appLauncherDesktop
アプリケーションランチャーには、ユーザが使用可能な Salesforce アプリケーショ
ン、およびシステム管理者が設定する接続アプリケーションが表示されます。ユー
ザはアプリケーションランチャーを使用してアプリケーション間を移動できます。
このコンポーネントは、API バージョン 35.0 以降でサポートされています。
組織のLightning アプリケーションビルダーでアプリケーションランチャーコンポー
ネントを有効にするには、Salesforce にお問い合わせください。
wave:waveDashboard
Wave ダッシュボードコンポーネントを使用して、Wave Analytics ダッシュボードを
Lightning ページに追加します。このコンポーネントは、デスクトップのみでサポー
トされています。
プロパティ:
• dashboard: 表示するダッシュボードの名前。
• height: ダッシュボードの高さ (ピクセル単位)。この値は正の整数である必要が
あります。このプロパティを空白のままにすると、デフォルトの高さの 300 ピ
クセルが割り当てられます。
• filter: 実行時にダッシュボードに適用する検索条件 (JSON 形式)。たとえば、
{datasetDeveloperName1:{field1:[value]},datasetDeveloperName1:{field1:[value1,value2],field2:["value3,
with comma"]}} です。
• showTitle: ダッシュボードのタイトルの表示を有効にします。
179
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
• openLinksInNewWindow: ダッシュボードから別のアセットへのリンクを、同じウィ
ンドウ内でダッシュボードを置き換えて開くか、新しいウィンドウで開くか。
• hideOnError: エラーが発生した場合に Wave ダッシュボードを非表示にするかどう
か。
Lightning App Builder で Wave ダッシュボードコンポーネントを有効にするには、
Salesforce にお問い合わせください。
Lightning ページ: 全体像
Lightning ページには XML を作成するだけでは不十分です。作成したら、組織にリリー
スし、ページを設定して、Salesforce1に統合する必要があります。次に、手順全体の概
要を示します。
1. ページを作成する前に、どのコンポーネントを含め、ユーザがどのようなグ
ローバルアクションを必要とするかを判断します。
2. Lightning ページ XML ファイルを作成します。
3. ページにアクションを追加します。
ページの XML で Lightning ページに特定のグローバルアクションを割り当てるこ
とができます。XML に特定のアクションを定義しない場合は、ページにアクショ
ンバーが表示されません。
4. Lightning ページを開発組織にリリースします。
5. [Lightning ページ] カスタムタブを作成します。
6. [Lightning ページ] タブを Salesforce1 ナビゲーションメニューに追加します。
この章では、ステップ 2 以降のすべてのタスクを、順を追って説明します。開始する
前に、配送運転手が使用している Deliveries カスタムアプリケーションをダウンロード
する必要があります。
作業を開始する前に: Deliveries アプリケーションをダ
ウンロードする
前述したように、Acme Wireless の配送運転手は、カスタムアプリケーションを使用し
て、配送の作成、更新、および追跡を行います。Salesforce1で表示できるようにLightning
180
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
ページを追加したいと考えていますが、これを行うには、カスタムアプリケーション
をダウンロードする必要があります。
1. https://github.com/forcedotcom/Salesforce1-Dev-Guide-Setup-Package
に移動します。
2. [Zip をダウンロード] をクリックします。
3. Salesforce1-Dev-Guide-Setup-Package.zip をハードドライブに保存し
ます。
4. Salesforce1-Dev-Guide-Setup-Package.zip ファイルを抽出します。
その中に Salesforce1_Dev_Guide_Deliveries_App.zip があります。
5. 次に、Salesforce1_Dev_Guide_Deliveries_App.zip ファイルを抽出しま
す。
Deliveries アプリケーションファイルを抽出した場所に後ほどすぐに戻るため、この場
所は記憶しておいてください。
Lightning ページの作成
XML で Lightning ページを手動で作成し、Force.com 移行ツール、Force.com IDE、または
ワークベンチのいずれかを使用して、Salesforce にリリースします。
Lightning ページのレイアウトおよびスタイルは、Salesforce によって提供されます。カ
スタムコーディングは必要ありません。
次に、Lightning ページ XML ファイルの例を示します。これは Deliveries アプリケーショ
ンの開始コードで、次の練習問題で使用します。
181
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
1. Lightning ページの範囲の開始。Lightning ページには、1 つの範囲のみを含めるこ
とができます。
2. componentInstances プロパティの開始
3. flexipage:filterListCard コンポーネントの開始
4. 範囲の名前。「main」である必要があります。
5. Lightning ページのマスタ表示ラベル
準備はできましたでしょうか。それでは、作成してみましょう。
実際に試す: Lightning ページを作成する
前述したように、XML ファイルとして Lightning ページを手動で作成する必要がありま
す。この作業と次の作業には、XML エディタが必要です。
パッケージを抽出したときに作成された Salesforce1_Dev_Guide_Deliveries_App
フォルダには、flexipages フォルダがあります。そのフォルダ内には、ここで作成
する最終的な Lightning ページファイルのサンプルバージョン (参照用) があります。た
だし、これから自分で Lightning ページを作成します。コーディングを始めましょう。
1. 任意の XML エディタを開きます。
2. 新しいファイルを開きます。
182
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
3. このコードブロックをコピーして XML エディタに貼り付けます。
<?xml version="1.0" encoding="UTF-8"?>
<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
<flexiPageRegions>
<componentInstances>
<componentInstanceProperties>
<name>entityName</name>
<value>Delivery__c</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>filterName</name>
<value>Todays_Deliveries</value>
</componentInstanceProperties>
<componentName>flexipage:filterListCard</componentName>
</componentInstances>
<componentInstances>
<componentInstanceProperties>
<name>entityNames</name>
<value>Delivery__c,Return_Item__c</value>
</componentInstanceProperties>
<componentName>flexipage:recentItems</componentName>
</componentInstances>
<name>main</name>
</flexiPageRegions>
<masterLabel>Deliveries</masterLabel>
</FlexiPage>
4. ファイルを Deliveries.flexipage として flexipages フォルダに保存しま
す。
重要: Lightning ページを保存する場合、拡張子は必ず .flexipage にし
てください。
基本的な Lightning ページを作成しましたが、別のコードブロック (Lightning ページに割
り当てるアクションを指定するセクション) を追加する必要があります。XML はまだ完
成していません。
183
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
Lightning ページへのクイックアクションの割り当て
「Salesforce1でのアクションの使用」の章では、ポイント & クリックツールを使用して
アクションを作成および設定し、すべてのクイックアクションについて学習しまし
た。Lightning ページで使用するアクションは、まず Salesforce フルサイトで作成および
設定する必要がありますが、アクションを宣言してページレイアウトに追加するオブ
ジェクトとは異なり、Lightning ページのアクションは XML で指定する必要があります。
Lightning ページでは、グローバルアクションのみがサポートされます。
ユーザが Salesforce1 で Lightning ページにアクセスすると、Lightning ページに指定したア
クションのみが表示されます。アクションを指定しないと、ユーザがページにアクセ
スしたときにアクションバーが表示されません。
この練習問題では、事前設定済みのグローバルアクションを Lightning ページに追加し
ます。このアクションを使用すると、運転手が運送中に配送をスケジュールできま
す。
実際に試す: クイックアクションを Lightning ページに追加す
る
この章の最初にダウンロードしたサンプルアプリケーションパッケージには、この
Lightning ページの「新規配送」というグローバルクイックアクションがあります。そ
のため、XML でこれをコールするだけで済みます。
1. まだ開いていない場合、XML エディタで Deliveries.flexipage ファイルを
再度開きます。
2. 次のアクションコードブロックを XML の最後にある </FlexiPage> タグの直
前に追加します。
このコードブロックにより、[新規配送] アクションが Lightning ページに関連付
けられます。
<quickActionList>
<quickActionListItems>
<quickActionName>New_Delivery</quickActionName>
</quickActionListItems>
</quickActionList>
3. Deliveries.flexipage ファイルを保存します。
184
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
これで、ユーザがSalesforce1メニューから Deliveries アプリケーションを開くと、Lightning
ページにアクションバーが表示されるため、ユーザはアクションバーをタップしてこ
のアクションにアクセスできます。
例: 完全なコードブロックは次のようになります。
<?xml version="1.0" encoding="UTF-8"?>
<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
<flexiPageRegions>
<componentInstances>
<componentInstanceProperties>
<name>entityName</name>
<value>Delivery__c</value>
</componentInstanceProperties>
<componentInstanceProperties>
<name>filterName</name>
<value>Todays_Deliveries</value>
</componentInstanceProperties>
<componentName>flexipage:filterListCard</componentName>
</componentInstances>
<componentInstances>
<componentInstanceProperties>
<name>entityNames</name>
<value>Delivery__c,Return_Item__c</value>
</componentInstanceProperties>
<componentName>flexipage:recentItems</componentName>
</componentInstances>
<name>main</name>
</flexiPageRegions>
<masterLabel>Deliveries</masterLabel>
<quickActionList>
<quickActionListItems>
<quickActionName>New_Delivery</quickActionName>
</quickActionListItems>
</quickActionList>
</FlexiPage>
XML コードの準備ができました。次に、このコードと残りの配送パッケージを組織に
リリースします。
185
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
Lightning ページのリリース
この章の最初で説明したように、メタデータ API 経由で Lightning ページをリリースす
る必要があります。これは、いくつかの方法 (Force.com 移行ツール、Force.com IDE、ま
たはワークベンチ) で行うことができます。
すでにコンピュータにこれらのうちのいくつかが設定されている場合もあると思いま
すが、この練習問題の目的に合わせて最も簡単な方法を選択します。ワークベンチを
使用してリリースします。ワークベンチは、システム管理者および開発者がForce.com
API 経由で Salesforce 組織とやりとりできるように設計されたオープンソースツールの
オンラインスイートです。
実際に試す: Lightning ページをリリースする
Lightning ページ XML を作成できたので、次は Developer Edition 組織にアプリケーション
と一緒にリリースしましょう。
1. Salesforce1_Dev_Guide_Deliveries_App パッケージフォルダの内容を、
DeliveriesApp.zip という名前の新しい .zip ファイルに圧縮します。
重要: メインフォルダ自体は zip ファイルに含めないでください。パッ
ケージが正しくリリースされません。package.xml ファイルとそのサ
ブフォルダすべて (オブジェクト、flexipage、タブなど) を選択し、まとめ
て zip ファイルに圧縮します。
2. 新しいブラウザタブまたはウィンドウで、
https://developer.salesforce.com/page/Workbench に移動します。
3. [Login to Workbench Now on Developerforce (DeveloperForce のワークベンチに今す
ぐログイン)] をクリックします。
4. API バージョンを最新のバージョンに設定します。
たとえば、Summer '15 の場合は API バージョン 34.0 です。Lightning ページは、API
バージョン 29.0 以降でサポートされます。
5. サービスの利用規約に同意し、[Salesforce でログイン] をクリックします。
6. Developer Edition のログイン情報を使用してログインします。
7. 移行メニューから、[リリース] を選択します。
186
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
8. [ファイルを選択] をクリックし、続いて上記で作成した、Lightning ページが含
まれている DeliveriesApp.zip ファイルを選択します。
9. [単一パッケージ] を選択します。
10. [次へ] をクリックします。
11. [リリース] をクリックします。
12. リリースが完了するまで待ちます。
13. Salesforce ブラウザウィンドウに戻ります。
成功です。これでパッケージとその内容が開発組織に追加されました。ただし、まだ
作業が残っています。Lightning ページを Salesforce1 に統合する必要があります。そのた
めに、タブを作成する必要があります。
[Lightning ページ] タブについて
Salesforce1 ナビゲーションメニューに Lightning ページアプリケーションページを追加す
る前に、Lightning ページのカスタムタブを作成する必要があります。
[Lightning ページ] タブは、Salesforce フルサイトでは使用できず、Salesforce の他のカスタ
ムタブと同じ様には機能しません。Salesforce Classic では、現在のタブの右側に表示さ
れるプラスアイコン ( ) をクリックしても [すべてのタブ] ページに表示されません。
また、[Lightning ページ] タブは、アプリケーションのタブをカスタマイズするときで
も、[選択可能なタブ] リストに表示されません。さらに、[Lightning ページ]は、Lightning
Experience でも使用できません。
[Lightning ページ] タブは、Lightning ページを Salesforce1 ナビゲーションメニューに追加
するためにのみ使用します。
他のカスタムタブと同様に、XML で [Lightning ページ] タブを定義してリリースできま
すが、[Lightning ページ] タブに固有の機能を説明するために Salesforce フルサイトでこ
れを行います。
実際に試す: [Lightning ページ] タブを作成する
1. [設定] から、[クイック検索] ボックスに「タブ」と入力し、[タブ] を選択しま
す。
2. [Lightning ページ] タブ関連リストで、[新規] をクリックします。
187
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
3. タブの配送 Lightning ページを選択します。
4. 表示ラベルに「My Deliveries」 (私の配送) と入力します。
このテキストは、Salesforce1ナビゲーションメニューのLightning ページの名前に
なり、Lightning ページのヘッダーにも、対応するアイコンと共に表示されます。
5. [タブスタイル] ルックアップアイコンをクリックして、[タブスタイルの選択]
を表示します。
6. [地球] スタイルをクリックします。
選択したスタイルのアイコンは、Salesforce1 ナビゲーションメニューの Lightning
ページの表示ラベルの左側に表示されるアイコンです。
7. [次へ] をクリックします。
8. タブはすべてのプロファイルに適用される状態のままにしておきます。
メモ: Lightning ページの [デフォルトで表示] オプションおよび [デフォル
トで非表示] オプションは、他のタブの場合と同様には機能しません。
[デフォルトで表示] または [デフォルトで非表示] のどちらを選択しても、
Salesforce1 で選択したプロファイルの [Lightning ページ] メニュー項目が表
示されます。[タブを隠す] オプションを選択すると、Salesforce1 で選択し
たプロファイルの [Lightning ページ] メニュー項目が非表示になります。
9. [保存] をクリックします。
例:
うまくいきました。タブが作成されます。これで、Lightning ページを Salesforce1 で使用
できるようになりました。
188
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
もうひとこと: [Lightning ページ] タブ
カスタムタブスタイルの作成
組織に [ドキュメント] タブへのアクセス権があれば、[Lightning ページ] タブの独自の
カスタムタブスタイルを作成できます。[タブスタイルの選択] で、次の操作を行いま
す。
1. [独自のスタイルを作成] をクリックします。
2. [色] ルックアップアイコンをクリックして色選択ダイアログを表示し、色をク
リックして選択します。
3. [画像の挿入] をクリックしてドキュメントフォルダを選択し、使用する画像を
選択します。
または、[ドキュメント検索] をクリックして検索語を入力し、[Go!] をクリック
すると、検索語を含むドキュメントファイル名が表示されます。
メモ: このダイアログでは、20 KB 以下で、かつ、ドキュメントプロパティ
設定で [外部参照可] チェックボックスがオンになっているドキュメント
フォルダに含まれるファイルのみが表示されます。アイコンに使用され
ているドキュメントが削除されると、Salesforce によってデフォルトの多
色のブロックアイコン (
) に置き換えられます。
4. ファイルを選択し、[OK] をクリックします。新規カスタムタブウィザードに戻
ります。
アイコンのガイドライン
[Lightning ページ] タブで使用するカスタムアイコンを作成する場合、「カスタムアイ
コンのガイドラインとベストプラクティス」 (ページ 75)のガイドラインに従ってくだ
さい。
189
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
Salesforce1 で Lightning ページを使用できるように
する方法
「Salesforce1 ナビゲーションメニューのカスタマイズ」 (ページ 29)では、Salesforce1 ナ
ビゲーションメニュー項目とナビゲーションのしくみについていくつか説明しまし
た。また、Acme Wireless モバイル技術者のナビゲーションメニュー構造のカスタマイ
ズも行いました。その後、「Visualforce ページを使用した Salesforce1 の拡張」 (ページ
91)の章で、Visualforce ページをメニューに追加しました。
今度は、Lightning ページ (カスタムアプリケーション) を Salesforce1 ナビゲーションメ
ニューに追加してメニューをさらに増やします。
実際に試す: Lightning ページを Salesforce1 ナビゲー
ションメニューに追加する
メニューに配置する最初の項目が、ユーザの Salesforce1 のランディングページに表示
されます。Acme Wireless の配送運転手は、Salesforce1 を開くたびに Deliveries アプリケー
ションをランディングページとして表示する必要はありませんが、アクセスする必要
はあります。これをメニューの [アプリケーション] セクションに配置しましょう。
1. [設定] から、[クイック検索] ボックスに「モバイルナビゲーション」と入力し、
[Salesforce1 ナビゲーション] を選択します。
2. 選択可能な項目のリストで、[Lightning ページ] タブの [My Deliveries (私の配送)] を
選択して、[追加] をクリックします。
3. [上へ] 矢印と [下へ] 矢印を使用して、[My Deliveries (私の配送)] を [スマート検索
項目] メニュー項目のすぐ下に配置します。
これにより、Deliveries アプリケーションがメニューの [アプリケーション] セク
ションの最初の項目になります。
4. [保存] をクリックします。
これで完成です。Salesforce1 でテストしてみましょう。
Salesforce1 で Lightning ページをテストする
1. モバイルデバイスで Salesforce1 アプリケーションを開きます。
190
第 15 章
2.
Lightning ページを使用したユーザインターフェースの拡張
をタップしてナビゲーションメニューにアクセスします。
3. [アプリケーション] セクションまでスクロールダウンします。
このセクションには、実際の「アプリケーション」であるかどうかに関係な
く、[スマート検索項目] の要素の下に配置されたメニュー項目が表示されます。
4. [My Deliveries (私の配送)] をタップします。
Lightning ページが表示されます。上部に [My Deliveries (私の配送)] 表示ラベルがあ
り、[今日の配送] と [最近使ったデータ] を表す 2 つのリストカードが表示され
ています。今日は予定されている配送がないため、最初のリストビューは空に
なっています。
例: [今日の配送] コンポーネントでは、今日の日付でスケジュールされた、「配
送中」状況の配送が選択されます。Developer Edition 組織に要件を満たすレコード
がある場合、Lightning ページは次のようになります。
191
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
もうひとこと: Lightning ページ
Lightning ページを操作するときには、Lightning ページの範囲に含めることができるコ
ンポーネントは 25 個以下であることに留意してください。
Lightning ページの変更
Lightning ページを変更する場合、XML の更新が必要になることがあります。次の要素
を変更する場合は、Lightning ページ XML を変更して再リリースする必要があります。
• 表示されるリストビュー
• 各種リストビューの表示順序 (リストビューの内容ではない)
• [最近使ったデータ] リストに表示されるオブジェクト
• 使用可能なグローバルアクション
192
第 15 章
Lightning ページを使用したユーザインターフェースの拡張
次の項目を更新する場合は、Lightning ページ XML を変更する必要はなく、Salesforce フ
ルサイトで実行できます。
• リストビューコンポーネントの内容
• グローバルアクション
Lightning ページのパッケージ化
パッケージでの Lightning ページの動作についての詳細は、『ISVforce ガイド』を参照し
てください。
193
第 16 章
トピック:
•
ナビゲーションメ
ニューまたはアク
ションバーを使用
する状況
•
Visualforce のガイド
ラインとベストプ
ラクティス
•
Force.com Canvas の
ガイドラインとベ
ストプラクティス
開発のガイドラインとベストプラ
クティス
ここまで Salesforce1 アプリケーション開発の主要な概念を学
習し、モバイルユーザ向けにカスタマイズした機能を簡単
に追加できることがわかりました。この章では、すべての
Salesforce App Cloud 開発者に提供されているプログラム型ツー
ルを使用して、高度なカスタムアクションおよびページを
開発するための概念的なガイドラインと具体的なベストプ
ラクティスのいくつかに重点を置いて説明します。
Visualforce ページを作成してカスタムアクションやモバイル
カードを追加する場合でも、キャンバスアプリケーション
を作成または Salesforce1 に統合する場合でも、これらの原則
と手法は、モバイルユーザに最適な操作性を提供するため
に役立ちます。
195
第 16 章
開発のガイドラインとベストプラクティス
ナビゲーションメニューまたはアクションバーを
使用する状況
このガイドの各例で確認してきたように、Salesforce1アプリケーションを拡張してカス
タマイズし、ナビゲーションメニューまたはアクションバーからユーザが新機能にア
クセスできるようにすることが可能です。ここでは、どのような状況でどちらの方法
を使用する必要があるかについて説明します。
ナビゲーションメニュー
ナビゲーションメニューは、をタップすると表示されます。このメニューは、
グローバルコンテキストで使用できます。たとえば、ユーザがログインしてフィー
ドの項目を表示している場合、ナビゲーションメニューをタップして開くと、メ
ニュー項目が表示されます。通常、これらのメニュー項目は、特定のオブジェク
トのコンテキストでは発生しない、より複雑なビジネスプロセスにリンクしてい
ます。
ナビゲーションメニューのメニュー項目を選択したユーザには、全機能を備えた
完全なページまたはアプリケーションを表示します。そのため、ページまたはア
プリケーションに多くの項目が含まれていて、ユーザがスクロールしてより複雑
なプロセスを実行する必要がある場合は、ページまたはアプリケーションをナビ
ゲーションメニューから使用できるようにします。
このガイドの例では、「Visualforce ページを使用した Salesforce1 の拡張」 (ページ 91)
で、[Find Warehouses (倉庫の検索)] Visualforce ページをナビゲーションメニューから使
用できるようにしました。モバイル技術者がメニュー項目をタップすると、Google
マップを含むページに近隣の倉庫が表示されます。このページの機能はグローバ
ルです。つまりスキーマの特定のオブジェクトのコンテキストには含まれません。
196
第 16 章
開発のガイドラインとベストプラクティス
アクションバー
アクションバーとそのアクションメニューは、アクションをサポートするすべて
のページに表示されます。アクションバーは、少量のデータを表示し、ユーザが
短いクイックアクションを実行できるようにするカスタム機能にアクセスするた
めのものです。オブジェクトのコンテキストで実行する機能がある場合は、アク
ションバーのアクションとして追加します。
このガイドの例では、カスタマー取引先内のアクションバーから使用できる [Create
Quick Order (注文の簡易作成)] アクションがあります。モバイル技術者は、カスタ
マー取引先での修理作業中に、アクションをタップして商品名と距離を入力する
だけで、部品の在庫がある倉庫を検索できます。続いて、技術者が数量を入力す
ると、顧客の注文が作成されます。この Visualforce ページの機能は、カスタマー取
引先のコンテキスト内で実行されます。アクションには数項目しか含まれていな
いため、ユーザはすばやくページを操作し、シンプルなプロセスで検索して注文
を作成できます。
197
第 16 章
開発のガイドラインとベストプラクティス
Visualforce のガイドラインとベストプラクティス
Visualforce ページは、Salesforce1 アプリケーションで自動的にモバイル対応になるわけ
ではありません。Salesforce1 コントロールが優先がされるため Salesforce の標準のヘッ
ダーとサイドバーが無効になります。また、Visualforce ページから Salesforce1 ナビゲー
ション管理に接続可能にするために JavaScript API を使用できます。ページのその他の
点は変わりありません。ただし、デスクトップ用に構築された Visualforce ページは、
Salesforce1 内でも使用できますが、デスクトップ向けのように感じられます。
幸い、Salesforce1アプリケーションでは、簡単な方法で各自のアプリケーションを見や
すくすることができます。Salesforce フルサイトと Salesforce1 アプリケーションの両方
でページが機能するようにコードを書き換えるか、モバイル固有のページを作成しま
す。
この章では、次の方法のベストプラクティスについて説明します。
• モバイルとデスクトップで Visualforce ページを共有する。
• Visualforce をモバイルまたはデスクトップから除外する。
• Visualforce ページに最適なアーキテクチャを選択する。
• 各自のページに効果的なページレイアウトを選択する。
198
第 16 章
開発のガイドラインとベストプラクティス
• ユーザの入力およびナビゲーションを管理する。
• Visualforce ページをカスタムアクションとして使用する。
• 最高のパフォーマンスが得られるようにページを調整する。
モバイルとデスクトップでの Visualforce ページの共有
Visualforce ページを Salesforce1 モバイルアプリケーションと Salesforce フルサイトの両方
に表示する場合は、どちらの環境でもサポートされるように書き換える必要がありま
す。書き換えの対象となるのは、カスタムアクションとして使用する Visualforce ペー
ジや、標準のページレイアウトに追加される Visualforce ページなどですが、ページレ
イアウトの [モバイルカード] セクションに追加されるものは対象外です。
両方の環境で機能させる必要のある Visualforce ページは次のとおりです。
• カスタムアクションとして使用するページ。カスタムアクションは、Salesforce1 モ
バイルアプリケーションのアクションバーとSalesforceフルサイトのパブリッシャー
メニューに表示されます。
• ページの [Salesforce モバイルアプリケーションおよび Lightning ページでの
使用が可能] が有効のときに、通常のページレイアウトに追加されたページ。
• 通常のページレイアウトに追加されたカスタムの Visualforce ボタンまたはリンク。
• Visualforce ページによる、[新規]、[編集]、[表示]、[削除]、[コピー] アクションの標
準ボタンの上書き。標準のリストおよびタブコントロールの上書きは Salesforce1 で
はサポートされていません。ボタンの上書きは、そのページの [Salesforce モ
バイルアプリケーションおよび Lightning ページでの使用が可能] が有効の場合
を除き、Salesforce1 アプリケーションに表示されません。
メモ: 対応するボタンを上書きする Visualforce ページの [Salesforce モバイ
ルアプリケーションおよび Lightning ページでの使用が可能] が無効の場合、
Visualforce ページで上書きされた標準ボタンは Salesforce1 のレコード詳細ページ
およびレコードリストに表示されません。
199
第 16 章
開発のガイドラインとベストプラクティス
モバイルまたはデスクトップからの Visualforce ページ
の除外
VisualforceページをSalesforce1アプリケーションにのみ表示するには、そのページをペー
ジレイアウトの [モバイルカード] セクションに追加します。VisualforceページをSalesforce1
アプリケーションまたは Salesforce フルサイトに追加するには、タブ設定とナビゲー
ション設定を使用します。
デスクトップ限定またはモバイル限定として設定可能な Visualforce ページは、次のと
おりです。
• ページレイアウトにモバイルカードとして追加されるページ。これらのページは、
Salesforce1 アプリケーションにのみ表示されます。
• ページの [Salesforce モバイルアプリケーションでの使用が可能] が無効のとき
に、通常のページレイアウトに追加されるページ。これらのページは、Salesforceフ
ルサイトにのみ表示されます。
• Visualforce のタブで使用されるページ。Salesforce1 のナビゲーションには Salesforce フ
ルサイトのナビゲーションにタブを追加するのとは別にタブを追加します。
Salesforce1 の Visualforce ページのアーキテクチャの選
択
Salesforce App Cloud では、Visualforce ページを設計および構造化する数種類の方法がサ
ポートされており、開発時間、開発者に必要なスキル、カスタム機能をどの程度
Salesforce1 に近づけるかの点でそれぞれメリットとデメリットが異なります。
ページの構造には次のいずれかのアプローチを採用します。
• 標準の Visualforce ページ (ページ 201)
• Visualforce と HTML の組み合わせ (ページ 202)
• JavaScript Remoting と静的 HTML (ページ 205)
200
第 16 章
開発のガイドラインとベストプラクティス
標準の Visualforce ページ
通常の Visualforce ページは、モバイル向けに最適化された Web ページと比べてユーザ
の操作性が若干劣るものの、モバイルブラウザに適切に表示され、表示されたとおり
使用できます。ページは Salesforce フルサイトと同様に表示され、他の Salesforce1 の機
能とはビジュアルデザインが異なります。
「Visualforce ページを使用した Salesforce1 の拡張」 (ページ 91)で、Visualforce ページを
Salesforce1 に簡単に追加できることを確認しました。
制限事項
ユーザの操作性に関しては、次の制限があります。
• タップターゲット (ボタン、リンク、フォーム項目など) がマウスのカーソル用に
最適化されているため、指先では正確にタップしにくい場合があります。
• ビジュアルデザインが変更されないため、Salesforce1 のモバイル用に最適化された
最新のビジュアルデザインとマッチしないことがあります。
開発期間が限られている場合は、こうした制限もやむを得ないものと思われます。標
準の Visualforce の開発については、『Visualforce 開発者ガイド』に詳述されています。
例: 標準の Visualforce ページの例
次のサンプルコードは、ユーザが倉庫レコードを編集できるようにする、標準の
Visualforce ページを示します。編集機能は、オブジェクトの標準コントローラに
よって提供されます。
<apex:page standardController="Warehouse__c">
<apex:form>
<apex:pageBlock title="{! warehouse__c.Name }">
<apex:pageBlockSection title="Warehouse Details" columns="1">
<apex:inputField value="{! warehouse__c.Street_Address__c
}"/>
<apex:inputField value="{! warehouse__c.City__c }"/>
<apex:inputField value="{! warehouse__c.Phone__c }"/>
</apex:pageBlockSection>
201
第 16 章
開発のガイドラインとベストプラクティス
<apex:pageBlockButtons location="bottom">
<apex:commandButton action="{! quickSave }" value="Save"/>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</apex:page>
このページは、Salesforce1 アプリケーションと Salesforce フルサイトの両方で使用
できます。どちらのコンテキストでも標準のデスクトップ用 Visualforce ページと
して表示されます。
Visualforce と HTML の組み合わせ
作成するモバイル対応ページのビジュアルデザインを Salesforce1 アプリケーションに
近づける場合は、フォーム要素や出力テキストに Visualforce タグ、ページ構造に静的
HTML を使用します。モバイル限定ページの場合は、既存の Visualforce ページをこの方
法で簡単に変換できますが、Salesforce1 アプリケーションと Salesforce フルサイトの両
方で使用するページにはこの方法はあまり適していません。
この方法で設計された Visualforce も、標準の要求-応答サイクル、標準のコントローラ
機能、フォーム項目用の <apex:inputField>、POSTBACK およびビューステートなど
を使用することから、「標準」のVisualforce に該当します。Salesforce フルサイトのペー
ジ作成との主な相違点は、静的 HTML が優先されるため、構造をページに追加するた
めの Visualforce タグの使用が減少または排除されることです。つまり、
<apex:pageBlock>、<apex:pageBlockSection> などが、<div>、<p>、<span>
などに置換されます。
このアプローチではまた、ページ要素のデザインを管理するために CSS スタイルシー
トを作成する必要があります。この点は、Visualforceコンポーネントの使用時に、自動
適用される組み込みのスタイルが提供される点とは異なります。スタイルシートは、
作成に時間のかかることもありますが、Salesforce1のビジュアルデザインにかなり近づ
けることができます。同時に、この方法で設計されたページのビジュアルデザインが
Salesforce フルサイトと同じになることはありません。
202
第 16 章
開発のガイドラインとベストプラクティス
このアプローチの Visualforce ページへの適用
Salesforce1で使用するページの作成にこのアプローチを採用する場合は、次の一般的な
ルールに従います。
• 次の Visualforce タグは使用しません。
– <apex:pageBlock>
– <apex:pageBlockButtons>
– <apex:pageBlockSection>
– <apex:pageBlockSectionItem>
– <apex:pageBlockTable>
• フォームには <apex:form>、<apex:inputField> または <apex:input>、
<apex:outputLabel> を使用します。
• 編集不能のテキストには <apex:outputText> または Visualforce を使用します。
• ページの構造の構築には、<div>、<span>、<h1>、<p> など、任意の HTML を使
用します。
• CSS スタイル設定を使用して、希望するビジュアルデザインを適用します。
利点と制限事項
このアプローチには次の利点があります。
• 通常の Visualforce 開発ツールおよびプロセスを使用して、かなり短時間で開発でき
ます。
• 既存のページをかなり簡単に再設定できます。
• Salesforce1 のデザインに近づけることができます。
留意すべき制限事項
• このアプローチでは、通常のVisualforce要求が往復処理されるため、JavaScript Remoting
を使用してモバイル用に完全に最適化するアプローチに比べてデータペイロード
が大きくなります。
• <apex:pageBlock> と関連コンポーネントによって自動的に追加されたスタイル
を置換する CSS スタイルを追加する余分な作業があります。
203
第 16 章
開発のガイドラインとベストプラクティス
例: Visualforce と HTML を組み合わせたページの例
次のサンプルコードは、ユーザが倉庫レコードを編集できるようにする、HTML
と Visualforce ページの組み合わせを示します。編集機能は、オブジェクトの標準
コントローラによって提供されます。
<apex:page standardController="Warehouse__c">
<style>
html, body, p { font-family: sans-serif; }
</style>
<apex:form >
<h1>{!Warehouse__c.Name}</h1>
<h2>Warehouse Details</h2>
<div id="theForm">
<div>
<apex:outputLabel for="address" value="Street Address"/>
<apex:inputField id="address"
value="{! warehouse__c.Street_Address__c}"/>
</div>
<div>
<apex:outputLabel for="city" value="City"/>
<apex:inputField id="city"
value="{! warehouse__c.City__c}"/>
</div>
<div>
<apex:outputLabel for="phone" value="Phone"/>
<apex:inputField id="phone"
value="{! warehouse__c.Phone__c}"/>
</div>
</div>
<div id="formControls">
<apex:commandButton action="{!quickSave}" value="Save"/>
</div>
</apex:form>
</apex:page>
204
第 16 章
開発のガイドラインとベストプラクティス
このページは、Salesforce1 アプリケーションと Salesforce フルサイトの両方で使用
できます。Salesforceフルサイトでは標準ページとして表示されますが、フォーム
は Salesforce フルサイトのスタイルではありません。Salesforce1 アプリケーション
では、Salesforce1 のビジュアルスタイルとほぼ同じように表示されます。スタイ
ルを追加すれば、両バージョンのページのビジュアルスタイルをさらに近づける
ことができます。
JavaScript Remoting と静的 HTML
JavaScript Remoting と静的 HTML を組み合わせて、高度なパフォーマンスとユーザイン
ターフェースをSalesforce1に匹敵させ、ユーザの操作性を最大限に高めます。このアー
キテクチャでは、JavaScript のページ要素のレンダリングが優先され、Visualforce タグの
大半が回避されます。このオプションでは、開発者に最も高度な専門知識が求めら
れ、標準の Visualforce または Visualforce と HTML の組み合わせよりも設定に多少時間がか
かることがあります。Salesforce モバイルパックを使用すると、すぐに着手できるほ
か、最先端のモバイル Web アプリケーションテクノロジを活用できます。
この方法で設計されたVisualforceは、要求-応答サイクルに対する制御が強化され、ペー
ジの再読み込みの代わりに JavaScript を使用したページの更新が優先されるため、標準
のVisualforceの簡略化された自動機能の多くが使用されません。このアプローチはペー
ジのパフォーマンスを大幅に高めることができます。帯域幅が狭く、遅延の大きいワ
イヤレスネットワーク接続でモバイルデバイスを文字通りモバイルとして使用する場
合は特に有効です。この方法の欠点は記述するコードが増えることで、ApexとVisualforce
のほか、JavaScript、JavaScript Remoting、HTML5、ご使用のモバイルツールキット、CSS な
どの専門知識が必要です。一方、利点は、モバイル開発の最新鋭のツールを使用して
作業できることと、この手法で構築したページにより、Salesforce1と完全統合するカス
タム機能を最も適切で最も完璧な方法で組み込めることです。
デスクトップ用の Visualforce ページも、Salesforce1 用のページもこのアプローチで構築
できます。さらに、このアプローチによるページは、スタイル設定をカスタマイズす
れば 2 つの環境で共有することも可能です。ただし、Salesforce フルサイトのデザイン
に近づけることは容易なことではありません。最も重要なことは、設計するページの
応答性を最大限に高められることと、幅広いデバイスやフォームファクタに適合させ
られることです。
205
第 16 章
開発のガイドラインとベストプラクティス
このアプローチの Visualforce ページへの適用
Salesforce1アプリケーションのページの作成にこのアプローチを採用する場合は、次の
一般的なプロセスに従います。
1. 任意の Salesforce Mobile パック (Salesforce Developers で入手可) を静的リソースとし
て組織にインストールします。
2. ページの docType を html-5.0 に設定します。標準のスタイルシートとヘッダー
を無効にすることを強くお勧めします。次に例を示します。
<apex:page standardController="Warehouse__c"
extensions="WarehouseEditor"
showHeader="false" standardStylesheets="false"
docType="html-5.0">
3. Visualforceリソースタグを使用して、選択したモバイルツールキットのスクリプ
トとスタイルをページに追加します。次に例を示します。
<apex:includeScript
value="{!URLFOR(
$Resource.Mobile_Design_Templates,
'Mobile-Design-Templates-master/common/js/
jQuery2.0.2.min.js'
)}"/>
4. HTML5 とモバイルツールキットのタグおよび属性を使用して、ページのスケル
トンを作成します。
5. Javascript 関数を、ユーザ操作に応答するハンドラとしてページに追加します。
JavaScript Remoting を使用して、Apex @RemoteAction メソッドを呼び出します。
このメソッドは、レコードの取得、DML の実行などを行います。
6. ユーザアクションやページ更新を処理する Javascript 関数を追加します。HTML 要
素を JavaScript で構築してから、ページのスケルトンに追加して、ページ更新を
実行します。
例: JavaScript Remoting と静的 HTML ページの例
次のサンプルコードは、ユーザが倉庫レコードを編集できるようにする、Remoting
と HTML を組み合わせたVisualforceページを示します。編集機能は、JavaScript Remoting
206
第 16 章
開発のガイドラインとベストプラクティス
の要求に応答する @RemoteAction メソッドが設定されたコントローラ拡張に
よって提供されます。
<apex:page standardController="Warehouse__c"
extensions="WarehouseEditor"
showHeader="false" standardStylesheets="false"
docType="html-5.0" applyHtmlTag="false" applyBodyTag="false">

<apex:stylesheet
value="{!URLFOR($Resource.Mobile_Design_Templates,
'Mobile-Design-Templates-master/common/css/app.min.css')}"/>
<apex:includeScript
value="{!URLFOR($Resource.Mobile_Design_Templates,
'Mobile-Design-Templates-master/common/js/jQuery2.0.2.min.js')}"/>
<apex:includeScript
value="{!URLFOR($Resource.Mobile_Design_Templates,
'Mobile-Design-Templates-master/common/js/jquery.touchwipe.min.js')}"/>
<apex:includeScript
value="{!URLFOR($Resource.Mobile_Design_Templates,
'Mobile-Design-Templates-master/common/js/main.min.js')}"/>
<head>
<style>
html, body, p { font-family: sans-serif; }
input { display: block; }
</style>
<script>
$(document).ready(function(){
// Load the record
loadWarehouse();
});
// Utility; parse out parameter by name from URL query string
$.urlParam = function(name){
207
第 16 章
開発のガイドラインとベストプラクティス
var results = new RegExp('[\\?&]' + name + '=([^&#]*)')
.exec(window.location.href);
return results[1] || 0;
}
function loadWarehouse() {
// Get the record Id from the GET query string
warehouseId = $.urlParam('id');
// Call the remote action to retrieve the record data
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.WarehouseEditor.getWarehouse}',
warehouseId,
function(result, event){;
if(event.status){
console.log(warehouseId);
$('#warehouse_name').text(result.Name);
$('#warehouse_address').val(
result.Street_Address__c);
$('#warehouse_city').val(result.City__c);
$('#warehouse_phone').val(result.Phone__c);
} else if (event.type === 'exception'){
console.log(result);
} else {
// unexpected problem...
}
});
}
function updateWarehouse() {
// Get the record Id from the GET query string
warehouseId = $.urlParam('id');
// Call the remote action to save the record data
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.WarehouseEditor.setWarehouse}',
warehouseId, $('#warehouse_address').val(),
$('#warehouse_city').val(),
$('#warehouse_phone').val(),
function(result, event){;
if(event.status){
console.log(warehouseId);
$('#action_status').text('Record updated.');
208
第 16 章
開発のガイドラインとベストプラクティス
} else if (event.type === 'exception'){
console.log(result);
$('#action_status').text(
'Problem saving record.');
} else {
// unexpected problem...
}
});
}
</script>
</head>
<body>
<div id="detailPage">
<div class="list-view-header" id="warehouse_name"></div>
<div id="action_status"></div>
<section>
<div class="content">
<h3>Warehouse Details</h3>
<div class="form-control-group">
<div class="form-control form-control-text">
<label for="warehouse_address">
Street Address</label>
<input type="text" id="warehouse_address" />
</div>
<div class="form-control form-control-text">
<label for="warehouse_city">City</label>
<input type="text" id="warehouse_city" />
</div>
<div class="form-control form-control-text">
<label for="warehouse_phone">Phone</label>
<input type="text" id="warehouse_phone" />
</div>
</div>
</div>
</section>
<section class="data-capture-buttons one-buttons">
<div class="content">
<section class="data-capture-buttons one-buttons">
209
第 16 章
開発のガイドラインとベストプラクティス
<a href="#" id="updateWarehouse"
onClick="updateWarehouse();">save</a>
</section>
</div>
</section>
</div> 
</body>
</apex:page>
静的 HTML には、空のフォーム項目など、ページのシェルが用意されています。
Javascript 関数は、レコードを読み込み、フォーム項目に入力して、更新された
フォームデータを Salesforce に送り返します。
このページは、Salesforce フルサイトでも使用できますが、Salesforce1 アプリケー
ションページとして設計されているため、通常の Visualforce ページとはデザイン
がかなり異なります。
例: JavaScript Remoting と静的 HTML コントローラの例
Salesforce1 ページを作成する他の 2 つのアプローチとは異なり、Remoting + HTML の
アプローチでは、標準のコントローラ機能を使用してSalesforceのデータを取得し
たり保存したりすることがありません。その代わりに、コントローラ拡張または
カスタムコントローラを作成して、ページに必要な @RemoteAction メソッドを
追加します。上記のページをサポートする、簡略化されたコントローラ拡張は次
のようになります。
global with sharing class WarehouseEditor {
// Stub controller
// We're only using RemoteActions, so this never runs
public WarehouseEditor(ApexPages.StandardController ctl){ }
@RemoteAction
global static Warehouse__c getWarehouse(String warehouseId) {
// Clean up the Id parameter, in case there are spaces
warehouseId = warehouseId.trim();
// Simple SOQL query to get the warehouse data we need
210
第 16 章
開発のガイドラインとベストプラクティス
Warehouse__c wh = [
SELECT Id, Name, Street_Address__c, City__c, Phone__c
FROM Warehouse__c
WHERE Id = :warehouseId];
return(wh);
}
@RemoteAction
global static Boolean setWarehouse(
String whId, String street, String city, String phone) {
// Get the warehouse record for the Id
Warehouse__c wh = WarehouseEditor.getWarehouse(whId);
// Update fields
// Note that we're not validating / sanitizing, for
simplicity
wh.Street_Address__c = street.trim();
wh.City__c = city.trim();
wh.Phone__c = phone.trim();
// Save the updated record
// This should be wrapped in an exception handler
update wh;
return true;
}
}
Salesforce1 で避けるべき Visualforce のコンポーネント
および機能
Visualforce のコアコンポーネント (apex の名前空間にあるコンポーネント) の大半は、
Salesforce1で正常に機能します。ただし、モバイル向けに最適化されていたり、すべて
の機能が Salesforce1 で動作したりするわけではありません。次の簡単なルールに従う
と、Visualforce ページの Salesforce1 のユーザ操作性が向上します。
211
第 16 章
開発のガイドラインとベストプラクティス
一般に、<apex:pageBlock> および子コンポーネントのような構造上のコンポーネ
ントや、<apex:pageBlockTable> のような Salesforce のデザインを模倣するその他
のコンポーネントは回避します。これらのコンポーネントを使用する必要がある場合
は、デフォルトの 2 列ではなく、<apex:pageBlockSection columns="1"> を使用
して 1 列に設定します。
折り返されず、横に広がるコンポーネントは避けます。特に、<apex:detail>、
<apex:enhancedList>、<apex:listViews>、<apex:relatedList> はいずれも
サポートされていません。<apex:dataTable> を使用してテーブルを作成するとき
に、デバイスの幅を考慮します。
<apex:inlineEditSupport> の使用を回避します。インライン編集は、マウスベー
スのデスクトップアプリケーションでは適切に機能するユーザインターフェースパ
ターンですが、特に画面の小さい電話端末など、タッチベースのデバイスでは使いに
くくなります。
<apex:inputField> は、テキスト、メール、電話番号のような基本的な入力項目と
して表示される項目には使用できますが、日付項目や参照項目など入力ウィジェット
を使用する項目種別では回避します。
<apex:scontrol> は使用しないでください。Sコントロールは、Salesforce1 のどの部
分でもサポートされていません。
Salesforce1 のページでは、<apex:page> で renderAs="PDF" を設定して PDF を表示
することはできません。
サポート対象外の Visualforce のコンポーネント
Salesforce1 でサポートされない Visualforce のコンポーネントで、Salesforce1 アプリケー
ションと連携させる Visualforce ページで使用すべきでないものを次に示します。
• <analytics:reportChart>
• <apex:detail>
• <apex:emailPublisher>
• <apex:enhancedList>
• <apex:flash>
• 入力に、基本的なフォーム項目の代わりに、ウィジェットを使用する項目種別の
<apex:inputField>
• <apex:listViews>
212
第 16 章
開発のガイドラインとベストプラクティス
• <apex:logCallPublisher>
• <apex:relatedList>
• <apex:scontrol>
• <apex:sectionHeader>
• 選択リスト項目の <apex:selectList>
• <apex:vote>
警告: <apex:enhancedList> コンポーネントを含む、埋め込みの Visualforce ペー
ジ (ページレイアウトに追加されたページ) では、iOS で Salesforce1 アプリケーショ
ンがクラッシュすることがあります。
apex の名前空間外にある標準コンポーネント (<liveagent:*>、<chatter:*> など)
は、Salesforce1 でサポートされていません。
カスタムコンポーネントは、それ自体がサポート対象外コンポーネントを使用してい
なければ、Salesforce1 の Visualforce で使用できます。
効果的なページレイアウトの選択
使用されるコンテキストに適したページレイアウトを使用して、Salesforce1アプリケー
ション内で見栄えの良い、機能的な Visualforce ページを設計します。メインナビゲー
ションのタブまたはアクションバーのカスタムアクションとして追加されるページ
は、デバイスのほぼ全画面を使用でき、垂直にスクロールできます。一方、オブジェ
クトのページレイアウトに追加される Visualforce は、指定の限定された空間に合わせ
る必要があります。
通常、Visualforceをページレイアウトに追加すると、参照のみの場合は一目で情報を把
握でき、機能性が最も高まります。複数項目のフォームのようなユーザの操作を必要
とする機能は、メインナビゲーションのタブとして、またはアクションバーのカスタ
ムアクションとして追加することにより、全画面ページに配置します。
モバイルカードレイアウト
モバイルカードのレイアウトは、サイズと配置の両方で最も制限されます。オブジェ
クトのページレイアウトにモバイルカードとして追加される Visualforce ページは、
Salesforce1のオブジェクトの関連リストページで、ページの最初の項目としてヘッダー
の下に表示されます。
213
第 16 章
開発のガイドラインとベストプラクティス
1. レコードヘッダーはレコードが読み込まれたときに表示されますが、ユーザが
上にスクロールすれば画面には表示されなくなります。画面上にあるときは、
すべてのデバイスで高さが 158 ピクセルで、画面全体の幅が使用されます。レ
コードヘッダーの表示は制御できません。
2. モバイルカードはレコードのすべての関連項目の上に表示されます。
3. 幅を 100% に設定します。要素は両側のパディングを差し引いて自動的にサイ
ズ変更されます。モバイルカードのコンテンツはスクロールできないため、指
定した範囲にフィットすることを確認してください。
4. ページレイアウトエディタでピクセル単位で高さを設定して、モバイルカード
の高さを制御します。設定した高さよりモバイルカードのコンテンツが短い場
合でも、モバイルカードの領域は設定された高さをそのまま使用します。その
場合、余分な領域は空白になります。設定した高さよりカードのコンテンツが
長い場合、コンテンツは切り捨てられます。サポートする予定のデバイスの中
の最小のデバイスで画面の高さを超えないようにモバイルカードを作成するこ
とをお勧めします。環境に適した画面要素の高さを設定してください。
5. レコードの関連項目はすべてのモバイルカードの後に表示されます。
複数のモバイルカードを追加できますが、これらを通り越して関連リストまでスク
ロールするのは、ユーザの操作性ですぐに問題になります。1 つか 2 つのみ追加する
ことをお勧めします。ページを表示するのに全画面が必要な場合は、代わりにオブ
ジェクトのカスタムアクションにページを移動することを検討してください。
214
第 16 章
開発のガイドラインとベストプラクティス
通常の Salesforce ヘッダーおよびサイドバーは、モバイルカードとして追加された
Visualforce ページから自動的に削除されます。ページの開発中は、それらと Salesforce フ
ルサイトのスタイルシートを明示的に無効にすると便利な場合があります。さらに、
ページで Google Maps API を使用する場合、Google は HTML5 docType の使用を勧めていま
す。これらをすべて実行する <apex:page> タグを次に示します。
<apex:page standardController="Warehouse__c"
docType="html-5.0" showHeader="false" standardStylesheets="false">
ページレイアウトでの Visualforce
オブジェクトのページレイアウトに追加された Visualforce ページはレコード詳細ペー
ジに表示されます。モバイルカードと異なり、Salesforce1レコード詳細画面上のVisualforce
要素とその上下に置く項目や他のレコード詳細の配置は、オブジェクトのページレイ
アウトで配置を変更することにより制御できます。この方法で追加された Visualforce
ページは、項目およびその他の要素の順番と同じ規則に従います。
1. レコードヘッダーはレコードが読み込まれたときに表示されますが、ユーザが
上にスクロールすれば画面には表示されなくなります。画面上にあるときは、
すべてのデバイスで高さが 158 ピクセルで、画面全体の幅が使用されます。レ
コードヘッダーの表示は制御できません。
215
第 16 章
開発のガイドラインとベストプラクティス
2. Salesforce1 によって自動的に生成されるレコードコントロールと詳細。
3. オブジェクトのページレイアウトに追加される Visualforce ページ。
4. 幅を 100% に設定します。要素は両側のパディングを差し引いて自動的にサイ
ズ変更されます。
5. ページレイアウトエディタで項目の高さをピクセル単位で設定して、Visualforce
ページの領域の高さを制御します。コンテンツがそれより短い場合でも、
Visualforce要素では厳密にこの高さが使用されます。その場合、余分な領域は空
白になります。ページのコンテンツがそれより高い場合、コンテンツは切り抜
かれて表示されます。サポート対象の最小のデバイス画面の高さの範囲内でイ
ンラインの Visualforce ページを設定することをお勧めします。
複数のカードがある場合と同様に、複数のインラインの Visualforce ページをページレ
イアウトに追加することはできますが、この後のページの残り部分にスクロールする
ユーザの操作性にすぐに問題が生じます。Visualforce ページ要素を 1 行に 3 つ以上追加
しないことをお勧めします。Visualforce要素は、項目などの通常のページ要素で区切っ
てください。ページを表示するのに全画面が必要な場合は、代わりにオブジェクトの
カスタムアクションにページを移動することを検討してください。
ページレイアウトに追加された Visualforce ページでは、通常の Salesforce ヘッダーおよ
びサイドバーが自動的に削除されます。ページの開発中は、それらとSalesforceフルサ
イトのスタイルシートを明示的に無効にすると便利な場合があります。さらに、ペー
ジで Google Maps API を使用する場合、Google は HTML5 docType の使用を勧めています。
これらをすべて実行する <apex:page> タグを次に示します。
<apex:page standardController="Warehouse__c"
docType="html-5.0" showHeader="false" standardStylesheets="false">
全画面レイアウト
Salesforce1 ナビゲーションメニューに、またはカスタムアクションとしてアクション
バーに追加された Visualforce ページでは、画面全体のほとんどを使用でき、より多く
の情報を表示し、複雑なインターフェースを使用できます。
216
第 16 章
開発のガイドラインとベストプラクティス
1. Salesforce1 ヘッダーから Salesforce1 メインメニューへのアクセスが可能です。こ
のヘッダーの高さは 42 ピクセルです。ヘッダーのコンテンツは変更できませ
ん。
2. デバイス画面の残りは、Visualforce ページに使用されます。
Salesforce1 アプリケーションに表示されたとき、Salesforce の標準のヘッダーおよびサイ
ドバーは、モバイルカードとして使用されたり、ページレイアウトに追加されたりす
る Visualforce ページと同様に、自動的に削除されます。ただし、アクションバーのカ
スタムアクションとして使用される Visualforce ページは Salesforce フルサイトと共有さ
れますが、Salesforce1ナビゲーションに追加されたページは共有される場合も共有され
ない場合もあります。Salesforce フルサイトと共有されるページでは、Salesforce の標準
のヘッダーとサイドバーの明示的な削除は、サイトのすべての Visualforce の標準動作
である場合を除き、行わないようにしてください。
ユーザの入力と操作
<apex:input>、type 属性、およびパススルー HTML 属性を使用すると、モバイルで
使いやすいフォームとユーザインターフェースをネイティブモバイルブラウザ機能を
活用して効率的に作成できます。
キーボードとマウスなしで、モバイルデバイス、特に携帯電話を使用して、標準 HTML
フォームを入力および操作するのは難しい場合があります。要求の実行に JavaScript
Remotingを使用していないVisualforceページでは、モバイルユーザを考慮してフォーム
217
第 16 章
開発のガイドラインとベストプラクティス
入力用の Visualforce コンポーネントを選択します。フォームおよびユーザインター
フェースコントロールを改善する場合は、新しい HTML5 とモバイルブラウザの機能を
活用するように Visualforce ページを変更することが使いやすさの向上に最も役立ちま
す。
効率的な入力要素を選択する
ユーザ入力の取得には、できるだけ <apex:input> を使用します。<apex:input>
は、フォーム項目で期待されるデータに適応する、HTML5 に適した、モバイルで使用
しやすい汎用的な入力コンポーネントです。type 属性を使用して、クライアントブ
ラウザで、日付ピッカーなどの型に適したユーザ入力ウィジェットを表示したり、モ
バイルデバイスでの入力を容易にする型固有のキーボードを使用したりできるため、
<apex:inputField> よりも柔軟です。
また、<apex:inputField> を使用して、Salesforce オブジェクトの項目に対応する値
の HTML 入力要素も作成できます。<apex:inputField> は、基盤となる sObject 項目
のデータ型に対応するように、生成された HTML を適合させます。通常望ましいのは
この動作ですが、それ以外の場合は、type 属性を使用して、データ型の自動検出を
上書きします。ただし、<apex:inputField> は多くの HTML を生成し、その他のリ
ソースの読み込みを必要とすることに注意してください。これは、モバイルワイヤレ
ス接続経由で使用するのに最も効率的なコンポーネントではないことを意味します。
type 属性を使用してモバイルで使用しやすい入力要素を作成
する
<apex:input> コンポーネントおよび<apex:inputField> (使用している場合) に
type 属性を設定し、データ型固有のキーボードなど、タッチスクリーンで使用しや
すい入力ユーザインターフェースウィジェットを表示します。値は、Salesforce1アプリ
ケーションで表示するために生成された HTML <input> 要素にパススルーされます。
ユーザがいくつかのフォーム要素上を移動すると、各フォーム要素で、想定される
データ型に合った入力メソッドが表示されます。たとえば、テキスト項目は標準の
キーボードを表示し、メール項目は @ 記号や「.com」などの文字がキーに割り当てら
れたメール専用のキーボードを表示し、日付項目は日付ピッカーを表示します。
218
第 16 章
開発のガイドラインとベストプラクティス
このしくみを説明するフォームの例を次に示します。
<apex:form >
<apex:outputLabel value="Phone" for="phone"/>
<apex:input id="phone" value="{!fPhone}" type="tel"/><br/>
<apex:outputLabel value="Email" for="email"/>
<apex:input id="email" value="{!fText}" type="email"/><br/>
<apex:outputLabel value="That Number" for="num"/>
<apex:input id="num" value="{!fNumber}" type="number"/><br/>
<apex:outputLabel value="The Big Day" for="date"/>
<apex:input id="date" value="{!fDate}" type="date"/><br/>
</apex:form>
ユーザがフォーム項目を移動するとき、それらの項目をタップするか、[次へ] ボタン
をタップすると、項目に期待されるデータに一致するようにキーボードが変化しま
す。
これらの型固有のキーボードにより、外出中のモバイルデバイスを使用したフォーム
への入力がさらに容易になります。
<apex:input> により、次の明示的な type 値を設定できます。
• date
219
第 16 章
開発のガイドラインとベストプラクティス
• datetime
• datetime-local
• month
• week
• time
• email
• number
• range
• search
• tel
• text
• url
type を「自動」に設定することもできます。この場合は、関連付けられたコントロー
ラプロパティまたはメソッドのデータ型が使用されます。
新しい HTML5 機能を含む、HTML type 属性は、HTML の標準の要素です。type 属性、
この属性を使用してできること、モバイル開発との関連性についての詳細は、入力
type 属性の値の WHATWG のリストと説明を参照してください。すべての値がVisualforce
入力コンポーネントでサポートされているわけではありません。Visualforceでサポート
されていない値を使用する場合は、Visualforceタグの代わりに静的 HTML を使用します。
クライアント側検証に HTML5 パススルー属性を使用する
<apex:input> およびその他のVisualforceコンポーネントでパススルー属性を設定し、
クライアント側検証などのその他の HTML5 機能を有効にします。フォームに修正が容
易なエラーがあるとき、クライアント側で基本的な検証を実行して、サーバへの要求
の送信およびレスポンス待ちを回避できます。
プレフィックス html- が付いた属性は、プレフィックスが削除されて、生成された
HTML にパススルーされます。クライアント側検証を有効にするには、期待される
フォームの値に一致するように、<apex:input> タグで html-pattern 属性を設定
します。これにより、生成される <input> タグに pattern 属性が追加され、その項
目のクライアント側検証が有効になります。
220
第 16 章
開発のガイドラインとベストプラクティス
メモ: クライアント側検証では、Visualforce ページが API バージョン 29.0 以降に設
定されていて、ページ docType が html-5.0 に設定されている必要がありま
す。
検証パターンは正規表現です。フォーム入力は式に対してチェックされ、その式と一
致する場合、項目入力は有効とみなされます。一致しない場合、入力は無効とみなさ
れます。エラーメッセージが表示され、フォームはサーバに送信されません。特定の
ドメインのメールアドレスを必要とする項目の例を次に示します。
<apex:input id="email" value="{!fText}" type="email"
html-placeholder="[email protected]"
html-pattern="^[a-zA-Z0-9._-][email protected]$"
title="Please enter an example.com email address"/>
パススルー属性として設定できるその他の便利な HTML5 属性には、次のようなものが
あります。
• placeholder (html-placeholder 属性を使用して設定する) — ゴーストテキス
トを項目に追加してユーザにサンプル入力を示します。
• title (<apex:input> では title 属性、タイトル属性なしのコンポーネントで
は html-title 属性を使用して設定する) — 項目がクライアント側検証で失敗し
た場合に使用するエラーメッセージを追加します。
属性を使用して HTML <input> 要素の使い勝手を拡張する方法については、「HTML5
Forms Introduction and New Attributes」で HTML5 の新機能の概説でヒントを得ることができ
ます。特にモバイルユーザについてクライアント側のフォーム検証についての詳細
は、WHATWG の「HTML: The Living Standard」の「Client-side form validation」および「Improving
the user experience on mobile devices」を参照してください。
ナビゲーションの管理
Salesforce1では、イベントを使用してナビゲーションを管理します。ナビゲーションイ
ベントフレームワークは、プログラムできちんと機能するナビゲーションを簡単に作
成するための多数のユーティリティ関数を備えた JavaScript オブジェクトとして利用で
きます。このフレームワークの利点は、モバイルコンテキストでより自然にナビゲー
ションできることです。また、注文が正常に送信された後に注文ページにリダイレク
トする場合など、完了後のナビゲーションを Salesforce1 開発者が容易に作成できるこ
とも利点です。
221
第 16 章
開発のガイドラインとベストプラクティス
Salesforce1 で、Visualforce ページのプログラムによるナビゲーションは概して次のよう
に機能します。
1. ユーザが、通常はナビゲーションメニューまたはアクションバーのアクション
から Visualforce ページを呼び出します。
2. Visualforceページと、ページによってコールされたカスタムコントローラや拡張
コードが読み込まれ実行されます。
3. ユーザが何らかの方法で (フォームへの値の入力など) ページを操作します。
4. ユーザがページで、フォームの送信など、変更をコミットするアクションを実
行します。
5. コントローラや拡張コードが実行され、変更を Salesforce に保存して、アクショ
ンの結果を返します。
6. Visualforce ページが、JavaScript レスポンスハンドラを使用してアクションの結果
を受信し、結果が正常の場合はその応答として、ユーザをアクションの結果を
示す新しいページにリダイレクトします。
このシナリオは、Salesforce1のナビゲーションフレームワークで簡単に処理されます。
もう 1 つの一般的な用途は、単に Salesforce1 の Visualforce ページから別のページに移動
するリンクやその他のユーザインターフェースコントロールをページに追加すること
です。このナビゲーションも、Salesforce1のナビゲーションフレームワークで簡単に管
理されます。
これらのケースでは、特別ユーティリティ JavaScript オブジェクトである sforce.one
でナビゲーションが処理されます。Visualforce ページが Salesforce1 アプリケーション内
で実行される場合、sforce.one オブジェクトがすべての Visualforce ページに自動的
に追加されます。このオブジェクトには、実行時にナビゲーションイベントをトリガ
する多数の関数があります。これらの関数を使用するには、ページの JavaScript コード
から直接コールするか、コールをクリックハンドラとしてページの要素に追加しま
す。
「Visualforce ページを使用した Salesforce1 の拡張」 (ページ 91)で取り上げた
FindNearbyWarehousesPage ページの JavaScript 関数を次に示します。この関数は、Google
マップに追加するマーカーを作成します。
function setupMarker(){
// Use JavaScript nav function to determine if we are
// in Salesforce1 and set navigation link appropriately
222
第 16 章
開発のガイドラインとベストプラクティス
var warehouseNavUrl =
'sforce.one.navigateToSObject(\'' + warehouse.Id + '\')';
// Wrap the warehouse details with the link to
// navigate to the warehouse details
var warehouseDetails =
'<a href="javascript:' + warehouseNavUrl + '">' +
warehouse.Name + '</a><br/>' +
warehouse.Street_Address__c + '<br/>' +
warehouse.City__c + '<br/>' +
warehouse.Phone__c;
// Create a panel that will appear when a marker is clicked
var infowindow = new google.maps.InfoWindow({
content: warehouseDetails
});
// ...
}
1 行目は、文字列 warehouseNavUrl を構築します。この文字列が JavaScript URL とし
て使用されると、倉庫の詳細ページに移動します。倉庫名にリンクを作成し、マー
カーをクリックしたときに表示される (warehouseDetails 文字列にまとめられた)
情報パネルにこれを表示します。倉庫名をクリックすると、その倉庫の詳細ページに
移動します (関数コードの省略された部分は、マーカーを作成して地図に追加する
Google Maps API コールに関するものです)。
Salesforce1 内で実行される JavaScript コードまたは HTML マークアップがあるときは、次
の点に留意します。
• window.location.href を使用して、ブラウザの URL を直接操作しないでくださ
い。Salesforce1のナビゲーション管理システムではこの操作はうまく機能しません。
• ナビゲーション URL で target="_blank" を使用しないでください。Salesforce1 内
で新しいウィンドウを開くことはできません。
Force.com Canvas フレームワーク内の navigation メソッド
Force.com Canvas を使用している場合、Salesforce1 でキャンバスアプリケーションやキャ
ンバス個人用アプリケーションのナビゲーションを制御するシンプルな方法が用意さ
れています。
223
第 16 章
開発のガイドラインとベストプラクティス
Force.comのメソッドを使用して、Salesforce1のナビゲーションを制御できます。Force.com
Canvas フレームワーク内のこれらのメソッドは、JavaScript ライブラリにあるイベント
です。いずれかの navigation メソッドをキャンバスコードからコールすると、Salesforce1
にイベントが送信されます。Salesforce1 は、このペイロードを読み取って指定の移行先
にユーザを移動します。
名前とペイロードを使用して、navigation メソッドをイベント変数として参照します。
次に例を示します。
var event = {name:"s1.createRecord", payload: {entityName: "Account",
recordTypeId: "00h300000001234"}};
この新しいメソッドの使用についての詳細は、『Force.com Canvas 開発者ガイド』の
「キャンバスアプリケーションで使用する Salesforce1 の navigation メソッド」を参照し
てください。
sforce.one オブジェクトを使用したナビゲーション
Salesforce App Cloud には、ナビゲーション用イベントメカニズムが搭載されています。
このメカニズムは、Visualforce で sforce.one という JavaScript オブジェクトとして公
開され、Salesforce1 に表示されるどのページでも利用できます。
sforce.one オブジェクトには次の関数があります。sforce.one オブジェクトから
ドット表記を使用して関数を参照します。たとえば、
sforce.one.navigateToSObject(recordId, view) です。
関数
説明
back([refresh])
sforce.one 履歴に保存されている、以前の状態に移動
します。ブラウザの [戻る] ボタンをクリックするのと同
じです。
refresh は省略可能です。デフォルトでは、ページは更
新されません。可能な場合は true を渡してページを更
新します。
navigateToSObject(
recordId[, view])
recordId で指定した sObject レコードに移動します。こ
のレコードの「ホーム」には複数のビューがあり、この
ビューはSalesforce1内で、ユーザがスワイプして移動する
スライドとして表示されます。
224
第 16 章
関数
開発のガイドラインとベストプラクティス
説明
view は省略可能で、デフォルトは detail です。view
には、レコードのホーム内に最初に表示するスライドを
指定します。使用できる値は次のとおりです。
• detail: レコード詳細スライド
• chatter: Chatter スライド
• related: 関連スライドのビュー
navigateToURL(url[,
isredirect])
指定した URL に移動します。
相対 URL と絶対 URL がサポートされています。相対 URL は
one.app ドメインに対して相対的で、ナビゲーション履歴
を保持します。外部 URL、つまり Salesforce1 アプリケーショ
ンの外部の URL は別のブラウザウィンドウで開きます。
アプリケーション内のさまざまな画面に移動するには相
対 URL を使用します。ユーザに別のサイトまたはアプリ
ケーションへのアクセスを許可するには外部 URL を使用
します。ユーザは移動先のサイトまたはアプリケーショ
ンで、元のアプリケーションに保持する必要のないアク
ションを実行できます。ユーザが元のアプリケーション
に戻るには、別のアプリケーションを終了したときに、
外部 URL によって開かれた別のウィンドウを閉じる必要
があります。この新しいウィンドウは、元のアプリケー
ションとは別の履歴を持ち、ウィンドウを閉じるとこの
履歴は破棄されます。つまり、ユーザは [戻る] ボタンを
クリックして元のアプリケーションに戻ることはできま
せん。ユーザは新しいウィンドウを閉じる必要がありま
す。
外部アプリケーションを起動し、ユーザが適切な操作を
行えるようにするため、mailto:、tel:、geo: などの
URL スキームがサポートされています。ただし、サポート
はモバイルプラットフォームとデバイスによって異なり
ます。mailto: と tel: は信頼できますが、他の URL に
225
第 16 章
開発のガイドラインとベストプラクティス
関数
説明
ついては、使用が想定されるさまざまなデバイスでテス
トすることをお勧めします。
メモ: navigateToURL では、標準の URL スキーム
のみがサポートされます。カスタムスキームにアク
セスするには、代わりに window.location を使用
します。
isredirect は省略可能で、デフォルトは false です。
ナビゲーション履歴の現在の URL を新しい URL に置き換え
るようにするには、true に設定します。
navigateToFeed(
subjectId, type)
subjectId で絞り込んだ、指定した type のフィードに
移動します。一部のフィード type では、subjectId は
必須ですが無視されます。これらのフィード type では、
現在のユーザの ID を subjectId として渡します。
type はフィードの種別です。使用できる値は次のとおり
です。
• BOOKMARKS: コンテキストユーザがブックマークとし
て保存したすべてのフィード項目が含まれます。現在
のユーザの ID を subjectId として渡します。
• COMPANY: 種別が TrackedChange のフィード項目を
除くすべてのフィード項目が含まれます。ユーザが
フィード項目を表示するには、親への共有アクセス権
が必要です。現在のユーザの ID を subjectId として
渡します。
• FILES: コンテキストユーザがフォローしている人また
はグループによって投稿されたファイルを含むすべて
のフィード項目が含まれます。現在のユーザの ID を
subjectId として渡します。
• GROUPS: コンテキストユーザが所有するか、メンバー
であるすべてのグループのすべてのフィード項目が含
まれます。現在のユーザの ID を subjectId として渡
します。
226
第 16 章
関数
開発のガイドラインとベストプラクティス
説明
• NEWS: コンテキストユーザがフォローする人、ユーザ
がメンバーとなっているグループ、およびユーザが
フォローしているファイルとレコードのすべての更新
が含まれます。また、親がコンテキストユーザである
レコード、およびコンテキストユーザをメンションす
るかコンテキストユーザがメンバーとなっているグ
ループをメンションするすべてのフィード項目とコメ
ントのすべての更新も含まれます。現在のユーザの ID
を subjectId として渡します。
• PEOPLE: コンテキストユーザがフォローしているすべ
ての人によって投稿されたすべてのフィード項目が含
まれます。現在のユーザの ID を subjectId として渡
します。
• RECORD: 親が指定されたレコードであるすべてのフィー
ド項目が含まれます。レコードは、グループ、ユー
ザ、オブジェクト、ファイル、その他の標準またはカ
スタムオブジェクトの場合があります。レコードがグ
ループの場合、フィードにはそのグループにメンショ
ンしているフィード項目も含まれます。レコードが
ユーザの場合、フィードにはそのユーザに対するフィー
ド項目のみが含まれます。別のユーザのレコードフィー
ドは取得できません。レコードの ID を subjectId と
して渡します。
• TO: コンテキストユーザのメンションを含むすべての
フィード項目、コンテキストユーザがコメントした
フィード項目、コンテキストユーザが作成し、コメン
トされたフィード項目が含まれます。現在のユーザの
ID を subjectId として渡します。
• TOPICS: 指定したトピックを含むすべてのフィード項
目が含まれます。トピックの ID を subjectId として
渡します。この値は、Salesforce1 モバイルブラウザアプ
リケーションでのみサポートされます。トピックは、
227
第 16 章
開発のガイドラインとベストプラクティス
関数
説明
Salesforce1 ダウンロード可能アプリケーションでは使用
できません。
navigateToFeedItemDetail( 特定のフィード項目 feedItemId と関連付けられたコメ
feedItemId)
ントに移動します。
navigateToRelatedList( parentRecordId の関連リストに移動します。たとえ
relatedListId,
ば、Warehouse オブジェクトの関連リストを表示する場
parentRecordId)
合、parentRecordId は Warehouse__c.Id です。
relatedListId は、表示する関連リストの API 名または
ID です。
navigateToList(
listViewId (表示されるリストビューの ID) で指定された
listViewId,
リストビューに移動します。
listViewName, scope)
listViewName にリストビューのタイトルを設定します。
リストビューに保存されている実際の名前と一致する必
要はありません。保存されている名前を使用するには、
listViewName を null に設定します。
scope に、ビュー内の sObject の名前 (「Account」や
「MyObject__c」など) を設定します。
createRecord(
entityName[,
recordTypeId])
指定した entityName (「Account」や「MyObject__c」など)
の新しいレコードを作成するページを開きます。
recordTypeId は省略可能ですが、使用する場合は、作
成されるオブジェクトのレコードタイプを指定します。
editRecord(recordId) recordId で指定したレコードを編集するページを開き
ます。
sforce.one オブジェクトを使用するときは、次の点に留意します。
• sforce.one.navigateToURL をコールしたときに、URL がオブジェクトの標準
ページまたは Chatter ページを参照すると、「Unsupported Page」(サポートされてい
ないページ) というエラーが発生することがあります。このエラーを回避するに
228
第 16 章
開発のガイドラインとベストプラクティス
は、URL がバックスラッシュで始まっている (_ui ではなく、/_ui が使用されてい
る) ことを確認します。
• sforce.one.createRecord メソッドは、Visualforceによる標準アクションへの上
書きを無視します。
sforce.one での API バージョンの処理方法
sforce.one オブジェクトは、Salesforce App Cloud の新規リリースで頻繁に改善されて
います。下位互換性を持たせるため、sforce.one でバージョン固有の動作が提供さ
れ、アプリケーションでは特定のバージョンの sforce.one を使用できます。
デフォルトで、sforce.one では要求された Visualforce ページの API バージョンと同じ
バージョンが使用されます。たとえば、Visualforce ページに API バージョン 30.0 がある
場合、sforce.one を使用する同ページの JavaScript では、デフォルトで sforce.one
の API バージョン 30.0 が使用されます。
つまり、Visualforce ページが新しい API バージョンに更新されると、このページでは
sforce.one の更新されたバージョンが自動的に使用されます。上記の例では、この
Visualforce ページが API バージョン 31.0 に更新されると、sforce.one を使用するアプ
リケーション機能では sforce.one の API バージョン 31.0 が使用されます。
sforce.one の新しい API バージョンの更新された動作によって、ページの機能との
互換性の問題が発生する場合は、問題を修正するために 3 つのオプションがありま
す。
• VisualforceページのAPIバージョンを前のバージョンに戻します。この作業ではコー
ド変更は不要です。
• ページの機能のコードを更新して問題を修正します。これが最善の解決法ですが、
デバッグが必要な場合があり、確実にコード変更が必要になります。
• 特定のバージョンの sforce.one を使用します。この解決法では、最小限のコー
ド変更が必要になることが多くあります。
メモ: sforce.one は Winter '14 (API バージョン 29.0) で追加され、Summer '14 (API
バージョン 31.0) まではバージョン設定されていませんでした。31.0 より前のすべ
てのバージョンの sforce.one は、バージョン 31.0 とまったく同じです。Visualforce
に有効な任意のバージョン、つまりバージョン 15.0 から現在の API バージョンま
で、sforce.one のバージョンを指定できます。
229
第 16 章
開発のガイドラインとベストプラクティス
特定のバージョンの sforce.one の使用
特定のバージョンの sforce.one を使用するには、sforce.one.getVersion() 関
数を使用して、API バージョン、および特定のバージョンの sforce.one を使用する
必要のあるコールバック関数を入力します。このコールによって、適切なバージョン
の sforce.one が自動的に読み込まれます。
sforce.one.getVersion() に使用する署名は、次のとおりです。
sforce.one.getVersion(versionString, callbackFunction);
versionString はアプリケーションで必須の API バージョンです。必ず 2 桁数字、ピ
リオド、1 桁数字になります (例、30.0)。無効なバージョン文字列を使用したコール
は、エラーを表示することなく失敗します。
callbackFunction は、特定のバージョンの sforce.one を使用する JavaScript 関数
です。sforce.one.getVersion() は非同期で実行され、要求されたバージョンの
sforce.one の読み込みが完了すると、コールバック関数がコールされます。コール
バック関数は、指定された API バージョンの sforce.one オブジェクトであるパラ
メータを 1 つ受け取ります。グローバル sforce.one の代わりに、渡されたオブジェ
クトを使用して、アプリケーションで必須の API バージョンに適合する sforce.one
にコールを実行します。
特定のバージョンの sforce.one の使用例
以下のすべての例では、次の入力ボタンに Create Account 関数が追加されます。
<input type="button" value="Create Account" onclick="btnCreateAccount()"
id="btnCreateAcct"/>
Visualforce ページの API バージョンへのデフォルト設定
デフォルトのバージョンの sforce.one (Visualforce ページの API バージョンに対応す
るバージョン) を使用するアプリケーションコードでは、バージョンを要求する必要
はありません。このバージョンの使用は自動的に行われ、コードは簡単です。
<script>
function MyApp() {
this.createAccount = function() {
sforce.one.navigateToURL("/001/e");
};
}
230
第 16 章
開発のガイドラインとベストプラクティス
var app = new MyApp();
function btnCreateAccount() {
app.createAccount();
}
</script>
アプリケーション機能は MyApp オブジェクト内で作成され、イベント (ボタンのク
リック) が発生すると、イベント処理関数によりアプリケーション関数がコールされ
ます。ベストプラクティスでは、アプリケーションイベント処理からアプリケーショ
ン機能を分離することで、バージョン固有の sforce.one バージョンを使用するた
めの設定が整います。
特定の sforce.one API バージョンの使用 (単純)
特定のバージョンの sforce.one を使用するには、オブジェクトのバージョン付き
インスタンスへの参照を取得および保存します。次に、このオブジェクトを使用して
sforce.one コールを実行します。最も単純な方法は、MyApp オブジェクト内に保
存することです。次のサンプルでは、sforce.one のバージョン付きインスタンスへ
の参照を太字で示しています。
<script>
function MyApp(sfone) {
this.createAccount = function() {
sfone.navigateToURL("/001/e");
};
}
var app30 = null;
function btnCreateAccount() {
// Create our app object if not already defined
if(!app30) {
// Create app object with versioned sforce.one
sforce.one.getVersion("30.0", function(sfoneV30) {
app30 = new MyApp(sfoneV30);
app30.createAccount();
});
return;
}
app30.createAccount();
231
第 16 章
開発のガイドラインとベストプラクティス
}
</script>
上記の例では、イベント処理関数が 1 つ目の例から拡張され、sforce.one のバー
ジョン固有インスタンスの作成が含まれています。アプリケーションで複数のバー
ジョンを合わせて使用する必要がある場合は、適切なバージョンと名前で複数の MyApp
インスタンスを作成できます。ただし、複数のバージョンを使用すると扱いにくくな
ります。代わりに、次のアプローチをお勧めします。
特定の sforce.one API バージョンの使用 (最善)
アプリケーションコードを整理する良い方法は、イベント処理を分離しておくため
に、コードのアプリケーション初期化ブロック内で sforce.one のバージョン固有
インスタンスを作成することです。
<script>
function MyApp(sfone) {
this.createAccount = function() {
sfone.navigateToURL("/001/e");
};
}
var app30 = null;
// Initialize app: get versioned API, wire up clicks
sforce.one.getVersion("30.0", function(sfoneV30) {
// Create app object with versioned sforce.one
app30 = new MyApp(sfoneV30);
// Wire up button event
var btn = document.getElementById("btnCreateAcct");
btn.onclick = btnCreateAccount;
});
// Events handling functions
// Can't be fired until app is defined
function btnCreateAccount() {
app30.createAccount();
}
</script>
このサンプルでは、アプリケーション初期化が空白とコメントのみで分離されていま
すが、より適切にカプセル化するために関数単位に分離することができます。
232
第 16 章
開発のガイドラインとベストプラクティス
特定の sforce.one API バージョンの使用 (同期)
特定のバージョンの sforce.one の JavaScript を手動でページに含めて、sforce.one
の同期モードをトリガできます。ライブラリの URL の形式は
/sforce/one/sforceOneVersion/api.js です。次に例を示します。
<script src="/sforce/one/30.0/api.js"></script>
<script>
function MyApp(sfone) {
this.createAccount = function() {
sfone.navigateToURL("/001/e");
};
}
var app = null;
sforce.one.getVersion("30.0", function(sfoneV30) {
app = new MyApp(sfoneV30);
});
// Events handling function
// Can't be fired until app is defined
function btnCreateAccount() {
app.createAccount();
}
</script>
同期モードが必要な場合もありますが、非同期バージョンをお勧めします。
sforce.one ライブラリの正しいバージョンを手動で含めるのを忘れると、診断の難
しいバグがコードに含まれます。
ビジュアルデザインの考慮事項
作成する Visualforce ページの外観を Salesforce1 に近づけるには、CSS スタイル設定や、
応答性の高い設計を使用して、HTML を最小限に抑えます。
フォントとスタイル
Salesforce1のビジュアルデザインには、Salesforce1に特別ライセンスが供与されている、
Proxima Nova というサンセリフ書体が使用されています。組織の各ユーザのデバイスに
233
第 16 章
開発のガイドラインとベストプラクティス
このフォントがインストールされていないことがありますが、次の CSS フォントスタッ
クは利用可能な中で最も近いフォントを使用します。
p {
font-family: "ProximaNovaSoft-Regular", Calibri,
"Gill Sans", "Gill Sans MT", Candara, Segoe, "Segoe UI",
Arial, sans-serif;
}
ページの適切なテキストブロックおよびスタイルと一致するようにセレクタを変更し
ます。
また、通常のテキスト要素やフォーム要素に使用するフォントサイズを若干大きくす
ることもお勧めします。フォントが大きいと文字が読みやすくなり、フォーム要素を
タップしやすくなります。最初に記述する完全なスタイルブロックを次に示します。
<style>
html, body, p {
font-family: "ProximaNovaSoft-Regular", Calibri,
"Gill Sans", "Gill Sans MT", Candara, Segoe,
"Segoe UI", Arial, sans-serif;
font-size: 110%;
}
input { font-size: 95%; }
</style>
警告: ページで Salesforce1 スタイルシートを直接参照することや、その中のスタ
イルに依存することはサポートされていません。Salesforce1 の進化に伴ってスタ
イルが予想外の方向に変化する可能性があります。ページがサポート対象外のス
タイルに依存している場合、将来ページが壊れる可能性があります。
HTML マークアップ
組織の Visualforce ページを Salesforce フルサイトのデザインと一致させる場合は、多く
のケースで、Salesforceのヘッダー、サイドバー、スタイル設定や、<apex:pageBlock>
および子コンポーネントが使用されています。<apex:page showHeader="false"
standardStylesheets="false" ...> を設定してこれらの要素を明示的に無効に
しないでください。これらの要素は、Salesforce1内でページを実行するときに自動的に
無効になります。
234
第 16 章
開発のガイドラインとベストプラクティス
ただし、<apex:pageBlock> および子コンポーネントの使用は見直すことをお勧め
します。これを使用すると、Salesforce フルサイトのデザインに一致させることを明示
的に指示することになるため、標準のスタイルシートがオフの場合でも、これらが生
成するマークアップが Salesforce1 に引き継がれます。この場合は、マークアップがさ
らに複雑になり、Salesforce1 と一致するスタイル設定を適用することが難しくなりま
す。
代わりに、シンプルな静的 HTML マークアップ、または選択したモバイルツールキッ
トで必要なマークアップを使用します。次のセクションでマークアップのサンプルを
示します。
応答性の高い設計
Salesforce1ページでは、応答性の高い設計技法を使用して、デバイスに合わせてレイア
ウトを最適化します。たとえば、携帯電話端末には縦並びの 1 列レイアウト、タブ
レットには横並びの 2 列レイアウトを使用します。Salesforce1 で使用する Visualforce ペー
ジにも同様の技法を使用できます。
最初に、ページにデフォルトのレイアウトを作成します。
/* Default CSS: 2 columns */
.content-block {
width: 50%;
float: left;
}
次に、CSS スタイル設定およびメディアクエリを使用して、応答性を備えたレイアウ
トにします。
/* CSS phone */
@media screen and (max-width: 767px) {
.content-block {
width: 100%;
float: none;
}
}
235
第 16 章
開発のガイドラインとベストプラクティス
次の HTML を実際に Visualforce ページで試してみます。上記の CSS スニペットを、HTML
と同じ Visualforce ページ上の <style> タグ間に配置し、続いてブラウザウィンドウの
角をドラッグしてレイアウトの応答性を確認します。



<div class="content-block">
top on the phone, left on big screens
</div>
<div class="content-block">
bottom on the phone, right on big screens
</div>
カスタムアクションとしての Visualforce ページの使用
Visualforceページをカスタムアクションとして使用する場合は、標準コントローラが提
供する 1 つのレコードに対して動作するか、カスタムコントローラコードが取得する
1 つまたは複数のレコードを検索して動作するように設計します。
オブジェクトのカスタムアクション
オブジェクトのカスタムアクションとして追加される Visualforce ページは、そのオブ
ジェクト種別のレコードのコンテキストで呼び出されます。カスタムアクションに
は、カスタムアクションをクリックしたときにユーザが参照していたレコードから特
定のレコード ID が渡されます。ページは、この特定のレコードタイプに対して動作す
るように設計します。
オブジェクトのカスタムアクションとして使用される Visualforce ページには、そのオ
ブジェクトの標準コントローラを使用する必要があります。コントローラ拡張を使用
して、JavaScript Remoting を使用してコールできる @RemoteAction メソッドなどのカ
スタムコードを追加します。
カスタムコードが、元のレコードの更新以上の役割を果たすことがあります。たとえ
ば、[Create Quick Order (注文の簡易作成)] カスタムアクションは、一致する商品を検索
します。続いて、部品の注文作成の一環として、請求書と品目を作成します。このロ
236
第 16 章
開発のガイドラインとベストプラクティス
ジックは、元の取引先レコードのコンテキストで発生します。請求書は注文の簡易作
成アクションが呼び出された取引先レコードに関連付けられます。
アクションが完了すると、ユーザを元のレコードに関連するページにリダイレクトし
ます。
カスタムグローバルアクション
グローバルアクションとして使用される Visualforce ページはさまざまな場所から呼び
出すことができ、特定のレコードと関連付けられていません。完全な「行動の自由」
があります。つまり、コードを記述するかどうかは自分次第です。
より具体的に言うと、グローバルアクションとして使用される Visualforce ページでは
標準コントローラを一切使用できません。カスタムコントローラを記述して、ページ
を処理する必要があります。コードを使用して、1 つまたは複数のレコードの作成、
検索したレコードの編集などを行います。
グローバルアクションが完了すると、ユーザはアクションの一環として作成された親
レコードにリダイレクトされるか、開始した場所に戻ります。
モバイルとデスクトップの両方で機能する Visualforce
ページの作成
実行されるコンテキストに適合するコードを記述して、Salesforce1アプリケーションと
Salesforce フルサイトの両方で有効に機能する Visualforce ページを作成します。
ナビゲーションの管理 (ページ221)で学習したように、Salesforce1はさまざまなナビゲー
ションコントロールとイベントを処理するフレームワークを提供します。sforce オ
ブジェクトは Salesforce1 内のページにのみ挿入されるため、Salesforce フルサイト上で
実行しているときに Visualforce ページでこのフレームワークを利用できません。つま
り、Salesforce1 アプリケーションと Salesforce フルサイトの両方で共有されるページの
場合、sforce オブジェクトが利用可能なときはこれを使用し、利用可能でないとき
は標準の Visualforce ナビゲーションを使用するようにコードを記述します。
たとえば、注文を簡易作成する @RemoteAction メソッドから JavaScript Remoting 要求
が返った後に実行される簡単な JavaScript を次に示します。このコードは、カスタムア
クションとして使用される Visualforce ページを元にしています。カスタムアクション
がこのコードを Salesforce1 アプリケーションのアクションバーおよび Salesforce フルサ
237
第 16 章
開発のガイドラインとベストプラクティス
イトのパブリッシャーメニューに追加します。このコードは両方の場所で機能する必
要があります。コードの意図は、注文した取引先の詳細ページへの移動です。
// Go back to the Account detail page
if( (typeof sforce != 'undefined') && sforce && (!!sforce.one) ) {
// Salesforce1 navigation
sforce.one.navigateToSObject(aId);
}
else {
// Set the window's URL using a Visualforce expression
window.location.href =
'{!URLFOR($Action.Account.View, account.Id)}';
}
if ステートメントによって、sforce オブジェクトが利用可能かつ有用であるかどう
かが確認されます。これは、ページが Salesforce1 内で実行されている場合のみ true で
す。sforce が利用可能な場合、Salesforce1ナビゲーション管理システムは取引先の詳
細ページへの移動に使用されます。
sforce オブジェクトが利用可能でない場合、これを使用する試みは JavaScript エラー
となり、ナビゲーションは行われません。その代わりに、取引先の詳細ページの URL
を返す Visualforce 式を使用して、コードがウィンドウの URL を設定します。ナビゲー
ションイベントがフレームワークによって失われるため、Salesforce1でこの方法を使用
するのは好ましくないかもしれませんが、通常の Visualforce では必要になります。
メモ: このような共通テストは独自のヘルパー関数としてくくり出すことをお勧
めします。次のようなコードを JavaScript 静的リソースに追加し、if 条件で
ForceUI.isSalesforce1() を単にコールします。このようにすると、検出ロ
ジックが変更しても、それを 1 か所で更新するだけですみます。
(function(myContext){
myContext.ForceUI = myContext.ForceUI || {};
myContext.ForceUI.isSalesforce1 = function() {
return((typeof sforce != 'undefined') && sforce &&
(!!sforce.one));
}
})(this);
さまざまな種類のオブジェクトおよびアクションの URL を作成する $Action グロー
バル変数の使用方法についての詳細は、『Visualforce 開発者ガイド』の付録「グローバ
ル変数」を参照してください。
238
第 16 章
開発のガイドラインとベストプラクティス
Visualforce ページのパフォーマンスチューニング
パフォーマンスはモバイル Visualforce ページの重要な側面です。Visualforce には、ペー
ジのパフォーマンスの調整に役立つキャッシュのメカニズムがあります。
ページのキャッシュを有効にするには、次のステートメントを使用します。
<apex:page cache="true" expires="600">
ページのキャッシュのパラメータは次のとおりです。
属性
説明
cache
ブラウザがページをキャッシュするかどうかを
指定する boolean 値。指定されていない場合、デ
フォルトの false に設定されます。
expires
キャッシュの期間を指定する整数値 (秒単位)。
詳細は、DeveloperForce の『Force.com Sites Best Practices』を参照してください。
その他のリソース
Salesforce1アプリケーションのパフォーマンス調整に役立つその他のリソースをいくつ
かご紹介します。
• Inside the Force.com Query Optimizer (Web セミナー: Force.com クエリオプティマイザのし
くみ) (英語)
• Maximizing the Performance of Force.com SOQL, Reports, and List Views (ブログ投稿: Force. com
の SOQL、レポート、リストビューのパフォーマンスを最大化する) (英語)
• Force.com SOQLベストプラクティス - WHERE句条件のNULL値や数式項目について (ブロ
グ投稿)
239
第 16 章
開発のガイドラインとベストプラクティス
Force.com Canvas のガイドラインとベストプラク
ティス
アプリケーションをキャンバスアプリケーションとして公開し、モバイルユーザが使
用できるようにする場合は、いくつかの追加のベストプラクティスとガイドラインに
留意する必要があります。
Force.com Canvas を使用すると、ユーザインターフェースレベルで Web アプリケーショ
ンを Salesforce1 と簡単に統合できます。ただし、Salesforce1 アプリケーションでのユー
ザ操作性はSalesforceフルサイトでのものとは異なります。必ずキャンバスアプリケー
ションをモバイルユーザ向けに設計し、モバイル環境でテストしてください。
Chatter パブリッシャーと Salesforce1 アクションバー
のキャンバスアプリケーション
キャンバスアプリケーションをパブリッシャーとアクションバーで使用できるように
する場合、次のベストプラクティスとガイドラインを考慮します。
• Salesforceフルサイトのパブリッシャーからキャンバスアプリケーションにアクセス
する場合、ユーザインターフェースは、Salesforce1 モバイルアプリケーションのア
クションバーおよびアクションメニューからキャンバスアプリケーションにアク
セスする場合とは異なります。たとえば、Salesforce フルサイトのフィードでは、
[共有] ボタンはフィード項目の最下部にあります。
240
第 16 章
開発のガイドラインとベストプラクティス
Salesforce1 モバイルアプリケーションでは、[共有] ボタンは画面上部にあります。
241
第 16 章
開発のガイドラインとベストプラクティス
• キャンバスカスタムアクションを作成する場合、Salesforceフルサイトのアクション
で使用可能な高さは、Salesforce1 のアクションで使用可能な高さよりもはるかに大
きくなります。キャンバスアプリケーションを正しいサイズで表示するには、
Force.com Canvas SDK で Dimensions オブジェクトを使用します。
• キャンバスカスタムアクションの表示ラベルは簡潔にします。表示ラベルが長く
なると、パブリッシャーに表示しきれない場合があります。
• パブリッシャーからキャンバスアプリケーションにアクセスすると、キャンバス
アプリケーションの上に [今何をしていますか?] ペインが表示されます。このペ
インは、キャンバスアプリケーションをスクロールしても固定されたままです。
• キャンバスアプリケーションとして公開された Web アプリケーションで要求を受
信したとき、要求を行ったデバイスの種別を判別できます。ユーザの操作性を高
めるには、この情報を使用して、要求元デバイスに基づいてアプリケーションを
表示します。たとえば、要求が携帯電話端末からの場合は 4 行のテキストのみを表
示し、タブレットからの場合は 10 行のテキストを表示するようにロジックを追加
できます。
• ほとんどの場合、CSS のキャンバスアプリケーションの高さと幅には 100% を指定
します。これにより、キャンバスアプリケーションは、使用可能な最大の画面領
域を確保できます。
• キャンバスアプリケーションは iFrame に表示されるため、アプリケーションの外
観を標準の iFrame の場合と同様に形式設定できます。
フィードのキャンバスアプリケーション
キャンバスアプリケーションをフィードで使用できるようにする場合、次のベストプ
ラクティスとガイドラインを考慮します。
• モバイルデバイスでは、フィード項目のリンクテキストと説明に表示される文字
数は Salesforce フルサイトの場合よりも少なくなります。フィード項目をプログラ
ムで作成する場合は、この点を考慮します。
• フィード項目にキャンバスアプリケーションが含まれている場合、表示される
フィード項目にはキャンバスアプリケーションへのリンクが含まれます。モバイ
ルデバイスでは、キャンバスアプリケーションはフィードには表示されず、代わ
りに新しいページが開いてキャンバスアプリケーションが表示されます。
• Salesforce1 モバイルブラウザアプリケーションでは、デバイスを回転すると画面が
変化します。シームレスなユーザの操作性を維持するには、キャンバスアプリケー
242
第 16 章
開発のガイドラインとベストプラクティス
ションで回転をサポートする必要があります (可能な場合)。Salesforce1 ダウンロー
ド可能アプリケーションは回転しません。
• キャンバスアプリケーションがフィード項目として表示される場合、モバイルデ
バイス上のフィード項目に表示されるため、モバイル対応のユーザインターフェー
スを表示する必要があります。
キャンバスアプリケーションコンテキスト
Salesforce1アプリケーション内でキャンバスアプリケーションを表示するときの考慮事
項は、次のとおりです。
フィードまたはパブリッシャー内でキャンバスアプリケーションを表示する場合、(署
名付き要求または getContext コールから) 受け取るキャンバスコンテキストには
Salesforce1 パブリッシャー固有の情報が含まれます。
• 環境セクションの displayLocation 値から、フィードまたはパブリッシャーの
どちらを使用しているかを確認できます。パブリッシャーの場合は
displayLocation がパブリッシャーに設定されます。フィードの場合は
displayLocation が ChatterFeed に設定されます。
• キャンバスフィード項目の作成時に、JSON 文字列をパラメータ値として指定でき
ます。コンテキストの送信時に、フィード項目にあるパラメータ項目の値が、コ
ンテキストの環境セクションのパラメータで送信されます。
• 他のキャンバスアプリケーションの場合と同様に、コンテキストにはアプリケー
ションのサイズに関する情報が含まれます。Salesforce1 はモバイル用に設計されて
いるため、提供されるサイズは Salesforce フルサイズのサイズと異なります。
• 1 本指によるタッチスクロール操作を行うには、次の操作を実行します。
– 最も外側の div 要素に次のプロパティが含まれていることを確認します。
• min-height: 250px;
• overflow: scroll;
• width: 100%;
• -webkit-overflow-scrolling: touch;
• -webkit-transform: translated(0%,0px,0px);
243
第 16 章
開発のガイドラインとベストプラクティス
– height 属性を、署名付き要求で配信される clientHeight 値に設定します。
次に例を示します。
//Where sr is a parsed signed request object
var h = parseInt(sr.context.environment.
dimensions.clientHeight, 10);
Sfdc.canvas.byId('divElementId').style.height = h;
– 特に横向きの携帯電話端末では clientHeight 値が非常に小さくなることが
あるため、コンテンツを表示できない可能性があります。必要な高さ (ピクセ
ル単位) に設定した min-height を使用して、最適なユーザ操作性を確保して
ください。
キャンバスアプリケーションのカスタムアイコン
キャンバスアプリケーションにカスタムアイコンを追加する場合は、次のベストプラ
クティスとガイドラインに従います。
Salesforce1 ナビゲーションメニューで使用されるアイコンをカスタマイズできます。
キャンバスアプリケーションの接続アプリケーション設定の [基本情報] セクションに
ある [アイコン URL] のエントリでこのアイコンを設定します。[設定] から、[クイック
検索] ボックスに「アプリケーション」と入力し、[アプリケーション]を選択して接続
アプリケーションの [編集] をクリックします。アイコン URL は、アイコン画像ファイ
ルを指し示すセキュアな HTTPS URL を使用する必要があります。画像ファイルは、GIF、
JPG、または PNG ファイル形式である必要があります。Salesforce1 ナビゲーションメ
ニューでは、アイコンは 60×60 ピクセル以下のサイズにする必要があります。
Salesforce1ナビゲーションメニューで使用されるカスタムアイコンは、Chatter タブおよ
びキャンバスアプリケーションのプレビューアでも使用されます。キャンバスアプリ
ケーションがナビゲーションメニューに表示される場合、Chatter タブおよびキャンバ
スアプリケーションのプレビューアでのアイコンのサイズを、Salesforce で自動的に小
さく変更するように、60 × 60 ピクセルサイズのアイコンを使用することをお勧めしま
す。
キャンバスアプリケーションの Salesforce1 アクションバーで使用されるアイコンをカ
スタマイズすることもできます。アクションバーでは、接続アプリケーションに関連
付けられたカスタムアイコンではなく、キャンバスアプリケーションにアクセスする
アクションのカスタムアイコンセットを使用します。カスタムアクションアイコンの
244
第 16 章
開発のガイドラインとベストプラクティス
ガイドラインについては、「カスタムアイコンのガイドラインとベストプラクティ
ス」 (ページ 75)を参照してください。
245
第 17 章
補足
このガイドに加え、Salesforce App Cloud での開発に役立つ多くのリソースが用意されて
います。
管理リソース
[Salesforce ヘルプ & トレーニング] ポータル
Salesforceのヘルプドキュメント専用のサイト。作業に必要なヘルプを参照し、質問
への回答を見つけ、ヒントシートやその他のガイドをダウンロードできます。
Salesforce Success コミュニティ
Salesforce での円滑な作業に役立つ非常に便利なツールが揃っています。Salesforce カ
スタマー、パートナー、製品専門家、従業員とつながりを持ち、学習し、質問に
関する回答を取得し、新しいアイデアを共有してください。
Salesforce 開発者 Web サイト
Salesforce App Cloud の開発に関連するすべてを 1 か所にまとめたメインの開発者サイト
です。Salesforce 開発者サイトには、モバイル開発の開始時に役立つドキュメント、
コードサンプル、ツール、記事、ディスカッションボード、その他のリソースが用意
されています。
開発者向けドキュメント
開発者サイト (http://developer.salesforce.com/docs) では次のガイドをはじ
めとする多くのドキュメントを参照できます。
Quick Actions Implementation Guide (クイックアクション実装ガイド)
デフォルトのアクション、オブジェクト固有のアクションの作成方法、およびパ
ブリッシャーレイアウトの設定方法が説明されています。Visualforce カスタムアク
247
第 17 章
補足
ションと Force.com Canvas カスタムアクションで Chatter パブリッシャーと Salesforce1
アクションバーを拡張する方法も含まれます。
Mobile App Developer Guide (モバイルアプリケーション開発者ガイド)
ネイティブ iOS および Android、HTML5、およびハイブリッドモバイル開発について
説明されています。このガイドには、認証、地理位置情報、およびモバイルアプ
リケーションの配布などのより高度なトピックに関する情報も含まれます。
Force.com Canvas 開発者ガイド
Force.com Canvas を使用した Web アプリケーションと Salesforce1 のインテグレーショ
ンについて説明されています。クイックスタートですばやく概要を把握でき、
Force.com Canvas SDK の使用方法や、コンテキストのオブジェクトについて学習でき
ます。
Chatter REST API 開発者ガイド
Chatter フィードと、ユーザ、グループ、フォロワー、ファイルなどのソーシャル
データにプログラムを使用してアクセスする方法が説明されています。クイック
スタートですばやく概要を把握でき、さまざまな Chatter REST リソースの使用方法
について学習できます。
Force.com REST API 開発者ガイド
Salesforce で REST ベースの API を使用してデータを取得、作成、更新、および削除す
る方法が説明されています。クイックスタートですばやく概要を把握でき、使用
可能な REST API リソースの内容や、コールを実行してデータを操作する方法につい
て学習できます。
Visualforce 開発者ガイド
Visualforce を使用して Salesforce ユーザインターフェースをカスタマイズして拡張す
る方法について説明されています。
Force.com SOQL および SOSL リファレンス
SOQL および SOSL を使用して強力なクエリとテキスト検索を作成する方法が説明さ
れています。
248