spectrum learns to dig

Fuse라는 툴을 twitter 에서 계속 광고를 하고 있고 나는 twitter가 안 망했으면 하는 1人이므로 눌러줬다. Sketch 하고 연동되고 Transition Animation 및 속도에 민감하다고 한다. html 같은 독자적 xml 구조를 사용하고 로직은 js로 돌아가는 구조. titanium 보고 있나? 매력적인 요소는 많다. 실 기기 동시 AutoReload 라던가 Layout, Transition 등에 목숨 건다던가 Sketch랑 Artboard 1:1 연동 등등. 다리가 후달거린다. 일단 설치하고 App을 만들어보자. 커맨드 라인으로 쓰는 법을 알기 위해 fuse 라고 쳤더니 어랍쇼? 이런게 바로 뜨네. 커맨드 라인은 지원하지만 Dashboard 도 됩니다라는 거냐. New 눌러보자. 이름을 정하고 만들었더니 Sublime 열기가 있다. Sublime 3 설치하고 다시 실행. 호오. 친절하네. 엔터엔터 설정하니 플러긴도 막 깔아줌. 친절친절. 프리뷰 띄워보자. 시뮬레이터랑 iOS/Android 실기기를 지원하나보다. 일단 Local먼저. 연결연결 로딩로딩. 간지간지! 아이폰 연결도 해보자. 이건 시간 좀 걸리네. Xcode를 띄워준다. 헤더 파일이 좀 많네. 프레임웍들은 거의 대부분 다 쓰는 듯.  바람직한 뜨리 샷 내친김에 안드로이드도 가자. 실기기 연결하고. fuse install android 하면 호로홀호롷로로~~ 5.0.1 설치한다 오오. 엔진이 C++로 되있으니 NDK도 깔아야겠지. 끝. 안드로이드는 프리뷰를 처음 할때 좀 느리다. 지겨워도 끊지 말고 기다리면 뜬다. 기본 예제의 MainView.ux (확장자가 무려 ux - 0-!!!) 를 보니 Panel 안에 Page들이 세 개 있고 그 안에 있는 Text들을 좀 수정해보았다...

1. 우상단 컨트롤들 왼쪽부터  Show the Standard View - Cmd + Enter Show the Assistant View - Cmd + Option + Enter Show the Version Editor - Cmd + Option + Shift + Enter 왼쪽부터 Hide or show the Navigation - Cmd + 0   Hide or show the Debug Area - Cmd + Shift + Y Hide or show the Utilities - Cmd + Alt + 0   2. Storyboard Hide or show Document Online - 바인딩 없음(Cmd + 9 로 설정)  3. 우측 상단 바로 아래 Inspectors 왼쪽부터 Show the File inspector - Cmd + Shift + 1 Show Quick Help inspector - Cmd + Shift + 2 Show the Identity inspector - Cmd + Shift + 3 Show the Attributes inspector - Cmd + Shift + 4 Show the Size inspector - Cmd + Shift + 5 Show the Connections inspector - Cmd + Shift + 6 4. 우측 하단 Library 왼쪽부터 Show the File Template Library - Cmd + Ctrl + Option + 1 Show the Code Snippet Lib...

오래간만에 의뢰로 iOS app을 만들고 있다. 정말 많이 편해졌다. 놀랍다. swift만해도 벌써 몇번이나 업데이트 하고; 일단 pod 파일. cocoapod은 정말 너무 좋다. 먼저 프로젝트 생성 하고 Meteor DDP를 쓰기 위해 touch Podfile 하고 platform :ios, '8.0' use_frameworks! pod 'Meteor' 이렇게 쓰면 끝 pod install 한 뒤 *. xcworkspace 를 열면 끝. * 주의: install중 중간에 정지하면 기존 pod 가 망가질 수 있음 사용은 AppDelegate.swift를 열고 전역 변수로  let Meteor = METCoreDataDDPClient (serverURL: NSURL (string: "ws://www.YOURMETEORAPP.com/websocket" )!) 지정하고      func application(application: UIApplication , didFinishLaunchingWithOptions launchOptions: [ NSObject : AnyObject ]?) -> Bool {         Meteor . connect ()                  return true     } 이런 식으로 Application 기동 시 Meteor 접속. * swiftDDP 를 내장한 RealmMeteor가 더 좋아보인다. Storyboard 의 segue (세그웨이라고 읽음) 상당히 좋았다. 일단 첨에 진입점이 되는 Controller 에 Show Attributes Inspector를 열고  Is Initial View C...

