JS50행으로 쓸 수 있는 SlideShare 리모컨


컨트롤러 앱 화면


움직이는 대상이 되는 슬라이드계 서비스

전략



  • 앱에서 페이지 넘길 수 있는 OSS 을 만들었다

  • 전용 가젯 는 최소 3000엔 하고 잃기에서 만든

  • 머리 좋게 TED 스타일 프리젠 테이션을하는 방법 에서 도야 얼굴 할 때 편리

  • 소재


  • nodejs
  • milkcocoa-node
  • Monaca (Apache Cordova)
  • selenium-webdriver

  • 사양



    클라이언트 앱 (컨트롤러)



    ...
  • 버튼을 누르면 milkcocoa의 rightBtnServer/leftBtnServer에 sendAPI를 실행합니다.

    사이트를 조작하는 에이전트


  • milkcocoa-node에서 send 이벤트를 수신하고 selenum-webdriver에서 화살표 키의 좌우 이벤트를 강제로 발화

  • 만드는 법



    앱 측





    (32행)
  • 이런 느낌의 View와 이벤트 리스너를 설치
  • 거의 Monaca의 코드이므로 실제로 쓴 것은

  • html
        <div id="r" class="pull-right">▶︎</div>
        <div id="l" class="pull-left">◀︎</div>
        <script>
            var milkcocoa = new MilkCocoa("https://io-ai02l9tke.mlkcca.com");
    
            $("#r").click(function(e){
                milkcocoa.dataStore("rightButtonServer").send({});        
            });
    
            $("#l").click(function(e){
                milkcocoa.dataStore("leftButtonServer").send({});        
            });
        </script>
    
    

    얼마입니까?

    에이전트 측



    slidemilk.js
    
    var webdriver = require('selenium-webdriver'),
        argv = require('argv'),
        MilkCocoa = require('./milkcocoa-node'),
        By = webdriver.By,
        milkcocoa = new MilkCocoa("https://io-ai02l9tke.mlkcca.com"),
        chromeDriver = new webdriver.Builder().usingServer('http://localhost:4444/wd/hub')
                            .withCapabilities( webdriver.Capabilities.chrome() )
                            .build();
    
    chromeDriver.get(argv.run().targets[0]);
    
    milkcocoa.dataStore("rightButtonServer").on("send", function(e){
        ( new webdriver.ActionSequence(chromeDriver) ).sendKeys(webdriver.Key.RIGHT).perform();
    });
    
    milkcocoa.dataStore("leftButtonServer").on("send", function(e){
        ( new webdriver.ActionSequence(chromeDriver) ).sendKeys(webdriver.Key.LEFT).perform();
    });
    
    

    slidemilk.js

    (18행)
  • webdriver 시작
  • 타겟 URL을 Chrome에서 열기
  • send 이벤트가 오면 키보드 이벤트를 발화

  • ※slidebean, reveal.js 베이스 슬라이드, google slide도 전부 이것으로 조작 가능

    감상


  • 처음에는 물리 버튼이 필요할까 생각하고 Edison라든지 조사하고 있었다
  • iWatch와 AndroidGear를 즐기십시오
  • WEB 표준 기술로 프로토 타이핑이 끝나 버린다
  • 엔지니어는 점점 서비스를 가치 검증하고 출자를 받으면 좋다

  • shogochiai/slidemilk

    좋은 웹페이지 즐겨찾기