Node.js에서 진행된 애플 TV 개발

17972 단어 Node.jsJavaScripttvOS
이 소식은 노드다.js Advent Calendar 2015 4일째 보도입니다.
이번에는 애플TV(tvos) 개발을 소개하고 싶다.

tvos 응용 프로그램은 자바스크립트로 개발할 수 있다


2015년 10월에 애플은 새로운 애플 TV를 출시했다.
이 새로운 애플TV는 마침내 일반 개발자들에게 tvOS 앱을 자유롭게 개발할 수 있는 문을 열어주었고, 또 하나의 가장 큰 특징은 WEB 레이크를 개발할 수 있다는 것이다.
로컬 응용 프로그램으로도 개발할 수 있다
이번에 애플은 TVML(Apple’s Television Markup Language)라는 전용 XML 언어와 TVJS독특한 수준의 자바스크립트 개발 환경을 마련해 클라이언트+서버 앱 개발을 추천했다.
JS와 HTML로 구성된 WEB에 익숙한 프로세스에 따라 개발할 수 있는 노드다.js의 npm 풍부한 포장으로 개발할 수 있습니다!
다음은 JS가 알고 있지만 tvos가 무엇인지 아는 사람에게 개발 방법을 소개한다.페이지의 이동 등으로 인해 WEB와 사용 방법이 조금 다르기 때문에 먼저 그 특징을 간단하게 살펴보세요.

tvos 응용 프로그램의 구조


응용 프로그램이 어떻게 작동하는지 봅시다.
동작이 간단하여 일반적인 클라이언트 서버 응용과 기본적으로 같다.
  • 시작 스크립트 가져오기
    우선 로컬 애플리케이션에서 기본 TVJS를 가져오는 것부터 시작합니다.클라이언트 + 서버 응용 프로그램으로 제작되면 로컬인은 최소한의 처리만 할 수 있습니다.
  • 스크립트 읽기 및 화면 표시
    기본 스크립트(TVJS)를 읽어들인 다음 TVML을 읽어들입니다.읽어들인 TVML을 JS 측면에서 화면으로 push하여 화면을 전환합니다.
  • 화면에 입력 이벤트 반영
    사용자가 헤더, 교환 등 입력 이벤트를 진행하기 때문에 이벤트 처리를 하고 응용 프로그램의 동작을 만든다.
    이러한 동작은 TVJS에 기술되어 있습니다.TVJS는 모든 페이지 마이그레이션, 비디오 재생 등 응용 프로그램의 기본 동작을 제어합니다.
    JS에서도 통신 처리가 가능하기 때문에 데이터와 이미지의 자원을 응용 프로그램에 넣을 필요가 없다.

    • TVJS의 특징


    혼자 확장된 TVJS가 뭘 할 수 있을까?

    tvos 클래스


    TVJS는 기본적인 JS 기능 외에 미디어를 전문적으로 처리하는 조작류도 갖추고 있다.예를 들어 다음과 같은 간단한 코드로 풍부한 플레이어로 영상을 재생할 수 있다.
    // 基本的な再生手順
// 1. playerを生成
var player = new Player();

// 2. プレイリストを生成
var playlist = new Playlist();

// 3. 再生する動画を生成
var mediaItem = new MediaItem('video', videoUrl);

// 4. プレイリストに動画をセット
player.playlist = playlist;
player.playlist.push(mediaItem);

// 5. 画面に反映
player.present();

    페이지 마이그레이션의 개념


    WEB와 크게 다른 것은 페이지 마이그레이션의 개념입니다.전환은 웹 페이지처럼 URL을 통해 전환되지 않고 iOS 애플리케이션으로 전환됩니다.
    기본적으로 부모로서 가지고 있는navigation Docoment보다 Stack으로 다음 화면이 연결된다.
    다음은 navigationDocoment를 아버지로 하여 페이지를 전환하는 방법입니다.
    // ページを遷移する
navigationDocument.pushDocument(document);

// ページを置き換える
navigationDocument.replaceDocument(document);

