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

9721 ワード
JavaScript Qiita WebMIDIAPI Qiita テキストリンク

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

スマホ

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

https://github.com/aike/QMidiCon