[Android] Mac-Parallels 에 Android 설치 및 개발환경 셋팅

안드로이드 에뮬레이터가 너무 느리고 못써먹겠다는 느낌이 들어서
가상PC에 Android 를 설치하면 어떨까 하고 생각을 했더니 역시나..
개발선배님들께서 이미 해 놓은게 있으셨다.

안드로이드 에뮬레이터를 VirtualBox로 대체하기 라는 글을 보면서 작업을 했으며
내가 작업한 것을 여기에 올리려 한다.
320x480 해상도(Display resolution)의 portrait 로 변환하고 싶어서 이것저것 알아보고 만져봤지만 결국 실패하여 그냥 원상복구를 했다.
VirtualBox 에서 해상도 변환하는 방법은 많이 나와있지만 Parallels 에서의 해상도 변환은 알 수 없었다.

=====================================================
PS. 2012.08.07 추가
개발 시 해상도가 맞아야 하는 부분이 있어서 결국 VirtualBox로 다시 설치하게 되었다.
Mac 에서의 VirtualBox 해상도 설정 부분을 포스팅 하였다.
링크
=====================================================


설치환경
OS: OSX mountain lion
Virtual PC: Parallels Desktop 7 for Mac




Android-x86 이라는 사이트에서 android-x86-4.2-20130228.iso 파일을 다운받아 설치했다.

설치과정

개발환경 셋팅

리눅스의 특징!!
Alt + F1~7 를 누르게되면 해당하는 tty 가 나오게 된다.

Alt + F7 은 X윈도우 -> 안드로이드 화면이 나오게 되며
Alt + F1~F6 은 일반 terminal 이 나오게 된다.




아래는 Alt + F1 을 눌렀을때의 화면

ipconfig 가 아닌 netcfg 라는 명령어를 이용한다니..
찾아보니 debian kernel 을 이용한다는 것을 알 수 있었다.

IP를 알았으니 ADB를 연결하고 Eclipse 를 연결했다.

===========================
2015.04.09 추가
Genymotion 이라는 안드로이드 에뮬레이터 라는걸 알게 되었는데 너무나도 속도가 빠르고 괜찮아서 더 이상 가상PC에 안드로이드를 설치해서 사용 할 필요가 없어졌다.
설치도 간편하고 속도또한 너무나도 빨라서 너무나도 마음에 든다.

Genymotion: https://www.genymotion.com/

Genymotion 설치 가이드: http://www.slideshare.net/arload/00-genymotion
Eclipse 연동: http://byneonkid.tistory.com/40
IntelliJ(Android Studio) 연동: http://webnautes.tistory.com/461

[Javascript] deviceorientation - Move DIV on tilt on the Mobile phone (휴대폰을 기울였을 때 div 이동시키기)

최근 나오는 스마트폰의 브라우저에서 지원하는
deviceorientation 를 가지고 이동하는 DIV를 만들어 봤다.



핸드폰을 기울여 보세요.
(do your Mobile phone tilt)

Source

<div id="wrapperDiv">
<div id="moveDiv">
</div>
</div>

<style type="text/css">
#wrapperDiv {
 border: solid 1px red;
 position: relative;
 width: 100%; height: 20px;
 margin: 0px;
}

#moveDiv {
 background: blue;
 position: absolute;
 width: 20px; height: 20px;
 transition: 500ms;
 -webkit-transition: 500ms;
}
</style>

<script type="text/javascript">
function tiltHandler(e) {

 
 /** 기울기(tilt) 계산 **/
 var tiltX = 0;
 var tiltY = 0;
 var current = e.accelerationIncludingGravity;
 var facingUp = -1;
 if (current.z > 0) {
  facingUp = +1;
 }
 tiltX = Math.round((current.x / 9.81) * -90)* ( Math.PI/ 180);
 tiltY = Math.round((current.y / 9.81) * 90 * facingUp)* ( Math.PI/ 180);
 if (window.navigator.userAgent.match(/(iPad|iPhone|iPod)/i)) {
  tiltX = tiltX * -1.0;
 }
 /**********************/ 
    
 var x = 0 ;
 var orientation = window.orientation == undefined ? 0 : window.orientation;
 switch(orientation) {
  case 0: x = tiltX; break;
  case 90: x = tiltY; break;
  case 180: x = -tiltX; break;
  case -90:
  case 270: x = -tiltY; break;
  default: x = tiltX; break;
 }

    if ( x > 0.4) {
     moveDiv.style.left = maxWidth - 20 + 'px';
    }
    
    if ( x < -0.4) {
     moveDiv.style.left = '0px';
    }
}

var maxWidth = 0;
var wrapperDiv = document.getElementById('wrapperDiv');
var moveDiv = document.getElementById('moveDiv');

