HTML5 フォームでの手書き署名の使用 using-scribble-signature-in-html-forms

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

手書き署名フィールドの使用によるフォームのデザイン how-to-design-a-form-using-scribble-signature-field

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

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

    designer_scribble

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

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

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

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

      note note
      NOTE
      「XML Source」タブを開くには、表示XML Source をクリックします。
    3. <field> タグ内にある <ui> タグを見つけて、ソースコードを次のようになるように変更します。

      code language-xml
      <extras name="x-scribble-add-on">
      <boolean name="geoLocMandatoryOnIpad">0</boolean>
      </extras>
      
    4. Design View」タブを選択します。確認ボックスで、「はい」を選択します。

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

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

手書き署名とのやりとり interfacing-with-the-scribble-signatures

署名 signing

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

geolocation

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

ジオタグ付け geo-tagging

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

NOTE
iPad では、デフォルトで、位置情報の埋め込みは必須です。

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

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

  • 位置情報が必須の場合、ユーザーには小さくなった描画領域が表示されます。位置情報のテキストは、ユーザーが残りのエリアで「OK」をクリックすると追加されます。
  • その他の場合、ユーザーには完全な描画可能領域が表示されます。ユーザーが位置情報を埋め込むことを選択すると、位置情報のテキストに合わせてこの領域のサイズが変更されます。

署名の消去 clearing-a-signature

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

署名の保存 saving-a-signature

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

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

3

ペンサイズの選択 selecting-pen-size

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

フォームからの署名の削除 delete-signatures-from-the-form

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

  • (モバイルデバイス)署名フィールドを長押しし、確認ダイアログで「はい」を選択します。
  • (デスクトップ)署名フィールドにマウスポインターを合わせ、「キャンセル」アイコンをクリックし、確認ダイアログで「はい」をクリックします。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2