HTML5 Canvusにテキスト表示する

Canvusにテキスト表示する

HTML5から実装されているCanvusにテキスト表示する簡単なプログラム書いて試してみました。
やはり、今更ながらなのですが。。。

この簡単に書いたプログランは、
・背景色を時刻で変える
・日時を表示する
だけの簡単なものです。
テストはChromeとEdgeで行いました。Chromeは毎回確実に動作をしたのですが、Edgeは動かなくなることがありました。
何かいけないことをしているのかも。。。よくわかっていないので、公開するものに使う時はEdgeで十分にテストしてください。
可能ならどうしてEdgeで動かなくなることがあるのかコメントで教えてもらえるとありがたいです。よろしくお願いします。

一読してもらえばおおよその内容がわかると思います。
インターバルで1秒ごとに背景色と日時時刻を書き換えているだけのシンプルなプログラムです。
初期状態のcanvusの状態を保持と初期状態のcanvusの状態を復元はこのプログラムの中では意味はありませんが、複雑なプログラムになってくると便利らしいです。
私もピンと来ていません(イニシャライズ関数を作れば良いような。。。)が、学習した本に載っていたので便利なんだろうと思い、使うようにしています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>test</title>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
	alert("Canvusテスト");

	var cCanvus = null;
	var cContext = null;

	//$('#canvus1').load(function () {
	window.addEventListener("load",function(){
		// id:canvus1が読み込まれた際に実行したい処理
		cCanvus = document.getElementById("canvus1");
		cContext = cCanvus.getContext("2d");
		setInterval(drawCunvas, 1000);
	});

	function drawCunvas() {
		//cContextをクリア
		cContext.clearRect(0, 0, 300, 250);
		//現在時刻を取得
		var t = new Date();
		//背景の描画
		drawBackGround(t);
		//日時を描画
		drowDateTime(t);
		
	}

	function drawBackGround(t) {
		//初期状態のcanvusの状態を保持
		cContext.save();

		//時刻によって背景色を変える
		var h = t.getHours();
		if (h > 6 && h < 18) {
			cContext.fillStyle = "#aaa";
		} else {
			cContext.fillStyle = "#333";
		}
		//背景を塗りつぶす
		cContext.fillRect(0, 0, 300, 250);

		//初期状態のcanvusの状態を復元
		cContext.restore();
	}

	function drowDateTime(t) {
		//初期状態のcanvusの状態を保持
		cContext.save();

		//日付の文字列を作成
		var tDate = (t.getYear() + 1900).toString() + "年" + (t.getMonth() + 1).toString() + "月" + (t.getDate()).toString() + "日(" + ["日", "月", "火", "水", "木", "金", "土"][t.getDay()] + ")";



		//時刻の文字列を作成
		var tTime = (t.getHours()).toString() + "時" + (t.getMinutes()).toString() + "分" + (t.getSeconds()).toString() + "秒";

		//日時を描画
		cContext.font = "18px";
		cContext.fillText(tDate, 100, 210);
		cContext.fillText(tTime, 100, 230);

		//初期状態のcanvusの状態を復元
		cContext.restore();
	}

});
</script>
<style type="text/css">

</style>
</head>
<body>


<form>
 <div>
 Canvusテスト
 </div>
 <fieldset>
  <LEGEND></LEGEND>
	<canvas id="canvus1" width="300" height="250"></canvas>
 </fieldset>

 <p><button type='submit'>送信</button></p>
</form>
</body>
</html>

以上、「HTML5 Canvusにテキスト表示する」の簡単なサンプルテストでした。

HTML5 数値を選択する入力フィールド

数値を選択する入力フィールド

HTML5から実装されているHTML5 数値を選択する入力フィールドを試してみました。
やはり、今更ながらなのですが。。。

もともと必要ならリストやスライダー等とjavascriptを使って自前で組み込んでいたのですが、どの程度使えるのかと思って。
簡単に数値選択が可能なので、アンケート等で使用するならこれで十分な気がします。
下に試したHTMLを貼っておくので試してみては如何でしょうか?
ちなみに、ブラウザによって微妙な違いが出るかもしれませんので、そのあたりのチェックもした方が良いと思われます。

下のHTMLはtype=’renge’を使って単純な数値を選択する入力フィールド2つを試しています。
バーを移動させるごとに数値を取得して表示しています。
送信ボタンをクリックすると送信されてクリアされます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>test</title>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  alert("テスト開始!数値を選択する入力フィールドのチェックHTMLです");

  $("#range1").change(function() {
    //値が変更されたときの処理
    $("#disp1").val($("#range1").val());
  });

  $("#range2").change(function() {
    //値が変更されたときの処理
    $("#disp2").val($("#range2").val());
  });
});
</script>
<style type="text/css">

