yui-frameworksōmixi{CXAIRAv
�A�ڃC���f�b�N�X��
yui-frameworks�ō��mixi�{�C�XAIR�A�v���i3�j

yui-framework���g����mixi�{�C�X�A�v���̒ʐM����
�v���O���� �c����
2011/7/15

yui-frameworks���g����mixi�{�C�X�A�v���̒ʐM�����̋L�q���@���T���v���A�v���̃\�[�X�R�[�h����ɉ�����܂�

yui-frameworks���g�����f�[�^���M�^��M�̏����̋L�q���@

�@�{�A�ڂł�Adobe AIR�^Flex���g�����J���o���͂�����̂́A�t���[�����[�N���g�p�������Ƃ��Ȃ����̂��߂ɁA�umixi Graph API�v�𗘗p�����umixi�{�C�X�N���C�A���g�iAIR�A�v���j�v���쐬���A���̃\�[�X�R�[�h��ǂ݂Ȃ���������Ă����܂��B

�@��2���mixi Voice API�𗘗p���邽�߂�mixi�ւ�OAuth�F�؂��s���A�N�Z�X�g�[�N���A���t���b�V���g�[�N���̎擾���s���܂����B�ŏI��̍����mixi Voice API�𗘗p���āu�F�l�̂‚Ԃ₫�ꗗ���擾�v�u�‚Ԃ₫�̐V�K���e�v�@�\���T���v���A�v���̃\�[�X�R�[�h����ɉ�����Ă����܂��B

�@�O��Ɠ��������̃T���v���A�v�����������Ă���@�\���ȉ��ɋ����܂��B�����̋@�\�͑S�� mixi Graph API�𗘗p���邱�ƂŎ����ł��܂��B

  • OAuth�F�؁i�O��̋L�����Q�Ƃ��Ă��������j
  • �‚Ԃ₫�̐V�K���e
  • �F�l�̂‚Ԃ₫�ꗗ���擾
  • �����̂‚Ԃ₫���폜
  • �F�l�̂‚Ԃ₫�Ɂu�C�C�l�I�v��t����

�@�O���yui-frameworks���g�����Ƃʼn�ʂƃ��W�b�N�𕪗�����Ƃ���yui-frameworks�̊J���̊̂ƌ����ׂ��Ƃ����������܂����B�����yui-frameworks���g�����f�[�^���M�^��M�̏����̋L�q���@�ɂ‚��Đ������܂��B

�@���̃T���v���A�v���̏����̗���͈ȉ��̒ʂ�ł��B

  1. ���O�C����ʂ̋N��
  2. mixi�Ƀ��O�C����OAuth�F�؁i�ʃE�B���h�E�j
  3. �F�l�̂‚Ԃ₫�ꗗ���擾
  4. �‚Ԃ₫�̐V�K���e������
  5. �‚Ԃ₫�̍폜������
  6. �F�l�̂‚Ԃ₫�Ɂu�C�C�l�I�v��t����

�@�O���1�����2�̏����܂ʼn�����܂����̂ō����3�́u�F�l�̂‚Ԃ₫�ꗗ���擾�v�̂Ƃ��납�������܂��B

�� 3.�F�l�̂‚Ԃ₫�ꗗ���擾

�@�O��́umixi Graph API��OAuth�F�؏����ɂ‚����v��mixi��OAuth�F�؂���������ƁALoginWindow�ŁhloggedIn�h�Ƃ����C�x���g�𔭐������A���̃C�x���g��MainProfileBehavior�Ŏ󂯎��Ƃ���܂ʼn�����܂����B

�@���O�C��������́A�����Ɏ����̃v���t�B�[�����擾���A���̌�ɗF�l�̂‚Ԃ₫�ꗗ���擾���Ă��܂��B����ł͎����̃v���t�B�[�����擾���Ă���ӏ��̃\�[�X�R�[�h�����Ă݂܂��傤�B

�� �����̃v���t�B�[�����擾����

 

�EMainProfileBehavior.as

package jp.co.plugram.mixi.base.behavior
{
	import com.adobe.serializers.json.JSONDecoder;
	�E�E�E

	public class MainProfileBehavior
	{
		public var helper:MainHelper;
		public var mixiGraphService:HttpService;
		
		/**
		 * ���O�C���������������ɌĂяo�����n���h���ł��B
		 * LoginWindow.mxml�Ŕ��������hloggedIn�h�Ƃ����C�x���g�������Ŏ󂯎���Ă��܂��B
		 */
		handler function onLoggedIn():void 
		{
			// ��ʂ����O�C����Ԃɂ���B
			helper.setViewAsLoggedIn();
			// �v���t�B�[�������擾���邽�߃T�[�o�Ƀf�[�^�𑗐M����B
			// ���M���ꂽ�f�[�^�����̃N���X�ɏ������Ԃ��Ă���悤�ɂ��邽�߂�setResponder(this)���L�q����B
			mixiGraphService.getProfile(helper.token.access_token).setResponder(this);
		}

		/**
		 * mixiGraphService.getProfile���\�b�h�ő��M���ꂽ�f�[�^�̎�M�������s���܂��B
		 * �A�N�Z�X�C���q�ɂ́urpc_result�v���w�肵�܂��B
		 * �f�[�^���󂯎�邽�߂̖����K���Ƃ��āA
		 *   {�T�[�r�X�̕ϐ���}_{���\�b�h��}
		 * ���w�肵�܂��B
		 * �f�[�^���M����setResponder(this)�̋L�q�������ƁA���̃��\�b�h�Ŏ󂯎�邱�Ƃ��ł��܂���B
		 * ��M�����f�[�^��event.result�Ɋi�[����Ă��܂��B
		 */
		rpc_result function mixiGraphService_getProfile(event:ResultEvent):void 
		{
			var decoder:JSONDecoder = new JSONDecoder();
			helper.profile = decoder.decode(event.result as String, Profile);
			helper.refresh();
		}
	}
}

�@mixiGraphService�Ƃ����C���X�^���X�̐�����yui-frameworks���s���܂��B�܂�getProfile�Ƃ������\�b�h��MixiVoiceClient.mxml�Ń��\�b�h�̐錾�����Ă��܂��B

�E�@MixiVoiceClient.mxml

  <?xml version="1.0"  encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  �E�E�E>
           <fx:Declarations>
                      �E�E�E 
                      <yui:HttpService name="mixiGraphService" baseURL="http://api.mixi-platform.com/">
                                  <!-- getProfile�Ƃ������\�b�h�������Ő錾�B���M���baseURL�ɂ���url�̒l�����킹��URL -->                                   <mx:HTTPOperation name="getProfile" url="2/people/@me/@self" method="GET">                                              <mx:argumentNames>                                                         <!-- ���M�p�����[�^�� -->                                                         <fx:String>oauth_token</fx:String>                                              </mx:argumentNames>                                   </mx:HTTPOperation>                                   �E�E�E                       </yui:HttpService>            </fx:Declarations>            �E�E�E     </s:WindowedApplication>

�@�����ő��M�����f�[�^�̎�M�́A����MainProfileBehavior����mixiGraphService_getProfile���\�b�h�ōs���Ă��܂��B�ʏ��Flex�^AIR�̏������ł���΁A���M�O��addEventListener�A��M���removeEventListener�̏������s���܂����Ayui-frameworks�ł͖����K���ɂ���Ď����I�ɓo�^�E�폜�����̂ł����̏������Ȃ��܂��B

�� �F�l�̂‚Ԃ₫�ꗗ���擾����

�@�����̃v���t�B�[�����擾��������Ɂu�F�l�̂‚Ԃ₫�ꗗ�v���擾���Ă��܂��B�Y���ӏ���MainProfileBehavior����MainHelper��refresh���\�b�h���Ăяo���Ă��镔���ł��B

�EMainHelper.as
  package jp.co.plugram.mixi.base.helper
{
           �E�E�E 
           public class MainHelper
           {
                      �E�E�E 
                      /**
                       * �^�C�����C���̍Ď擾�������s���܂��B
                       * ���̃��\�b�h���瑗�o���ꂽ�C�x���g�� 
                       *  MainTimelineBehavior��onRefresh���\�b�h���󂯎��܂��B 
                       */
                      public function refresh():void
                      {
                                  view.dispatchEvent(new TweetEvent(TweetEvent.REFRESH));
                      }
                      �E�E�E 
           }
}
  
    }
  

�@refresh���\�b�h�ŁATweetEvent.REFRESH�Ƃ����Ǝ��C�x���g��MainView�ɑ΂��Ēʒm���Ă��܂��BMainView�ɒʒm���ꂽ���̃C�x���g��MainAction��ʂ���MainTimelineBehavior��onRefresh���\�b�h���󂯎��A�Ď擾���������s���܂��B

�E�@MainTimelineBehavior.as
package jp.co.plugram.mixi.base.behavior
{
	�c�c
	public class MainTimelineBehavior
	{
		/**
		 * ��ʂ̍X�V�C�x���g���󂯎��n���h���ł��B
		 */
		handler function onRefresh():void 
		{
			_refreshFriendsTimeline();
		}
		�c�c
		/**
		 * �^�C�����C���X�V����
		 * mixi Graph API���g���^�C�����C�����擾���܂��B
		 * mixiGraphService�̃��\�b�h�̒�`��MixiVoiceClient.mxml�ł��Ă��܂��B
		 */
		private function _refreshFriendsTimeline():void
		{
			mixiGraphService.getFriendsTimeline(helper.token.access_token).setResponder(this);
		}
		/**
		 * �^�C�����C�����擾�������ʂ��󂯎��C�x���g�n���h���ł��B
		 */
		rpc_result function mixiGraphService_getFriendsTimeline(event:ResultEvent):void 
		{
			var result:String = event.result as String;
			if (!result || result.length < 0) return;

			var decoder:JSONDecoder = new JSONDecoder();
			// �擾����JSON�f�[�^���f�R�[�h���AVoice���f����ArrayCollection�Ƃ��Ď擾���܂�
			var voiceList:ArrayCollection = decoder.decode(event.result as String, Voice)		
			�c�c
		}
	}
}

�@mixiGraphService�̎g�p���@�͐�قǁu�����̃v���t�B�[�����擾����v��MainProfileBehavior�ōs�������@�Ɠ����ł��B���\�b�h�̐錾�����l��MixiVoiceClient.mxml�ɋL�q���Ă��܂��B

�� 4�D�‚Ԃ₫�̐V�K���e������

�� �‚Ԃ₫�̐V�K�o�^

�@�u�‚Ԃ₫�̐V�K�o�^�v�̕��@�͎����̃v���t�B�[���̎擾�A�F�l�̂‚Ԃ₫�ꗗ�̎擾�Ɠ��l�ɍs���܂��B�u�‚Ԃ₭�v�{�^����TweetDialogView�ɂ���܂��B�{�^����id�́hbtnTweet�h�ł��B

�@application.properties
<?xml version="1.0" encoding="utf-8"?>

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 

		�c�c>

	�c�c

	<fx:Declarations>

		�c�c�@�G�t�F�N�g�����Ȃǁ@�c�c

	</fx:Declarations>



	<s:Group id="layerTweet">

		<!-- �w�i�摜 -->

		<p:EmbedImage id="tweetBackground" width="318" x="0" y="0"/>

		<p:EmbedImage id="sendTweetMessage" x="10" y="20" />

		<!-- ���̓t�H�[�� -->

		<p:EmbedImage id="formTextbox" x="10" y="49" />

		<s:TextArea id="taMessage" x="12" y="51" width="296" height="196" borderVisible="false"/>

		

		<!-- �‚Ԃ₭�{�^�� -->

		<p:ImageButton id="btnTweet" x="184" y="255"/>

	</s:Group>

</s:Group>
  

�@�������ł����ł��傤���H HttpService���g�p���邱�ƂŃT�[�o��HTTP�ʐM���s���A�f�[�^���擾�ł��܂��B������������u�F�l�̂‚Ԃ₫�ꗗ���擾�v��u�‚Ԃ₫�̐V�K���e�v�Ɠ������@�Łu�‚Ԃ₫�̍폜�v��u�‚Ԃ₫�Ɂw�C�C�l�I�x��t����v�Ƃ������@�\�������ł��܂��B

�@����ꂳ�܂ł����B�ȏ�ŃT���v���A�v���̃\�[�X�R�[�h����ɂ�������͏I���ł��B�Ō�ɒ��҂�����쐬�����T���v���A�v�����쐬�����Ƃ��ɁAyui-frameworks���g���Ăǂ̂悤�ɊJ����Ƃ�i�߂Ă������������������Ǝv���܂��B

yui-frameworks���g�����J����Ƃ̐i�ߕ�

�@����̃T���v���A�v���ł̓f�U�C�i�ƃv���O���}�����Ƃ��č�Ƃ��s���܂����B��Ƃ̗���͈ȉ��̐}�̂悤�ɂȂ�܂��B

�f�U�C�i�ƃv���O���}�����Ƃ��č�Ƃ̗���

�@�f�U�C�i��Adobe Photoshop����Adobe Flash Catalyst���g��yui-frameworks��View���쐬���܂����B����̓\�[�X�R�[�h��ǂ݂₷�����邽�߂�View�����͂قƂ�Ǐ��������܂������ACatalyst������������ʂ���ɊJ����i�߂Ă��\���܂���B

�@�v���O���}��View�ȊO��Action�ABehavior�AHelper��S�����AView����ǂ�ȃC�x���g�������Ă��邩��Flex3�̃��t�@�����X�K�C�h���Q�l�ɂ��܂����B

�@�f�U�C�i�ƃv���O���}�̊Ԃ�View�̃R���|�[�l���g��ID�����߂Ă���΁A�v���O���}�͉����߂̉�ʂō�Ƃ��邱�Ƃ��ł��A�܂��f�U�C������������ʂ��ォ�獷������ł�Action�ABehavior��Helper�ɂ͉e���͏o�܂���B

�@�����A����̃T���v���A�v���ł̓A�j���[�V���������Ȃǂ�View���Ƀ��W�b�N���L�q���Ă���ӏ�������܂��B��قlj�������ʂ�AView��ς��Ă��R���|�[�l���g��ID���ς��Ȃ����Action�ABehavior�AHelper�ɂ͉e���͏o�܂��񂪁AMXML�̓�����AView�Ƀ��W�b�N�������Ȃ��Ǝ���������ꍇ������̂ŁA���̏ꍇ�͂��܂��f�U�C�i�ƃR�~���j�P�[�V����������đΉ�����K�v������܂��B

�܂Ƃ�

�@3��ɂ킽���āuyui-frameworks��mixi�{�C�XAIR�N���C�A���g�v����������Ă��������܂����B

�@mixi Graph API��mixi�{�C�X�����łȂ����܂��܂ȋ@�\������\�[�V�����O���t�𐶂������A�v�������܂��B�܂����ɂ�����̕��@�Ɠ����悤�ȕ��@��Twitter��Facebook�Ƃ��������̃\�[�V�����v���b�g�t�H�[����API�𗘗p�����A�v���P�[�V�����̍쐬���ł��܂��̂ł��Ђ��������������B

�@yui-frameworks�̓h�L�������g���[�����Ă��Ȃ��Ƃ���Ȃǂ�����܂����A���ɃV���v���Ŏg���₷��Flex�t���[�����[�N���Ǝv���Ă��܂��B���̘A�ڂ�ʂ���yui-frameworks�̃V���v������g������A��ƌ����̗ǂ����`���邱�Ƃ��ł���Ηǂ������Ǝv���܂��B�Ō�܂ł����ǂ��肪�Ƃ��������܂����B


�� ���҃v���t�B�[��


�c�����i���Ȃ������j
������Ѓv���O�����̃G���W�j�A�B


Java�����C����Flex�A�X�}�[�g�t�H���A�v������HTML5�܂ŃT�[�o�A�N���C�A���g��킸�B�ŋߋC�ɂȂ��Ă�̂�Scala��WebGL�BTwitter�F@tan_go238
�` RIA�Z�~�i�[2011 �J�Â̂��m�点 �`������Ѓv���O�����͑�ˏ����Â� RIA�Z�~�i�[2011�i�����F2011�N6��23���A���F2011�N7��8���j �ɋ��^���Ă��܂��B��������������͑�ˏ����C�x���g�y�[�W�����Q�Ƃ��������B

�� ��IT�֘A�L��


Flex�t���[�����[�N�ŕς��RIA�J���̌���
Adobe CS5�̐V�������j��S��Flex 4�̃t���[�����[�N�B���[�N�t���[������RIA�J�����ꂪ�ǂ��ς�邩���AFlash Builder 4��Flash Catalyst�AAdobe AIR 2�Ȃǂ̋Z�p�E�c�[���E�t���[�����[�N�Ȃǂ̋@�\���Љ�Ȃ���������A��
Adobe AIR��iTunes�~Twitter�N���C�A���g�������
����A���Ȃ炱���g���i2�j�@iTunes�ōĐ�����Ă���y�Ȃ̃^�C�g�����ATwitter�A�J�E���g�Ɂu���ܒ����Ă���ȁv�Ƃ��ē��e����AIR�A�v���P�[�V�����u�����OAIR�v������Ă݂܂���
�uSmart �� Social�v�t�H�[���� 2008/8/11
�Ɩ��pRIA�̖{��!? Flex�{Java�J������
�{�A�ڂł́A�T�[�o�T�C�h�Ƃ���Java�A���b�`�ȃN���C�A���g�T�C�h�Ƃ���Java�Ƒ����̗ǂ�Flex��p����RIA�J���̊�b��������܂��BEclipse�x�[�X��IDE�ł���Flex Builder���g���āATomcat�œ���RIA�������‚��쐬���܂��傤
�ꝺ����I �f�U�C�i�̂��߂�mixi�A�v������̃R�c
�ꌂ�f�U�C���̎햾�����i8�j�@�P�[�^�C�ł̒񋟂��X�^�[�g���āA�܂��܂����ڂ��W�߂�umixi�A�v���v�Bmixi�̓����𐶂��������쎖��ƃf�U�C�i�����삷��ۂ̃|�C���g���Љ�


���b�`�N���C�A���g�����[ �S�L���ꗗ��



HTML5 + UX �t�H�[���� �V���L��
��IT���[���}�K�W���@�V������X�^�b�t�̃R���������[���œ͂��܂��i�����j

���ڂ̃e�[�}

HTML5�{UX �L�������L���O

�{�� ����