작은악마`s Blog

jquery를 이용한 QR코드를 생성하는 오픈 소스를 소개해 드리겠습니다.

라이센스는 MIT 라이센스이며 소스는 github와 제작자의 홈페이지에서 다운로드 받으실 수 있습니다.

제작자의 사이트 좌측 하단에 보면 "Buy me a beer"라는 후원 베너가 있네요. 제작자의 위트가 엿보입니다. ^^

제작자의 홈페이지 화면입니다.

라이센스 정보와 github 주소등의 정보가 있으며 사용 설명도 잘 되어 있습니다.

저는 github에서 소스를 다운받아 demo폴더에서 실행을 했더니 처음에는 동작을 하지 않았습니다.

데모 폴더의 index.html을 열어보니

<script src="../jquery.qrcode-{{pkg.version}}.js"></script>

란 코드가 보입니다. 그래서 해당 코드에서 -{{pkg.version}} 부분을 삭제하였습니다.

그러나 역시 동작하지 않았습니다. ㅡㅡ;

다시 폴더들을 확인하였더니 src 폴더에 있는 "jquery.qrcode.js" 파일의 크기와

dist 폴더에 있는 "jquery.qrcode.js" 파일의 크기가 다릅니다.

그래서 dist 폴더에 있는 파일을 복사한 후 실행하였더니 이번엔 성공~~

위와 같이 QR코드가 잘 보입니다. ^^

참고로 전 크롬브라우저에서 테스트를 하였으며

위 이미지를 보시면 우측 항목중 "LABEL"이라는 항목에 적은 문구가 QR코드 중간에 있습니다.

그런데 좌측 상단에 있는 "REDER MODE"를 DIV로 하게되면 "LABEL"이 적용되지 않습니다.

QR코드 관련한 작업을 할때 유용할것 같습니다.^^

Javascript에서 window.open()을 사용할때는 대부분이
아래와 같은 GET방식을 이용한다.

팝업

*옵션은 left, top, width, height, toolbar, statuso, scrollorbarso, resizable 등등을 조합하여 사용한다.
(좀더 자세한 사항은 http://www.w3schools.com/jsref/met_win_open.asp 를 참조)

그런데 예를 들어 인수로 넘긴값을 사용자가 변경하면 안될때와 같이
window.open()을 사용할때 POST방식을 이용해야만 할때가 있다.

그럴때는 다음과 같은 방법을 사용하면 된다.

팝업

그런데 팝업으로 open될 페이지의 소스에서 주의해야 할 것이 있다.
당연한 것인데... 

GET 전송으로 넘어오는 값은 무시하게 해야 한다는 것이다.
GET을 허용하면 POST로 전송하는 것이 무의미한 것이 때문이다.

안드로이드 webview와 javascript 함수간의 통신을 하는데

javascript에서 webview로 데이터를 전달하는것은 무리가 없다.

그런데 webview에서 javascript 함수를 호출하니 아래와 같은 에러가 발생

"Uncaught Error: Error calling method on NPObject.:41"

이는 별도의 Thread로 돌리면 해결된다.

그래서 아무 생각없이 Thread를 상속받아 만들어 돌려봤으나 앱이 죽는다..

헉...

webview의 메소드는 UI Thead에서 돌려야 한다는것을 잊고 있었다...

결국

runOnUiThread(new Runnable() {
    
    @Override
    public void run() {
     // TODO Auto-generated method stub
        //여기에 필요한 코드 작성          

    }
   });

로 해야한다.

프로젝트를 진행하면서 explorer 8버전 이하에서 화면이 깨지는등의 문제가 발생하였다

(HTML5, CSS 등에 의해)

일차적으로 asOne님의 블로그 http://as-one.tistory.com/entry/IE8-에-html5-쉽게-적용하기 를 보고 어느정도 해결하였으나

해결되지 않는 문제가 있었다.

시간을 들여 방법을 찾으면 될 수도 있겠지만

본래 이 프로젝트가 HTML5 기준이므로

지원하지 않는 브라우저는 무시하는게 맞지만 클라이언트가 이해를 잘 못한다...

그래서 찾은 타협점..

explorer 9버전 미만에서는 사용자에게 알림(alert)을 띄우자..

그래서 이에 대해 작업을 하였다

일단 브라우저 정보를 가지고 있는 navigator 객체를 이용.

이 객체에 대한 자세한 설명은 자바킹님의 블로그 를 참고.

버젼을 가져오는것은 블로그 http://jskimmail.blog.me/40137030492를 참고하여 본인에게 맞게 수정하였다.

또한 익스 11에서는 기존의 방법들로서는 문제가 발생한다.

이에대한 대책으로 지단로보트님의 블로그를 참고하였다.

작성한 코드는 다음과 같다.

<script language="javascript">
window.onload = function(){
 
   var isExplorer = false;
   if (navigator.appName == 'Microsoft Internet Explorer') {
      isExplorer = true;
   }
 
   if(isExplorer == false){
    //익스 11에서는 appName을 Netscape로 인식하므로 Trident란 Mircosoft가 Internet Explorer에 사용하는 레이아웃 렌더링 엔진의 이름을 이용
    if (navigator.appName == 'Netscape' && navigator.userAgent.search('Trident') != -1) {   
      isExplorer = true;
    }
 }

  if(isExplorer == true){ //익스플로러라면 버젼 확인 
      re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");

      if (re.exec(navigator.userAgent) != null){
         rv = parseFloat(RegExp.$1);
         if(rv < 9){
            alert("익스플로러 8 이하에서는 정상적으로 보이지 않을 수 있습니다.");
         }
      }
  }

 
}

</script>

일단 위의 코드로 당장 원하는 것은 얻었다...그러나 여기에도 문제는 있다.

이 프로젝트는 특정 버젼 이하 여부만 알면 끝이었지만

버젼별로 다른 동작을 해야한다면 문제가 있다

직접 확인해 보지는 않았지만 (아직 익스 11은 설치하지 않았다.)

지단로보트님의 블로그를 보면 익스 11의 userAgent에는 MSIE가 없다.

따라서 익스 11에서는 버젼을 가져오는것이 위의 코드로는 불가능하다.

다만 지단로보트님이 적어주신 userAgent값을 봤을때

거의 끝부분에 rv:11.0이라는 값이 있는데

이것이 익스 11의 버젼을 말하는것이 아닌가 싶다.