</style>
</head>
<body>

<form>
 <div>
 テスト
 </div>
 <fieldset>
  <LEGEND></LEGEND>
  <label>デフォルトの場合、min属性の初期値は0、max属性の初期値は100となります。 また、step属性の初期値は1となります</label>
 <p><label>少ない<input type='range' id='range1'>多い</label><input type='text' id='disp1'></p>

 <label></label>
 </fieldset>

 <fieldset>
  <LEGEND></LEGEND>
  <label>min属性の初期値は1、max属性の初期値は5となります。 また、step属性1とした場合</label>
 <p><label>悪い<input type='range' id='range2' min='1' max='5' step='1'>良い</label><input type='text' id='disp2'></p>

 <label></label>
 </fieldset>

 <p><button type='submit'>送信</button></p>
</form>

</body>
</html>

以上、「HTML5 数値を選択する入力フィールド」の簡単なチェックでした。

HTML5 数値の入力フィールド バリデーションチェック

HTML5 数値の入力フィールド バリデーションチェック

HTML5から実装されているHTML5 数値の入力フィールドのバリデーションチェックを試してみました。
今更ながらなのですが。。。

もともと必要ならjavascriptを使って自前で組み込んでいたのですが、どの程度使えるのかと思って。
簡単な入力チェックならこれで十分な気がします。
下に試したHTMLを貼っておくので試してみては如何でしょうか?
ちなみに、ブラウザによって微妙な違いが出るかもしれませんので、そのあたりのチェックもした方が良いと思われます。

下のHTMLは単純な数値の入力フィールド、小数点の数値の入力フィールド、範囲を指定した数値の入力フィールドの3つを試しています。
送信ボタンをクリックするとバリデーションチェックが行われ、問題が有ればメッセージが表示されます。
問題がなければ送信されてクリアされます。

なので、入力中にチェックをしたいのならこのバリデーションチェックを使うことができません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>test</title>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  alert("テスト開始!入力フィールドに数値以外が入るとバリデーションチェックが入ります。");
});
</script>
<style type="text/css">

</style>
</head>
<body>

<form>
 <div>
 テスト
 </div>
 <fieldset>
  <LEGEND>数値の入力フィールド</LEGEND>
  <label></label>
 <p><label><input type='number' name='number'></label></p>

 <label></label>
 </fieldset>

 <fieldset>
  <LEGEND>小数点の数値の入力フィールド</LEGEND>
  <label></label>
 <p><label><input type='number' name='number1' step='0.1'></label></p>

 <label></label>
 </fieldset>

 <fieldset>
  <LEGEND>範囲を指定した数値の入力フィールド</LEGEND>
  <label>1~99まで</label>
 <p><label><input type='number' name='number1' min='1' max='99'></label></p>

 <label></label>
 </fieldset>

 <p><button type='submit'>送信</button></p>
</form>

</body>
</html>

以上、「HTML5 数値の入力フィールド バリデーションチェック」の簡単なチェックでした。

HTML5のDOCTYPE宣言

HTML5のDOCTYPE

HTML5のDOCTYPE は非常にシンプルです。

<!DOCTYPE html>

DOCTYPE宣言とは

DOCTYPE宣言とは「Document Type Definition」(DTD)のことで、日本語に訳すと「文書型宣言」となります。
ブラウザに対しどのバージョンのHTMLやXHTMLで書かれているかを宣言しています。
HTML文書の先頭に書く必要があります。

DOCTYPE宣言をブラウザに示すことで、文書を解析するパーサが文書型宣言に指定されたDTDを参照することで、ブラウザが規則に従った妥当な文書か否かを検証することができます。
また、一部のブラウザ(HTMLレンダリングエンジン)は「DOCTYPEスイッチ」と呼ばれる機能を有しています。
これはMIMEタイプとしてtext/htmlを与えられた文書に書かれた文書型宣言の内容によってレンダリングを「標準モード」や「互換モード(Quirksモード)」というように切り替えるユーザに見えやすくすることができます。

DOCTYPE宣言をすると

DOCTYPE宣言をすることで、ブラウザはどのバージョンのHTMLやXHTMLで書かれているかがわかります。
HTML5で書かれている旨宣言をすると、文書型宣言はもはやモード指定以外の意味をなさなくなります。
すなわちHTML5における文書型宣言は、レンダリングを「標準モード」へ切り替えるためだけの、「ほとんど役に立たないが、それでも必要な」ヘッダという役割を担います。

たいした意味はなくなりましたが、それで宣言は必須です。
必ずDOCTYPE宣言を書くようにしましょう。