window.addEventListener('load', function(){
 
 if (typeof window.addEventListener != "undefined") {
  window.addEventListener('devicemotion', tiltHandler);
 }
 
 wrapperDiv.parentElement.style.margin = '0px';
 wrapperDiv.style.width = wrapperDiv.parentElement.offsetWidth + 'px';
 
 maxWidth = wrapperDiv.parentElement.offsetWidth;
 
});

</script>

[CSS] Demo - transform(rotate) from transformOrigin

PS.
Not support IE9


rotate: deg (0deg)
originX: px       originY: px

Source

rotate: <input onchange="changeRotate(this);" type="range" maxlength="3" size="3" value="0" min="0" max="360"/>deg
<br/>
originX: <input onchange="changeOriginX(this);" type="range" maxLength="3" size="3" value="100" min="0" max="200"/>px
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
originY: <input onchange="changeOriginY(this);" type="range" maxLength="2" size="2" value="25" min="0" max="50"/>px

<br/>
<div id="wrapperDiv">
<div id="rotateDiv" style="position:relative; width:200px; height:50px; border:1px solid black; background-color:aqua;">
<div id="originDiv" style="position:absolute; width:1px; height:1px; left:100px; top:25px; border:2px solid red;"></div>
</div>
</div>


<script type="text/javascript">
var rotateValue = 0, originX = 0, originY = 0;

var rotateDiv = document.getElementById('rotateDiv');
var originDiv = document.getElementById('originDiv');

function changeRotate(rotate) {
 if (rotateValue == rotate.value) {
  return false;
 }
 rotate.value = rotateValue = rotate.value == '' ? 0 : parseInt(rotate.value);
 
 rotateDiv.style.transform = 'rotate('+rotate.value+'deg)';
 rotateDiv.style.MozTransform = 'rotate('+rotate.value+'deg)';
 rotateDiv.style.webkitTransform = 'rotate('+rotate.value+'deg)';
}

function changeOriginX(x) {
 if (originX == x.value) {
  return false;
 } else if (x.value == '' || x.value < 0 || x.value > 200) {
  x.value = originX;
  return false;
 }
 x.value = originX = parseInt(x.value);
 originDiv.style.left = x.value + 'px';
 setOrigin();
}

function changeOriginY(y) {
 if (originY == y.value) {
  return false;
 } else if (y.value == '' || y.value < 0 || y.value > 50) {
  y.value = originY;
  return false;
 }
 y.value = originY = parseInt(y.value);
 originDiv.style.top = y.value + 'px';
 setOrigin();
}

function setOrigin() {
 rotateDiv.style.transformOrigin = originX + 'px ' + originY + 'px';
 rotateDiv.style.MozTransformOrigin = originX + 'px ' + originY + 'px';
 rotateDiv.style.webkitTransformOrigin = originX + 'px ' + originY + 'px';
}


</script>
<style type="text/css">
#wrapperDiv {
 width: 100%; height: 500px;
 border: 2px solid red;
}
#rotateDiv {
 left: 250px; top: 250px;
}
</style>

[CSS] Centering Percentage Width/Height Div Elements (크기가 동적인 Div 센터정렬)

크기가 동적인 Div 를 가로세로 정렬하는 방법이 css-tricks 에 소개되었습니다.

하지만 브라우저의 지원을 확인해 봐야 합니다.
IE8 이하까지 지원을 해야 한다고 하면 적용이 힘들어 지겠네요.
(Check support browser)
Link




소스는 아래와 같습니다. 'Edit in JSFiddle' 을 눌러서 확인해 보세요.
Click on 'Edit in JSFiddle' and Viewing to rendering HTML.





위와같은 방법 말고도 Div의 크기가 고정되어있다면
지난번 포스팅과 같이 작업이 가능합니다.
(View this post If Div size fixed)
Link



만일 모바일 웹을 한다면 다음과 같이 근사한 방법이 있다.
[CSS] Element(Div, Img etc..) 세로 가운데 정렬 시키기

[Javascript] Distance Between Two Points (두 좌표 사이의 거리 구하기)

피타고라스의 정리 (Pythagorean theorem)

Javascript

Points:  (sourceX, sourceY), (targetX, targetY)

var disX = sourceX - targetX;
var disY = sourceY - targetY;

distance = Math.sqrt(Math.abs(disX*disX) + Math.abs(disY*disY));

Example

Support only: Desktop webkit (chrome, safari)
PS. Not Support Mobile Browser (모바일 브라우저에서는 아래 예제가 실행이 되지 않습니다.)

source

<div id="groundDiv" style="position:relative; width:100%; height:500px; border:1px solid red;">
<div id="distanceValueDiv" style="position:absolute; border:1px solid black;"></div>
<div id="lineDiv" style="position:absolute; border:1px solid blue; display:none;"></div>
</div>