// Modalを表示する/閉じる
NavigationDocument.presentModal(modal);
NavigationDocument.dismissModal();
    navigationBar 이외에도 menuBar를 부모로서 페이지를 전환할 수 있다.
    이렇게 몇 가지 다른 것을 제외하고 기본적인 JS 기능은 이용할 수 있는underrscore이다.js와 React 등 기존 라이브러리를 직접 활용할 수 있다.

    TVML의 특징


    화면의 표시 부분은 자체 태그 언어인 TVML로 기술할 수 있습니다.
    TVML에는 여러 템플릿이 미리 준비되어 있으며 상황에 따라 템플릿을 선택합니다.

    예를 들어 악곡 일람을 표시하려면 맨 왼쪽CompilationTemplate을 사용할 수 있습니까?
    템플릿에 따라 설명을 하면 인터페이스 가이드에 맞는 알기 쉬운 페이지를 간단하게 구축할 수 있다.
    반대로 말하면 틀의 제한이 많다고 할 수 있다.템플릿은 하위 요소의 종류를 제한하기 때문에 불복종 요소를 표시하지 않습니다.
    템플릿이 많으니 참고하세요공식 문서.
    또한 이 코드는 XML이며 Jade와 같은 템플릿 엔진을 사용할 수 있습니다.

    샘플 처리를 추적해보세요


    그러면 몇 가지 특징을 알았기 때문에 공식 중의 기본 처리 절차의 견본을 살펴봅시다.(약간의 변경)
    application.js
    // 1. 起動時の処理
App.onLaunch = function(options) {
    var templateURL = BASE_URL + '/index.tvml';
    getDocument(templateURL);
}

// 2. テンプレートを取得
function getDocument(url) {
    var templateXHR = new XMLHttpRequest();
    templateXHR.responseType = "document";

    // 3. データを取得後、navigationからページを表示
    templateXHR.addEventListener("load", function() {pushDocument(templateXHR.responseXML);}, false);
    templateXHR.open("GET", url, true);
    templateXHR.send();
    return templateXHR;
}

function pushDocument(document) {
    navigationDocument.pushDocument(document);
}
    index.tvml
    <?xml version="1.0" encoding="utf-8" ?>
<document>
    <head></head>
    <stackTemplate class="bg">
        <banner>
            <title>Welcom to AppleTV</title>
        </banner>
        <collectionList>
            <grid>
                <header></header>
                <section>
                    <lockup href="/next-page">
                        <img src="...">
                        <title>タイトル</title>
                    </lockup>
                </section>
            </grid>
        </collectionList>
    </stackTemplate>
</document>
    방금 설명한 바와 같이 먼저 로컬인으로부터 서버에서 주요 스크립트(application.js)를 가져와 처리합니다.
    다음은 응용 프로그램입니다.js에서 화면을 구성하는 index.tvml를 가져오면navigation Docoment에서push로 그 화면을 표시합니다.
    처리는 이것뿐입니다.간단하네요!
    이를 바탕으로 더욱 복잡한TVMLCatalog 샘플의 처리를 추적하는 것은 참고 가치가 있다.
    이 샘플의 구성에서 템플릿뿐만 아니라 TVJS도 세버에서 획득eval하여 집행한다.또한 템플릿을 가져온 후 이벤트를 귀속시키고 사용자가 항목을 선택할 때 처리를 추가합니다.

    대체 모듈 관리


    위와 TVMLCAtallog의 샘플 구성은 대규모 응용 시 문제가 발생할 수 있다.명명 공간을 통해 모듈 관리를 하고 얻은 템플릿에 같은 이벤트 귀속 처리가 실행되며 eval을 많이 사용하는 것도 문제입니다.
    이러한 구성을 중지하고 라우터와 Browserify를 사용하는 모듈 관리로 변경해 보십시오.
    routes/index.js
    // ルーターにページごとの処理内容を追加
var router = require('./router');

router.set('/index', function() {
    var document = documenter.make('index.jade');

    // ページを表示
    presenter.push(document);
});
    application.js
    // 起動時にルーターのindexを呼び出す
var router = require('./router');