HTML5 + js 를 UI로 사용하는 앱을 만들때 제일 당혹스러운 점은 크로스플랫폼으로 사용하기 위해 같은 기준인 UI 렌더러를 쓰는 목적이었는데도 불구하고 파편화가 매우 심각하다는 점이다. 해상도 같은 건 논외로 치고 공통으로 사용하는 WebView 시스템 컴포넌트가 똑같은 " Modern Browser "가 아니라는 점이다. 심지어 같은 OS라고 해도 버전별로 다르다는 건 문제가 크다. 그래서 canvas만 가지고 떼어내서 만들까 어쩔까하고 고민하면서 검색 중  https://crosswalk-project.org/  프로젝트를 발견. webRTC( https://github.com/alongubkin/phonertc )나 webAudio( https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html )같은 것들도 있지만 가장 큰 관심사는 iOS에서 safari가 아니라 chrome 일지가 첫번째. 첫번째 시도. cordova platform add ios cordova run ios Safari에서 확인. 기존 mobile safari임. cordova add cordova plugin add cordova-plugin-crosswalk-webview 소스 확인. 역시 WKWebView는 없음. 없다고 했는데 확인사살. 그러면  https://crosswalk-project.org/documentation/ios/quick_start_guide.html 이렇게 소스코드를 아예 받아서 해볼 수 밖에 없다. git clone https://github.com/crossw...

드디어 Meteor가 1.0을 찍었다. 감동 ;ㅅ;)/ Todo가 예쁘게 바뀐 건 봤고 새로운 예제 앱이 생겼다. 그 이름은 바로 LocalMarket. 동영상을 찍어서 보여주고 싶지만 귀찮기도 하고 어짜피 meteor create --example localmarket 치면 다 알테니까. 이전까지 실험적이었던 Mobile 정확히 말해 Cordova 와의 통합이 아주 멋지게 이루어졌다. 실행 옵션이 좀 많아졌는데 meteor run : 그냥 Meteor 웹서버만 기동. 이하 아래의 것들도 기본적으로 Meteor 서버를 실행한다. meteor run android meteor run ios : 안드로이드, iOS 시뮬레이션을 실행한다. 안드로이드의 경우 Hardware Accelerated Execution Manager (Intel HAXM) 을 설치한다. meteor run android-device meteor run ios-device : 실제 iOS/Android 장비에서 실행한다. 실행에 대해선 어짜피 해보면 되니까 여기쯤 해두고 Web과 Mobile(android/iOS)간의 차이를 어떻게 극복했는지가 궁금한 거니까 디렉토리 구조를 살펴보기로 하자. 먼저 디렉토리 구조를 보자. client 는 사용자가 실제로 보는 html+css+js+기타등등이고 server 는 backend 쪽인 것까지는 기존과 동일하다. lib는 client/server 양쪽에서 실행되는 Collection, Router등등의 코드가 있다. client 쪽에선 lib 아래에 jquery.touchwipe.js 를 쓴게 보인다. 그리고 head.html을 따로 분리하여 공통 헤더를 만들어 놓았고 init.js 에선 사용자가 앱/웹을 실행시 Geolocation.currentLocation(); 를 사용하여 위치정보를 수집할 수 있도록 해놓았다. package 는 atmosphere가 아닌 프로젝트별 custom...

Arduino를 보고 있다. Bluetooth 모듈하고 연결은 tx,rx를 서로 교차연결하고 전원만 받아주면 만사 오케이더라. 이렇게 해서 이렇게 하긴 했는데 테스트 하기 위해선 nc 같은 터미널로 하면 쓸 수 없을까 싶었는데 그냥 screen 명령을 쓰면 되더라. Bluetooth Pairing 후 $ ls /dev/tty.* /dev/tty.Bluetooth-Incoming-Port /dev/tty.HC-06-DevB /dev/tty.Bluetooth-Modem 해보니 테스트 용으로 쓰고 있는 HC-06-DevB가 보이더라. $ screen /dev/tty.HC-06-DevB  으로 접근하면 시리얼 터미널로 돌입한다. 에코가 있으면 에코를 쏠테고 아니면 그냥 받아준다. 뒤에 전송속도를 써서 $ screen /dev/tty.HC-06-DevB 9600 이렇게 접근도 가능하다. 커맨드를 치고 enter를 치면 텍스트를 전달한다. 테스트를 마치고 나갈땐 ctrl+a, ctrl+\ 를 입력하면  Really quit and kill all your windows [y/n] 하고 물어본다. y를 눌러서 나가면 된다.

