������PP2�����J���ꂽIE10�́AHTML5�@�\��啝�����B�h���b�O���h���b�v�ȂǁA6��ނ̋@�\���A�f���ƃT���v���E�R�[�h�ʼn���B
�@
�@�O���Ɉ��������AInternet Explorer 10�i�ȉ��AIE10�j�v���b�g�t�H�[���E�v���r���[�ł̉�����s���B
�@�Ȃ��A�O�҂ł�Platform Preview 1���x�[�X�ɉ�����s�������A���ł�Platform Preview 2�i�ȉ��APP2�j�������[�X����Ă��邽�߁A��������܂߂ĉ�����Ă����BPP1��2011�N4��12���̃����[�X�������̂ŁA�u8�`12�T���Ɓv�Ƃ�������ʂ�A��11�T�Ō��J���ꂽ���ƂɂȂ�B
�@�����A���܂��܂ȃ��f�B�A��HTML5�����グ���Ă���B���݁AFlash��Silverlight�Ȃǂō���Ă���悤�ȓ��I�ȃA�v���P�[�V������HTML�݂̂ŕ\���ł���Ƃ������ƂŁAWeb�̏�����S�����̂Ƃ��đ����̊��҂����Ă���B
�@Web�u���E�U����Ă���e�Ђ���́AHTML5�Ή��̃u���E�U�Ƃ��āA���X�Ɛ��i�������[�X����Ă���A�e�Ђ����Ђ̃u���E�U��œ��삷��HTML5�f�������J���Ă���ł���B�������A�����ŋC�ɂȂ�|�C���g������B�e�Ђ����Ѓu���E�U�œ��삷��HTML5�f�������J���Ă���Ƃ������Ƃ́A�܂茻��ł͊��S�Ȍ݊������Ȃ����Ƃ��Ӗ�����B
�@�u�Ȃ��݊������Ȃ����v�Ƃ����ƁAHTML5�̎d�l���܂��m�肵�Ă��Ȃ�����ł���BHTML5�̘b���̂悤�ɕ������߁A���łɎd�l���m�肵�Ă���Ɗ��Ⴂ�����������A2007�N���猟������Ă���HTML5�́A2011�N5���ɍŏI���Ă��o���A2014�N�܂łɊ����������\��ƂȂ��Ă���A�ŏI�I�Ȏd�l�m��͂܂���ł���B
�@1990�N��̌㔼�ɂ������u���E�U�푈���o���Ă���l���������낤�B�l�b�g�X�P�[�v��IE���u�_�C�i�~�b�NHTML�iDHTML�j�v�ƌĂ��A�u���E�U��œ��I�ȃy�[�W�������ł���HTML���������ꂼ��ɐi�߂����߁A�u���E�U�ԂŌ݊������Ȃ��Ȃ�AWeb�J���҂��u���E�U���ƂɎ������s���K�v���o�Ă��܂����B
�@���݁A��u���E�U�푈�Ƃ��āAChrome�AFirefox�ASafari�AOpera�A������IE�ƁA�e�Ђ�JavaScript�̎��s���x��HTML5�^CSS3�̎����������ɂȂ��Ă���B�������AHTML5�^CSS3�ɂ��ẮA�������W3C�̎d�l�ɂ̂��Ƃ��Ď������s�������Ƃ����̂��A�u���E�U�e�Ђ̍l���̂悤���B
�@���̒��ł�IE�͂Ƃ�킯�T�d�ɂȂ��Ă���悤�Ɍ�����BW3C�̎d�l���ł܂������̂ɂ��ẮA����IE�Ɏ������Ă������A�d�l���ύX���ꂻ���ȑ����̂��̂ɂ��ẮAHTML5 LABS�Ńv���O�C���Ƃ��Č��J���Ă���B�t��HTML5 LABS�Ƀv���r���[�łƂ��Č��J����Ă�����̂̒��ŁA�d�l���m�肵�����̂́AIE10�̍���̃v���r���[�łɒlj�����邱�Ƃ��l������B
�@HTML5�́A�d�l�����ׂĊm�肵�Ă��Ȃ��ł���BHTML5�̎d�l��������W3C�̃T�C�g�Ō��J����Ă���A�d�l������\���X�e�[�^�X�́A�ȉ��̏��ōX�V����Ă����B
���āiWD�FWorking Draft�j
�ŏI���āiLC�FLast Call Working Draft�j
�������iCR�FCandidate Recommendation�j
�����āiPR�FProposed Recommendation�j
�����iREC�FRecommendation�j
�@IE�Ŏ��������@�\�́A�D�揇�ʁiPriority�j�ƃX�e�[�^�X����Ɏ������������߂Ă���悤�ł���BIE10�Ŏ�������Ă���CSS3�̋@�\�ɂ����Ă̂��̂��܂܂�邪�A���Ēi�K�Ńu���E�U�Ɏ�������ꍇ�́A�x���_�E�v���t�B�b�N�X��t���āi�Q�l�F���L�̕\�j�A�W���d�l�ł͂Ȃ����ƂL���邱�Ƃ���������Ă���B
ms | Internet Explorer |
---|---|
moz | Firefox |
webkit | Safari�AGoogle Chrome |
o | Opera |
HTML�̃x���_�E�v���t�B�b�N�X ���Ēi�K�̎d�l����������ꍇ�A�x���_�E�v���t�B�b�N�X��t���邱�Ƃ���������Ă���B |
�@��������́AIE10 PP1��PP2�Œlj����ꂽHTML5�̋@�\�ɂ��ĉ�����Ă����B�lj����ꂽ�@�\�̒��ɂ́A���Ă̂��̂��܂܂�邽�߁A�ums�v�Ƃ����x���_�E�v���t�B�b�N�X���t���Ă�����̂�����B���ꂪ�t���Ă�����̂́A�����I�ɍ폜���ꂽ��A�ύX���ꂽ�肷��\��������A�܂��A�u�������v�ȍ~�ł́A�x���_�E�v���t�B�b�N�X���O����邽�߁A�����ĔO���ɒu���Ăق����B
�� 6-1. HTML5 Drag-drop
�@�h���b�O���h���b�v�́A������IE9�ł�dataTransfer�I�u�W�F�N�g��ʂ��āA�e�L�X�g�A�摜�A�����N�Ɍ��肵�Ăł��Ă����BIE10 PP2����́Adraggable�������͂��߂Ƃ���A�h���b�O���h���b�v�̋@�\���lj�����Ă���AHTML�I�u�W�F�N�g�̃h���b�O���h���b�v��A�uFile Reader API�v�ƌĂ��API���Ăяo�����Ƃɂ��A�f�X�N�g�b�v����h���b�O���h���b�v�œn���ꂽ�t�@�C����ǂݍ��ދ@�\������Ă���B
�@�����̋@�\�̃f���Ƃ��āA�umagnetic poetry�v�����J����Ă���B���̃f���ł́A���ɕ��ԒP����h���b�O���h���b�v�ňړ����邱�Ƃ��ł���B�܂��A�t�@�C�����h���b�O���h���b�v���邱�ƂŁA�t�@�C���̃C���[�W��\��t������悤�ɂȂ��Ă���B���̉�ʂ́A���̎��s��ł���B
�@�܂��́A�y�[�W���Ńh���b�O���h���b�v����������P���ȃT���v�����쐬�����̂Łi�ȉ��̉�ʂ��Q�Ɓj�A�������ɉ�����Ă������B
�@�@�@�G�������g���h���b�O���h���b�v
�@������������Ă���HTML�^CSS�R�[�h���m�F���Ăق����B
<!DOCTYPE html>
<html>
<head>
<title>Positioned Float</title>
<style type="text/css">
div {
position: absolute;
background-color: pink;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="gu" draggable="true">���[</div>
<div id="choki" draggable="true">���傫</div>
<div id="pa" draggable="true">�ρ[</div>
<script>
function init() {
setDrag('gu', '200px', '150px');
setDrag('choki', '200px', '225px');
setDrag('pa', '200px', '300px');
}
function setDrag(id, top, left) {
var div = document.getElementById(id);
div.style.top = top;
div.style.left = left;
div.addEventListener('dragend', dragEnd, true);
}
function dragEnd(event) {
var newtop =removePxAndFloor(this.style.top) + Math.round(event.offsetY);
var newleft =removePxAndFloor(this.style.left) + Math.round(event.offsetX);
this.style.top = newtop.toString() + "px";
this.style.left = newleft.toString() + "px";
}
function removePxAndFloor(str) {
return Math.floor(str.slice(0, str.indexOf('px')));
}
init();
</script>
</body>
</html>
�@�c�O�Ȃ���A�G�������g�̈ړ��́AJavaScript�ŃR�[�h�������K�v������B����������܂ł́A�摜�A�e�L�X�g�A�����N�����ɋ�����Ă����h���b�O���A���܂��܂ȃG�������g�ʼn\�ɂȂ����B���̂��߁A�����̂���y�[�W���A����܂ł��e�ՂɎ����ł���悤�ɂȂ��Ă���B
�@���̂ق��̃v���p�e�B��ڍ��ɂ��ẮA�wInternet Explorer Platform Preview Guide for Developers�x�i�p��B�ȉ��A�v���r���[�E�K�C�h�j���Q�Ƃ��Ăق����B
�� 6-2. HTML5 Forms Validation
�@HTML5�ł́A�Q�[���̂悤�ȃ��b�`�ȃ��[�U�[�E�C���^�[�t�F�C�X�i�ȉ��AUI�j�����グ���邱�Ƃ��������AHTML5 Forms�ɂ����̓t�H�[�����傫�Ȋ��҂��W�߂Ă���@�\�̈���B
�@����܂ł́A���[���E�A�h���X����t�ȂǁA�p�ɂɓ��͂���鍀�ڂł��A�W���I�ȃt�B�[���h�����݂��Ă��Ȃ��������߁A�e�L�X�g�E�t�B�[���h��p�ӂ��āA���ꂼ��̊J���҂�UI��o���f�[�V��������������K�v���������B�ŋ߂ł́AjQuery�ƁA���̃v���O�C�����g���ē��t�Ȃǂ̓��̓t�H�[�����������邱�Ƃ���ʓI�ɂȂ��Ă��Ă���A���͂₻�̎�@���f�t�@�N�g�E�X�^���_�[�h�Ƃ����Ă��悢�ɂȂ��Ă���B
�@���������̒��AHTML5�ł́A�W���@�\�Ƃ��ē��̓t�B�[���h���lj�����邱�ƂɂȂ����B�V�����lj��������̓t�B�[���h�ɂ́A�ȉ��̂��̂�����B�������AIE10 PP2�ł́AUI�͒��ꂸ�A�ꕔ�̓��̓t�B�[���h�̃T�|�[�g�Ɠ��̓o���f�[�V�����݂̂�����Ă���B
�t�B�[���h�E�^�C�v | ���� | IE10 PP2�ł̎����i�o���f�[�V�����̂݁j |
---|---|---|
search | �����p�̕��������͂���t�B�[���h�BIE10 PP2�ł͂܂���������Ă��Ȃ� | �~ |
tel | �d�b�ԍ����̓t�B�[���h | �� |
url | URL���̓t�B�[���h | �� |
���[���E�A�h���X���̓t�B�[���h | �� | |
datetime | �������̓t�B�[���h�BUTC�����œ��͂���B���t�E���ԃR���g���[���������Ɨ\�z����� | �~ |
date | ���t���̓t�B�[���h�B���t�R���g���[���������Ɨ\�z����� | �~ |
month | �N�����̓t�B�[���h�B���t�R���g���[���������Ɨ\�z����� | �~ |
week | �N�T���̓t�B�[���h�B���t�R���g���[���������Ɨ\�z����� | �~ |
time | ���ԓ��̓t�B�[���h�B���ԃR���g���[���������Ɨ\�z����� | �~ |
datetime-local | ���[�J���������̓t�B�[���h�B���t�E���ԃR���g���[���������Ɨ\�z����� | �~ |
number | ���l���̓t�B�[���h�B�X�s���E�R���g���[���������Ɨ\�z����� | �� |
range | ���l���̓t�B�[���h�B�X���C�_�E�R���g���[���������Ɨ\�z����� | �~ |
color | �F���̓t�B�[���h�B�F�I���R���g���[���������Ɨ\�z����� | �~ |
IE10 PP2������HTML5 Forms�̓��̓t�B�[���h�̈ꗗ�\
�@Test Drive�̃f���Ƃ��ẮAHTML5 Forms�����J����Ă���B����́A�P�[�L�̃I�[�_�[�E�t�H�[���̃f���ŁA�X�֔ԍ��A���[���E�A�h���X�A���l�͈͎̔w��Ȃǂ̃o���f�[�V�������m�F�ł���i���̉�ʂ��Q�Ɓj�B
�@����ł́A�ȉ��Ɏ����V���v���ȃT���v�����g���ĉ�����Ă������B
�@����ł́A���̃T���v���̃R�[�h���m�F���Ă������B
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input {
width: 200px;
}
</style>
<title>HTML5 Form</title>
</head>
<body>
<form>
<label>���O(�K�{)<input type="text" placeholder="��������͂��Ă��������B" required></label><br />
<label>0����10�܂ł̐��l <input type="number" min="0" max="10" /></label><br />
<label>�X�֔ԍ� <input type="number" pattern="[0-9]{3}-[0-9]{4}" placeholder="000-0000" /></label><br />
<label>URL<input type="url" placeholder="http://www.atmarkit.co.jp" /></label><br />
<label>���[���E�A�h���X<input type="email" placeholder="[email protected]" /></label><br />
<input type="submit"/>
</form>
</body>
</html>
�@���̃R�[�h�ɂ�����A���ꂼ��̓��̓t�B�[���h�ɂ��ĉ�����Ă������B
<label>���O(�K�{)<input type="text" placeholder="��������͂��Ă��������B" required></label><br />
�@�V�������̓t�B�[���h�ɂ́A�o���f�[�V�����̃R�[�h�������Ȃ��Ă��A�����I�Ƀo���f�[�V������������悤�ɂȂ��Ă���B��̃R�[�h�ł́A�uplaceholder�����v�œ��͗��ւ̐������\���ł���B�܂��A�urequired�����v�œ��͕K�{�o���f�[�V�������w��ł���B
<label>0����10�܂ł̐��l <input type="number" min="0" max="10" /></label><br />
<label>�X�֔ԍ� <input type="number" pattern="[0-9]{3}-[0-9]{4}" placeholder="000-0000" /></label><br />
�@���l���͂́unumber�^�C�v�v�̓��̓t�B�[���h�ł́A���l�݂̂����͉\�ɂȂ�B�܂��Amin�^max�����œ��͒l�̏���l�^�����l���w��ł��A���͈̔͊O�̐��l�����͂����ƁA�o���f�[�V�����E�G���[�Ƃ��ĕ\�������B�X�֔ԍ��́A���K�\����3�`4���̃t�H�[�}�b�g���w�肵�Ă���B
<label>URL<input type="url" placeholder="http://www.atmarkit.co.jp" /></label><br />
<label>���[���E�A�h���X<input type="email" placeholder="[email protected]" /></label><br />
�@URL���͂́uurl�^�C�v�v�ƃ��[���E�A�h���X���͂́uemail�^�C�v�v�̓��̓t�B�[���h�ł́A��{�I�ȓ��̓o���f�[�V�������s����B�������A�u���݂���URL��[���E�A�h���X�ł��邩�v�͊m�F�ł��Ȃ����A������Ƃ����t�H�[�}�b�g�ł���Ƃ���܂ł͊m�F�ł��Ȃ��B���̂��߁A�����ȃ`�F�b�N���K�v�ȏꍇ�́AJavaScript�R�[�h��T�[�o�T�C�h�̃o���f�[�V�����ȂǂŁA���ڍׂȃ`�F�b�N���������Ȃ���Ȃ�Ȃ��B
�@���������낤���B���̓t�B�[���h�̃o���f�[�V�������ȒP�Ɏ����ł��Ă��邱�Ƃ������������������̂ł͂Ȃ����낤���B����ɏڍׂ��m�F�������ꍇ�ɂ́A�u�J���҃K�C�h�v���m�F���Ăق����B�����ɂ́AJavaScript���g�����o���f�[�V������ACSS�ɂ�鏑���w��̕��@���L�ڂ���Ă���B�܂��A�t�H�[�����g�킸�ɁgPOST�h�����\�������邽�߁A�T�[�o�T�C�h�̃o���f�[�V�������ȗ��ł���킯�ł͂Ȃ����Ƃ�F�����Ă����Ăق����B
Copyright© Digital Advantage Corp. All Rights Reserved.
��IT eBook