M213: 処理フォーム画面をデコレーションする（HTML/JavaScript）

Avatar
Hirotaka NISHI
  • 更新
フォローする

データ項目の［説明文］を設定すれば、入力フォームの下部に "注記" として表示されるようになります。プレーンテキストだけでなく HTML や JavaScript も設定できるので、"業務上の注意" を強調させる、"関連サイトの URL" のリンク表示させる、"入力文字数カウンタ" を表示させるなど、業務効率を上げる様々な工夫を実現できます。

M213-1 1. デコレーション（入力ヒント）の活用シーンについて、概要を理解する

a. 入力例の掲示
業務データの入力例を列挙し、入力フォーマットのゆらぎを統制する
b. 基準値の掲示
選定基準や判断基準を掲載し、入力者の主観によるバラツキを減らす
c. 注意喚起
業務方針や年間目標を組織内に浸透させる
  • 入力ミスを減らす方法としては、"あらかじめ入力された状態" を実現する［初期値］も有効です　（M207）

2. 各工程におけるデコレーションの仕組みについて、概要を理解する

a. 各データ項目の説明文
フォーム表示されている項目（編集可能）の説明文が掲示されます
b. ガイドパネル型データの説明文
工程プロパティで表示設定になっている説明文が掲示されます
  • ［ガイドパネル］は "入力ヒント" を掲示するための特別なデータ項目です　（M205）

3. デコレーションする（入力ヒントを設定する）

a. 静的なヒントを掲示する
プレーンテキストや HTML で、業務のヒントとなる情報を記載します
b. 外部情報を掲示する
HTML タグ "iframe" で、外部サイトの情報を取り込みます
c. 動的な情報を掲示する
JavaScript で入力中データを参照するなどして、掲示内容を変更します
  • JavaScript を用いた表示変更やデータ通信は自己責任で設定してください
  • JavaScript ライブラリ "jQuery" も活用可能です
  • jQuery で HTML 内の input 要素を参照する場合、name 属性で検索するなどして参照します
  • 具体的なスクリプト設定例は、ワークフローサンプル等を参考にしてください

R2130: "jQuery"を利用した DOM要素（inputタグ等）の操作サンプル

M213-2 M213-3

 

X. ワークフローサンプル

Z. 追加情報: HTML を使ったデコレーション例

a. 区切り
見出しタグ（h4）の背景色を設定すれば、業務データのまとまりが分かりやすくなります。
ガイドパネル デコレータ（旧 UI デコレータ）

Z. 追加情報: JavaScript を使ったデコレーション例

ご注意） サンプル例示されているコードにつき簡易な動作検証は行っておりますが、あらゆる環境での動作が保証されているものではありません。ご利用に際しては必ず自己責任でお使いください。また将来の製品アップデート時に動作しなくなる可能性についても予めご了承のうえでご利用ください。 デコレーション・アイデア（2017-02-03）

