반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

Kurogo Tutorial 18 - Video Module -

2012. 6. 7. 00:10 | Posted by 솔웅


반응형

Video Module

video 모듈은 YouTube, Vimeo and Brightcove 같은 3rd party websites 의 비디오 컨텐트에 mobile에서 access 해서 내용을 보여주도록 하는 모듈입니다.


Configuring the Sources


비디오 모듈은 각 섹센에 대해 구별되는 feed를 사용해서 섹션별 비디오들을 organize 할 수 있도록 해 줍니다. 각 섹션에는 service provider에 대한 정보가 있고 tag나 author 에 의해 filter 될 수 있습니다. (문자 검색에 의해서도 filter 될 수 있습니다.) feed 는 SITE_DIR/config/video/feeds.ini 안에서 configure 됩니다.


각 fee는 section에 포함 됩니다. 각 section의 이름은 일반적으로 그렇게 중요하지는 않지만 반드시 unique 해야 합니다.

각 feed에는 아래 옵션들을 사용하게 됩니다.

  • RETRIEVER_CLASS - The Data Retriever to use. Currently supported retrievers include:
    • YouTubeRetriever
    • VimeoRetriever
    • BrightcoveRetriever
  • TITLE - The textual label used when showing the section list
  • AUTHOR - optional, used to limit the results by author
  • TAG - optional, used to limit the results by tag



YouTubeRetriever


유튜브에는 아래 옵션이 추가적으로 더 있습니다.

  • PLAYLIST - optional, used to limit the results by a particular playlist


VimeoRetriever

Vimeo에는 아래 옵션이 추가적으로 더 있습니다.

  • CHANNEL - optional, used to limit the results by a particular channel


BrightcoveRetriever

Brightcove service를 사용하시려면 몇개의 parameter들을 사용하셔야 합니다.

