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宣言を書くようにしましょう。

【HTML5】HTML5とは

HTML5とは
 定義を大まかに言うと、HTML5はW3C(World Wide Web Consortium ワールド・ワイド・ウェブ・コンソーシアム)によって2014年10月28日に勧告・公開された、WebPage(ウェブページ)やWeb Application(ウェブアプリケーション)を構築する際に使用されるフォーマット仕様の第5版である。
また、2016年9月にHTML 5.1が勧告される予定。
HTMLを取り巻く環境は、各組織の思惑が有るため複雑に絡んでいます。
なので、興味の有る人は別途ググってください。

ここからは私見で書くので、偏った情報になると思いますが、このような見方もあるとの参考にしてください。
HTML5とは、ウェブアプリケーションのプラットフォームとしての機能させるべく開発された仕様です。
そのため、今までは例えばプラグインをインストールしないと使えなかったビデオ機能など、普通に欲しいと思われる機能を盛り込んだ仕様になっています。
これはAppleがFlashを採用しなかったようにいろいろと思惑が働いているようですが、基本的には、プラットフォームは共通の技術の上に構築されるべきという概念が有るためと思われます。FlashはAdobeの製品なので、Adobeが特定のハードウェアに対しプラグインを作らないという事態はAdobeの支配が強まるとの見方もでき、Appleの容認できなかったようです。

なので、HTML5は巨大なマーケットをいろいろな組織が自分達の有利になるよう、または不利にならないように、便宜上公平なプラットフォームとして策定したHTML仕様です。
ですが、HTML5はW3C以外にもWHATWG(Web Hypertext Application Technology Working Group ウェブ・ハイパーテキスト・アプリケーション・テクノロジー・ワーキング・グループ)の影響も受けており、策定に関しては専門家でないとよくわからないと思われます。

とりあえず、HTML5を使うに当たっては、当面不必要な情報でしたが、HTML5の定義はこんな感じです。

以上、HTML5とは・・・でした。