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

Qiitaのスライドモード

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

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

---

リモートでめくりたい

• Chrome拡張機能を使えばできそう
• JSなのでWeb MIDI APIが使える
• MIDI note on を受けたら⏪⏩ボタンをクリック

---

できた

---

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

---

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. シ）で前のページ

---

スマホ

• Web MIDI Browser by Takashi Mizuhiki
• Midisentation by aike

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

---

https://github.com/aike/QMidiCon