값들은 Brightcove` 에서 받을 수 있습니다.

  • token
  • playerKey
  • playerId


Configuring Display Options

  • MAX_PANE_RESULTS - (optional) tablet device에서 display 될 Maximum number. Defaults는 5.
  • MAX_RESULTS - (optional) 비디오 모듈의 index 페이지에서 표시될 maximum number. Defaults는 10.
  • BOOKMARKS_ENABLED - (optional) true로 세팅하면 즐겨찾기 할 수 있는 표시가 나타남. 디폴트는 true
  • SHARING_ENABLED - (optional) Defaults to true. true로 세팅하면 detail page에 현재 비디오를 share 할 수 있는 링크가 나타남. 디폴트는 true.


반응형

Local Notifications Guide (iOS)

2012. 6. 6. 23:35 | Posted by 솔웅


반응형

Local Notifications Guide (iOS)


이번주 화요일의 튜토리얼은 코로나의 Local Notification 기능에 대해 다루겠습니다. 현재 iOS 플랫폼에서만 가능합니다.

여러분 앱의 사용자가 local notification을 받으면 alert 하게 될 거고 소리가 날 거고 메세지가 뜰 겁니다. 그리고 그 notification과 관련된 어떤 행동을 할 수 있는 옵션들이 제공 될 겁니다.

notification을 받을 때 여러분의 앱이 foreground에 있지 않으면 (예를 들어 유저가 인터넷 서핑을 한다 던지, 페이스북을 한다 던지 등등) 유저에게 메세지를 보여줄 수 있습니다. 그리고 여러분의 앱으로 돌아갈 수 있도록 하는 옵션을 줄 수 있습니다. 그러면 여러분 앱을 좀 더 많이 사용할 수 있도록 하겠죠.

Notification은 아주 customizable 합니다. 소리를 내게 할 수도 있고 메세지를 보일수도 있고 앱 아이콘에 badge count를 넣을 수도 있습니다. 또한 user가 특정 notification에 답했을 때 정확히 여러부닝 필요로하는 것을 수행하기 위해서 custom data를 여러분 앱에 pass 할 수도 있습니다.

오늘 다룰 튜토리얼에서는 코로나의 이 local notification 에 대해 알아야 할 모든것에 대해 다루겠습니다.





Local vs. Push Notifications


Local Notification하고 Push Notifications 하고 헛갈리지 마세요. 유저 입장에서 보면 alert이나 message, sound, badge icon 등등 모두 똑 같겠지만 개발자 입장에서는 분명히 다르니까요.

Push와 Local Notification의 다른점은 Push notification은 원격 서버에서 와서 유저에게 push 되는 겁니다.(내부적으로-locally- 따로 정해진 스케줄에 따라 일어나는 것이 아닙니다) 이건 셋업하는데 조금 더 복잡합니다 (보안 문제 같은것들을 생각해야 하거든요.) 그리고 서버를 셋업해야 되기 때문에 비용도 높은 편입니다. (유저가 많을 경우에는 더 그렇겠죠.)

Local notification을 보면 모든것이 유저의 device에서 locally 처리 됩니다. 그리고 미리 지정된 시간이나 간격 등이 세팅돼 있습니다. (scheduled) 그러니까 원격 서버가 필요 없는거죠. (추가적인 비용 발생이 없다는 겁니다.) 또 다른 잇점은 코로나에서 이 Locall Notification을 셋업 하는 것은 아주 쉽다는 겁니다.

사실 여러분들이 Push notification으로 하고자 하는 많은 것들을 local notification으로 할수 있는경우가 많습니다. 또 Local 로만 할 수 있는 것들도 있구요. 예를 들어 여러분들의 앱에서 원격에서 데이터를 가져올 필요가 없다면 Push 보다는 Local을 사용하는 것이 훨씬 더 나을 겁니다.


Scheduling Notifications


Notification에 대한 일정을 잡기 위해 (schedule) system.scheduleNotification() 함수를 사용해야 합니다.

신택스는 아래와 같습니다. 두 방법 모두 유효합니다.


system.scheduleNotification( secondsFromNow [, options] )
system.scheduleNotification( coordinatedUniversalTime [, options] )


이 함수는 나중에 notification을 cancle 하는 데 사용할 수 있는 reference ID를 return 합니다. 나중에 이 cancel 부분을 구현하려면 system.cancelNotification() 함수를 사용하시면 됩니다.

이 notification을 일정 시간 후로 일정을 잡으려면 secondsFromNow를 사용하거나 universal time을 사용해서 특정 date/time을 지정해 주시면 됩니다.

다룰 것들이 많이 있지만 오늘은 secondsFromNow를 사용해 보겠습니다. 만약 여러분이 coordinated universal time option을 사용하고 싶으시면 coordinatedUniversalTime argument에 대해 좀 더 자세한 설명이 있는  system.scheduleNotification() API 문서를 보세요.

두번째 argument는 secondsFromNow 를 선택했느냐 coordinatedUniversalTime를 선택했느냐와 관계 없이 사용하는 겁니다. 이것은 여러분의 notification에 대해 특정 정보를 보관하고 있는 options 테이블 입니다.

  • alert – 유저에게 보여지는 메세지 
  • badge – 앱 아이콘에 보여지는 badge number
  • sound – notificatin을 받으면 play 될 sound file
  • custom – Custom data/params to be used by your app, relevant to the notification (can be a variable, table, JSON string, etc).


개와 관련된 앱을 만든다고 가정하고 들어주세요. 여러분 앱은 10분(600초) 후에 강아지에게 먹이를 주어야 하는걸 알려주기 위해 notification 일정을 잡을겁니다. 그 예제는 아래와 같습니다.


local badge_count = native.getProperty( "applicationIconBadgeNumber" )

local notifyOptions =
{
   alert = "Time to feed your pet!",
   badge = badge_count + 1,
   sound = "woof.caf",
   custom = { scene = "pet_shop" }
}
local feed_notifier = system.scheduleNotification( 600, notifyOptions )



맨 처음에 native.getProperty( “applicationIconBadgeNumber” )를 사용해서 현재 application badge number를 받았습니다. 그리고 options table에서 그 숫자를 1 증가시켜서 세팅했습니다.

나머지는 그냥 보시면 아실겁니다. notification을 600초(10분)로 일정을 잡았고 두번째 인자로 notifyOptions table 을 전달했습니다.

notifyOptions table 안에 custom data로 launch_scene key 를 pass 했습니다. 이것은 이 notification을 받을 때 pet_shop으로 가도록 하기 위해 notification listener안에 있는 이 데이터를 보관하게 하는 겁니다. 나중에 이 데이터를 사용해서 pet_shop scene 으로 가겠죠. 이 custom 옵션에 무엇을 넣느냐는 전적으로 여러분 마음입니다.


Notification Listener


이 notification을 scheduling 하는 것은 단지 첫번째 step일 뿐입니다. 이제 이 notification을 받으면 어떤 것을 하도록 만들어야 합니다. 이 작업은 notification event listener 를 사용해서 작업합니다.

예제를 보여드리기 전에 여러분의 notification event listener function에 pass 될 event data를 알려드리겠습니다.

  • event.name – evnet.name은 항상 "notification” 입니다.
  • event.custom – 여러분이 custom option 을 통해서 pass 한 custom data 입니다.
  • event.type – 이 값은 항상 “local”이 될 겁니다.
아마 event.custom에 대해 궁금하시고 흥미로워 하실 겁니다. 

아래 notification listener 와 관련된 예제가 있습니다.


local function notificationListener( event )
    -- notification received, go to specified scene
    if event.custom.scene then
        storyboard.gotoScene( event.custom.scene )
    end
end
Runtime:addEventListener( "notification", notificationListener )


이 전에 notificatin schedule을 잡을 때 custom data로 scene key를 설정했죠? 위에서 보듯이 이 값은 event.custom에다 해당 key 값을 넣어서 그 value를 받아오도록 돼 있습니다. 프로그래밍을 하면서 다양하게 사용될 수 있겠네요.


NOTE: 위에서 보듯이 global Runtime object를 사용해서 notification event를 add 하실 수 있습니다. 


Canceling Notifications


system.cancelNotification() function를 사용하면 notification을 cancel 하실 수 있습니다. 이 함수를 call 할 때 두가지 옵션이 있습니다. system.scheduleNotification()에서 return 된 reference ID를 첫번째 argument에 넣어서 특정 notification을 cancel 할 수 있구요,  아니면 아무것도 안 넣고 현재 있는 모든 notification들을 cancel 할 수도 있습니다.


위에 예제로 만든 notification을 cancel 하려면 아래와 같이 하시면 됩니다.


system.cancelNotification( feed_notifier )

아래와 같이 하면 현재 schedule 된 모든 notification 이 cancel 됩니다.


system.cancelNotification()


launchArgs (Important)


유저가 여러분의 앱을 사용하고 있지 않을 때 local notification 이 왔다면 그 notification의 성격에 따라서 유저에게 알리거나 특정 scene으로 안내하고 싶으실 겁니다. 위에서 보았듯이 이런 작업은 notification event listener를 통해서 handle 해야 합니다.

문제는 여러분의 앱이 suspend 되거나 close 됐을 때 그 notification listener는 active 상태가 아니라는 겁니다.

경우에 따라 위의 예제의 경우 앱을 실행 할 때 main scene 이 아니라 pet_store로 가도록 해야 할 수도 있습니다. 이럴 때 launchArgs를 사용합니다. 


main.lua


local launchArgs = ...

------------

local function notificationListener( event )
    -- notification received, go to specified scene
    if event.custom.scene then
        storyboard.gotoScene( event.custom.scene )
    end
end
Runtime:addEventListener( "notification", notificationListener )

------------


if launchArgs and launchArgs.notification then

    -- call the event listener manually:
    notificationListener( launchArgs.notification )
end


위에서 보듯이 notification listener는 이전 예제에서 보여 드렸던 그 리스너랑 똑 같습니다. 다른 점은 main.lua 의 첫번째 라인에서 launchArgs  변수를 선언해서 실행 될 부분을 assign 한다는 겁니다.(the “…” is literal; not placeholder text).

notificationListener() function 내 어딘가에 launchArgs 에 attached 된 notification table 과 함께 앱이 시작됐는지 체크해야 합니다.

그러면서 이 listener function을 manually invoke 하게 됩니다. 이 listener 함수는 첫번째 argument로 launchArgs.notification 를 전달 했다는 것을 기억해 두세요.


여기까지 입니다. 코로나에서 local notifications 의 일정을 잡고 어떤 동작을 하도록 하는 것에 대해 모두 배우셨습니다. 이것을 활용하셔서 다양한 효과를 내실 수 있을 겁니다.

반응형

뉴저지 밀알 행사 안내

2012. 6. 6. 19:17 | Posted by 솔웅


반응형

뉴저지를 떠나면서 인터넷하고 페이스북으로만 접하는데...


앞으로 큰 행사 두개를 준비하고들 계시네요...


뭐 도와드릴 수 있는 방법은 없고


다른분들에게 이런 행사가 진행되고 있다는 소식이나 알리고 싶습니다.


사람의 인연이라는게 알 수가 없어서


이런 좋은 기가 통하는 소식은 여러분들에게도 좋은 기가 전달되지 않을까...


그러면 여러분들에게도 좋은 일들이 생기지 않을까 기대하면서......


제20회 밀알 사랑의 캠프

1. 일시: 7월26(목) - 28일(토)
2. 장소: Double Tree Hotel (200 Atrium dr. Somerset, NJ 08873)
3. 주최: 밀알선교단 예상 인원 : 600 명
강사: 이재서 박사 (시각장애인,밀알설립자, 세계밀알총재), 이근민 목사 (세계밀알 이사장 )
4. 문의: 뉴저지밀알선교단 (201-530-0355, www.mijumilal.org )
21세기 사마리아인 이야기

한 장애인이 길 가에 쓰러져 도움을 요청하고 있었다.
한 성도가 보았으나 아들 학원 시간 때문에 피하여 지나가고
한 집사가 보았으나 성가대 일 때문에 피하여 지나가고
한 장로가 보았으나 나라가 해야 할 일이라고 피하여 지나가고
한 목사가 보았으나 영혼 구원하는 일이 아니기 때문이라고 피하여 지나갔다.
그 때 사람들로부터 놀림을 당하는 한 정신지체 장애인이 그를 보고 불쌍히 여겨
다가가서 몸을 일으켜 세우고 집에 가서 눕히고 엄마에게 말하여 돌보게 하였다.
누가 쓰러진 장애인의 이웃이 되겠는가?

20년 전 누가 쓰러진 장애인의 이웃이 되겠는가? 질문에 구체적으로 응답하고자
밀알 사랑의 캠프를 시작했습니다. 50 여명으로 시작한 밀알 캠프가 지금은 동부,서부 1000 여명의 장애인과 봉사자가 참여하는 캠프가 되었습니다.
여행 한 번 하기 힘든 장애인들에게 밀알 캠프는 일년내내 기다리는 잔치입니다.
함께 함으로 진정한 사랑을 보고 배울 수 있는 소중한 시간입니다.

시간을 내어 봉사하는 봉사자가 필요합니다 (300 명)
가고 싶어도 회비 때문에 부담이 되는 사람들에게는 후원자가 필요합니다.
www.mijumilal.org



Love without Limits with Nick Vujicic
(닉 부이치치초청 집회)
+ Sunday, August 5, 2012 at 5 p.m.
+ Felician College (Lodi Campus)
262 South Main St. Lodi, NJ 07644
+ Tickets:
$50 VIP (200 seats)
$20 General Admission (1,300 seats)
+ Tickets are only available in advance at America Wheat Mission in NJ (뉴저지밀알선교단 201-530-0355, miju92@yahoo.co.kr, www.mijumilal.org)
+ Doors open at 4 p.m.
+ About Nick Vujicic at http://www.lifewithoutlimbs.org/about-nick/
+ Translator : Pastor Brian Lee ( New England Grace PCA)


반응형

평등한 어두움을 위하여...

2012. 6. 4. 20:53 | Posted by 솔웅


반응형


아무런 이유 없이 외로움이 느껴질 때가 있어.


잘 생각해 보니 아무런 이유가 없는건 아닌것 같군.


'건축학개론'을 보다 우연히 눈 돌린 비오는 창밖이 어쩌면 그렇게 외로워 보이던지...


인도에 있을 때 새벽에 자전거타고 산책나간 광야에서

어둑히 멀리 있는 양치기 노인을 봤어..


참 낭만적이고 목가적이고 한가한 여유를 느끼고 있었는데..

그 양치기 노인이 나한테 다가오더니

어제 점심부터 굶었는데 100원만 달라는 거야...


그에겐 고달픈 노동이었을 뿐이야.

나한테 한가한 여유를 느끼게 해 주었던 그 행위가....





비오는 창밖의 가로등 불빛이 외롭다.


외로움이 하나 떠나간다.


창밖은 여전히 외롭다.


하나님이 태초에 빛이 있으라 말씀하셨다지?


거짓말이야.


하나님은 태초에 외로움이 있으라 말씀하셨어.


가로등 불빛이 꺼져 버리니


외로움도 사라진다.


반응형


반응형


이사오고 나서 적응하느라고 바빴는데 메일함에 소포가 왔다가 갔다는 쪽지가 있었어요.


사람이 없어서 쪽지만 놓고 간 것 같은데.


찾아왔더니 코로나에서 보낸 소포더라구요.




저 멀리 캘리포니아에서 왔어요.

보낸 주소 보이시죠?

거기가 코로나 회사 주소인데요.

한가지 바뀐게 있습니다.

원래 코로나 SDK 의 회사 이름은 Ansca 였었는데 바뀌었습니다.

Corona Labs 나 Corona Labs Inc. 로 바뀌었습니다.

저도 이틀전에 공지가 와서 알게 됐어요.


회사 홈페이지와 트위터 그리고 페이스북 주소도 바뀔거랍니다.

아직 준비중이라서 공개하지 말아달라고 하던데요.

공식적으로 발표 되면 글 올릴께요.



명예대사들에게 티셔츠를 보낸다고 해서 그것만 기대했는데.. 센스있네요.



머그잔하고 가볍고 잘 튀는 고무공 그리고 공책, 펜, 스티커 이렇게 보내 줬네요.


공 하나만 더 보내주면 저글링을 할텐데... ^^


아주 열정적으로 회사를 운영하는 것도 Corona SDK 를 좋아하는 이유 중 하나입니다.

물론 SDK 자체도 아주 훌륭하고요. 계속 발전해 가고 있구요.


Corona Labs Inc. 화이팅입니다.


반응형

비트맵 마스크 사용하기

2012. 6. 2. 03:35 | Posted by 솔웅


반응형

How to Use Bitmap Masks

Posted by Jonathan Beebe

이번주 튜도리얼은 많은 프로젝트에서 꾸준히 애용되고 있는 기능이지만 한편으로는 특별한 use-case로 인해 여러분이 잘 모를 수 도 있는 기능을 다뤄볼까 합니다. 이 기능은 bitmap masking 인데요, graphics.newMask() 함수를 사용해서 구현합니다.

아마 bitmap masking이 무엇인지 잘 모를수도 있습니다. 또 어떻게 유용하게 사용될지에 대해서 알지 못할수도 있구요. 그러신 분들은 이번 강좌를 잘 보세요. 분명히 아주 유용한 툴일테니까요. Bitmap mask는 약간 tricky 한 방법으로 문제를 해결하는데 사용될 수 있습니다.

    - 이미지의 투명한 부분에는 touch 이벤트가 안 먹게 하기 (아주 많이 쓰이는 케이스 입니다)
    - 특정한 모양으로 이미지를 Clip 하기 (예를들어 스크롤 뷰 위젯에서 전체 스크린 내의 일부 sub-section 부분을 clip 하기 위해 bitmap mask 를 이용할 수 있습니다.)
    - solid background가 있는 이미지에 transparency 주기


위에 보시듯이 masking의 주요 목적은 이미지의 일 부분을 숨기는 겁니다. (혹은 전체 display 그룹의 일 부분을 숨길수도 있구요.) 즉 이미지를 masking 하는 겁니다. 그러려면 masking 할 이미지도 있어야 합니다. mask라는 단어를 사용하는 이유가 그냥 이미지나 그룹에 덮어씌우는 기능을 하기 때문입니다.





What a mask looks like

아래에 과일 이미지가 있습니다. (fruit.png) 그리고 bitmap mask image 가 있습니다. (fruit-mask.png) 이 두개의 이미지를 사용할 겁니다. 회색으로 서양의 체스판 모양으로 돼 있는 부분은 이미지의 투명한 부분입니다.





오른쪽의 bitmap mask의 검은 부분이 투명한 부분이 될 겁니다. 그리고 흰 부분은 이 mask가 정확하게 apply 됐을 때 보여지게 될 원래 source 이미지가 들어갈 부분입니다. 이 mask로 사용될 이미지에는 어떤 특별한 제약이 있는것이 아닙니다. 아무 이미지나 사용하실 수 있습니다.

What’s the point?

위 두개의 이미지를 사용할 건데 뭘 하려는 것일까요? mask 이미지에 있는 검은 색은 이미 source image에서 투명하게 돼 있는 부분인데요. 이 튜토리얼에서 다룰 것은 bitmap masking을 사용해서 특정 부분을 투명하게 만드는것 말고 투명한 부분에서는 touch 이벤트가 안 먹도록 만드는 방법을 알려 드릴 겁니다.

투명한 부분이 있는 이미지라도 touch listener를 달면 전체 이미지에서 이 touch 이벤트가 먹힐겁니다. 오직 저 사과만 터치했을 때 어떤 이벤트가 발생하도록 하려면 어떻게 해야 할까요? 그렇게 하려면 이 bitmap mask를 사용해야 합니다. 또 예를 들어 어떤 이미지가 있는데 그 이미지의 일 부분에만 터치가 먹히게 하고 싶을 때도 이 방법을 사용할 수 있습니다. 이미지내에 투명한 부분이 없을때도 말이죠.

Bitmap mask requirements

mask로 사용할 이미지를 만들때는 아래와 같아야 합니다.

   1. width와 height가 4의 배수여야 합니다.
   2. 적어도 3px의 검은테두리가 있어야 합니다.


위의 가이드라인을 따르지 않는다면 예상한 대로 masking이 일어나지 않을 것이고 이것을 debug 하는 것도 힘들겁니다. 추가적으로 고려해야 할 사항들을 아시려면 Bitmap Mask documentation 을 읽어 보세요.

Applying the mask

mask를 적용하려면 graphics.newMask()를 사용해서 새로운 mask를 만들어야 합니다. 그리고 object:setMask() 메소드를 사용해서 객체나 그룹에 apply 합니다.

local mask = graphics.newMask( "fruit-mask.png" )

local fruit = display.newImage( "fruit.png" )
fruit.x, fruit.y = display.contentCenterX, display.contentCenterY

-- apply mask to object
fruit:setMask( mask )


위의 코드를 보시면 우선 mask를 생성하고 display object를 만들고 그 마스크를 display object에 apply 했습니다. 이렇게만 하면 약간의 문제가 생길겁니다. 디폴트로 객체의 적용 좌표는 0,0 이 됩니다. (좌상단이 되겠죠) 그리고 mask는 중앙을 기준으로 하는 reference point가 적용 되면 아래와 같은 모양으로 object:setMask()가 적용 될 겁니다.





mask 가 적용될 객체의 정 중앙에 제대로 덮이길 원하시면 객체의 maskX와 maskY 프로퍼티를 수정해 줘야 합니다.

fruit.maskX = fruit.contentWidth*0.5
fruit.maskY = fruit.contentHeight*0.5


마스크는 대상 객체의 0,0 지점에 위치한다는 것을 꼭 기억해 두세요. 위의 코드를 추가하고 나면 아래와 같이 될 겁니다.



결과적으로 모바일 화면에는 아래와 같이 나오게 됩니다.



자 겉으로 보기에는 그냥 display.newImage() 해서 원래 배경이 투명한 이미지를 display 한것과 다를것이 없습니다. 만약 원래 배경색이 투명하지 않았다면 겉모습이 투명하게 바뀌었을 테니까 뭔가 변화가 있다고 느껴지겠죠. 어쨌든 위에 사용한 원래 이미지 파일에는 배경이 투명하게 이미 돼 있었습니다. 그러니까 위 예제가 유용하게 사용되려면 투명한 부분을 un-touchable 하게 만들어야 쓸모가 있게 되겠죠.

다행스럽게도 이미지가 이렇게 한번 mask 되고 나면 다음 사용법은 아주 쉽습니다. 그냥 간단하게 object.isHitTestMasked 프로프티를 true로 세팅하면 투명해진 부분에 touch 이벤트가 안 먹히게 할 수 있습니다.

fruit.isHitTestMasked = true

이제 여러분이 이 fruit 객체에 touch 리스너를 달게 되면 전체 256X256 이미지가 다 touchable 되는것이 아니라 투명하지 않은 부분만 touchable 될 겁니다. 이 예제의 경우엔 아주 정확하게 과일 부분에 터치할 경우에만 touch 이벤트가 적용 되겠죠.

Dynamic Content Scaling


bitmap mask는 dinamic content scaling을 지원하지 않습니다. 그렇다고 해서 방법이 전혀 없는 것도 아닙니다. 구현하시려면 high resolution asset를 로드해서 object.maskScaleX와 object.maskScaleY 프로퍼티를 원하는 크기에 맞게 세팅해 주세면 됩니다.

예를 들어, retina display에 맞춰서 개발을 하고 있고 아주 super-sharp 하게 되도록 mask를 사용하고 싶으시면 fruit-mask.png와 fruit-mask@2x.png 두개를 준비하세요. (원본보다 두배 크기의 이미지를 준비하시면 됩니다.) 그리고 mask를 생성할 때 (graphics.newMask()) @2x asset을 사용하시면 됩니다. 그리고 나서 fruit.maskScaleX 와 fruit.maskScaleY 를 display.contentScaleX와 display.contentScaleY로 세팅하세요.

아래 예제가 있습니다.

local mask = graphics.newMask( "fruit-mask@2x.png" )

local fruit = display.newImage( "fruit.png" )
fruit.x, fruit.y = display.contentCenterX, display.contentCenterY

-- apply mask to object
fruit:setMask( mask )
fruit.maskScaleX = display.contentScaleX
fruit.maskScaleY = display.contentScaleY
fruit.maskX = fruit.contentWidth*0.5
fruit.maskY = fruit.contentHeight*0.5


이런 방식을 사용하면 좀 더 다양한 해상도에 맞도록 이미지들을 준비하면 좀 더 super-sharp 하게 이 mask를 사용할 수 있겠죠. 물론 각각 다른 high resolution 이미지를 사용해야 겠죠. 같은 방법으로 안드로이드 디바이스들도 이렇게 적용하실 수 있습니다.

그리고 mask는 전체 display group 객체에도 apply 될 수 있다는 것을 기억해 두세요.

Removing a mask

객체에서 mask를 제거하고 싶으시면 간단하게 object:setMask(nil)을 해 주시면 됩니다. 또한 변수를 nil로 선언해도 이 mask를 제거하실 수 있습니다.

fruit:setMask( nil )
mask = nil


이 bitmap mask에 대한 또 다른 예제도 보실 수 있습니다. 다운로드 받으신 Corona SDK의 Flashlight 샘플을 한번 보세요. 경로는 /SampleCode/Graphics/Flashlight 폴더 입니다. 이 bitmap mask로 어떤 다른 좋은 효과를 줄 수 있을까요?

반응형

Kurogo Tutorial 17 - Calendar Module -

2012. 6. 1. 23:47 | Posted by 솔웅


반응형

Calendar Module

Calendar 모듈은 날짜와 관련된 정보를 모바일에 맞게 제공합니다. 날짜별 카테고리별 그리고 리스트별로 일정들을 볼 수 있고 그 일정의 세부 일정도 보게 할 수 있습니다. 쿠로고에 자체 내장돼 있는 Calendar 모듈은 iCalendar(ICS) 포맷에 따라 정보를 parsing 하고 보여 줍니다.


Configuring the Calendar Feed


Calendar 모듈을 사용하시려면 먼저 여러분의 데이터와의 connection을 셋업해야 합니다. 반드시 세팅해야 할 2개의 값이 있고 몇개의 옵션값이 더 있습니다.  Administration Module 을 사용하거나  SITE_DIR/config/calendar/feeds.ini 파일을 직접 edit 해서 세팅할 수 있습니다.


Calendar 모듈은 여러 종류의 칼렌더를 제공합니다. 각각의 칼렌더는 configuration 파일의 각각의 섹션에 의해 지정 됩니다. 섹션의 이름은 type이 되고 어떤 칼렌더를 사용할 것인지는 URL들을 이용해서 정해줍니다. type 파라미터가 url을 지정돼 있지 않으면 첫번째 calendar 가 사용될 겁니다.

  • TITLE 값은 calendar feed의 이름에 사용되는 label 입니다. 이 값은 해당 이벤트가 보여질 때 상단의 제목으로 사용될 겁니다.
  • BASE_URL은 ICS feed 의 url로 세팅 됩니다. static file일 수도 있고 web service 일 수도 있습니다.

Optional values

  • RETRIEVER_CLASSData Retriever 에 대한 다른 클래스 이름을 세팅할 수 있도록 해 줍니다. 만약 여러분의 service가 dinamic URL을 사용한다면 custom retriever를 사용하셔야 합니다.
  • PARSER_CLASS (default ICSDataParser) DataParser 의 서브클래스로 세팅해 줍니다. iCalendar(ICS) 포맷이 아닌 포맷으로 데이터를 return 할 때 해당 포맷에 맞게 이 값을 바꿔주셔야 합니다.
  • EVENT_CLASS (default ICalEvent)  검색시 return 된 이벤트 객체들에 대해 다른 클래스 이름으로 세팅할 수 있도록 해 줍니다. feed의 custom field를 처리할 수 있도록 custom behavior를 지정할 수 있도록 해 줍니다.



Configuring the Detail Fields


feed setting이 다 끝났으면 세부정보를 보여주는 화면이 어떻게 display 될지 그리고 어떤 값들을 사용할지를 configure 하셔야 합니다. 각각의 field는 section에서 configure 됩니다. 그 section 이름은 event field와 매핑됩니다. 이 section의 순서는 detail view의 순서가 됩니다. 각각의 섹션안에는 어떻게 이 field가 display 될지를 정해주는 여러 값들이 있습니다. 모두 optional 입니다.

  • label - field에 대한 text label
  • type - value를 포맷하거나 링크를 생성하기 위한 옵션 값. 아래의 값들이 올 수 있습니다.

    • datetime - date/time 값으로 format
    • email - 이메일 주소같은 값에 mailto 링크를 생성함
    • phone - 전화번호 같은 값에 telephone link를 생성함
    • url - url 링크를 생성함
  • class - field에 CSS 클래스를 추가. space를 두고 여러 클래스들을 열거해 사용할 수 있음
  • module - 다른 모듈에 링크를 걸음. 그리고 결과값을 format 하기 위해 그 모듈의 linkForValue 모듈을 사용함. 좀 더 자세한 사항은  Module Interaction를 보세요.

Configuring the Initial Screen

index page는 여러분의 configure 한 calendar들의 리스트를 보여주도록 configure 될 수 있습니다. SITE_DIR/config/calendar/page-index.ini 를 수정해서 이 리스트의 content들을 update 할 수 있습니다. 각각의 entry는 section 입니다. 각각의 section은  listItem 탬플릿에 의해 사용되는 값에 대한 매핑 값들을 가지고 있습니다.

  • title - 사용자에게 보여질 entry 이름
  • subtitle - title 밑에 보여 줄 subtitle
  • url - 목적지 링크. 외부 url에 링크 걸 수도 있고 모듈 안의 한 페이지에 링크를 걸 수도 있슴. 칼렌더 view page들은 어떤 calendar가 보여질지를 지정하기 위해 type 파라미터를 전달해줘야 합니다.

    • day - 해당 일자의 이벤트를 보여 줌
    • year - 12달 동안의 모든 이벤트를 보여 줌. month 파라미터를 전달해서 시작하는 month를 지정할 수 있슴
    • list - 현재일 바로 다음의 이벤트들을 보여 줌. 디폴트 limit은 20 events 임
    • categories - 카테고리의 리스트를 보여 줌. 현재로서는 이 카테고리 리스트를 get 하기 위해서는 특별한 support가 요구됩니다.
  • class - item의 CSS class. 예) phone, email

Configuring User Calendars and Resources

유저 칼렌더와 resources (rooms/equipment 등) 을 보기 위한 기능이 있습니다. 지금까지 support 되는 칼렌더 시스템은 Business 나 Education을 위한 Google Apps 만이 지원 됩니다.


User Calendars 가능하도록 하려면:

  • Setup the authority for your Google Apps Domain.
  • Ensure that you have entered the required OAuth consumer key and secret
  • Ensure that the “http://www.google.com/calendar/feeds” scope is available in your authority.
  • Edit config/calendar/module.ini and add a user_calendars section.
  • Set RETRIEVER_CLASS to GoogleAppsCalendarListRetriever
  • Set AUTHORITY to the section name of your Google Apps Authority. If this value is not set it will use the first defined GoogleAppsAuthority class


아래는 config/calendar/module.ini file 의 예제 입니다.

[user_calendars]
RETRIEVER_CLASS="GoogleAppsCalendarListRetriever"
AUTHORITY="googleapps"

Resource들을 사용하시려면:

  • Setup the authority for your Google Apps Domain.
  • Ensure that you have entered the required OAuth consumer key and secret
  • Ensure that the “https://apps-apis.google.com/a/feeds/calendar/resource/” scope is available in your authority.
  • Edit config/calendar/module.ini and add a resources section.
  • Set RETRIEVER_CLASS to GoogleAppsCalendarListRetriever
  • Set AUTHORITY to the section name of your Google Apps Authority

아래는 config/calendar/module.ini file 예제입니다.

[resources]
RETRIEVER_CLASS="GoogleAppsCalendarListRetriever"
AUTHORITY="googleapps"



반응형


반응형

jQuery Mobile이 아니고 jQuery UI 에서 Touch 이벤트를 지원한다고 합니다. 


jQuery UI Touch Punch


Touch Event Support for jQuery UI


아이패드 (iPad), 아이폰 (iPhone), 안드로이드 (Android) 와 기타 touch-enabled 모바일 디바이스에서 테스트 됐음


jQuery UI Touch Punch는 jQuery UI 유저 인터페이스 라이브러리를 사용하는 site에서 touch event를 사용할 수 있도록 한 하찮은것입니다.


Visit the official Touch Punch website.


현재 jQuery UI 유저 인터페이스 라이브러리는 touch event를 사용하는 것을 지원하지 않고 있습니다. 그 의미는 데스크탑에서 그럴듯하게 잘 만들어서 테스트 된 것도 touch-enabled 모바일 디바이스에서는 별로 유용하지 않다는 것을 말합니다. 왜냐하면 jQuery UI 는 마우스 이벤트 (mouseover, mousemove and mouseout)를 listen 하고 있지 touch event(touchstart, touchmove and touchend)를 Listen 하고 있지 않기 때문입니다.


그래서 jQuery UI Touch Punch가 나온 겁니다.Touch Punch는 simulated events를 사용해서 mouse event를 touch event로 매핑합니다. 간단히 페이지에 script를 include 시키면 touch 이벤트가 각각의 상응하는 mouse 이벤트로 변환될 겁니다.


제가 말했듯이 Touch Punch는 하찮은 것입니다. 그냥 jQuery UI의 몇개의 core 기능을 touch event로 매핑하는  duck punches 일 뿐입니다. Touch Punch는 jQuery UI의 interaction과 widget 을 implement 해서 사용합니다. 그래도 사용하시려고 하면 잘 작동을 안하고 오류가 나고 할 겁니다. 이러한 이슈들을 어떻게 알아내고 어떻게 고칠지에 대해 아래 글을 통해서 미리 익혀 두세요.


이 코드는 MIT나 GPL 버전 두개의 licenced 돼 있습니다. 그렇기 때문에 Free 입니다. 수정하시고 배포하셔도 됩니다. 다만 이 Touch Punch를 패키지나 플러그인으로 사용하시면 Original software에서 밝혀 주시고 또  Touch Punch website에 링크도 걸어 주세요.



Using Touch Punch is as easy as 1, 2…


아래대로 하시면 jQuery UI 앱에서 touch 이벤트를 사용하실 수 있습니다.:

  1. Include jQuery and jQuery UI on your page.

    <script src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
    
  2. Include Touch Punch after jQuery UI and before its first use.

    Please note that if you are using jQuery UI's components, Touch Punch must be included after jquery.ui.mouse.js, as Touch Punch modifies its behavior.

    <script src="jquery.ui.touch-punch.min.js"></script>
    
  3. There is no 3. Just use jQuery UI as expected and watch it work at the touch of a finger.

    <script>$('#widget').draggable();</script>
    

Tested on iPad, iPhone, Android and other touch-enabled mobile devices.


Download the Code

jQuery UI Touch Punch plugin 은 아래 두개의 버전이 있습니다. 다운받아서 사용하세요.



반응형

Kurogo Tutorial 16 - Database Access -

2012. 5. 30. 10:43 | Posted by 솔웅


반응형

Database Access

데이터베이스가 필요한 경우는 여럿 있습니다. Kurogo는 PDO pho library를 사용하는 표준 데이타베이스 access abstraction system을 만들었습니다. 이 section에서는 데이터베이스 connection에 대한 configuration 뿐만 아니라 모듈이나 library를 만들 때 어떻게 데이터베이스를 활용하는지에 대한 설명도 있습니다.

Supported Database Backends

Kurogo는 다음과 같은 부분을 지원합니다. 이 시스템을 사용하시려면 PHP extention 이 요구된다는 것을 기억해 두세요. 데이터베이스 서버를 설치하고 configuring 하는것은 이 문서에서는 따로 다루지 않겠습니다.



An important note about SQL statements

Kurogo 데이터베이스 라이브러리는 단지 abstraction library 에 접속하는 일만 합니다. 이것은 SQL abstract library 가 아니기 때문에 서로 다른 backend 시스템이 하나의 SQL language를 지원하지 않구요 거기에 맞는 statement를 사용해야 하는 겁니다. SQL 구문이 반드시 다르게 되는 back ends 들에 대한 정보는 Using the database access library 를 보세요.

Kurogo Features that use Database connections

  •  internal device detection system은 브라우저에 데이터를 저장하기 위해 내장된 SQLite 데이터베이스를 사용합니다.
  • Statistics Modules 은 access log들을 index 하고 report를 준비하기 위해 데이터베이스를 사용합니다. 여러분 환경이 load balance 된 환경이라면 centralized 데이터베이스를 사용하시는게 좋을 겁니다.
  • 옵션으로 세션데이터를 저장하려면 SessionDB 클래스를 사용해서 서버에 파일로 저장할 게 아니라 데이터베이에 저장하는 것이 좋습니다.
  • DatabasePeopleController는 디렉토리 정보를 얻기 위해 데이터베이스를 사용합니다. (LDAP 서버를 사용하지 않고 데이터베이스를 사용하는 겁니다.)
  • DatabaseAuthentication authority 는 authentication을 위해 데이터베이스를 사용합니다.

이 기능들을 사용하시려면 데이터베이스만 있으면 됩니다. 데이터베이스를 사용하지 않아도 Kurogo를 사용할 수는 있습니다.

Configuring Database Connections

site.ini 파일의  database 섹션에는 데이터베이스 connection setting의 primary set 이 있습니다. 모든 데이터베이스 커넥션들은 디폴트로 series of setting을 사용할 겁니다. 여러분들은 특정 서비스의 configuration마다 적당한 값들을 사용함으로서 이러한 세팅들을 override 하실 수 있습니다.

  • DB_DEBUG - on 이면 쿼리들은 log 되고 에러들은 브라우져에 보여집니다. production site에서는 off로 해 두셔야 합니다. 그렇지 않으면 데이터베이스 에러가 있을 때 SQL 쿼리가 노출 될 수 있습니다.
  • DB_TYPE - 데이터베이스 시스템의 종류. 아래와 같은 것들이 있습니다.
    • mysql
    • sqlite
    • pgsql
    • mssql

아래 값들은 host based 시스템들에 적합합니다. (mysql, pgsql and mssql)

  • DB_HOST - The hostname/ip address of the database server.
  • DB_USER - The username needed to connect to the server
  • DB_PASS - The password needed to connect to the server
  • DB_DBNAME - The database where the tables are located
  • DB_PORT - The port used to connect to the server. If empty it will use the default (mysql and pgsql only)

The following values are valid for file based systems (sqlite)

아래 값은 file based systems 에 적용됩니다. (sqlite)

  • DB_FILE - 데이터베이스 파일의 위치. Use the DATA_DIR constant to save the file in the site data dir. This folder is well suited for these files.

Using the database access library

데이터베이스 접근이 요구되는 모듈을 만든다면 여러분 코드를 간단하게 하고 같은 데이터베이스 접근을 쉽게 하기 위해 데이터베이스 클래스를 활용하실 수 있습니다.

  • Include the db package: Kurogo::includePackage(‘db’);
  • Instantiate a db object with arguments, the arguments should be an associative array that contains the appropriate configuration parameters. If the argument is blank then it will use the default settings found in the database section of site.ini
  • Use the query($sql, $arguments) method to execute a query. The arguments array is sent as prepared statement bound parameters. In order to prevent SQL injection attacks you should utilize bound parameters rather than including values in the SQL statement itself
  • The query method will return a PDOStatement object. You can use the fetch method to return row data.
  • The lastInsertID method of the db object will return the ID of the last inserted row.
<?php

Kurogo::includePackage('db');

class MyClass
{
    function myMethod() {

        $db = new db();

        $sql = "SELECT * FROM sometable where somefield=? and someotherfield=?";
        $result = $db->query($sql, array('value1','value2'));
        while ($row = $result->fetch()) {
            // do something
        }
    }
}



반응형

Phonegap Keyword Index

2012. 5. 26. 23:36 | Posted by 솔웅


반응형

지금 제가 참여하는 프로젝트는 Kurogo Middle ware 를 주로 사용하고 있습니다.

그래서 Kurogo에 대해 열심히 배우고 있죠.

그리고 Kurogo는 오픈소스에다가 PHP 로 만들어진 거라서 계속 PHP 소스를 들여다 보면서 수정을 하고 있구요.

모바일 웹 이기 때문에 자바스크립트아 HTML5, CSS 도 사용하고 있습니다.


지금 개발 환경도 여러가지 새로 배울것들이 많은데 PM이 다음 프로젝트는 PhoneGap을 사용할 거라고 미리 좀 공부해 두라고 하네요.


그래서 늘 하듯이 새로 Phonegap 디렉토리를 만들고 앞으로 Phonegap 공식 사이트에서 제공하는 튜토리얼을 번역하는 일을 할 예정입니다.


예전에 시간이 있을 때는 그 튜토리얼을 근거로 이런 저런 예제도 만들고 하면서 글을 썼었는데 요즘은 계속 일하면서 글을 올리는 거라서 튜토리얼을 번역하기 바쁩니다.


그래도 그냥 눈으로 읽는 것보다는 이렇게 번역하고 정리하고 블로그에 포스팅 하는게 훨씬 더 많이 이해도 되고 다음에 또 찾아볼 때 많이 도움이 되더라구요.


오늘은 시작하는 의미에서 Phonegap 홈페이지에 있는 튜토리얼 중 Phonegap Keyword Index를 복사해 놓겠습니다.


A

B

C

D

E

F

G

L

M

N

O

P

R

S

V


다음엔 각 OS별 설치 요령들을 번역할 생각입니다.

반응형