<script type="text/javascript">
window.addEventListener('load', function(){


var x = 0, y = 0;
var dis = 0, disX = 0, disY = 0;
var ang = 0;
var clicked = false;

var groundDiv = document.getElementById('groundDiv');
groundDiv.addEventListener('mousedown', mouseDown);
groundDiv.addEventListener('mousemove', mouseMove);
groundDiv.addEventListener('mouseup', mouseUp);

var distanceValueDiv = document.getElementById('distanceValueDiv');

var lineDiv = document.getElementById('lineDiv');
lineDiv.style.webkitTransformOrigin = '0 0';

function mouseDown(e) {
 clicked = true;
 x = e.offsetX;
 y = e.offsetY;
 
 lineDiv.style.width = '0px';
 lineDiv.style.height = '0px';
 lineDiv.style.left = x + 'px';
 lineDiv.style.top = y + 'px';
 lineDiv.style.display = '';
}
function mouseMove(e) {
 if (clicked) {
  disX = e.offsetX - x;
  disY = e.offsetY - y;
  ang = Math.atan2(disX, disY) * 180 / Math.PI;
  
  
  dis = Math.sqrt(Math.abs(disX*disX) + Math.abs(disY*disY));
  
  lineDiv.style.height = dis + 'px';
  lineDiv.style.webkitTransform = 'rotate(' + -ang + 'deg)';
  
  distanceValueDiv.style.left = e.offsetX - 40 + 'px';
  distanceValueDiv.style.top = e.offsetY - 40 + 'px';
  distanceValueDiv.innerHTML = 'distance: ' + dis;
 }
}
function mouseUp(e) {
 clicked = false;
}


});
</script>

[Blogger(blogspot)] How to Add Google Analytics to Blogger (블로거에 구글분석 연동하는 방법)

Blogger 의 기본 통계 기능을 보면 Google Analytics 의 기능에 비해
얼마나 보잘것 없는지 느끼게 된다.

업무적이든 비업무적이든 Google Analytics 를 사용해본 사람으로써
그 기능은 정말 막대하다고 생각이 든다.


방법은 아래와 같다.

1. How to add Google Analytics code in blogger blog (추적ID 만들기)

1. Login Google Analytics (로그인)
2. Click to Admin (관리를 클릭)

 3. Click to New Account (새 계정 클릭)

 4. Enter the information and click the 'Get Tracking ID'
    (정보를 입력 후 '추적 ID 가져오기'를 클릭하세요.)
ps. Account Name is not website information. (하단의 계정이름은 웹사이트 정보와 별개입니다.)

 5. Tracking ID was created (추적 ID가 생성되었습니다.)

2. How To Install Google Analytics in Blogger
    (블로거에 추적ID 연동하기)

1. Click to 'Other' of 'Settings' in Bloggers (블로거의 '설정'에서 '기타'를 클릭)

2. Input Your Id here Like this in screen shot (다음과 같이 추적ID를 입력하세요.)

3. Click on save setting ('설정 저장' 버튼을 클릭하세요.)

You can Make sure that Blogger connect to the Google Analytics.
(이제는 블로거와 구글통계와 연동이 되었는지 확인이 가능합니다.)

* Check Real-time statistics feature.

  (실시간 통계 기능으로 정상적으로 수집이 되는지 확인해 보세요.)

PS.
나는 Google Analytics 의 기능중에서 '실시간통계' 기능이 꽤나 매력적이다.
컴퓨터 엔지니어로써 사이트가 많이 느려진 경우에 시스템에 콘솔로 접속 후
시스템의 부하상태 및 커넥션개수를 체크 함으로써 어느정도 부하가 있는지 체크할 수도 있지만 Google Analytics 기능을 연동함으로써 직관적으로 쉽게 볼 수 있으며
사이트 담당자에게 보고하기도 편하다.

마케팅측면에서 보자면 사용자가 어느사이트로 들어왔으며 어떤 버튼을 가장 많이 클릭했는지의 비교를 통해 해당 위치에 중요한 정보나 팝업을 띄우면 효과적일 것이다.
그리고 어떤 경로로 유입되었는지도 자세하게 나오기 때문에 유료광고를 하는경우에 유료광고를 통해서 얼마나 유입이 되고 일반적인 검색을 통해서 얼마나 유입이 되었는지를 판단해 어떤 분야로 마케팅을 좀더 집중적으로 개선해야 할지 분석도 가능하다.

블로그를 시작한지 얼마 되지 않은상태에서 이상하게만치 본문에 영어가 거의 없는데도
블로거 자체 통계로는 한국보다 외국에서 접속유입량이 많은경우가 있었다.
어떤 경로를 통해 왔는지 궁금했지만 블로거의 기본 통계로는 자세한 정보를 알수 없어서 결국에 Google Analytics 를 연동하기로 결심..