SQLの窓

2016年07月08日


HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる

単純な、メッセージのカスタマイズは以下をご覧下さい
HTML5 で行われる入力チェックのエラーメッセージをカスタマイズする JavaScript の記述

ここでは、さらに CSS で :invalid と :valid 疑似クラスを使用する事によって、常に色を使ってエラーの状態をユーザに訴えます。

:valid で枠線を緑に指定

エラーが無ければ、この状態になります

:invalid で枠線を赤に指定

この指定によって、ここでは未入力チェックとして required を指定しているフィールドが最初から枠線が赤くなります。

required と pattern で色を変える

まず、CSS で、クラスに required と pattern で別の色を指定します。いずれも、枠線の太さを太くし(IE11 は元々そうなるので正しくコントロールできませんでした)、背景色を別々に設定します。

さらに、oninvalid(FORM 送信時のイベント) で、対応するクラスを追加してやると、required では、背景がピンクになり、pattern では背景がオレンジになります。

リアルタイムに色を変える

このままでは、送信時にしか色が変わらないので、onchange イベントを追加して、oninvalid と同じ内容を追加します。そうすると、入力した内容が変化する毎に色が変わる事になります。

※ いずれも、oninput で $(this).removeClass("required pattern"); が必要です。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<style>
input:invalid {
	border: 1px solid red;
}
input.required:invalid {
	border: 2px solid red;
	background-color: pink;
}
input.pattern:invalid {
	border: 2px solid red;
	background-color: orange;
}

input:valid {
  border: 1px solid green;
}
</style>

<script>
$(function(){
	$("#mydata")
		.on("invalid", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
				$(this).addClass("required");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
				$(this).addClass("pattern");
			}
		})
		.on("change", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
				$(this).addClass("required");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
				$(this).addClass("pattern");
			}
		})
		.on("input",function(){
			$(this).removeClass("required pattern");
			this.blur();
			this.setCustomValidity("");
			this.focus();
		});
});
</script>

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe1"
	accept-charset="utf-8">
	<input
		type="text"
		id="mydata"
		name="mydata"
		required
		pattern="[0-9]+">
	<input type="submit" name="send" value="送信">
</form>
<iframe
	name="myframe1"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>



タグ:jquery HTML5
posted by lightbox at 2016-07-08 16:54 | JavaScript | このブログの読者になる | 更新情報をチェックする

HTML5 で行われる入力チェックのエラーメッセージをカスタマイズする JavaScript の記述( この手のコントロールはとてもデリケートです。いろいろなパターン検証が必要です )

このサンプルでは、required 属性と pattern 属性でのエラー結果のメッセージをカスタマイズしています。また、JavaScript のイベント部分の登録には jQuery を使用しています。

validity の下には以下のようなプロパティがあり(Google Chrome 調べ)、個別に対応が可能なようです。
badInput
customError
patternMismatch
rangeOverflow
rangeUnderflow
stepMismatch
tooLong
tooShort
typeMismatch
valid
valueMissing
※ 実践しないと詳細は解りませんが、だいたいの意味は MDN で日本語で書かれています。
customError だけは特殊なプロパティのようで、invalid イベントの中で、setCustomValidity を実行して空文字以外を指定していると true になるようです。
しかも、実行順序とか関係無く、記述されていると invalid の中ではそうなっていました
▼ 何もカスタマイズしないで、デフォルトエラー発生後、コンソールで確認したものです。 required 属性の場合は、未入力だと valueMissing になり、pattern の対象外だと、patternMismatch になりました。詳細は未調査ですが、思ったような対応はおそらく可能だと思います。 ▼ 参考にした Stack Overflow HTML5 form required attribute. Set custom validation message? Stack Overflow でも書かれていますが、oninput での処理が重要となります。(そもそも、この手の validate 処理は、業務アプリでは重要になります。やっと、HTML でそれがサポートされるようにはなりましたが、結果的には JavaScript の力を借りる事は避けられないようです。)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$(function(){
	$("#mydata")
		.on("invalid", function(e){
			if ( e.currentTarget.validity.valueMissing ) {
		                this.setCustomValidity("必須入力です");
			}
			if ( e.currentTarget.validity.patternMismatch ) {
		                this.setCustomValidity("数値を入力して下さい");
			}
		})
		.on("input",function(){
			this.blur();
			this.setCustomValidity("");
			this.focus();
		});
});
</script>

<form
	action="http://winofsql.jp/php_get.php"
	target="myframe1"
	accept-charset="utf-8">
	<input
		type="text"
		id="mydata"
		name="mydata"
		required
		pattern="[0-9]+">
	<input type="submit" name="send" value="送信">
</form>
<iframe
	name="myframe1"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>
oninput で setCustomValidity("") でカスタムメッセージをクリアしているのは、例えば、required だけメッセージを変更していた場合、setCustomValidity("") でクリアしなければ、pattern のエラーになっているにもかかわらず 『必須入力です』 と表示されてしまいます。

そこで、setCustomValidity("") でクリアだけ実行すると、 『必須入力です』 というメッセージが表示されている状態のままで数字以外を入力すると、 『デフォルトのpattern のエラーメッセージ』 が表示されますい。これが、required のカスタマイズだけなら正しいのですが、pattern のメッセージもカスタマイズしている場合に新しいメッセージに切り替わりません。

そこで、いったんフォーカスを外して現在の表示をキャンセルして setCustomValidity("") でカスタムメッセージをクリアして、フォーカスを戻すという処理を行っています
textarea で pattern 属性は使用できません ( MDN のドキュメント ) 関連する記事 HTML5 で行われる入力チェックを :invalid :valid 疑似クラスと JavaScript を使用してリアルタイムにエラーを視認させる
タグ:jquery HTML5
posted by lightbox at 2016-07-08 13:39 | JavaScript | このブログの読者になる | 更新情報をチェックする

2016年07月01日


キネクトでブラウザを動かす

必要なもの

1) キネクト
2) Visual Studio
3) Kinect for Windows SDK v1.7
4) Kinect PowerPoint Control

Kinect PowerPoint Control の概要

結局のところ、Kinect の基本的な機能のとても簡単なサンプルです( 音声認識部分もありますが、日本語がどうかわからないので試していません )。
Power Point での使用を想定して作られたようですが、右手が頭より、X 軸で(外側に) 45センチ離れたら 右矢印キーを押し、左手が頭より、X 軸で(外側に) 45センチ離れたら 左矢印キーを押すという機能のみ実装されています。

ここでは、3箇所しか認識させていませんが、同様にして 20箇所の人体の部分を認識可能です。

なので、少しコードを触るだけで、ジェスチャーによるキーコマンドをいくつでも追加できます。そして、ブラウザ側では、jQuery を使って .keydown で受ければいろいろな画面展開が可能になるでしょう。

コマンド受付部分(ここを改造)
        private void ProcessForwardBackGesture(Joint head, Joint rightHand, Joint leftHand)
        {
            // 頭と右手が x 座標で 45 センチ離れた場合に 右矢印キーを押した事にする
            if (rightHand.Position.X > head.Position.X + 0.45)
            {
                if (!isForwardGestureActive)
                {
                    isForwardGestureActive = true;
                    System.Windows.Forms.SendKeys.SendWait("{Right}");
                }
            }
            else
            {
                isForwardGestureActive = false;
            }

            // 頭と左手が x 座標で 45 センチ離れた場合に 左矢印キーを押した事にする
            if (leftHand.Position.X < head.Position.X - 0.45)
            {
                if (!isBackGestureActive)
                {
                    isBackGestureActive = true;
                    System.Windows.Forms.SendKeys.SendWait("{Left}");
                }
            }
            else
            {
                isBackGestureActive = false;
            }
        }

※ 各コマンド用のフラグは MainWindow クラスの変数として追加定義します

実際動かすと良く解りますが、頭と手が認識されると赤い丸が表示され、コマンドを送れる位置に移動すると大きな緑の丸に変化します。コマンドは、いったん赤い丸に戻してからでないと、再度実行する事はできません。

また、認識には少なくとも 150センチ離れる必要があり、C キーで認識円の表示を消す事ができるようです。

画面定義
<Window x:Class="KinectPowerPointControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Kinect PowerPoint Control"
        Height="480"
        Width="640"
        WindowState="Maximized">
    <Viewbox Stretch="Uniform">
        <Grid>
            <Image Name="videoImage"
                   Width="640"
                   Height="480"></Image>
            <Canvas Background="Transparent">
                <Ellipse Fill="Red"
                         Height="20"
                         Width="20"
                         Name="ellipseLeftHand"
                         Stroke="White" />
                <Ellipse Fill="Red"
                         Height="20"
                         Width="20"
                         Name="ellipseRightHand"
                         Stroke="White" />
                <Ellipse Fill="Red"
                         Height="20"
                         Width="20"
                         Name="ellipseHead"
                         Stroke="White" />
            </Canvas>
        </Grid>
    </Viewbox>
</Window>

※ videoImage に、映像が表示され、最初左上に赤い丸が表示されています。

プログラムの中核となる部分
        void sensor_SkeletonFrameReady(object sender, SkeletonFrameReadyEventArgs e)
        {
            using (var skeletonFrame = e.OpenSkeletonFrame())
            {
                if (skeletonFrame == null)
                    return;

                if (skeletons == null ||
                    skeletons.Length != skeletonFrame.SkeletonArrayLength)
                {
                    skeletons = new Skeleton[skeletonFrame.SkeletonArrayLength];
                }

                skeletonFrame.CopySkeletonDataTo(skeletons);
            }

            Skeleton closestSkeleton = skeletons.Where(s => s.TrackingState == SkeletonTrackingState.Tracked)
                                                .OrderBy(s => s.Position.Z * Math.Abs(s.Position.X))
                                                .FirstOrDefault();

            if (closestSkeleton == null)
                return;

            // 頭
            var head = closestSkeleton.Joints[JointType.Head];
            // 右手
            var rightHand = closestSkeleton.Joints[JointType.HandRight];
            // 左手
            var leftHand = closestSkeleton.Joints[JointType.HandLeft];

            // NotTracked : 追跡していない
            if (head.TrackingState == JointTrackingState.NotTracked ||
                rightHand.TrackingState == JointTrackingState.NotTracked ||
                leftHand.TrackingState == JointTrackingState.NotTracked)
            {
                //Don't have a good read on the joints so we cannot process gestures
                return;
            }

            // MainWindow.xaml に定義された ellipse
            SetEllipsePosition(ellipseHead, head, false);
            SetEllipsePosition(ellipseLeftHand, leftHand, isBackGestureActive);
            SetEllipsePosition(ellipseRightHand, rightHand, isForwardGestureActive);

            ProcessForwardBackGesture(head, rightHand, leftHand);
        }


二つのフラグが立って初めてコマンドを送れるようにも出来ますし、20箇所の場所を使えばいろいろかなりコマンドを作れると思います。また、ブラウザ上の位置とキネクトの座標とを同期させてコマンドを発動する事もできるでしょう。




posted by lightbox at 2016-07-01 07:31 | VS(C#) | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり