Ajax�̎�_��₤script.aculo.us�̊y�����G�t�F�N�g�F�p�^�[���ƃ��C�u�����ō��Ajax�����������V�s�i4�j�i1/4 �y�[�W�j

» 2008�N01��07�� 00��00�� ���J
[�u�c�T���C�A�[�N�E�F�u�������]

script.aculo.us�̈���i�񂾃e�N�j�b�N

�@����Љ��script.aculo.us�́A�ȉ��̂悤�ȋ@�\��񋟂���Ajax�iJavaScript�j�t���[�����[�N�ł��B

  • �r�W���A���G�t�F�N�g
  • �h���b�O���h���b�v
  • DOM����
  • �I�[�g�R���v���[�g
  • �X���C�_�[
  • �P�̃e�X�g

�@prototype.js���x�[�X�̃��C�u�����Ɏg�p���Ă���̂ŁAprototype.js�ƂƂ��ɗ��p�������Ƃ�������������̂ł͂Ȃ��ł��傤���B

�}�@script.aculo.us�̃y�[�W �}�@script.aculo.us�̃y�[�W

�@�����scripot.aculo.us�̃G�t�F�N�g�@�\�ɏœ_���i��A���˂����񂾎g�������Љ�Ă����܂��B

�� Ajax�̎�_��₤�u�G�t�F�N�g�v�̕K�v��

�@Ajax�����p���邱�ƂŁA��ʑS�̂��ĕ`�悹���ɉ�ʏ�̈ꕔ���݂̂�ύX������A�v�f�̒lj��E�폜���”\�ɂȂ�܂��B����ɂ���āA�y�������[�U�[�C���^�[�t�F�C�X�������ł���킯�ł����A��ʂ��ĕ`�悳��Ȃ����߁A�A�v���P�[�V������ʼn����N�������̂��A���[�U�[�ɂ��܂��������Ă��炦�Ȃ��ꍇ������܂��B

�@���̂��߁A�Ⴆ�΁A�ύX���̔w�i�F���ꎞ�I�ɕύX�����肵�āA��ʏ�ŕω����������Ƀ��[�U�[�̒��ӂ������A���̕ω��ɋC�t���Ă��炤���Ƃ��d�v�ƂȂ�܂��B

�@script.aculo.us�͂����������G�t�F�N�g�@�\��񋟂��郉�C�u�����Ƃ��Ă悭�m���Ă��܂��B����́A���̂悤�Ȋ�{�I�ȃG�t�F�N�g�̉�������Ă����ƂƂ��ɁAscript.aculo.us�̈���i�񂾋@�\�����܂����p���邱�ƂŁA�y�������o�������āA���[�U�[�G�N�X�y���G���X�̌���ɂ‚Ȃ���”\���ɂ‚��Ă�����������Ǝv���܂��B

�@�������A�G�t�F�N�g�𑽗p����ƁA�}�V���ւ̕��ׂ���������A�y���ȑ���̖W���ɂȂ����肷�邱�Ƃ����邽�߁A���p�ɓ������Ă͏\���ɒ��ӂ����Ȃ��Ă͂Ȃ�܂���B

�� scripot.aculo.us�̃G�t�F�N�g�@�\�̌���

�@scripot.aculo.us�̃G�t�F�N�g�@�\�́A�v�f�̑傫���iwidth��height�j�A�ʒu�itop��left�j�A�F�ibackgroundcolor�Ȃǁj�A�����x�iopacity�j�Ȃǂ̃v���p�e�B�l��Z�����ԊԊu�ŏ������•ω������邱�ƂŎ�������Ă��܂��B

�@���L�́A�e�L�X�g�t�B�[���h�̕��isize�j��setTimeout()���g���āA50�~���b�u����1���‘��₷���ƂŁA�e�L�X�g�t�B�[���h�̕����������L�т�悤�Ɍ�����T���v���E�v���O�����ł��B

�e�L�X�g�t�B�[���h�̕����������L�т�悤�Ɍ�����T���v���E�v���O�����i�u�L�т�v�{�^���������Ă��������B�u������Ԃɂ��ǂ�v���N���b�N����ƁA���ɖ߂�܂��A�����ӁFOpera�u���E�U�ł́A�ꕔ�\�����قȂ镔��������܂��j

<input type='button' value='�L�т�'
  onclick='updateSize($("textfield"), 20)' />
<input type='text' size='1' id='textfield' />
<script type='text/javascript'>
<!--
    function updateSize(element, to) {
        if (element.size < to) {
            element.size = element.size + 1;
            setTimeout(function(){
                updateSize(element, to)
            }, 50);
        }
    }
-->
</script>

�@script.aculo.us�������I�ɂ��̂悤�ȏ����𑖂点�邱�ƂŃA�j���[�V�������������Ă��܂��B

�I�����C���E�T���v����i�K�I�ɐi�������ĉ�U�I

�� �G�t�F�N�g���Ȃ��V���v����Ajax�V���b�s���O�J�[�g

�@�܂��́A������̃T���v�������Ă݂Ă��������B���ꂩ��o�Ă��邷�ׂẴT���v���́A���l���������R���{�{�b�N�X�̒l��ς���ƍ��v���z���ς��A�u�폜�v�{�^���������ƃA�C�e���������A���v���z���ς��܂��B�u������Ԃɖ߂��v���N���b�N����ƁA���ɖ߂�܂�

����̈�ԃV���v���ȃT���v���E�v���O�����i�g��\�����������j

�@����͉�ʑJ�ڂ������ɃV���b�s���O�J�[�g���X�V�ł���悤�ɂ������̂ŁA�G�t�F�N�g�͎g���Ă��܂���B

�@����͂��̃T���v���ɏ������‹@�\�������Ă����Ȃ���Ascript.aculo.us�̎g������������Ă����܂��B����8�i�K�̃T���v�����g�p���ĉ�����Ă����܂��B

  1. �R�A�G�t�F�N�g�̎g�p��
    �T���v���y1�z���v���z���ύX���ꂽ�狭���\������
  2. �G�t�F�N�g�̃R�[���o�b�N�̎g�p��
    �T���v���y2�z�폜�s���t�F�[�h�A�E�g�㍇�v���z��ύX
  3. �R���r�l�[�V�����G�t�F�N�g�̎g�p��
    �T���v���y3�z�u�폜�v���̃G�t�F�N�g��DropOut��
  4. �G�t�F�N�g�����ԂɎ��s������AQueue�̎g�p��
    �T���v���y4�z���i�摜���S�~����Effect.Move���Ă���Effect.DropOut
  5. �����̃G�t�F�N�g�𓯎����s����AParallel�̎g�p��
    �T���v���y5�zX�����AY�������ꂼ��̈ړ���Effect.Morph�ŕʁX�Ɏw��
  6. �p�����[�^�̕ω��X�s�[�h��ς���ATransition�̎g�p��
    �T���v���y6�zY�����̐i�s�X�s�[�h��ς��Ă݂�
  7. ���삵��Transition�̓K�p��
    �T���v���y7�z���i�摜���o�E���h�����Ă݂�
  8. �Ǝ��G�t�F�N�g�̍쐬��
    �T���v���y8�z���v���z�̕ω���A���I�Ɍ�����

�� �T���v���E�v���O�����̍ŏI�i���`

�@��ɁA����쐬���Ă����T���v���̍ŏI�`�i8�–ڂ̃T���v���j�����Ă݂܂��傤�B

�T���v���E�v���O�����̍ŏI�i���`�i�g��\�����������A�����ӁFOpera�u���E�U�ł́A�ꕔ�\�����قȂ镔��������܂��B�܂��A�T���v���̃��C�Z���X��GPL 2�ƂȂ�܂��j

�@script.aculo.us���R�A�G�t�F�N�g��A�R���r�l�[�V�����G�t�F�N�g�͂��łɗ��p�������Ƃ�������������Ǝv���܂����AQueue�AParallel�ATransition�Ȃǂ����p����ƁA���Ȃ�Â����M�~�b�N�������ł��邱�Ƃ��������肢��������Ǝv���܂��B

�@����̃T���v����script.aculo.us�̗��p�̎d���̉���ɏd�_��u���Ă��邽�߁A�G�t�F�N�g���K�p�ȏ�ɑ��p����Ă��܂����A���ۂ̃V�X�e���ł͌y���ȑ���̖W���ɂȂ�Ȃ��悤�ɒ��ӂ��K�v�ł��B

�T���v����HTML�\�[�X�R�[�h����U

�@�܂��́A��{�ƂȂ�V���b�s���O�J�[�g��HTML�\�[�X���m�F���܂��B�����8�‚̃T���v���ł͂�������A�^�C�g���^�O�Ȃǂ��T���v�����ƂɈقȂ�܂����A��{�I�ȍ\���͂��ׂē���HTML�𗘗p���܂��B

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
  <title>�T���v��0)�G�t�F�N�g�̂Ȃ��T���v���̃r���[</title>
  <script type="text/javascript" src="javascripts/prototype.js">
  </script>
  <script type="text/javascript"
    src="javascripts/scriptaculous.js?load=effects"></script>
  <script type="text/javascript"
    src="javascripts/controllers/cart/effective_cart_controller.js">
  </script>
  <script type="text/javascript"
    src="javascripts/models/cart/effective_cart.js"></script>
  <script type="text/javascript"
    src="javascripts/views/cart/effective_cart_view_0.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <h1>�T���v��0)�G�t�F�N�g�̂Ȃ��T���v���̃r���[</h1>
  <a id='reset' href='sample0.html'>������Ԃɖ߂�</a>
  <div id="items">
  <div class="item" id="item1">
    <div class="image"><img id="img1" src="img/p1.gif"></div>
    <div class="name" ><span id="name1">�l�t�̃N���[�o</span></div>
    <div class="price"><span id="price1">4725</span>�~</div>
    <div class="qty" ><select id="select1">
      <option value="1">1</option>
      <option value="2">2</option>
    </select></div>
    <div class="del" ><button id="delete1">�폜</button></div>
  </div>
  <div class="item" id="item2">

�c�c���i2�i�ځi�ȗ��j�c�c

  </div>
</div>
<div id="total">���v���z:
  <span id="cost">8715</span>�~
</div>
  <div id="trash"><img src="img/trash.png" alt="�S�~��"
    title="�S�~��"/>
  </div>
</body>
</html>

�� �T���v����HTML�t�@�C���i<head>�^�O�����j

�@����̃T���v���́A<script>�^�O�Ŏ���JavaScript�t�@�C����ǂݍ���ł��܂��B

  • javascripts/prototype.js
    prototype.js 1.6.0
  • javascripts/scriptaculous.js?load=effects
    script.aculo.us 1.8.0�̃G�t�F�N�g�p���C�u����
  • javascripts/models/cart/effective_cart.js
    ���f��
  • javascripts/views/cart/effective_cart_view_X.js�iX��1�A2�A3�A�c�c�A8�j
    �r���[�i�����ӁF�T���v�����ƂɁA�r���[�̃t�@�C�����Ⴄ
    • �T���v��1�Fjavascripts/views/cart/effective_cart_view_1.js
    • �T���v��2�Fjavascripts/views/cart/effective_cart_view_2.js
    • �c�c�i���j�c�c
    • �T���v��8�Fjavascripts/views/cart/effective_cart_view_8.js
      �j
  • javascripts/controllers/cart/effective_cart_controller.js
    �R���g���[���[

�@script.aculo.us�̃o�[�W������1.8.0�ł��B����܂ł̘A�ڋL���Ɠ��l��MVC�i���f���E�r���[�E�R���g���[���[�j�ɂ������Ń\�[�X�R�[�h�𕪂��Ă��܂��B

�@MVC�ɕ������邱�ƂŁA�e�T���v���̃R���g���[���[�⃂�f���̃\�[�X�R�[�h�͓������̂��g�p���A�e�T���v���̃r���[�������ւ��邾���ōςނ悤�ɂ��܂����B

�� �T���v����HTML�t�@�C���i<body>�^�O�����j

�@����̃V�X�e���ł́A�u���i���ʕύX�v�u�폜�{�^�������v�Ȃǂ̃A�N�V�������s�����Ƃ��ł��܂��B�����̃A�N�V�������s���ƁA���v���z�̍Čv�Z���s���܂��B

�@���̂��߁A���L�̃\�[�X�R�[�h�̂悤�ɁA�t�H�[���v�f����z�ȂNJe���ڂɂ͈�ӂ�ID��t���邱�Ƃ��ł��A�e�l�̍X�V��l�̎擾�����₷���悤�ɂ��Ă��܂��B

<div class="item" id="item1">
  <div class="image"><img id="img1" src="img/p1.gif"></div>
  <div class="name" ><span id="name1">�l�t�̃N���[�o</span></div>
  <div class="price"><span id="price1">4725</span>�~</div>
  <div class="qty" ><select id="select1">
    <option value="1">1</option>
    <option value="2">2</option>
  </select></div>
  <div class="del" ><button id="delete1">�폜</button></div>
</div>

�c�c�i���j�c�c

<span id="cost">8715</span>�~

�@�u�T���v���y4�z�v�ȍ~�̃T���v���ł́A�J�[�g�̒��̏��i���u�폜����v�ƁA���i�摜���S�~���ɓ���悤�ɂȂ�܂��B���L�́A���̂��߂�HTML�^�O�ɂȂ�܂��B

<div id="trash"><img src="img/trash.png" alt="�S�~��" title="�S�~��"/>
</div>

�@���y�[�W����́A���ۂɓ����T���v���Ƃ��̃\�[�X�R�[�h�����Ȃ���Ascript.aculo.us�̃G�t�F�N�g�̎��H�e�N�j�b�N�ɂ‚��ĉ�����܂��B

�@�@�@�@�@�@ 1|2|3|4 ���̃y�[�W��

Copyright © ITmedia, Inc. All Rights Reserved.

�X�|���T�[����̂��m�点PR

���ڂ̃e�[�}

AI for �G���W�j�A�����O
�u�T�v���C�`�F�[���U���v�΍�
1P��V�X�̂��߂̐Ǝ㐫�Ǘ��^�΍�̌�����
OSS�̃T�v���C�`�F�[���Ǘ��A���ׂ��A�N�V�����Ƃ�
Microsoft �� Windows�őO��2024
�V�X�e���J���m�E�n�E �y�����i�r�zPR
���Ȃ��ɂ������߂̋L��PR

RSS�ɂ‚���

�A�C�e�B���f�B�AID�ɂ‚���

���[���}�K�W���o�^

��IT�̃��[���}�K�W���́A �������A���ׂĖ����ł��B���Ѓ��[���}�K�W�������w�ǂ��������B