HTML5 フォームでの手書き署名の使用

タッチデバイスでの使用が増加する HTML5 フォームの一般的な要件として、署名のサポートがあります。スタイラスまたは指を使った手書きは、モバイルデバイスでフォームに署名する方法として受け入れられつつあります。HTML5 フォームおよび Forms Designer では、フォームに手書き署名フィールドを挿入するオプションが可能になりました。フォームがブラウザーでレンダリングされるときに、スタイラス、マウス、または指を使用してこれらのフィールド上に署名することができます。

手書き署名フィールドの使用によるフォームのデザイン

1. Forms Designer でフォームを開きます。

2. ページ上に手書き署名フィールドをドラッグ＆ドロップします。

   

   メモ

   Forms Designer で選択されたフィールドの寸法は、フィールドがレンダリングされる際に反映されます。ただし、レンダリングされた署名ボックスの寸法は、Forms Designer で指定された寸法ではなく、フィールドの縦横比に基づいて計算されます。

3. 手書き署名フィールドを設定します。

   iPad の署名プロセス中、手書き署名フィールドは、デフォルトで、位置情報を必須としてマークします（他のデバイスではオプションです）。このデフォルトの動作は geoLocMandatoryOnIpad プロパティの値を変更することでオーバーライドできます。このプロパティは手書き署名フィールドのエキストラとして公開されています。それを変更するための手順は：

   1. フォームで、手書き署名フィールドを選択します。

   2. 「XML Source」タブを選択します。

      メモ

      「XML Source」タブを開くには、表示／XML Source をクリックします。

   3. <field> タグ内にある <ui> タグを見つけて、ソースコードを次のようになるように変更します。

      <extras name="x-scribble-add-on">
      <boolean name="geoLocMandatoryOnIpad">0</boolean>
      </extras>
      

   4. 「Design View」タブを選択します。確認ボックスで、「はい」を選択します。

   5. フォームを保存します。

4. サポートされているデバイス／デスクトップブラウザーでフォームをレンダリングします。

手書き署名とのやりとり

署名

手書き署名フィールドがフォームに追加されてレンダリングされたら、そのフィールドをクリックまたはタップするとダイアログボックスが開きます。ユーザーは点線の正方形によって割り当てられた描画領域に、マウス、指、またはスタイラスを使用して、署名を手書きすることができます。

A. ブラシ B. 消しゴム C. 位置 D. 位置情報

ジオタグ付け

手書き中に位置情報アイコンをクリックすると、フィールドに位置情報と時間の情報が埋め込まれます。

iPad では、位置情報アイコンはデフォルトで表示されていなくて、位置情報は「OK」をクリックする際に自動的に埋め込まれます。

iPad では、この設定はフィールドの初期化パラメーターで geoLocManadatoryOnIpad パラメーターの値を 0 に変更することで変えられます。

• 位置情報が必須の場合、減少した描画領域が提供されます。位置情報のテキストは、ユーザーが残る領域で「OK」をクリックすると追加されます。
• その他の場合では、全体が描画可能な領域が提供されます。ユーザーが位置情報を埋め込むことを選択すると、この領域は位置情報のテキストに適合するようにサイズが変更されます。

署名の消去

この機能を使用するときに、ユーザーは​消しゴム​アイコンをクリックしてフィールドを消去し、始めからやり直すことができます。位置情報が追加された場合、それも消去されます。

署名の保存

「OK」アイコンをクリックすると、手書きはフィールドの画像として保存されます。画像と値はさらに処理するためにサーバーに送信できます。ユーザーが「OK」クリックしたら、手書きフィールドはロックされます。手書きウィジェットを使用して署名を再び編集することはできません。

手書きフィールドをタップまたはクリックすると、読み取り専用モードでダイアログボックスが開きます。

ペンサイズの選択

「Brushes」アイコンをクリックして、使用可能なペンサイズのリストを表示します。ペンサイズをクリックまたはタップして、その対応するペンを使用します。

フォームからの署名の削除

フォームから署名を削除するには、以下を実行します。

• （モバイルデバイス）署名フィールドを長押しし、確認ダイアログで「はい」をタップします。
• （デスクトップ）署名フィールドにマウスポインターを置いて「キャンセル」アイコンをクリックし、確認ダイアログで「はい」をクリックします。