a. jQuery ライブラリ
"入力のヒント" に JavaScript を記述する際、ライブラリ "jQuery" が利用可能です。 （全ての動作を保証するものではありません）
b. jQuery の特徴
jQuery とは JavaScript のコーディングを簡易化できるライブラリです（初版2006年）。 "フォーム入力" や "クリック操作" 等の状況に応じた入力画面変化を簡単に設定できるため、業務に応じた入力効率の向上を追及することが可能です。 jQuery("div.column").click(function(){ jQuery(this).css( "background-color", "lightgray") }); といった構文で記述します。 （JavaScript の基礎知識が必要です）
c. "入力ヒント" における注意事項
各データ項目の［説明文］にある HTML/JavaScript は全てロードされますが、工程により［表示のみ］［非表示］となっている場合、当該データ項目の［説明文］はロードされません。（ただしガイドパネルの［説明］にある HTML/JavaScript は［表示のみ］でロードされます）。 不適切な JavaScript/jQuery によって入力画面が不安定になる可能性があります。 "$" による省略表記は利用できません。 原則として、"[" や "(" などのメタ文字は "\\" (two backslashes) でエスケープする必要があります（公式セレクタ）
d. 業務に役立つ関数およびサンプルコード
♦ イベント / Event = 属性セレクタ、Classセレクタ、IDセレクタなどで指定 jQuery('input[♦]').on('keyup',function(){ ♦♦ }); // フォームに変化があれば（属性セレクタ）（単一行フォーム） 
jQuery('input[name="data\\[3\\].input"]').on('keypress keyup change',function(){ // 第3項目の入力値に変化があれば
//keypressで半角英数の入力を検知し、keyupでdeleteキーとbackspaceキーの入力を検知
//change でフォーカス外れを検知
 myfunc(); 
});
jQuery('textarea[♦]').on('keyup',function(){ ♦♦ }); // フォームに変化があれば（属性セレクタ）（複数行フォーム） 
jQuery('textarea[name="data\\[4\\].input"]').on('keypress keyup change',function(){ // 第4項目の入力値に変化があれば
//keypressで半角英数の入力を検知し、keyupでdeleteキーとbackspaceキーの入力を検知
//change でフォーカス外れを検知
    var thisValueLength = jQuery(this).val().length; //文字数をカウント
    jQuery('#mycounter').html(thisValueLength + "characters"); // <p id="mycounter"></p> 内のHTMLを書き換え 
});
jQuery('input[♦], textarea[♦]').on('keyup',function(){ ♦♦ }); // いずれかのフォームに変化があれば 
jQuery('input[name="data\\[3\\].input"], textarea[name="data\\[4\\].input"]').on('keypress keyup change',function(){ 
// 第3もしくは第4項目に変化があれば（カンマでセレクタを列挙）
//keypressで半角英数の入力を検知し、keyupでdeleteキーとbackspaceキーの入力を検知
//change でフォーカス外れを検知
    myFunc(); 
});
jQuery('.myButton').on('click',function(){ ♦♦ }); // いずれかのボタンがクリックされれば （class セレクタ） 
jQuery('.myButton').on('click',function(){ // <input type="button" value="Google Map" class="myButton"> がクリックされれば
    myFunc(); 
});
♦参照 / Retrieving = フォーム内:val() タグ内:text() html()
string jQuery(this).val(); // イベントがおきたフォーム（input, textarea, select等）内の入力中 value 
var textStr = jQuery(this).val();
string jQuery("input[♦]").val(); // フォーム内の入力中 value（属性セレクタ）（単一行文字列型、数値型、日付型） 
var textStr = jQuery("input[name='data\\[9\\].input']").val();
string jQuery("textarea[♦]").val(); // フォーム内の入力中 value（属性セレクタ）（複数行文字列型） 
var textStr = jQuery("textarea[name='data\\[9\\].input']").val();
string jQuery("♦♦♦[name='data\\[♦\\].♦♦♦']:♦♦♦").val(); // フォーム内の入力中 value（属性セレクタ）（選択肢型） 
var textStr = jQuery("select[name='data\\[9\\].selects']").val(); // セレクトボックス
var textStr = jQuery("select[name='data\\[9\\].selects'] option:selected").text(); // セレクトボックス (label)
var textStr = jQuery("input[name='data\\[9\\].selects']:checked").val(); // ラジオボタン
var textStr = jQuery("input[name='data\\[9\\].selects']").val(); // 検索セレクト（id）
var textStr = jQuery("input[name='data\\[9\\].dummy']").val(); // 検索セレクト（label）
string jQuery("#readonly_♦").text(); // タグ内のテキスト（id セレクタ）（数値型［表示のみ］等） 
var textStr = jQuery("#readonly_9").text(); 
// <div id="readonly_9" class="fit"><div class="auto-link" id="ext-gen1193">Hello hello</div></div>
// → Hello hello
string jQuery("#readonly_♦" > li).html(); // タグの１階層下の ul タグ内の HTML （id セレクタ）（選択肢［表示のみ］等） 
var htmlStr = jQuery("#readonly_9 > ul").html(); 
// <div id="readonly_7" class="fit"><ul class="readonly-select"><li>sample choice true</li></ul></div>
// → <li>sample choice true</li>
♦書換 / Rewriting = フォーム内:val(textStr) タグ内:text(textStr) html(htmlStr) jQuery("input[name='data\\[♦\\].input']").val( textString ); // 自身のフォーム内を書き換え（属性セレクタ） 
<script type="text/javascript">
jQuery('input[name="data\\[1\\].input"]').on('change',function(){ 
//データ項目番号「1」のTextフォーム値に変化があれば、
//（change でフォーカス外れを検知）

  var thisValue = jQuery(this).val();

  var myRegex = /^https:\/\/|^http:\/\//; // "http://" もしくは "https://" で始まる (正規表現)
  var newValue = thisValue.replace( myRegex, "" ); // マッチした部分を削除
  // ex) "http://www.questetra.com" → "www.questetra.com"

  var newValueLc = newValue.toLowerCase(); // 小文字化 ※ドメイン部以外にも適用される点に注意

  jQuery('input[name="data\\[1\\].input"]').val( newValueLc );
});
</script>
jQuery("input[name='data\\[♦\\].input']").val( textString ); // 他のフォーム内を書き換え（属性セレクタ） 
<script type="text/javascript">
jQuery('input[name="data\\[1\\].input"]').on('keypress keyup change',function(){ 
//データ項目番号「1」のTextフォーム値に変化があれば、
var thisValue = jQuery(this).val();
//文字数が13桁以上なら文字列の分割
if( thisValue.length > 13 ){
  jQuery('input[name="data\\[2\\].input"]').val( thisValue.substr(0, 6) );
  jQuery('input[name="data\\[3\\].input"]').val( thisValue.substr(6, 13) );
});
</script>
jQuery( '#idStr' ).html( htmlString ); // タグ内の HTML を書き換え（id セレクタ） 
<script type="text/javascript">
jQuery('input[name="data\\[1\\].input"]').on('keypress keyup change',function(){ 
//データ項目番号「1」のTextフォーム値に変化があれば、
//keypress で半角英数の入力を検知し、keyup で delete キーと backspace キーの入力を検知
//change でフォーカス外れを検知
var thisValueLength = jQuery(this).val().length;
 
//文字数が13桁ならチェックディジットを算出
if( thisValueLength == 13 ){
  var mysum = 0;
  var thisValue = jQuery(this).val();
 
 for( i=1; i < 13; i++){
 mysum += parseInt( thisValue.charAt(i) ) * (i % 2 + 1);
 }
 
  var checkdigitnum = 9 - mysum % 9;
  var typedcd = parseInt( thisValue.charAt(0) );
 
// <p id="mymessage1"></p> 内のHTMLを書き換える
  if( typedcd == checkdigitnum ){
    jQuery( '#mymessage1' ).html("OK");
  } else {
    jQuery( '#mymessage1' ).html("<font color=red>NG</font>");
  }
} else {
  jQuery( '#mymessage1' ).html("<font color=blue>13桁の数字を入力してください</font>");
}
});
</script>

このセクションの記事

もっと見る

コメント

0件のコメント

ログインしてコメントを残してください。

関連記事