콘텐츠
- 01. 수다방 시간입니다
- 02. $ (’light’). fadeIn ();
- 03. 당신의 손은 브라우저를 위해 만들어졌습니다.
- 04. 게임 패드로 제어되는 3D 게임
- 05. iPad에서 Flash 실행
- 06. 스마트 폰용 앱 작성
- 07. 브라우저에서 Ruby 및 Python 실행
- 08. OS 독립 데스크톱 프로그램 작성
- 09. 웹 서버 실행
- 10. 웹 스크래핑 및 스크린 샷
- 기다림! 더있다...
자바 스크립트는 1995 년에 탄생 한 이래로 먼 길을 걸어 왔습니다. 확실히 오해, 오용, 무지로 가득 찬 어려운 길입니다. 그러나 지난 5 년 동안 JavaScript가 점점 더 많은 관심을 받고 있기 때문에 시대가 바뀌 었습니다. 더 많은주의를 기울이면 더 많은 개발자가 실제로 JavaScript를 사용하고 있으며 다양한 용도로 사용하고 그 아름다움을 즐기고 있습니다. 당신이 나에게 묻는다면 고전 "미운 오리 새끼"이야기.
다음 기사에서는 일반적인 "브라우저에서"사용하는 것과 다른 자바 스크립트 사용 사례 10 가지를 살펴 보겠습니다.
01. 수다방 시간입니다
Facetime과 같은 영상 커뮤니케이션의 80 년대 비전을 기억하십니까?
거의 모든 곳에서 사용 가능한 광대역 인터넷과 Skype라는 작은 소프트웨어의 과도한 사용으로 인해 이것이 주류가되기까지는 20 년 밖에 걸리지 않았습니다.
Adobe의 Flash 기능과 소셜 네트워크를 구축하려는 Google의 시도를 통해 우리는 이미 브라우저에 영상 커뮤니케이션 기능을 갖추고 있습니다. Flash와 같은 타사 플러그인을 사용하지 않고 이러한 기능을 사용하는 것이 멋지지 않습니까?
다행히도 브라우저 공급 업체는 같은 생각을하고 "getUserMedia"API를 소프트웨어에 구현했습니다. 이것은 브라우저에서 직접 카메라 또는 마이크와 같은 장치에 액세스하기위한 첫 번째 단계였습니다.
이러한 애플리케이션의 뒷면에서 Node.js를 서버로 사용하면 비디오 신호를 무선으로 하나 이상의 클라이언트로 전송하는 것이 놀랍도록 쉽습니다. 불행히도이 글을 쓰는 시점에는 Chrome과 Opera 만 API를 지원하지만 다른 사람들은 빠르게 따라 잡을 것입니다.
양방향 통신을위한 깔끔한 접근 방식은 현재 WebRTC라고하는 Chrome 전용입니다. WebRTC로 인해 클라이언트는 클라이언트와 클라이언트를 직접 연결하여 피어 투 피어 통신 채널을 열 수 있습니다.
재미를 위해 121 바이트로 구현 된 Sindre Sorhus의 Photo Booth 구현을 확인하세요!
var video = document.getElementsByTagName (’video’) [0],
navigator.getUserMedia ( 'video', successCallback, errorCallback);
function successCallback (stream) {
video.src = 스트림;
}
function errorCallback (error) {
console.log (오류);
}
02. $ (’light’). fadeIn ();
Arduino 마이크로 컨트롤러 플랫폼은 "즉시 사용 가능한"JavaScript 사용 사례에 대한 등급 A 예제입니다. Arduino 플랫폼에 익숙하지 않은 분들을 위해 웹 사이트에서 매우 유명한 인용문이 있습니다.
"Arduino는 유연하고 사용하기 쉬운 하드웨어 및 소프트웨어를 기반으로하는 오픈 소스 전자 프로토 타이핑 플랫폼입니다. 아티스트, 디자이너, 애호가 및 대화 형 개체 또는 환경을 만드는 데 관심이있는 모든 사람을 대상으로합니다."
Arduino 자체는 C로 작성된 코드 만 지원하며, 이는 여전히 큰 문제가 아닙니다. 몇 줄의 C (다른 사람들이이 작업을 수행 한 것 외에도)로 Arduino는 직렬 포트 프로토콜을 통해 USB 포트를 통해 명령을 수신 할 수 있습니다.
그러나 JavaScript를 통해 직렬 포트에 어떻게 액세스 할 수 있습니까? 브라우저에서 분명히 아닙니다.
Node.js를 구출하십시오!
커뮤니티 옹호자 인 Chris Williams의 노력으로 인해 이전 SP 프로토콜을 통해 데이터를 보낼 수있는 Node 직렬 포트 라이브러리가 있습니다. 이것은 다른 사람들이 Arduino의 기능에 대한보다 추상적 인 접근 방식을 고안 한 라이브러리를 기반으로 한 최초의 돌파구였습니다. 예를 들어 node-arduino 및 duino 라이브러리.
지금까지 JS 기반 Arduino 프로그래밍을위한 가장 인기 있고 멋진 라이브러리는 jonny-five입니다. Bocoup의 블로그에서 Arduino 플랫폼과 다양한 플러그인으로 한 일에 대해 알아보세요. 또한 Nicolai Onken과 Jörn Zaefferer의 JSConf 동영상을 통해 코드를 거의 사용하지 않고도 오늘날 가능한 작업에 대해 알아볼 수 있습니다.
03. 당신의 손은 브라우저를 위해 만들어졌습니다.
Minority Report의 미래 비전 (추악한 자동차가 아닌 손으로 컴퓨터를 제어하는 비전)은 매일 가까워집니다. 이 방향에서 큰 진전은 마이크로 소프트의 컨트롤러 덜 플레이 시도 인 Kinect였습니다. 당신이 생각할 수있는 놀라운 게임 플레이이지만 이것이 JavaScript와 무슨 관련이 있습니까?!
Microsoft의 Kinect SDK 출시와 함께 많은 사람들이 Kinect의 브라우저 사용 다리를 넘었습니다. 먼저 브라우저에서 Microsoft의 Kinect를 사용할 수있게 해주는 완벽하게 작동하는 kinect.js 라이브러리를 구축 한 ChildNodes의 사람들입니다.
그들의 데모와 비디오를 확인하는 것이 좋습니다. 그러나 kinect.js 라이브러리의 한 가지 주요 단점은 클라이언트 후면에서 실행되는 WebSocket 서버 프로그램 (실제로는 Kinect-> C #-> JS 접착제)이 있어야한다는 것입니다.
MIT로 유명한 몇몇 학생들이 DepthJS라는 벽을 허물기위한 해결책을 연구하고 있습니다.
어떤 형태로든 Kinect 기반 사용에 최적화되지 않은 사이트에서도 Chrome 및 Safari에서 Kinect를 사용할 수있는 브라우저 플러그인 DepthJS는 현재 초기 개발 단계에 있지만 확실히 추적 할 가치가 있습니다.
04. 게임 패드로 제어되는 3D 게임
요즘 플래시가 아닌 브라우저 게임을 해본 적이 있습니까? 특히 Quake와 같은 게임 클론을 볼 때 그래픽 기능이 놀랍습니다.
하지만이 게임을 할 때 항상 키보드와 (대부분) 투박한 마우스에 묶여 있습니다. 이것은 특히 액션 게임의 경우 가장 큰 단점이며 브라우저에서 실제로 차단됩니다.
Xbox 컨트롤러를 PC에 연결하고 좋아하는 브라우저 게임을 시작할 수 있다면 멋지지 않을까요? 이것은 더 이상 미래의 비전이 아닙니다. Gamepad API에 인사하십시오!
책상 주위에 게임 패드가있는 경우 지금 바로 연결하여 이미 Gamepad API를 사용하고있는 게임을 즐기십시오. 입력 컨트롤을 프로그래밍하는 것도 케이크 조각입니다.이 코드 스 니펫을 확인하거나 더 나은 방법으로 직접 실행하세요.
div id = "gamepads"> / div>
스크립트>
function gamepadConnected (event) {
var gamepads = document.getElementById ( "gamepads"),
gamepadId = event.gamepad.id;
gamepads.innerHTML + = "게임 패드 연결됨 (id ="+ gamepadId + ")";
}
window.addEventListener ( "MozGamepadConnected", gamepadConnected, false);
/ 스크립트>
브라우저의 3D 기능에 대해 더 알고 싶다면 Three.js와 Jens Arps의 오픈 소스 3D 시뮬레이터 엔진 Ascent를 참조하십시오. Mark Hammil 조심하세요. 또 다른 Wing Commander 속편이 필요할 수 있습니다!
05. iPad에서 Flash 실행
개방형 표준 애호가이자 Apple의 팬으로서 저는 iPad와 iPod에 Flash를 탑재하지 않은 Apple에 정말 감사하고 싶습니다. 이것은 HTML5, CSS3 및 JavaScript와 같은 개방형 기술을 수용하는 운동을 시작했습니다.
에이전시 직원으로서 고객에게 정말 안 좋은 상황이라고 말해야합니다.
대부분은 Flash를 통해 이전 IE7 또는 IE8에서 실행되는 대화 형 콘텐츠와 HTML5를 통해 iDevices에서 실행되는 간단한 광고 또는 캠페인에 대해 두 번 지불해야합니다.
이전 브라우저의 기능을 폴리 필하는 데는 대부분 성능이라는 경계가 있습니다. 그렇다면 Flashless iDevice에서 Flash를 실행할 수있는 기능이 없습니까?
물론 하나가 있고 물론 자바 스크립트로 만들어졌습니다.
역사의 한 조각 : 2010 년 Tobias Schneider는 Gordon이라는 작은 도서관을 출시했습니다.
브라우저에서 SWF 파일을 직접 실행할 수있었습니다. 이는 플래시 버전 2까지의 기능 만 사용하는 광고와 같은 작은 플래시 파일에서 잘 작동했지만 더 높은 수준의 기능은 전혀 포함되지 않았습니다.
Tobias는 ueberJS 회사 UXEBU에 합류했을 때 새로운 아이디어를 떠올 렸습니다.
그래서 Bikeshed가 탄생했습니다. Bikeshed 자체는 일종의 JavaScript 애니메이션 프레임 워크이지만, 컴파일러가되기를 원하는 모든 것에 대한 JavaScript 대 Flash입니다 (어댑터 기반이므로 표준 동작은 Flash를 JavaScript로 컴파일하지만 원하는 모든 것에 대한 어댑터를 작성할 수 있음). . Flash 10 및 ActionScript 3과 호환됩니다. 웹 페이지에서 컴파일러 외에 다양한 기능에 대해 자세히 알아보십시오.
06. 스마트 폰용 앱 작성
휴대폰 환경을위한 네이티브 애플리케이션을 작성하는 것은 어려운 일입니다. 지원하려는 플랫폼을 결정하는 것으로 시작됩니다. 애플리케이션이 iPhone 및 iPad, Android 기반 모바일 장치, Windows Mobile, Blackberry 장치, webOS 기반 플랫폼 등에서 실행되는 경우.
이 플랫폼 각각에는 자체 API가 있으며 대부분 다른 프로그래밍 언어를 사용합니다.
브라우저 전쟁에서 살아남 았다면 이것이 시작하기 더 어려운 방법이라고 말씀 드리겠습니다. 개발자가 시간과 예산에 따라 이러한 모든 플랫폼을위한 애플리케이션을 구축하는 것은 거의 불가능합니다.
그래서 뭐 할까? 개발자를 더 고용 하시겠습니까? 앱에 대해 더 많이 청구 하시겠습니까? 또는 코드베이스가 모든 장치에서 실행되도록하는 더 나은 방법을 찾으십니까? 대부분의 경우 마지막 접근 방식을 선호합니다.
그러나 이러한 앱은 무엇으로 구축되어야합니까? 이 모든 플랫폼의 공통점은 무엇입니까? 답을 알 수 있습니다. 웹 브라우저이므로 자바 스크립트 엔진입니다.
이것이 이전 이름 인 PhoneGap으로 더 잘 알려진 Apache Cordova의 아이디어입니다.
Cordova는 각 모바일 환경의 API를 추상화하고 깔끔한 JavaScript API를 노출하여 모든 것을 제어하는 JavaScript 프레임 워크입니다. 이를 통해 단일 코드베이스를 유지 한 다음 다른 모바일 장치에 구축하고 배포 할 수 있습니다.
여기에서 리소스를 확인하여 Cordova를 사용하여 한 번만 빌드하고 모든 곳에서 실행할 수있는 멋진 모바일 앱을 빌드하는 방법을 알아보십시오.
07. 브라우저에서 Ruby 및 Python 실행
유명한 Firefox 브라우저를 만든 회사 인 Mozilla는 많은 괴짜를 고용하고 있습니다. 그중 하나는 Emscripten이라는 이상한 도구를 만든 Mozilla Research Team의 엔지니어 인 Alon Zakai입니다.
Emscripten을 사용하면 C / C ++ 기반 라이브러리에서 생성 할 수있는 LLVM 비트 코드를 JavaScript로 가져올 수 있습니다. 라이브러리를 비트 코드로 컴파일 한 다음 해당 비트 코드를 가져와 JavaScript로 변환하여이를 수행합니다. 깔끔하지만 실제로 이것으로 무엇을 할 수 있습니까?
반대 질문이 있습니다. "CoffeeScript와 Prototype을 사용하는 것이 브라우저에서 Ruby를 실행할 때 얻을 수있는 가장 가까운 방법입니다"라는 말을 들어 본 적이 있습니까? 아니? 더 이상 사실이 아니니 걱정하지 마세요.
Emscripten을 사용하면 Ruby 소스를 자바 스크립트로 변환하고 브라우저에서 실제 Ruby를 실행할 수 있습니다! 그러나 이것은 Ruby에만 적용되지 않습니다. 예를 들어 Python도 포함되었습니다.
또는 브라우저 내 h.264 디코더 Broadway를 확인하십시오. 이것은 실제로 내장 된 C ++ 라이브러리입니다!
repl.it로 이동하여 브라우저에서 실행되는 몇 가지 프로그래밍 언어 (Ruby 및 Python 포함)를 확인하십시오!
08. OS 독립 데스크톱 프로그램 작성
전에 Apache Cordova의 도움으로 여러 모바일 플랫폼을 대상으로하는 것에 대해 이야기했습니다. 당연히 자바 스크립트는 모바일 플랫폼을 대상으로 할뿐만 아니라 우리의 오랜 친구 인 데스크톱 컴퓨터도 다룰 수 있습니다.
첫 번째 솔루션은 Titanium Desktop Suite를 사용하는 Appcelerator와 널리 사용되는 Air 플랫폼 인 Adobe에서 나왔습니다.
그러나 우리 모두가 오픈 소스 애호가 인만큼 개방적이고 Node.js 기반 기술이 우리가 찾고있는 것입니다. app.js를 만나보세요! app.js는 개방형 웹 기술 및 Node.js 기반 데스크톱 프로그램 빌더로 파일 시스템 액세스, 창 제어 등을 통해 실제 데스크톱 프로그램을 작성할 수 있습니다. Node의 안정적인 크로스 플랫폼 API에 의존하고 HTML 및 CSS로 소프트웨어 UI를 구축 할 수 있습니다. 여기에있는이 목록에서 가장 인기있는 새 항목과 같습니다.
app.js는 꽤 젊은 프로젝트이므로 지금은 Windows와 Linux 만 지원하지만 메일 링리스트에 따르면 Mac 지원이 진행 중입니다.
09. 웹 서버 실행
요즘에는 웹 사이트가 자바 스크립트 기반 웹 서버에서 제공되고 있다고 말할 때 누구에게도 충격을주지 않습니다. 2 ~ 3 년 전을 회상하고 웹 개발자에게 똑같은 말을했다면 아마도 그들은 당신을 비웃거나 더 나빠졌을 것입니다.
그러나 Node.js의 놀라운 성공과 함께 이것은 운 좋게도 지금으로부터 멀리 떨어져 있습니다. 더 이상 사람들을 놀라게하지 않을뿐만 아니라 Node.js는 비동기 적 특성으로 인해 성능면에서 훌륭합니다. 특히 많은 병렬 연결 문제에 직면 할 때 더욱 그렇습니다. 성능이 놀라 울뿐만 아니라 진정으로 간단한 API는 많은 개발자를 매료시킵니다. Node 세계의 "Hello World"예제를 확인해 보겠습니다. 화면 예제에 인쇄 된 "Hello World"일뿐만 아니라 http 웹 서버입니다!
var http = require ( 'http');
http.createServer (function (req, res) {
res.writeHead (200, {’Content-Type’:’text / plain’});
res.end ( 'Hello World n');
}). listen (1337,’127.0.0.1’);
이 단순함에 깜짝 놀라지 않으시면 저도 도와 드릴 수 없습니다.
Node 인기 (또는 과대 광고)의 가장 좋은 부분 중 하나는 Microsoft와 같은 대기업이 실제로 Azure 클라우드 서비스에서이를 지원하고 있다는 것입니다!
10. 웹 스크래핑 및 스크린 샷
마지막으로 명령 줄에서 헤드리스로 QUnit 테스트를 실행할 수있게 해준 제가 개인적으로 좋아하는 프로젝트를 살펴 보겠습니다. PhantomJS는 깔끔한 JavaScript (또는 CoffeScript) 기반 API를 갖춘 헤드리스 WebKit 기반 브라우저입니다.
그러나 JavaScript와 DOM을 테스트하는 것이 Phantom의 유일한 사용 사례는 아닙니다. 저를 정말로 매료시키는 것은 웹 사이트를 스크래핑하고 스크린 샷을 찍을 수있는 기능입니다!
예. Phantom을 사용하면 웹 페이지를 다양한 그래픽 형식으로 출력 할 수 있습니다. 물론 아기에게서 과자를 훔치는 것만 큼 쉽습니다.
정확히이 작업을 수행하는 스크립트를 살펴 보겠습니다.
var page = new WebPage ();
page.open ( 'http://google.com', function (status) {
page.render ( 'google.png');
phantom.exit ();
});
이것이 스크린 샷을 만드는 데 필요한 전부이며 JavaScript 기반이기 때문에 스크린 샷을 찍기 전에 jQuery를 사용하고 페이지 콘텐츠를 조작 할 수도 있습니다!
기다림! 더있다...
그래서 저는 여러분이 저처럼 이러한 도구를 모두 발견했을 때 놀랐기를 바랍니다. 이 기사는 요즘 자바 스크립트로 가능한 것의 표면을 긁어 모았다. JS Cloud9로 완전히 작성된 IDE 나 그것으로 수행되는 높은 보안 기능과 훨씬 더 비슷합니다 (신용 카드는 JavaScript로 만들어졌습니다).
영감을 받고, 시간을내어 여기에 언급 된 일부 프로젝트를 가지고 놀거나, 이러한 도구 중 일부를 가져 와서 새로운 도구를 구축하는 것이 더 좋기를 바랍니다. 여기에있는 대부분은 오픈 소스이며 개발자가 도구를 사용하고 버그를 발견하고보고하는 것만으로도 작업을 개선 할 수 있도록 도와 줄 개발자를 찾고 있습니다.
