デバイス画面の残りは、 Visualforce ページに使用されます。

Salesforce1アプリケーションに表示されたとき、Salesforceの標準のヘッダーおよびサイ

ドバーは、モバイルカードとして使用されたり、ページレイアウトに追加されたりす

るVisualforceページと同様に、自動的に削除されます。ただし、アクションバーのカ

スタムアクションとして使用されるVisualforceページはSalesforceフルサイトと共有さ れますが、Salesforce1ナビゲーションに追加されたページは共有される場合も共有され ない場合もあります。Salesforceフルサイトと共有されるページでは、Salesforceの標準 のヘッダーとサイドバーの明示的な削除は、サイトのすべてのVisualforceの標準動作 である場合を除き、行わないようにしてください。

ユーザの入力と操作

<apex:input>、type属性、およびパススルー HTML 属性を使用すると、モバイルで 使いやすいフォームとユーザインターフェースをネイティブモバイルブラウザ機能を 活用して効率的に作成できます。

第 13 章 開発のガイドラインとベストプラクティス

入力用の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」などの文字がキーに割り当てら れたメール専用のキーボードを表示し、日付項目は日付ピッカーを表示します。

このしくみを説明するフォームの例を次に示します。

<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>

ユーザがフォーム項目を移動するとき、それらの項目をタップするか、[次へ]ボタン をタップすると、項目に期待されるデータに一致するようにキーボードが変化しま す。

これらの型固有のキーボードにより、外出中のモバイルデバイスを使用したフォーム への入力がさらに容易になります。

第 13 章 開発のガイドラインとベストプラクティス

• 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属性が追加され、その項 目のクライアント側検証が有効になります。

メモ: クライアント側検証では、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 オブジェクトとして利用で きます。このフレームワークの利点は、モバイルコンテキストでより自然にナビゲー ションできることです。また、注文が正常に送信された後に注文ページにリダイレク トする場合など、完了後のナビゲーションを 開発者が容易に作成できるこ

第 13 章 開発のガイドラインとベストプラクティス

Salesforce1で、Visualforceページのプログラムによるナビゲーションは概して次のよう に機能します。