ユーザーの入力と操作

効率的な入力要素を選択する

ユーザー入力の取得には、できるだけ <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 属性を設定し、データ型固有のキーボードなど、タッチスクリーンで使用しやすい入力ユーザーインターフェースウィジェットを表示します。値は、生成された HTML <input> 要素に渡されて Salesforce アプリケーションで表示されます。

ユーザーがいくつかのフォーム要素上を移動すると、各フォーム要素で、想定されるデータ型に合った入力メソッドが表示されます。たとえば、テキスト項目は標準のキーボードを表示し、メール項目は @ 記号や「.com」などの文字がキーに割り当てられたメール専用のキーボードを表示し、日付項目は日付ピッカーを表示します。

1<apex:form >
2  
3    <apex:outputLabel value="Phone" for="phone"/>
4    <apex:input id="phone" value="{!fPhone}" type="tel"/><br/>
5      
6    <apex:outputLabel value="Email" for="email"/>
7    <apex:input id="email" value="{!fText}" type="email"/><br/>
8      
9    <apex:outputLabel value="That Number" for="num"/>
10    <apex:input id="num" value="{!fNumber}" type="number"/><br/>
11      
12    <apex:outputLabel value="The Big Day" for="date"/>
13    <apex:input id="date" value="{!fDate}" type="date"/><br/>
14      
15</apex:form>

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

新しい HTML5 機能を含む、HTML type 属性は、HTML の標準の要素です。type 属性、この属性を使用してできること、モバイル開発との関連性についての詳細は、入力 type 属性の値の WHATWG のリストと説明を参照してください。すべての値が Visualforce 入力コンポーネントでサポートされているわけではありません。Visualforce でサポートされていない値を使用する場合は、Visualforce タグの代わりに静的 HTML を使用します。

クライアント側検証に HTML5 パススルー属性を使用する

<apex:input> およびその他の Visualforce コンポーネントでパススルー属性を設定し、クライアント側検証などのその他の HTML5 機能を有効にします。フォームに修正が容易なエラーがあるとき、クライアント側で基本的な検証を実行して、サーバーへの要求の送信およびレスポンス待ちを回避できます。

1<apex:input id="email" value="{!fText}" type="email"
2    html-placeholder="you@example.com"
3    html-pattern="^[a-zA-Z0-9._-]+@example.com$"
4    title="Please enter an example.com email address"/>

属性を使用して 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」を参照してください。