Qiita
JavaScript
WebMIDIAPI

QiitaのスライドをMIDIでめくる

More than 1 year has passed since last update.


Qiitaのスライドモード

投稿記事がそのままスライドに


  • シンプルで便利

  • フルスクリーンでプレゼンにも使える



リモートでめくりたい


  • Chrome拡張機能を使えばできそう

  • JSなのでWeb MIDI APIが使える

  • MIDI note on を受けたら⏪⏩ボタンをクリック



できた


https://vine.co/v/5B51OYl130r

vine



manifest.json

{

"manifest_version": 2,
"name": "QMidiCon",
"description": "MIDI control pager for Qiita slide mode",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://qiita.com/*"],
"js": ["main.js"]
}
]
}




main.js

(function() {

function nextSlide() {
var btn = document.querySelectorAll(".slide_controller_btn");
btn[1].click();
}

function prevSlide() {
var btn = document.querySelectorAll(".slide_controller_btn");
btn[0].click();
}

var MidiInterface = function() {
var self = this;

navigator.requestMIDIAccess().then(
function(midi) {
if (midi === undefined) return;
for (var input of midi.inputs.values()) {
input.onmidimessage = self.onMidi;
}
},
function(msg) { console.log(msg); });

this.onMidi = function(e) {
if (e.data.length >= 3) {
if (((e.data[0] & 0xF0) === 0x90) && (e.data[2] > 0)) {
// note on
if (e.data[1] % 2 === 0) { // note number
nextSlide();
} else {
prevSlide();
}
}
}
}
}

var midi;
midi = new MidiInterface();
})();




導入方法


  • download https://github.com/aike/QMidiCon

  • Chromeの「環境設定」→「拡張機能」

  • 「デベロッパーモード」をチェック

  • 「パッケージ化されていない拡張機能を読み込む」

  • manifest.jsonとmain.jsがあるフォルダを選択

  • Qiita側の設定不要!(他人のスライドでもOK)



実行方法


  • MIDI機器を接続

  • Chrome再起動

  • Qiitaのスライドを開く(フルスクリーン可)

  • ノートナンバーが偶数(ex. ド)で次のページ

  • ノートナンバーが奇数(ex. シ)で前のページ



スマホ

を使えばMIDI over BLEで接続したiPhoneからも操作できる



https://github.com/aike/QMidiCon