uTube Deck은 Youtube의 인기있는, 많이 본, 즐겨찾기가 많이 된 등 Youtube 내에서 이슈가 되는 영상들을 인터넷이 되는 환경에서 Youtube에 접속하지 않고 볼 수 있도록 Youtube Player API와 Data API 를 활용하여 만든 영상 검색 및 뷰어입니다.

Youtube JavaScript Player API Reference
http://code.google.com/intl/ko-KR/apis/youtube/js_api_reference.html#Overview
http://code.google.com/apis/ajax/playground/?exp=youtube#simple_embed

Youtube Data API Reference
http://code.google.com/intl/ko-KR/apis/youtube/2.0/reference.html

애플리케이션의 화면 프레임을 구성과 인터렉션 처리를 위해 Ext JS라는 JavaScript Framework를 사용하였습니다.

Ext JS
http://www.extjs.com

그리고 빌드, 패키지와 배포를 위해서 Titanium을 이용하였습니다.

Appcelerator Titanium
http://www.appcelerator.com

이미 만들어 놓은 웹 애플리케이션이 있다면 패키징하여 배포하는 것은 그다지 어렵지 않습니다. 

uTube Deck 를 만들면서 경험했던 Titanium 에 대한 것을 동영상으로 제작해 보았으니 참고하시는 것도 작은 도움이 되리라 봅니다.

 
Ext JS 3.2, Youtube API를 이용한 Video Viewer

 
Ext JS 3.2, Youtube API를 이용한 Video Viewer FullMode



OSX 10.5 Intel Download Application
Linux Intel 32-bit Download Application
Linux Intel 64-bit Download Application
Windows 32-bit Download Application


소스는 정리되는 데로 Github 를 통해서 공유하도로고 하겠습니다. : )

uTubeDeck based on Appcelerator Titanium from rhiokim on Vimeo.



신고
Posted by Rhio.kim

작년 요맘때 삼성에서 T*Omnia 핸드폰을 출시 하였고 그때 당시 사내에서 모바일에 멀티 콘텐츠 브라우징 인터페이스를 Flash Lite로 개발하여 올려볼 일이 있었습니다.

그때 테스트 후에 재미삼아 Youtube 임베디드 플레이어 API를 이용해서 Youtube의 주요 카테고리(최신영상, 가장 많이 본 영상 등)를 볼 수 있는 모바일 애플리케이션을 Flash Lite을 이용해 만들어 봤습니다.

모바일 디바이스는 데스크탑 PC에 비해 그 사양이 매우 낮기 때문에 Flash Lite 3.1 플레이어 역시 기술 지원이 데스크탑에 비해 제한적입니다.  하지만 모바일 환경에서 Flash의 Rich UI를 제공할 수 있다는 것은 Flash Lite 의 큰 장점입니다.

최근 Adobe Max 에서 발표한 Flash 10.1에 대한 기대는 모바일 부분에서도 상당한 것으로 알고 있습니다.  일찍이 국외 스마트 폰에는 Flash 대응을 위해 많은 노력을 기울익 있습니다.
하지만 국내에서는 임베디드 시스템에 다이나믹한 UI를 제공하기 위한 수단으로만 사용될 뿐 개발자를 위한 환경에는 별 관심이 없어 보여 아쉬움이 남습니다.

서두가 길었습니다.

개발했었던 mtube 소개나 할까 시작한 글인데요 : )



개발에 필요한 요소
1. Youtube Embed Player API & Data API
2. ActionScript 2.0 on Flash CS4
3. Flash Lite 3.1
4. Adobe Mobile Packager

개발에 필요한 요소는 위의 4가지 입니다.  개발 후 Adobe Mobile Packager 을 이용해 패키징 하여 디바이스에 설치하여 사용할 수 있습니다.

Adobe Mobile Package Example from rhiokim on Vimeo.


Adobe Mobile Programming Example from rhiokim on Vimeo.



테스트 장비
5. Window Mobile 6.x
6. Samsung T*Omnia(SCH-M490)

최근 옴니아 2가 좀더 나은 스펙으로 출시 되었던데 그 폰에서는 원활이 구동되지 않을까 짐작해봅니다.  사실 이 mtube 애플리케이션은 옴니아에서 메모리 오류가 발생합니다. 

이유 인 즉, Youtube 임베디드 플레이어가 모바일 용이 아니다 보니 : (  메모리 점유율이 상당히 많더군요. 뿐만 아니라 동영상 또한 버퍼를 이용하므로 많은 메모리를 요구하게 됩니다.

mTube based on Flash Lite 3.1 from rhiokim on Vimeo.



첨부한 Youtube.metadata 와 Youtube_1.0.0_English (US).cab 파일을 폰에 저장하고 cab 파일을 설치하면 됩니다.  소스와 클래스 다이어그램을 첨부합니다.


개발 경험에 대한 정리도 할 겸 간단히 Flash를 이용한 Mobile 앱을 개발하고픈 개발자에게 도움이 될까 공유해 봅니다.  

Tip, JavaScript 나 ActionScript 나 그 표준(ECMA-262)이 같기 때문에 근본적인 원리를 알고 접근한다면 매우 쉽고 재미있는 기술입니다.

클래스 다이어그램
 

매우 단순한 구조로 되어있습니다.

Youtube Class는 main class로 Controller 담당하고
Embed Class는 Youtube 임베디드 플레이어 모델 담당, List Class는 Youtube XML Data 모델  담당,  Container는 동영상 클립들을 제어 관리 모델 역할을 합니다.


신고
Posted by Rhio.kim