App.onLaunch = function(options) {
    router.redirect('index');
};
    presenter.js
    exports.push = function(document) {
    // ページを表示する際に、イベントを追加
    // itemが選択されたら、hrefで指定されたルーターを呼び出す
    doc.addEventListener('select', function(event) {
        var href = element.getAttribute('href');
        if (href) {
            return router.redirect(href);
        }
    });

    navigationDocument.pushDocument(doc);
};
    index.jade
    doctype xml

mixin grid-container
    grid
        header
        section
            lockup(href='/next-page')
                img(src='...')
                title タイトル

document
    head
    stackTemplate.bg
        banner
            title Welcom to AppleTV
        collectionList
            +grid-container
    루트와 모듈 관리를 이용하여 많은 페이지가 발생하더라도 분리 처리할 수 있는 기반을 다졌다.그리고 계층이 많아진 TVML도 제이드로 예쁘게 썼다.
    tvOS 개발에서는 위와 같이 구성을 조정하고, 배벨과 타입 스크립트 등을 활용한 ES6 시대 환경을 정비해 개발하는 것이 좋다.또 npm의 자산을 활용해 tvOS 개발을 더욱 탄력적으로 추진할 수 있다.
    (추후 샘플 업로드)

    주의점


    사용할 수 없는 라이브러리


    페이지 이동의 개념이 다르기 때문에 브라우저를 전제로 하는 프로그램 라이브러리는 사용할 수 없습니다.
    또 윈도우 대상이 없는 등 달라 사용할 수 없는 프로그램 라이브러리가 많아 주의가 필요하다.예를 들어 TVJS는 XMLHTTPRequest를 사용할 수 있지만 전 세계에 윈도우 대상이 있는 것을 전제로 하는 프로그램 라이브러리는 window.XMLHTTPRequest로 읽기 때문에 오류가 발생할 수 있다.
    이 경우 웹팩 등을 활용해 다음과 같이 전 세계에 윈도우 대상을 두고 로드해 읽을 수 있다.
    const superagent = require('imports?window=>{XMLHttpRequest:XMLHttpRequest}!superagent')

    프레임도 나오기 시작했어요.


    TVML용 리액트덤과 백본용 TVML로 대체한 샘플도 나오기 시작했다.
    앞으로의 발전을 기대하다.
    https://github.com/ramitos/react-tvml
    https://github.com/frankvanrest/TVJS-TVML-Backbone

    끝말


    어때?애플이 JS를 개발 환경에서 새롭게 적용한 것은 자바스크립트의 세계도 꾸준히 확대되고 있음을 실감케 한다.
    나는 tvOS 응용 프로그램의 개발은 현지 응용 경험이 없는 개발자도 참전하기 쉬운 환경이 가지런한 플랫폼이라고 생각한다.차라리 웹 개발 지식을 충분히 활용할 수 있는 영역이죠?JS도 쓸 수 있고 스위프트도 쓸 수 있고!tvOS 개발에 조금이라도 관심이 있었으면 좋겠어요.

    참고 자료


    App Programming Guide for tvOS: The New Apple TV
    https://developer.apple.com/library/prerelease/tvos/documentation/General/Conceptual/AppleTV_PG/index.html#//apple_ref/doc/uid/TP40015241-CH12-SW1
    TVJS Framework Reference
    https://developer.apple.com/library/tvos/documentation/TVMLJS/Reference/TVJSFrameworkReference/index.html
    Apple TV Markup Language Reference: About TVML
    https://developer.apple.com/library/tvos/documentation/LanguagesUtilities/Conceptual/ATV_Template_Guide/index.html
    Apple TV Human Interface Guidelines - Apple Developer
    https://developer.apple.com/tvos/human-interface-guidelines/
    TVJS의 콘솔은 tvOS 디버깅 중입니다.log 보기 방법 - Qita
    http://qiita.com/jumbOS5/items/2d557c60c69924e76ee9
    ES6 Promise 객체에 대한 가장 자세한 이해
    WSL2의 Ubuntu에서 Yocto(QEMU 사용) 시도

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage