MIDI로 포토샵을 조작하는 터미널 등을 보니 재미있어 보이기 때문에 어쨌든 After Effects도 MIDI를 받아들여 제어해 보았다.
AE를 전제로 썼지만 확장이 거의 없어 AE 이외의 Adobe 제품도 사용할 수 있다.

필요한 물건

AfterEffects

Node.jsv6 이하 (fs 주위의 MIDI 라이브러리 사용)

nanoKONTROL2 4000엔 정도

전체도

이번에는 노드.js 듣기 MIDI에서 실행되는 웹 소켓 서버에 설정하여 그것을 받아들이는 형식으로 확장합니다.

소스는 여기서 공개한다.
https://github.com/matsurai25/zxp-midi

server

const app    = require('http').createServer();
const io     = require('socket.io')(app);

app.listen(39393);
io.on('connection', function(socket) {
  // 接続された
  console.log('connection established');
});

Node.js로 서버를 만듭니다.

const Korg   = require('./korg.js');
const korg   = new Korg();

let timer;
// 全イベントを聴く
korg.on('*', function(event, value) {

  // フェーダーのイベントが送られ過ぎないように、setTimeoutで
  // イベント後一定期間内に再度イベントがった場合はそのイベントを無視するようにしている。
  if (timer !== false) {
      clearTimeout(timer); // setTimeoutを解除
  }

  timer = setTimeout(function() {
    // webSocketでイベントを送信
    io.emit('midi-event', {
      time:moment().format('HH:mm:ss'),
      type:event.split(':')[0],
      channel:event.split(':')[1],
      value:value
    });
  }, 50);
})

MIDI 활동을 받아서 소켓으로 보냅니다.korg.js에서 약간 변경korg-nano되어 나노콘트롤2의 MIDI 매핑을 받았다.
이번 쇠퇴는 활동이 너무 많이 발송되고 AE 측의 동작이 무거워졌기 때문에 set Timeout에서 짧은 시간 내에 활동이 너무 많이 발송되는 것을 제한했다.

extension

Adobe의 확장은 HTML+js로 다양한 물건을 만들 수 있습니다.
즉 앞부분의 다양한 물건을 사용할 수 있다는 것이다.
아무튼 괜찮은 개발 패키지를 만들었으니 이번엔 이걸로 하자
https://github.com/matsurai25/adobe-html5-panel-template
jade/scss 등의 컴파일, manfest 파일의 설정, zxp 서명, 시작을 작성할 수 있습니다.

vue.js

이번에 사용한 것은Vue.js 어떤 활동이 있는지 똑똑히 볼 수 있다.
https://jp.vuejs.org/
일본어 문서가 있어서 알기 쉽습니다.

const Vue = require('vue/dist/vue.common.js'); // Vue
const io = require('socket.io-client/dist/socket.io.js');

module.exports = () => {
  const socket = io('http://localhost:39393');
  var app = new Vue({
    el: '#app',
    data: {
      messages: []
    },
    created: function() {
      socket.on('midi-event', (data) => {
        console.log(data);
        this.$data.messages.unshift(data);
      });
    }
  });
};

new Vue() 다양한 목록 표현과 이벤트 설정을 제공합니다.created에서 지정한 함수는 마운트가 완료될 때 실행됩니다.socket.on(key, function)에서 지정한 키의 플러그인이 전송될 때 처리됩니다.
이것은 먼저 받은 jsonunshift을 message에 넣고 배열한 것이다.DOM 면이 자동으로 업데이트됩니다.

    #app
      .message(v-for='message in messages')
        .time
          | {{ message.time }}
        .type
          | {{ message.type }}
        .channel
          | {{ message.channel }}
        .value
          | {{ message.value }}

DOM의 경우 이러한 느낌으로 미리 지정됩니다.
몸매는 scss로 좋은 느낌을 줍니다.

확장성

_slider라는 제어점을 만들고 layer라는 이름의 도면층을 만들고 그 위에 슬라이더 제어를 가득 넣은 다음 모든 도면층에서 참조합니다.

var s = comp('_slider').layer('slider').effect('slider:'+n)(1);

를 참고하십시오.

어쨌든 기분 좋은 물건이야.

var k = comp('_slider').layer('slider').effect('slider:1')(1);
effect("色相/彩度")(7)+index*20 + 5*k;

적당히 채우기 ● 페이드인 페이드로 색상 효과를 조절한다.
앱을 여기에 두고 자유롭게 사용하세요(CC2014)
https://github.com/matsurai25/zxp-midi/blob/master/AE_MIDI_SLIDER_sample.aep

완성

무슨 뜻인지 모르겠지만, MIDI 액세서리로 After Effects의 확장을 조작하라고 썼습니다.유쾌하다.pic.twitter.com/HFlnHrymOA — matsurai (@matsurai25) 2017년 2월 25일

감상

주위를 확장하는 보도가 적다.

manifest.xml에 필요 없는 jsx 읽기라고 쓰여 있는데 CSInterface가 움직이지 않아서 한동안 고민했습니다.

AE에서 수치를 실시간으로 제어하고 싶지만 스크립트를 하나하나 깨물고 실행하면 속도가 어렵다는 인상을 준다.

선택한 속성의 수치를 높이는 단축키가 있으면 재현할 수 있다.

대본의 단축키는 귀찮은 인상을 주는데 이와nanoPAD를 사용하면 작업 효율도 높아진다.

스크립트가 전역을 공유하기 때문에 이벤트Emitter 등을 글로벌에 넣고 socket에 알리면 다른 스크립트(by노파

를 구독할 수 있습니다.
웹소켓 서버를 인터넷에 놓고 어떤 키로 요청하면 보내는 스크립트를 손에 넣을 수 있다.스크립트 파일은 항상 일회용 코드로 변해서 손에서 관리하지 않아도 된다.이거 재밌겠다, 한가할 때 해보자-matsurai(@matsurai25)2017년 2월 25일
그게 다야.