source code 안에서 [Embed]를 사용하는 방법도 있지만 리소스를 실시간으로 로딩하여 초기 기동시간을 앞당기고 싶어서 Loader를 사용하여 swf를 실시간 로딩하였으나 데스크탑에뮬/iOS/Android가 각각 다르게 작동.     private var stageLoader:Loader; ..     stageLoader = new Loader();     stageLoader.load(new URLRequest("NoiseInfoSession01.swf")); 이런식으로 로드를 하려고 했더니 Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found. 오류 나신다. Project structure 에서 source를 추가했다. 기본은 src 폴더만 잡혀있는데 오른쪽 tree에서 loader에서 부를 swf가 있는 경로인 flash를 찍고 상단에 그 상단에 Sources 라고 써있는 부분을 클릭하면 Source Folders에 추가된다. 하지만 이게 전부가 아니다. 이 상태로는 장치에서 돌렸을때 역시 누락이 발생해서 URL오류가 난다. URL 경로가 잘못되었나 싶어서 봤더니 아니다. 아예 패키징할때 빠지는 현상이다. Android 와 iOS 탭 각각에 똑같이 추가할 파일들을 Path to file or folder 목록에 넣어주자. iPhone 5 대응용 Default-568h@2x.png 스플래시 파일도 동일한 요령으로 추가하면 된다. 보통 gitignore 할때 *.iml을 빼주곤 하는데 as3를 할땐 그래선 안된다. 위의 설정이 iml 파일안에 들어가므로 반드시 git 목록에 추가해놓자. 요약 1. 외부 파일은 Modules에서 Android/iOS 각각 추가 2. 데스크탑 에뮬을 위해 해당 폴더를 Sources에도 추가 3. i...

Google Chrome 이나 Firefox, Safari 그리고 아쉽지만 그런대로 Internet Explorer까지 모두 개발자 도구를 지원하여 DOM 구조를 보거나 요청별 응답시간을 추적하거나 CSS를 살펴보거나 할 수 있다. 이건 너무 편하고 당연해서 우리가 모바일 환경(Android/iOS)에서 같은 환경을 사용할 수 없는게 모바일 웹 개발의 어려운 점이기도 한데. 역시 찾아보니 방법이 있다. 먼저 iOS 같은 경우는 설정 > Safari > 고급 > 웹속성 을 켜주면 iOS장비와 Safari가 깔린 컴퓨터를 서로 연결하여 개발자용 메뉴 > (해당 기기 이름) 을 통해 접근가능하다. 물론 컴퓨터용 Safari에서 미리 환경>고급>메뉴 막대에서 개발자용 메뉴 보기 를 체크해줘야한다. 그리고 Android의 경우 Chrome for Android 가 있다면 좀 더 좋은 환경을 제공한다. https://developers.google.com/chrome/mobile/docs/debugging  내용 참조. USB 연결 후 adb devices 에서 장비 연결을 확인하고 Chrome for Anroid 에서 Settings > Advanced > Developer tools 로 들어가 Enable USB Web debugging 를 체크 그다음 adb forward tcp:9222 localabstract:chrome_devtools_remote 를 실행해서 9222 포트를 연결하고 크롬에서 localhost:9222를 띄워서 디버깅할 창을 선택하면 된다. https://developers.google.com/chrome-developer-tools/docs/timeline 도 같이 쓸 수 있따. 센스가 있는 분들이라면 iOS건 Android건 에뮬/시뮬을 통해서도 할 수 있지 않을까라고 생각할 수도 있을텐데 맞다. iOS Simulator나 AndroVM...

최근 업데이트한 Garageband를 만지작거리다가 백업을 위해 기존곡을 export 하고 보니 package 안에 exs 파일을 보고 눈이 번쩍. 써본 사람들은 잘 알겠지만 Garageband for iOS 제품의 한계는 Preset 이외의 음색을 쓸 수 없다는 점인데 exs 가 내가 알고 있는 Logic 의 멀티샘플 포멧인 exs라면 그 문제를 해결할 수 있을 거라는 생각이 들어 급흥분상태가 됨. http://www.memi.com/echochamber/exs24/exs242.html 에 무료 exs24 용 파일을 발견. sp1200_kit1.ZIP 이란 파일을 풀었더니 wav 와 exs 파일이 나왔다. iPad 혹은 iPhone 에서 아무 노래 파일을 생성 후 PC로 iTunes 익스포트( http://support.apple.com/kb/HT4692 참조)하자. 그리고 *.band 파일의 패키지 파일(아마 윈도우즈에선 그냥 폴더로 나올 듯)을 열고 Media>Sampler 디렉토리 아래의 Sampler Instruments 와 Sampler Files 아래에 각각 exs 파일과 wav(혹은 aif)를 복사했다. 위 그림에서 보듯 exs sample을 작업할 band 파일에 밀어넣고 다시 iTunes import 한뒤 Garageband 에서 + 를 눌러 itunes 의 곡을 가져오자. 샘플러 트랙을 만들면 SP1200 Kit 이 음색목록에 새로 생겼다. 건반을 눌러보니 한음만 나는 바보 샘플러가 아니라 키별로 잘 매핑이 되고 강약도 잘 먹는 샘플임을 확인할 수 있었다. 이번 업데이트로 Apple loop, mp3 를 외부에서 import 할 수 있고 노트 에디터 기능이 구현되어 본격적인 시퀀싱을 할 수 있게 되었으며 아직 Audio는 지원하지 않지만 드디어 클립 합치기가 된다. 역시 $4.99가 아깝지 않은 앱이다.