밥을먹는선비의 超连接技术 연구소

http://rawgit.com/

https://www.npmjs.com/package/libui

https://github.com/Automattic/node-canvas

https://github.com/stackgl/headless-gl

 http://es6-features.org/#StringRepeating

http://electron.atom.io/

기본예제

https://github.com/electron/electron-quick-start

https://github.com/electron-userland/electron-packager

https://www.npmjs.com/package/electron-builder

이건 기본..

https://github.com/nwjs/nw.js

npm 패키지들...

https://www.npmjs.com/package/nwjs

https://www.npmjs.com/package/nw

https://www.npmjs.com/package/nw-builder

라즈베리용 같음

https://libraries.io/npm/nw-RaspberryPi

한글로쓴...

http://brantiffy.axisj.com/archives/189

대부분의 3디 그래픽스 랜더들은 씬그라프들에 대한 update 콜백을 제공한다.

대부분의 어플리케이션들은 그곳에서 씬그라프상의 오브잭트들을 움직이게된다.

그리고 함수의 마지막 부분에서 updateAll을 하게 되는데

문제는 여기서 발생한다.

주로 물체와 카메라를 동시에 움직일때 발생한다.

카메라의 시점과 오브잭트가 위치가 갱신한 타이밍이 교묘하게 엇갈리기때문에 발생한다.

가장간단한 해결방법은 물체를 움직이기전에 카메라의 메트릭스를 한번 갱신해주는 방법이다(월드행렬)

var self = this;
self.camera.updateMatrixWorld();

var v1 = new THREE.Vector3( 0, 0, 0.5 ).unproject( self.camera );
self.testnode.position.copy(v1)

this.updateAll();

위와 같이 말이다.

코도바로 프로잭트를 생성하면 기본적으로 설치되는 플러그인입니다.(5.x 버전 확인)

4.0대부터는 http 로 시작하는 주소를 직접입력하거나 location.replace 등으로 주소를 직접 입력하는경우 새창으로 페이지가 열리도록 되어있습니다.

경우에 따라서는 새창에서 열리지않고 웹뷰가 리프레쉬되도록 하고싶을때가 있습니다.

코도바에서 새창에서 페이지가열리지않도록 하려면 whitelist 플러그인을 세팅해주어야합니다.

(참고 : https://github.com/apache/cordova-plugin-whitelist)

아래처럼 config.xml에 allow-navigation 태그를 이용해서 웹뷰에서 해당 페이지가 열리도록 설정할수있습니다.

location.href,replace 뿐만아니라 <a href="..."> 도 마찬가지입니다.

<!-- Allow links to example.com -->
<allow-navigation href="http://example.com/*" />

<!-- Wildcards are allowed for the protocol, as a prefix
     to the host, or as a suffix to the path -->
<allow-navigation href="*://*.example.com/*" />

<!-- A wildcard can be used to whitelist the entire network,
     over HTTP and HTTPS.
     *NOT RECOMMENDED* -->
<allow-navigation href="*" />

<!-- The above is equivalent to these three declarations -->
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />

반대로 allow-intent 하면 새로운창에서 href=주소에 대한 페이지가 열리게됩니다.

<!-- Allow links to web pages to open in a browser -->
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />

<!-- Allow links to example.com to open in a browser -->
<allow-intent href="http://example.com/*" />

<!-- Wildcards are allowed for the protocol, as a prefix
     to the host, or as a suffix to the path -->
<allow-intent href="*://*.example.com/*" />

<!-- Allow SMS links to open messaging app -->
<allow-intent href="sms:*" />

<!-- Allow tel: links to open the dialer -->
<allow-intent href="tel:*" />

<!-- Allow geo: links to open maps -->
<allow-intent href="geo:*" />

<!-- Allow all unrecognized URLs to open installed apps
     *NOT RECOMMENDED* -->
<allow-intent href="*" />

access  태그 ajax 요청에 대한 허용여부를 설정을 할수있습니다.

<!-- Allow images, xhrs, etc. to google.com -->
<access origin="http://google.com" />
<access origin="https://google.com" />

<!-- Access to the subdomain maps.google.com -->
<access origin="http://maps.google.com" />

<!-- Access to all the subdomains on google.com -->
<access origin="http://*.google.com" />

<!-- Enable requests to content: URLs -->
<access origin="content:///*" />

<!-- Don't block any requests -->
<access origin="*" />

어떠한 access에대한 정의도 없다면 file:// 만 요청이 허용가능해집니다.

크로스워크란?

싸이트주소 https://crosswalk-project.org

하이브리드앱(웹뷰기반의앱) 개발시 쓰는 웹뷰들이 아직은 html5표준을 제대로 지켜지지않는 문제를 해결하기 위해서

웹뷰를 자체를 따로 개발하려는 프로잭트임

그러나...

사실 인텔에서 주관해서 하는 프로잭트인데 사실 이것도 html5표준을 완벽지원하느냐는 또다른 함정일수있음.

그래서 '나루호도' 라는 말을 하기엔 아직은 이를거같다는 생각이듬...

-안드로이드용 사용기정리

1. 환경 세팅

개발환경 macosx 사용함 도규먼트상에는 리눅스용만 나와있으나 osx에서도 비슷하게 세팅할수있음

자바와 ant라는게 설치되어야하는데 자바는 안드로이드 스튜디오가 설치되었다면 별도로 세팅할필요는 없을거같음

ant 파일을 다운받아 압축을 풀고 경로 설정을 해주면됨

http://www.apache.org/dist/ant/binaries/ 이곳에서 다운받아서 압출풀고 패스에 추가해주면됨

리눅스의 경우는 패스를 추가 하려면 ~/.bashrc 이지만 osx 는 ~/.bash_profile 임

vim ~/.bash_profile 

파일을 오픈하고 없으면 만들어짐

ant와 안드로이드 sdk(안드로이드 스튜디오 설치) 경로를 추가해 줌

예>

export ANT_HOME=/Users/gbox3d/Desktop/android/utils/ant

export PATH=${PATH}:${ANT_HOME}/bin

export PATH=/Users/gbox3d/Library/Android/sdk:$PATH

export PATH=/Users/gbox3d/Library/Android/sdk/tools:$PATH

export PATH=/Users/gbox3d/Library/Android/sdk/platform-tools:$PATH

그 다음 터미널창을 다시열거나 아래 커멘드를 실행해서 설정을 반영함

source ~/.bashrc

아래 커멘드들로 제대로 설치되었는지 확인

ant -version

adb  help

https://crosswalk-project.org/documentation/downloads.html  에서  아래빨간색 밑줄쳐진 파일 다운 받아서 압축을 푸세요.

그리고 ~/.bash_profile 에 경로 추가해요

2. 어플 만들기

작업폴더 생성후 이동

mkdir sample

cd sample

icon.png 파일 만들기

이미지크기가 128x128

(샘플 다운받기 wget https://crosswalk-project.org/assets/cw-app-icon.png)

index.html 파일 만들기

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>simple</title>
  </head>
  <body>
    <p>hello world</p>
  </body>
</html>

manifest.json 파일 만들기

{
  "name": "simple",
  "xwalk_version": "0.0.1",
  "start_url": "index.html",
  "icons": [
    {
      "src": "icon.png",
      "sizes": "128x128",
      "type": "image/png",
      "density": "4.0"
    }
  ]
}

apk빌드하려면 아래와 같이 make_apk.py 스크립트를 실행합니다.

make_apk.py --package=org.crosswalkproject.example --manifest=./manifest.json --enable-remote-debugging

make_apk.py 는 크로스워크를 다운받아서 압축을 풀면 폴더안에 있습니다. 

~/.bash_profile (또는 bashrc) 에 export 로 PATH를 지정해주거나 직접 경로를 써주면서 실행시켜주면됩니다.

CordovaPlugin 에서 상속받은 클래스의 멤버함수인  excute의 json을 처리할수 있는 스펙은 아래와 같습니다.

public boolean execute(String action, JSONArray args,

final CallbackContext callbackContext)

1. js 에서 넘어온 인자 받기

args 에 배열의 첫번째로 넘겨온 json object를 얻으려면 아래 와 같이 해줍니다.

JSONObject json = args.getJSONObject(0);

get 함수로 각각의 json object 의 멤버변수들을 얻어올수 있습니다.

Log.d(TAG, "pi : " + json.get("pi"));

Log.d(TAG, "number : " + json.get("number"));

Log.d(TAG, "msg : " + json.get("msg"));

각 변수들은 기본적으로 String 형으로 받아지기 때문에 int 형을 처리 해주려면 타입 캐스팅을 해줍니다.

(Integer) json.get("number") + 1 

2. js 로 결과값을 인자로 넘겨주기

먼저 넘겨줄 빈 json 오브잭트를 만듭니다.

JSONObject resultJSON = new JSONObject();

put 함수로 값을 체워 넣습니다.

resultJSON.put("result", "ok");

resultJSON.put("msg", "json echo!!");

전송하기전에 먼저 PluginResult 객체에 담아줍니다.

PluginResult plugin_result = new PluginResult(Status.OK, resultJSON);

콜백컨텍스트의 sendPluginResult 함수로 js 측으로 결과 값을 전달합니다.

callbackContext.sendPluginResult(plugin_result);

3. 예제 실행법

plugin_sample.zip

 파일을 다운받습니다.

코도바 프로잭트를 생성하고  안드로이드 플랫폼을 추가합니다.

압축을 푸시고 로컬에서 다음과 같이 플러그인을 추가 합니다.( 플러그인의 경로가 ../plugin_sample/echo 이라고 가정)

cordova plugin add ../plugin_sample/echo

js 쪽 예제는 첨부된 파일의 index.html을 참고 하시면됩니다.