Processing.js�ASVG�AWebGL�ȂǁAHTML5���ӂ̃O���t�B�b�N�֘A�Z�p������悤�B��22�� HTML5�Ƃ�����|�[�g
�@2011�N10��26���A�i��O�����h�Z���g�����^���[�̃}�C�N���\�t�g�i��{�ЂɂāA�u��22�� HTML5�Ƃ�����v���J�Â��ꂽ�BHTML5�Ƃ�����́AHTML5�ɊS�̂���G���W�j�A��R�[�_�[�A�f�U�C�i�[�����̕���B����̃e�[�}�́u�O���t�B�b�N�֘AAPI�v�B�����̗l�q�����`�����悤�B
�@�܂��A�[���x�[�X�̓c�����i@dotimpact�j����v���[�����X�^�[�g�����B�c�����͔��p��w�Ŕ��u�t��������AProcessing�̓��发���M�Ȃǂ���|���Ă���B
�@�c�����̃v���[���́AProcessing�̏Љ��n�܂����B �c�����́�IT�ł�Processing�̋L���uProcessing�̑Θb���X�P�b�`�v���O���~���O�ŗV�ڂ��v���Q�Ƃ������������B
�@Processing��2001�N�AMIT���f�B�A���{���ŁA�x���E�t���C�A�P�C�V�[�E���[�X�炪�J�������I�[�v���\�[�X�v���W�F�N�g�B�f�U�C�i�[�E�A�[�e�B�X�g�̂��߂̃O���t�B�b�N����ɓ��������v���O���~���O���ł���B
�@�����Ƃ��āA���Ȍ��ȕ��@��API�AJava�x�[�X�ŃX�e�b�v���s���\�A�����ĊC�O�ŋ��͂ȃ��[�U�[�R�~���j�e�B�⊈�p�Ⴊ���邱�Ƃ�������ꂽ�B
�@�����ł�Processing����̏Ƃ��ẮA���发�����łɑ����o�ł���Ă���A�v���O�������Ƃ̋��ނ�z�r�[�v���O���~���O�̗p�r�Ŋ��p����Ă���B
�@Processing.js�́A�����Processing�̃R�[�h��Web��Ŏ��s����JavaScript���C�u�����ł���B2008�N�AjQuery�̍�҂ł���John Lessig���v���g�^�C�v���J���BProcessing 2.0�ł�Processing.js�ɐ����Ή��\�肾���������B
�@Parser��Processing�̃R�[�h��JS�ɕϊ����AProcessing��API��Canvas�ŃG�~�����[�g����Ƃ����d�g�݁BAPI�ɂ��Ă�9���ȏオ�����ς݂��B
�@Processing API��2D�`�施�߂�����Ă���ACanvas�`���wrapper�ƂȂ��Ă���BPoint�Aline�A rect�A ellipse�Ȃǂ�API���p�ӂ���Ă���B
�@�܂��AProcessing API��3D�`�施�߂������Ă���Asize���߂�3D���[�h���w�肷��Ύg�p�ł���B3D�`�施�߂�WebGL��wrapper�ɂȂ��Ă���Abox�A sphere�A camera�A lights�Ȃǂ�API���p�ӂ���Ă���B
�@�摜�E�s�N�Z���𑀍삷��API���g�p�ł���B@pjs�f�B���N�e�B�u�ʼn摜���v�����[�h����BloadImage�A image�Afilter�A copy�Ȃǂ�API���p�ӂ���Ă���B
�@Processing.js�̃����b�g�Ƃ��āAProcessing�̊����\�[�X�R�[�h�����̂܂ܓ�������AProcessing�R�~���j�e�B�̃r�W���A���v���O���~���O�Ɋւ�������Q�l�ɂ��₷���AAPI�݂̂�Canvas�`�惉�C�u�����Ƃ��Ďg�p���邱�Ƃ��\�A�Ƃ������_��������ꂽ�B
�@�܂��AProcessing.js�̃f�����b�g�Ƃ��āA�����Ȃ�Processing�R�[�h���ꕔ���݂��邱�ƁA�N�����̃R�[�h�ϊ��R�X�g���|���邱�ƁA�����ĕϊ��R�[�h�̎��s�p�t�H�[�}���X�Ȃǂ�������ꂽ�B
�@�c������Web�Ń��[�_�[�ƃG�f�B�^���J�������d�q���Ѓv���b�g�t�H�[���uBCCKS�v�������ďЉ�ꂽ�B
�@���͍����Processing.js�Ɋւ���v���[���̃X���C�h���ABCCKS�ɂ���č���Ă��邱�Ƃ��������ꂽ�B
�@BCCKS���[�_�[���G�f�B�^�ł́ADrag and Drop API�AFile API�ACanvas�ɂ��y�[�W�T���l�C���쐬�Ȃǂ�HTML5�����p����Ă���B
�@Processing.js���C���^���N�e�B�u���Ђ̃X�N���v�g����ɂł��Ȃ����H �Ƃ������ƂŁA�����܂Ŕ��\�p�̎����iBCCKS�ł͎����̗\��͂Ȃ��j�Ƃ��Ȃ�����ABCCKS + Processing.js�ɂ��AHTML5���g�����C���^���N�e�B�u�ȓd�q���Ѓ��[�_�[�̃f�����s��ꂽ�B
�@�O���[�̓n�ӎ��i@sassy_watson�j�ɂ�锭�\�B
�@�n�ӎ��͍��܂łɑg�ݍ���Web�u���E�U�̃����_�����O�G���W���̊J����AAndroid��WebKit�x�[�X�u���E�U�A�v���P�[�V�����̊J���Ȃǂ��s���Ă����Ƃ̂��ƁB
�@SVG�́AScalable Vector Graphics�̗��ŁA�g��k���\�ȃx�N�^�[�摜�̃t�H�[�}�b�g�ł���B�s�N�Z���̏��ł͂Ȃ��A�ʒu����̈������Ɋւ�����������Ă��āA�v�Z���Ă���`�悷��d�g�݂Ƃ̂��ƁB
�@�g��E�k�����Ă������摜�i����ۂĂ�̂ŁA���܂��܂ȃf�o�C�X�ɑΉ��ł��A���̃u���E�U�ŃT�|�[�g����Ă���Ƃ̂��ƁB
�@SVG��XML�ŋL�q����A���[�g�̗v�f��<svg>�B���O��Ԃ� http://www.w3.org/2000/svg �ł���B
�@HTML5�ł�SVG���g�p���邱�Ƃ��ł���B�C�����C���ŋL�q�A<object>�v�f�ŋL�q�A<img>�v�f/background-image�v���p�e�B���g���Ƃ���3�̕��@�Ŏg�p���\�Ƃ̂��Ƃł���B
�@SVG�͉摜�Ȃ̂ŁA<img>�v�f��background-image�v���p�e�B�ł��w�肷�邱�Ƃ��ł���B�܂��Alist-style-image�v���p�e�B�Ń}�[�J�[�ɂ��w��\�ł���B�������Ascript�������Ȃ��̂ŁA���ӂ��K�v�Ƃ̂��Ƃ������B
�@�܂��ASVG�̒���HTML�̂悤�ȑ��̃}�[�N�A�b�v���g�������Ƃ���<foreignObject>���g���Ηǂ��Ƃ̂��Ƃ��B
�@����̃v���[���ł́A�O���t�B�b�N�v�f�A���W�ϊ��A�A�j���[�V�����A�O���f�[�V�����Ȃǂ̎d�l�ɂ��Đ������Ȃ��ꂽ�B
�@SVG�������O���t�B�b�N�X�v�f�Ƃ��ẮA�x�N�^�[�摜�A���X�^�摜�A�e�L�X�g�Ȃǂ����݂���Ƃ̂��ƁB
�@��{�}�`�Ƃ��āArect�Acircle�Aellipse�Aline�Apolyline�Apolygon�Ȃǂ��p�ӂ���Ă���A������p���邱�ƂŊȒP�ɐ}�`��`�悷�邱�Ƃ��\���������B
�@�摜��<image>�v�f�Ŏw��\�APNG�A JPEG�A SVG���g�p�ł���Ƃ̂��ƁB�ʒu(x,y)�ƕ�(width)�A����(height)���w�肵�A�摜��xlink:href�Ŏw�肷��Ƃ̂��Ƃ��B
�@�e�L�X�g��<text>�v�f�Ŏw��ł���B�ʒu(x,y)��K���w�肷��K�v������Brotate�����Ńe�L�X�g����]�����邱�Ƃ��\�ŁA<tspan>�v�f�ŕ����̈ꕔ�̈ʒu��X�^�C����ς��邱�Ƃ��\�ł���B
�@���W�n�̕ϊ��́Atransform�����ōs�����Ƃ��ł���Btranslate�Ascale�Arotate�Askew�Amatrix�Ȃǂ̕ϊ����\�ł���B
�@transform(scale)�ł́Ascale(�{��)�Ŋg��E�k�����w��ł��Atransform(rotate)�ł́Arotate(��]�p�x)�ʼn�]���w�肷�邱�Ƃ��ł���Btransform(skew)�ł́AskewX(X���Y���̊p�x)��X�����ό`�AskewY(Y���Y���̊p�x)��Y�����ό`�������邱�Ƃ��ł���B
�@SVG�ł́ASMIL Animation�A������SVG DOM�ɂ��l�̏��������Ƃ���2�̕��@�ŃA�j���[�V�������s�����Ƃ��ł���B
�@SMIL Animation�ł́A�}�[�N�A�b�v�Œl�̕ω����L�q���ăA�j���[�V�����������邱�Ƃ��ł���BSMIL Animation��SMIL�̈ꕔ���g���������̂ł���Aanimate�Aset�AanimateColor�AanimateMotion�AanimateTransform�Ƃ������v�f���g�p�ł���B
�@animate�v�f�ł́A�A�j���[�V�����������v�f�̑������w�肵�A�����̒l�̕ω����L�q����Bbegin�ŊJ�n���ԁAdur�ŃA�j���[�V�������s�����ԁAfrom�ŃA�j���[�V�����J�n�̒l�Ato�ŃA�j���[�V�����I���̒l�Afill�ŃA�j���[�V�������I�������̏�Ԃ��w��ł���B�܂��Afill��freeze���w�肷��ƃA�j���[�V�����I���̏�Ԃ̂܂܁Aremove���w�肷��ƃA�j���[�V�����J�n�̏�Ԃɖ߂�B
�@set�v�f�́A�l��⊮����K�v���Ȃ��Ƃ��Ɏg�p����B
�@animateMotion�v�f���g�p����ƁA�p�X���w�肵�āA�p�X�ɉ����ē��삳���邱�Ƃ��ł���B
�@animateColor�v�f�ł́A�F��ω������邱�Ƃ��ł���B
�@animateTransform�v�f�ł́A���s�ړ��E�g��k���E��]�Ȃǂ̕ϊ��̃A�j���[�V�������s�����Ƃ��ł���B
�@DOM���g�����A�j���[�V�����ł́AsetAttribute()�Œl�����������ăA�j���[�V�������s���B
�@SVG�ł̓O���f�[�V�������|���邱�Ƃ��ł���BlinearGradient�͐��`�O���f�[�V�����AradialGradient�͕��ˌ^�O���f�[�V�����Ŏg�p����B
�@�܂��Afilter�v�f���g���āA�O���t�B�b�N�X�I�u�W�F�N�g�ɓ���Ȍ��ʂ�ݒ肷�邱�Ƃ��ł���B
�@���ɂ�pattern�i����I�u�W�F�N�g���J��Ԃ��`��j�Amask�i�A���t�@�}�X�N�A�����x�ɂ�鍇���j�AclipPath�i�N���b�v����p�X���`�j�Ȃǂ��p�ӂ���Ă���Ƃ̂��Ƃ��B
�@�ɂ�܂��i@nyamadan�j�ɂ�锭�\�B
�@�ɂ�܂��́AWebGL�ACoffeeScript�AMikuMikuDance�Ȃǂɋ���������B
�@WebGL�́AOpenGL ES 2.0�����̂܂܃u���E�U�Ɏ����Ă����悤�Ȏd�l�ŁAJavaScript�ɂ����Canvas�v�f��ň�����悤�ɂȂ��Ă���B
�@OpenGL ES 2.0�͑g�ݍ�������3D���C�u�����ł���AWebGL���g���ƁAGPU���g���������ȕ`�悪�\�ɂȂ邻�����B
�@WebGL�����삷��u���E�U�́AMozilla Firefox�A Google Chrome�A Safari�A Opera�ȂǁBIE�ł�IEWebGL�A JebGL�A ChromeFrame�Ȃǂ��g�����Ƃœ��삳���邱�Ƃ��ł���B
�@�����悤�Ȃ��̂Ƃ��āAUnity�AFlash�Ȃǂ�����AHelloRacer�Ƃ����T�C�g�ŁAFlash�AUnity�AWebGL�̓�����m�F���邱�Ƃ��ł���BWebGL�̓����Ƃ��ẮAUnity�EFlash�ƈႢ�A�v���O�C�����s�v�ł��邱�Ƃ���������B
�@WebGL�̈�ʓI�Ȉ�ۂƂ��āA�uWeb��3D���ł���炵���v�uGPU���g���邩��y���炵���v�u�v���O�C�����K�v�Ȃ��炵���v�Ȃǂ�������ꂽ�B
�@�܂��A��ʂ�WebGL�͈���������Ƃ����Ă��邪�A���̗��R�Ƃ��āA�u�葱���������B�O�p�`��1�`�悷�邾���ł���J����v�u3D�̐��w�𗝉����Ȃ���Ȃ�Ȃ��v�Ȃǂ�������ꂽ�B
�@�������A3D�̐��w�ɂ��ẮA��{�I�ɍs��ƃx�N�g���̎l�����Z��������������Ă����悭�A�s�Z�ɂ��Ă͌����@�������藧���Ȃ��Ƃ������Ƃ𗝉����Ă�����OK�Ƃ̂��Ƃ������B
�@����͐F�X�Əȗ����A���������̃v���O�����ɂ��ĉ�����s��ꂽ�B
�@�܂��́A���_�f�[�^��n���K�v������B���|����͎l�p�`�ł��A�O�p�`�̑g�ݍ��킹�ŕ\������K�v������Ƃ̂��Ƃ������B
�@���͒��_�V�F�[�_�ɂ��ϊ��B��]��g��A�J�����������s���Ă����B
�@���X�^���C�Y�����ł́A�ʂ̓����ƂȂ�s�N�Z����h��Ԃ��Ă����B
�@�Ō�Ƀt���O�����g�V�F�[�_�B�F��h�鏈�����s���B
�@�ȏ�̂悤�ɁAWebGL�ł́AHTML(Canvas)�AJavaScript(WebGL)�A���_�V�F�[�_(GLSL)�A�t���O�����g�V�F�[�_(GLSL)�Ȃǂ��L�q���Ă����K�v������B
�@�����������ł́AHTML5��Canvas����WebGL�R���e�L�X�g���擾����B�ȍ~�A�����Ŏ擾����WebGL�R���e�L�X�g�̃��\�b�h���g�p���Ă����B
�@���_�V�F�[�_�ƃt���O�����g�V�F�[�_�́AGLSL�Ƃ���C���ꃉ�C�N�Ȍ���ŋL�q����B�\�[�X�i�e�L�X�g�j���R���p�C�����Ďg�p����BScript�^�O�ɋL�q����邱�Ƃ��������A�O���t�@�C���ɂ���XHR���Ă��悢�B
�@���_�V�F�[�_�͒��_�̏W���ɑ��č�p���A�o�͈ʒu�x�N�g���̌v�Z���s���A�F�x�N�g�����t���O�����g�V�F�[�_�ɓn���B
�@�t���O�����g�V�F�[�_�̓s�N�Z�����ƂɌĂяo����A�F���o�͂���B
�@���_�V�F�[�_�ƃt���O�����g�V�F�[�_���R���p�C��������A�R���p�C�������V�F�[�_�������ɓn���ă����N����B����ŃV�F�[�_�v���O�����͎g�p�\�ɂȂ�B
�@���̓o�b�t�@���쐬����B���_�o�b�t�@(X,Y,Z)�A�J���[�o�b�t�@(R,G,B)�A�C���f�b�N�X�o�b�t�@(���_�C���f�b�N�Xx3)���g�p����B
�@���_�o�b�t�@�ɂ͍��W�̈ʒu�A�J���[�o�b�t�@�ɂ͍��W�̐F�A�C���f�b�N�X�o�b�t�@�ɂ͖ʂ̏����i�[����B
�@�����_�����O�ł͕`��̏����ݒ�Ƃ��āA�N���A����F�����߂āA���̂̑O��W��L���ɂ��ADOM���̂ǂ̈ʒu�Ƀ����_�����O����̂���ݒ肷��K�v������B
�@���[�v�����ł͈�ʓI��setTimeout�����g���邪�ArequestAnimationFrame�̕�����ʂ��B��Ă���Ƃ��Ƀ��[�v���Ȃ��̂ŃI�X�X���ł���B
�@��͂�WebGL���g���̂͌��\����ǂ����A���G�ȏ����Ő^��������Ƃ̂��Ƃ������B�܂��A����̃v���[���X���C�h��Three.js�ō�����Ƃ̂��Ƃ������B
�@���{�}�C�N���\�t�g�̕��]�C���ɂ�锭�\�B
�@�܂��ACanvas�ɂ��āBCanvas 2D��Basic support�AText API for Canvas���g�p�ł��AGPU�A�N�Z�����[�V�������L���ł���Ƃ̂��Ƃ������B
�@����SVG�ɂ��āBSVG 1.1(��2��)�A������Filters�AFonts�AAnimation�̂ݖ��T�|�[�g�Ƃ̂��ƁB�܂��AGPU�A�N�Z�����[�V�������L���ł���Ƃ̂��Ƃ��B
�@Visual Studio����HTML5�c�[���Ƃ��āuWeb Standards Update for Microsoft Visual Studio 2010 SP�v�ASVG�̋L�q��⊮����c�[���Ƃ��āuSVG Intellisense schema for Visual Studio 2010 and 2008�v���p�ӂ���Ă���Ƃ̂��ƁB
�@������SVG Intellisense schema���g�p�������C�u�R�[�f�B���O����I����ASVG��f�������N�ɃR�[�f�B���O���Ă����l�q���f�����ꂽ�B
�@�N�b�N�p�b�h�̑��c���is@os0x�j�ɂ�锭�\�B
�@Flash�Ɣ�ׂ�HTML5�ł͂��ꂱ��ł��Ȃ��iWeb�J�����ɃA�N�Z�X�ł��Ȃ��A���I�����ł��Ȃ��A3D���ア�Ȃǁj�Ƃ����Ă������AWeb�J������Device API�A���̓��I������Audio Data API(Mozilla) / Web Audio API(Google)�A3D��WebGL�Ŏ�������Ă��Ă���Ǝw�E�B
�@Flash�Ɏ�������Ă��ĕ֗��Ƃ����Ă���@�\�́A�u���E�U�x���_���炷������Ɏ��v�����邱�Ƃ��������Ă���̂ŁA�܂������V����API�����������₷���B
�@�����_��Flash�ɂ����ł��Ȃ����Ƃ͂��邪�A���C�Z���X����̖�肪���铮��≹���̍Đ��Ȃǂ������A�����I��Flash�ł����ł��Ȃ����Ƃ͂قƂ�ǂȂ����낤�Ƃ̂��Ƃ��B��Flash�̃A�h�o���e�[�W
�@�������A�����_��Flash��HTML5���D��Ă���_����������A���̈���݊����A���̂�������J�����ł���Ǝw�E�B
�@Flash�́A�v���O�����������Ȃ��ō�i����邽�߂̃c�[���Ƃ��āA���͂ȃI�[�T�����O�c�[���������Ă���B
�@Flash�ɂ�����Flash IDE�̑��݂͔��ɑ傫���A�v���O���������������Ƃ��Ȃ��f�U�C�i�[�ł��A�ȒP�ȃA�j���[�V��������y�ɍ�邱�Ƃ��ł���B
�@�܂��A����̈Ⴂ�Ƃ��āAActionScript�̓N���X��^������A���l���ł̊J����JavaScript���͗e�Ղł��邱�Ƃ��w�E�����B
�@����ɁAFlash�̓h�L�������g����������Ă���iJavaScript��Mozilla Developer Network���炢�����h�L�������g���Ȃ��j���Ƃ������Ďw�E���AFlash����w�ׂ邱�Ƃ͔��ɑ����Ƃ����B
�@Flash���C�N�ȕ�����₷��API������A�h�L�������g�������������C�u�����Ƃ��āAFlash�E�̒��L���lGrant Skinner��������Ă���canvas���C�u�����uEaselJS�v�����������A��͂�JavaScript�̒m���i�v���O���~���O�X�L���j�͕K�{�ƂȂ��Ă��܂��B
�@SVG�̓x�N�^�[�O���t�B�b�N�Ȃ̂ŁA�n�}��O���t�Ɍ����Ă���Bcanvas�͉摜�ɃG�t�F�N�g���|����ȂǁA�r�b�g�}�b�v������ł���BWebGL�̓n�C�p�t�H�[�}���X�����A�T�|�[�g���������B
�@Raphael��jQuery���C�N�ȏ����ŃR�[�h�������邪�A���I���������C����SVG���摜�t�@�C���Ƃ��Ă͈����Ȃ��B
�@SVG Web�́AIE�ł�Flash�őΉ��BSVG���摜�Ƃ��ĕ\������B
�@SIE�͍�҂����{�l�ł���AIE��VML�őΉ��BSVG���摜�Ƃ��ĕ\������B
�@Processing.js�́AProcessing�݊��ŃR�[�h�������ĈꕔWebGL�ɂ��Ή����Ă���B
�@three.js��WebGL�Ή���3D Engine���C�u�����ł���AWebGL�̒m�����Ȃ��Ă�JavaScript�̒m�������ł�������������B
�@three.js�̂ق��AJ3D�AA3�APhiloGL�ȂǁAWebGL�̃��C�u���������낢��o�Ă��Ă���Ƃ̂��Ƃ������B
�@Processing.js�ASVG�AWebGL�ȂǁAHTML5���ӂɂ�����O���t�B�b�N�֘A�Z�p�̈��������悭���������ł������B
�@HTML5�̒��ł�����̂悤�ɓ���̕���ɍi�������������J�Â���Ă������ƂŁAHTML5�̕��y���������Ă����̂ł͂Ȃ����Ǝv���B
akio0911�i�u���K�[�EiPhone�A�v���J���ҁj
AR(�g������)�EiOS�A�v���J���E���]�E�O���������C���̃u���O�u�g���������C�t�v�̒��̐l�Bcocos2d for iPhone���b�X���m�[�g�����M�i�����j�B ���c�J���̂Â���w�Z�̎��R��w�ɂ��A�v���N���G�C�^�[�����̍u�t��S���B�A�v���N���G�C�^�[�Ƀ��C�L���O�X�g�[���[���C���^�r���[���Ă����ԑg�u�n�C�p�[�A�v���N���G�C�^�[�Y�v����|����
Copyright © ITmedia, Inc. All Rights Reserved.
��IT eBook