삽질 중: 10월 2014

2014년 10월 29일 수요일

Android 5.0 Lollipop 롤리팝 관련 이슈 사항들

구글러인 양찬석님께서 아래에서 잘 정리하였음.

개발자를 위한 안드로이드 5.0 롤리팝의 중요 변경사항 정리
: http://googledevkr.blogspot.kr/2014/10/android-50-api21-changes.html

위 내용과 중복될 수 있으나 오늘 GDG 모임에서 강조된 내용은

- 롤리팝 OTA 11월 3일 부터 Nexus 시리즈에 순차적으로 적용됨.

- 킷켓에서의 ART와 Lollipop의 ART는 차이가 있으므로 L preview 버전으로 테스트를 해봐 야 한다.
: 특히나 게임, NDK, 보안 모듈 사용한 앱들은 대부분 이슈가 생길 수 있음.

- Custom permission 이슈
: 여러 앱들에서 동일한 이름의 custom permission을 사용한다면 설치 순서상 뒷쪽 앱에서 선언된 permission으로 오버라이드가 된다.
: 자세한 내용은 marojun님의 포스팅을 참고
https://medium.com/marojuns-android/android-5-0-%EB%A1%A4%EB%A6%AC%ED%8C%9D%EC%97%90%EC%84%9C%EC%9D%98-%EC%9D%B4%EC%8A%88-%EB%B0%8F-%ED%95%B4%EA%B2%B0-ffc85b8a68e3

- Service binding시 암시적 intent를 사용하면 exception이 발생되므로 명시적 intent를 사용하여 binding하라.

새롭게 출시되는 Nexus 6, Nexus 9에 대한 고려사항은 아래 링크를 참고

Getting Your Apps Ready for Nexus 6 and Nexus 9
: http://android-developers.blogspot.kr/2014/10/getting-your-apps-ready-for-nexus-6-and.html

. Nexus 6 의 해상도 처리를 위해서는 XXXHDPI 해상도 사용
. Nexus 9 의 화면비는 4:3 이므로 게임 같은 경우 해상도 고려 필요

2014년 10월 22일 수요일

폴리글랏 프로그래밍(POLYGLOT PROGRAMMING)

폴리글랏 프로그래밍 : 새로운 자바 언어를 기다리는 히치하이커를 위한 안내서
임백준 저 | 한빛미디어

http://www.yes24.com/24/Goods/12204890?Acode=101

처음엔 책의 부제 "새로운 자바 언어를 기다리는 히치하이커를 위한 안내서"에서 보다시피
자바 얘기만 나오는 책이라 전혀 자바 쟁이가 아닌 나에겐 별 의미 없는 책이라고 생각했었음.

하지만 저자가 임백준님이시고 기존 책들도 재미있게 봤던 지라 서점에서 읽다가 구매하게 되었고 그리고 스칼라에 대한 얘기도 나와서 무엇인지 궁금하기도 했었다.

읽다 보니 폴리글랏 프로그래밍(polyglot programming)의 개념과 시작점, 자바 언어의 역사, 이를 기반으로 한 새로운 언어들의 탄생, 언어별 비교 및 고찰, 앞으로 발전될 방향에 대해서 말하고 있어 한번에 쭉 읽어 버렸었다.
아마도 책이 읽기 쉬운 역사의 흐름이나 간략한 예시를 통한 언어 소개로 구성이 되어 있고 책의 챕터도 1. 자바, 2. C#, 3. 스칼라 딱 세개인것도 이유이지 않을까 생각한다.

읽다가 인상 깊었던 부분은 기존 언어들이 새로운 feature를 추가해가며 좀더 편한 언어 사용을 돕는 모습에서도 역시 언어라는 것은 언제나 변화해 가야 하는 것이고 개발 용이성? 측면도 무시 못할 것이구나 라는 점이었다.

또한 책을 읽으면서 공감이 되는게 프로그래머라면 기본으로 자료구조와 알고리즘의 이해를 바탕으로 여러 언어에 능숙해야 하겠다라는 생각과 또한 여러 언어를 배우고 사용하다보면 자연스럽게 개발하기 편한 언어를 바라보게 된다는 점이다.

실제 컴파일러 기반 언어를 주로 사용하여 실제 스크립트언어를 쉽게 봤다가 실제 개발 용이성과 퍼포먼스 측면에서 깜놀했던 적이 있어 지금은 생각을 많이 바꾸게 되었고 함께 되도록이면 스크립트 언어를 더 배우고 깊게 알고자 하고 있기도 하다.

.... 공부할 것은 언제나 산더미구나...

2014년 10월 21일 화요일

New native API in Tizen 2.3 Beta

Tizen 2.3 Beta 부터
기존 Native Framework layer에서 제공하던 OSP API(C++)들이 제거되고
Core layer의 C API들을 바로 사용하게 되었음. (하단 그림 참고)

https://www.mail-archive.com/general@lists.tizen.org/msg02334.html

기존 OSP API 쓰던 사람들은 멘붕일듯....

Tizen architecture

2014년 10월 20일 월요일

Android WebView

Android WebView 관련 궁금한 것들 찾아봄.

[General]

API Reference
: http://developer.android.com/reference/android/webkit/WebView.html

Tutorial with Android Studio
: https://developer.chrome.com/multidevice/webview/gettingstarted

Building Web Apps in WebView
: http://developer.android.com/guide/webapps/webview.html

Pixel-Perfect UI in the WebView
: https://developer.chrome.com/multidevice/webview/pixelperfect

WebView를 이용한 App 개발 tutorial
by 제트스윙(http://www.zetswing.com)
: http://www.zetswing.com/bbs/board.php?bo_table=java_04&wr_id=2
http://www.zetswing.com/bbs/board.php?bo_table=java_04&wr_id=3
> Android 버전별 file chooser 동작 이슈 해결 방법 설명
http://www.zetswing.com/bbs/board.php?bo_table=java_04&wr_id=5

[Chrome based WebView (Android 4.4.3 later)]

아래 링크에서 언급된 것 처럼 Android 4.4.3(KitKat)에서 부터 Chrome 기반 WebView가 사용되고 있다고 함.
. Android 4.4.3에서는 Chrome 30.0.0.0 기반 WebView가 사용되고 있음.
. Android L Developer Preview에서는 36.0.0.0 기반이 사용되고 있다고 함.
: https://developer.chrome.com/multidevice/webview/overview
: Android 5.0 LOLLIPOP에서는 37.0.0.0 기반이며 System WebView를 제공하여 Google Play Store를 통해 업데이트 되어 파편화 문제가 사라짐.
> http://youtu.be/HHXwsgw7M8s?t=3m13s

WebView User Agent
: https://developer.chrome.com/multidevice/user-agent#webview_user_agent

Old WebView UA:Mozilla/5.0 (Linux; U; Android 4.1.1; en-gb; Build/KLP)AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30

New WebView UA:Mozilla/5.0 (Linux; Android 4.4; Nexus 5 Build/_BuildID_)AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0Mobile Safari/537.36

Supporting Chrome(for Android)'s feature

	WebView v30	WebView v33	WebView v36
WebGL	x	x	✓
WebRTC	x	x	✓
WebAudio	x	x	✓
Fullscreen API	x	x	x
Form validation	x	✓	✓
Filesystem API	x	x	x
File input type	x	x	x
<datalist>	x	✓	✓

잘모르겠고 Android 5.0 LOLLIPOP의 WebView에서는 WebRTC가 된다는 말인가?
WebRTC의 자세한것은 => http://www.html5rocks.com/ko/tutorials/webrtc/basics/

Supporting hardware sensor APIs on new WebView

	WebView v30	WebView v33
Geolocation API (requires `android.permission.ACCESS_COARSE_LOCATION`and/or `android.permission.ACCESS_FINE_LOCATION`permissions)	✓	✓
Device Orientation API	x	x
Media Capture and Streams	x	x
Vibration API (requires `android.permission.VIBRATE`permission)	x	✓

LOLLIPOP에서는 Vibration API가 지원된다는 얘기 이고 vibrations API는 아래 참고
=> https://developer.mozilla.org/ko/docs/Web/Guide/API/Vibration/Vibration

[Interface between JavaScript and Native]

아래 링크 참조
http://developer.android.com/guide/webapps/webview.html#UsingJavaScript

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

1. WebView를 생성
2. WebView의 WebSettings의 setJavaScriptEnalbed(true) 설정

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

3. JavaScript interface class 구현 및 설정

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

4. Javascript에서 Native 호출

addJavascriptInterface를 좀 더 들여야 보면
http://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object, java.lang.String)

- Interface class의 method들 중
. JELLY_BEAN_MR1 이상 : public method들과 @JavascriptInterface 명시된 것들만 호출
. JELLY_BEAN 이하 : 모든 public method들이 호출 된다.
=> WebView를 사용한 app이 의도치 않은 JELLY_BEAN 이하 버전에서 동작할 때 webview interface의 모든 methods들이 호출 될 수 있으므로 보안상 신중하게 interface를 구현할 필요가 있음.

- JavaScript는 WebView의 private, background thread와 연동되므로 thread safety를 염두 해야 한다고 한다.. 실제예는 안 찾았음.
- Android 5.0 LOLLIPOP API level의 application의 WebView에서는 injected된 Java object의 methods들이 JavaScript에서 확인 가능하다고 한다.. 안해봄..
- Interface class의 method들은 primitve를 사용하는게 기본이겠지만 어떤 사람들은 JSONObject, JSONArray도 사용 가능하다고 한다.. 안되면 그냥 stringify해서 넘기면 될듯
=> http://stackoverflow.com/questions/2250917/passing-a-javascript-object-using-addjavascriptinterface-on-android
Java object를 넘겼다는 사람도 있는데 봐도 이해가 안되고 왠지 그대로 하다가 고생할것 같다.. => http://stackoverflow.com/questions/21173888/how-to-pass-non-primitive-object-from-java-to-js-by-android-addjavascriptinterfa

[Android 버전별 WebView 이슈들]

Migrating to WebView in Android 4.4
: https://developer.android.com/guide/webapps/migrating.html

kitkat(4.4)에서 맞닥뜨린 이슈 및 해결
by marojun
: https://medium.com/marojuns-android/kitkat-4-4-%EC%97%90%EC%84%9C-%EB%A7%9E%EB%8B%A5%EB%9C%A8%EB%A6%B0-%EC%9D%B4%EC%8A%88-%EB%B0%8F-%ED%95%B4%EA%B2%B0-1ecb94c24694

버전별 WebKit 버전
by Padgom
: http://padgom.tistory.com/entry/Android-%EB%B2%84%EC%A0%84%EB%B3%84-Webkit-%EB%B2%84%EC%A0%84

@JavascriptInterface
Caution: If you've set your targetSdkVersion to 17 or higher, you must add the @JavascriptInterface annotationto any method that you want available to your JavaScript (the method must also be public). If you do not provide the annotation, the method is not accessible by your web page when running on Android 4.2 or higher.

[Remote Debugging on Android with Chrome]
: https://developer.chrome.com/devtools/docs/remote-debugging

[기타]

찾다 보니 Mozilla GeckoView도 있구나..

HTML5의 충실한 지원으로, Android WebView를 대체하는 View로 충분한 Mozilla GeckoView 사용하기.. by 코딩한줄에 12시간
: http://sjava.net/?p=471

WebView attack 관련 논문
선 링크 후 분석...
: http://www.cis.syr.edu/~wedu/Research/paper/webview_acsac2011.pdf

2014년 10월 15일 수요일

[links] Growth Hacking, 그로스 해킹

Growth Hacking 용어가 여기저기서 사용되기에 한번 찾아 본 link들 모음.

7월에 있었던 벤 레비의 강연 영상과 요약 기사

스타트업, 앞 길이 막막하다면 그로스해킹을 하라! – 벤 레비(Ben Levy) 강연
posted by 정 새롬
: http://besuccess.com/2014/07/ben-levy/

그로스해킹(Growth Hacking)이란?
2010년 션 엘리스(Sean Ellis)의 ‘Find your growth hacker for your startup’이라는 블로그에서 처음 사용된 용어로 제품 또는 서비스의 중요한 지표를 지속적으로 파악하고 분석하여 사용자의 흐름을 최적화하는 동시에 많은 유저를 확보하는 전략적 마케팅 기법을 뜻한다.

...

(TODO) 아래 tool들은 한번 찾아 봐야 겠음.

웹사이트 분석 - 구글 애널리틱스(Google Analytics), 모즈(MOZ)
퍼넬 측정 - 키스메트릭스(KissMetrics), 믹스판넬(MixPanel)
사용자 설문조사 - 서베이몽키(Survey Monkey), 퀄라루(qualaroo)
A/B 테스트 - 옵피미즐리(opimizely), 언바운스(Unbounce)

그외 기본적인 개념이 정리되어 있으니 위 링크를 참조해서 보는게 좋겠음.

[PT] Growth Hacking by Mattan Griffel , Founder and CEO at One Month
: http://www.slideshare.net/mattangriffel/growth-hacking
Social Media Week에서 발표된 자료 같은데 여러 기업의 예를 보여주고 있어 다소 분량이 많고 자세하다.
PT 말미에 growhack.com에서 Growth Hacking case studies 문서(WSJ, Twitter, Living Social)를 제공하고 있는데 그렇게 영양가가 있는 자료는 아니지만 이메일만 등록하면 받을 수 있음.

'Growth Hacking(그로스 해킹)'이란?, 적용 사례 by Pristones
: http://sudo.pristones.com/2014/03/31/growth-hacking-1/

: http://www.slideshare.net/pristones/growth-hacking-34983761

첫번째 링크는 개념을 간략히 정리한 것이고 두번째 PT는 실제 사례를 포함하여 설명하고 있음.

관련 서적
: http://www.amazon.com/Growth-Hacker-Marketing-Primer-Advertising-ebook/dp/B00EWPMUKM/ref=tmm_kin_swatch_0?_encoding=UTF8&sr=1-1&qid=1413268841

예전에 국내 앱 개발사의 사례가 있었는데.. 못찾겠네..

2014년 10월 13일 월요일

html5 canvas를 blob data로 변환하여 POST upload하는 방법

mobile web상에서 display하는 image를 업로드 하는 방법을 찾아봄.

일반적으로는 form data를 이용하여 선택된 image 파일을 업로드 하지만
form data 없이 load된 image나 Canvas를 업로드 하는 방법을 찾고자 하였음.

참고로 전송하려는 image(canvas내 image라도)가 다른 site에서 loading 된 것이라면
JavaScript의 동일 도메인 참조정책으로 인해 아래 방법을 사용할 수 없다.
: http://stackoverflow.com/questions/2390232/why-does-canvas-todataurl-throw-a-security-exception

up vote51down voteaccepted

In the specs it says:

Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must raise a SECURITY_ERR exception.

If the image is coming from another server I don't think you can use toDataURL()

answered Mar 5 '10 at 22:24

Bob
4,86332137

Same-Origin Policy(동일 도메인 정책)
: http://charlie0301.blogspot.kr/2013/12/jquery-ajax-same-origin-policy-jsonp.html

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

Canvas를 image/jpeg 형식의 blog data로 변환한 뒤 XMLHttpRequest를 사용하여 POST upload 하는 방법
: http://stackoverflow.com/questions/18253378/javascript-blob-upload-with-formdata

function uploadCanvasData()
{
    var canvas = $('#ImageDisplay').get(0);
    var dataUrl = canvas.toDataURL("image/jpeg");
    var blob = dataURItoBlob(dataUrl);
    var formData = new FormData();
    formData.append("file", blob);

    var request = new XMLHttpRequest();
    request.onload = completeRequest;

    request.open("POST", "IdentifyFood");
    request.send(formData);
}

function dataURItoBlob(dataURI)
{
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++)
    {
        ia[i] = byteString.charCodeAt(i);
    }

    var bb = new Blob([ab], { "type": mimeString });
    return bb;
}

answered Aug 15 '13 at 22:54

Max Ehrlich
639420

먼저 Canvas.toDataURL()을 통해서 DataURI를 뽑아낸다.

Syntax

canvas.toDataURL(type, encoderOptions);

: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement.toDataURL

toDataURL() method는 사용자가 지정한 encoderOptions(default는 PNG)의 MIME을 가지는 96dpi resolution의 image dataURI를 제공한다.
(canvas의 height, width중 하나라도 0이면 "data:,"를 리턴한다고 함.)

제공되는 DataURI의 형식은 다음과 같다.

Syntax

The data URIs have the following syntax:

data:[<mediatype>][;base64],<data>

: https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs

RFC 2397에 따라 해당 data를 document에 첨부할 수 있도록 위의 syntax로 표현하는 것이고 base64 encoding 방법이라던지 사용되는 protocol은 위키피디아를 참고하면 될듯

그래서 제공된 DataURI를 가지고 dataURItoBlob()함수를 사용하여 실제 data부분(<data>)을 뽑아내고 blob data로 변환한뒤 formdata에 삽입하여 POST uploading을 하게 된다.

Canvas.toDataURL() 사용예
http://m.mkexdev.net/106
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/

MDN에서 binary data를 보내는 방법에 대해서 설명한 포스팅
: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Sending_and_Receiving_Binary_Data

dataURI를 blob으로 바꾸는 함수의 다른 버전이다.
: http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata