웹사이트에서 안드로이드 기기 카메라를 사용하기 위해 폰갭 플랫폼을 가져와서 안드로이드 앱을 만들었습니다. 구성은 웹 언어로 되어있고 포장은 폰갭과 안드로이드로 한 하이브리드 앱이죠.
허나 해당 웹사이트에서 필요로 했던 기능은, 안드로이드 기기 카메라 제어 단 하나 였습니다. 그 외의 모든 것들은 데스크탑 또는 모바일의 브라우저에서도 다 가능한 것들이구요.
웹사이트 소스에 폰갭( cordova.js ) 라이브러리를 불러 오는 것은 문제가 없습니다만, 해당 라이브러리가 포함 되어 있는 페이지를 데스크탑이나 모바일의 브라우저로 불러오면 페이지 이동이 발생할 때 마다 다이얼로그가 떠서 도무지 뭘 할 수가 없습니다. 안드로이드 어플 단에서 필요로 하는 정보를 가져 오는 것 같은데, 환경이 다르니 그런 거겠죠.
조건절 하나면 해결 될 것 같습니다. 사용한 웹 언어나 자바스크립트에서 지금 실행 환경이 안드로이드 앱상 인지, 일반 웹뷰인지 판단해서 폰갭 라이브러리를 불러 오거나 그러지 않으면 되겠죠.
처음 생각했던 것은, 모바일과 데스크탑의 구분이었습니다.
$mobile = !!(FALSE !== strstr(strtolower($_SERVER['HTTP_USER_AGENT']), 'mobile')); //모바일 기기에서 접근할때 $mobile > 0 이됩니다.$mobile변수로 조건문을 만들어 라이브러리를 불러올지 결정했었죠. 이것의 문제는 폰갭 웹뷰나 일반 브라우저 웹뷰나 둘다 mobile 값이기 때문에 구분이 안된다는 것입니다.
그래서 안드로이드 어플단의 자바 코드로 처리를 해줍니다.
안드로이드 4.3, 폰갭 2.9.0 환경 입니다.
public class MainActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("http:// URL ");
//여기서부터
class JsObject {
@JavascriptInterface
public String toString() { return "injectedObject"; }
}
appView.addJavascriptInterface(new JsObject(), "injectedObject");
//여기까지
}
}
주석사이의 코드.http://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object, java.lang.String)
다른것들은 아무것도 하지 않은 폰갭을 사용한 어플의 가장 간단한 모습입니다. 주석 사이의 코드만 추가해주면 원하는 결과를 가질 수 있습니다.
설명하자면 window 객체( 브라우저 객체, 곧 웹뷰의 객체 )에 사용자 정의 객체를 추가해 주는 겁니다. window 객체에 대해 자세한 내용은 아래 링크 참고.
http://www.w3schools.com/jsref/obj_window.asp
안드로이드 어플을 실행했을 때만 저 사용자 객체가 추가 되므로, 웹페이지 소스에서 저 객체가 있는지 없는지 판단만으로도 문제를 해결 할 수 있습니다.
사용자 객체를 추가했으니 이제 자바스크립트에서 어떻게 사용하는지 알아 봅시다.
<head>
<script type="text/javascript">
if( window.injectedObject.toString() == "injectedObject" ){
var js = document.createElement("script");
js.type = "text/javascript";
js.src = "./cordova.js";
document.head.appendChild(js);
}
</script>
</head>
동적으로 js 파일 로드 하기.http://stackoverflow.com/questions/950087/how-to-include-a-javascript-file-in-another-javascript-file
자바스크립트 코드에서 보는 것 처럼, window에 추가된 사용자 객체의 함수를 호출하고 그 반환된 값을 비교하는 조건문 입니다. 안드로이드 어플이 아닌 일반 브라우저에서 실행이 된다면? 저 값은 아무것도 없을테고 폰갭 라이브러리가 로드되지 않는 겁니다.
웹소스로 여러 모바일 OS에 맞는 앱을 만들 수 있다는 편리한 폰갭이지만 성격상 솔직히 그냥 귀찮습니다.
* 안드로이드 코드 단에서 sendJavascript() 함수를 사용한, 비슷해 보이는 방법도 있는듯 합니다. 포스팅된 방법으로 해결이 안되신다면 아래 링크를 한번 참조 해보심이...
http://www.jumpbyte.com/2012/phonegap-native-to-javascript/
* 그 외 참고 사이트.
http://stackoverflow.com/questions/15852499/javascript-calls-from-android-using-phonegap
댓글 없음 :
댓글 쓰기