EP.1では、旧エディターをベースにN32B Slimのエディター基本操作を解説しました。その後、SHIKからまったく新しいWebエディターがリリースされています。UIデザインが一新され、ナビゲーション構造やプリセット管理の考え方が大きく変わりました。
このエピソードでは、新しいWebエディター（v3.4.1）の全体像を紹介します。旧エディターとの主な違いを押さえつつ、各ページの役割と新機能を見ていきます。
N32B Slim 商品詳細
- 新旧エディターの違い
- Devicesページ
- Editorページ
- ノブモードの変更点
- マクロの詳細設定
- MIDIルーティング
- Presetsページ
- MIDI Monitor
- Settings
- 実践的なヒント
- Takazudo感想
新旧エディターの違い
まず、旧エディターと新エディターの大きな違いを整理しておきます。
旧エディターは、1画面にすべての機能を詰め込んだ構成でした。メインビュー、エディターコントロール、アクションパネルが1つの画面に並び、ノブの編集からプリセット保存まで同じ画面で操作していました。
新エディターは、ページベースのナビゲーションを採用しています。機能がページ単位で分離され、左サイドバーのアイコンで切り替える設計になっています。
- Devices: デバイスの接続・管理
- Presets: プリセットライブラリ
- Editor: ノブの編集（旧エディターのメインビュー + 右パネルに相当）
- MIDI Monitor: MIDIメッセージのリアルタイムモニタリング（新機能）
- Settings: アプリ設定
旧エディターのURLは shik-tech.github.io/N32B-Web-Editor/build/ でしたが、新エディターは editor.shik.tech に移行しています。推奨ブラウザは引き続きChromeです。
Devicesページ
新エディターを開くと、最初に表示されるのがDevicesページです。ここでN32B Slimとの接続を管理します。
ページは2つのセクションに分かれています。
- Connect Your SHIK Device: USBケーブルでデバイスを接続するよう案内するエリア。実機を接続すると自動的に認識されます
- Add Demo Device: 実機がなくてもエディターを試せるデモモード。SHIK N32B、SHIK N32B V3、SHIK N32B SLIMの3機種から選択できます
デモデバイスを追加すると、デバイスカードが表示されます。ファームウェアバージョンの表示（v1.1.0 (Latest)のように表示）、ノブレイアウトのプレビュー、EditとPresetsボタンが表示され、ここからEditorページやPresetsページに直接移動できます。
旧エディターではデモモードの概念がありませんでしたが、新エディターではデバイスなしで機能を試すことができるようになっています。
Editorページ
Editorページは、旧エディターのメインビューとエディターコントロールに相当する、ノブ設定の中心となるページです。
画面は大きく3つのエリアで構成されています。
ツールバー
画面上部のツールバーには、以下の機能が並んでいます。
- MIDI Routing: MIDIスルー設定をダイアログで表示（後述）
- Send to device: エディターの設定をデバイス本体に書き込み
- Load: PCに保存されたプリセットファイルを読み込み
- Save: 現在の設定をJSONファイルとしてPCに保存
- Export PDF: フェイスプレートPDFの出力
旧エディターでは左パネルに配置されていたアクション系の機能が、ツールバーに集約されました。
ノブグリッド
中央のエリアには、N32B Slimのノブが4列 x 8行のグリッドで表示されます。n1〜n32のラベルが付いており、クリックで選択できます。旧エディターと同様にズーム機能も利用可能です。
ノブ設定パネル
右側のパネルでは、選択したノブの詳細設定を行います。構成は旧エディターから大きく強化されています。
ノブ名: テキストフィールドでノブ名を設定できます。名前の横に7セグメントプレビューボタンがあり、N32B Slim本体の3桁ディスプレイでの表示をプレビューできます。文字数は10文字まで（7セグメント表示では省略されます）。
マクロシステム: 各ノブにMacro 1〜Macro 4の4つのマクロスロットがあります。1つの物理ノブを回すと、有効なマクロがすべて同時に発火します。各マクロは独立してMode、Channel、CC番号、Range、Output先を設定できるため、例えばノブ1つでフィルターのカットオフ（CC74）とレゾナンス（CC71）を同時に操作したり、USBとTRSに異なるメッセージを同時送信するといったことが可能です。旧エディターでは「Macro Control Change」モードで2つのCCを同時送信できましたが、新エディターではすべてのノブがデフォルトで4マクロに対応し、CCだけでなくNRPNやSysExなど異なるメッセージタイプも混在させられます。各マクロは個別に展開・折りたたみ可能なアコーディオンUIになっています。マクロシステムの詳しい活用方法はEP.3で解説します。
ノブモードの変更点
各マクロのModeドロップダウンで、送信するMIDIメッセージの種類を選択します。
新エディターで選択できるモードは以下の通りです。
- Disabled: 無効化
- Control Change: 標準7ビットCC
- NRPN: Non-Registered Parameter Number
- RPN: Registered Parameter Number
- 14-bit Control Change: 旧エディターの「High Resolution Control Change」から名称変更。4095段階の高解像度CC
- Program Change: プログラムチェンジ
- Mono After Touch: モノアフタータッチ
- Poly After Touch: ポリアフタータッチ
- System Exclusive: SysExメッセージの送信（新機能）
旧エディターとの主な違いは2点です。「Macro Control Change」モードは廃止され、代わりに4マクロシステムで同等以上の機能を実現しています。また、System Exclusiveモードが新しく追加されました。
マクロの詳細設定
各マクロには、モード以外にもいくつかの設定項目があります。
- Channel: MIDIチャンネル。Global Channelを使用するか、個別にチャンネルを指定できます
- Control Number: 送信するCC番号
- Range: 最小値・最大値をスライダーで設定（0〜127）。デュアルスライダーで直感的に範囲を指定できます
- Invert values: 値を反転。説明テキストには「Reverses knob direction: clockwise decreases MIDI value, counter-clockwise increases it.」と表示されます
- Pick Up Mode: N32B Slimの新機能。突然の値の変化を防ぐモードです。ノブの物理的な位置が現在のMIDI値と一致するまでメッセージを送信しません。受信側のデバイスが現在値を送り返す必要があります
- Outputs: USBとTRSの出力をそれぞれ個別にオン・オフできます
Pick Up Modeは旧エディターにはなかった新機能です。プリセットを切り替えた直後など、ノブの物理位置とMIDI値がずれている状況で、ノブを回した瞬間に値がジャンプするのを防ぎます。
コピー&ペースト機能
ノブ設定パネルの右上にあるメニューボタンから、Copy/Paste機能を使えます。
- Copy Knob: ノブの全設定をコピー
- Paste Knob: コピーした設定を別のノブに貼り付け
- Paste Special…: 設定の一部だけを選択して貼り付け
- Reset to Default: ノブ設定をデフォルトに戻す
マクロ単位でもコピー＆ペーストが可能です。各マクロのヘッダーにあるメニューから操作できます。多くのノブに同じ設定を適用する場合に便利です。
MIDIルーティング
ツールバーのMIDI Routingボタンをクリックすると、MIDIスルー設定のダイアログが開きます。
旧エディターではドロップダウンで選択する形式でしたが、新エディターではカード形式のUIに変更されています。各オプションには入力と出力のアイコンが表示され、ルーティングの方向が視覚的に分かりやすくなっています。
選択できるルーティングは以下の6種類です。
- OFF: プリセットレベルのMIDIスルーなし
- TRS → TRS: TRS入力をTRS出力にルーティング
- TRS → USB: TRS入力をUSB出力にルーティング
- USB → USB: USB入力をUSB出力にルーティング
- USB → TRS: USB入力をTRS出力にルーティング
- USB ↔ TRS（双方向）: USB入力→TRS出力とTRS入力→USB出力を同時に設定
旧エディターの「TRS + USB（両方）」に相当する設定は、USB ↔ TRSの双方向ルーティングです。また、旧エディターにはなかったUSB → USBルーティングが追加されています。
Presetsページ
Presetsページは、デバイス本体に保存されているプリセットを管理するページです。
旧エディターではアクションパネルの中にあったStore PresetやSyncの機能が、独立したページになりました。
画面にはDevice Preset Libraryとして10個のプリセットスロット（Preset 1〜Preset 10）がカード形式で表示されます。各カードには以下の操作があります。
- Sync: デバイスから該当スロットのプリセットを読み込み
- Use: 読み込んだプリセットをエディターのワークスペースにコピー
ページ上部のSync Allボタンを使えば、デバイスの全プリセットを一括で読み込むこともできます。
旧エディターのLoad Preset（ファイルからの読み込み）とSave Preset（ファイルへの保存）は、EditorページのツールバーにあるLoadボタンとSaveボタンに移動しています。つまり、「PCファイルとの入出力」はEditorページ、「デバイス本体のプリセット管理」はPresetsページ、というように役割が整理されています。
MIDI Monitor
MIDI Monitorは新エディターで追加された新機能です。MIDIメッセージをリアルタイムで監視するツールです。
画面上部のツールバーには以下の操作ボタンが並んでいます。
- MIDI Inputs: 監視するMIDI入力デバイスを選択
- グラフ切り替え: テーブル表示とグラフ表示を切り替え
- Pause: モニタリングの一時停止
- Clear all data: 記録されたデータをクリア
- Settings: モニターの表示設定
MIDI入力デバイスを選択すると、受信したMIDIメッセージがリアルタイムで表示されます。N32B Slimのノブを回したときの出力確認や、接続した外部MIDI機器からの信号確認などに使えます。
旧エディターにはこの機能がなかったため、MIDIメッセージの確認には外部ツール（MIDI MonitorアプリやDAW）が必要でした。新エディターでは、エディター内で完結できるようになっています。
Settings
左サイドバー下部の歯車アイコンからアクセスできるSettingsダイアログでは、以下の設定が可能です。
- Enable logs: ログ出力のオン・オフ。デバッグやトラブルシューティングに使用します
- Web App Firmware: エディターのバージョン表示（現在v3.4.1）
実践的なヒント
新エディターを使いこなすためのポイントを紹介します。
- デモモードで先に試す: 実機を接続する前に、デモデバイスでエディターの操作に慣れておくと効率的です。N32B、N32B V3、N32B SLIMの3機種に対応しているので、自分のデバイスに合ったものを選んで試せます
- マクロを活用する: 旧エディターのMacro Control Changeモードは1ノブ2CCまででしたが、新エディターでは1ノブ4マクロまで拡張されています。より複雑なMIDIルーティングが可能です
- コピー&ペーストで効率化: 同じ設定を複数のノブに適用する場合、1つ設定してからCopy → Paste Knobで複製できます。Paste Specialを使えば、特定の設定だけを選択的に貼り付けることも可能です
- Pick Up Modeを活用する: プリセット切り替え後の値ジャンプが気になる場合は、Pick Up Modeを有効にしておくと安全です
- MIDI Monitorで確認する: 設定が意図通りに動作しているか、MIDI Monitorページでリアルタイムに確認できます。外部ツール不要で、エディター内で完結します
Takazudo感想
はじめWebエディタを見ていたとき、Pick Up Modeというのが無いな？と思ったのですが、しばらくして、自分は誤って旧バージョンのN32B（Slimじゃない方）を選んでいたことに気付きました。つまるところ、そういった機能はバージョンアップに加え、ソフトウェア的な実装で補われているということを実感します。
こういったMIDIコントローラーを使っていると、そういうプリセット切り替えを行った際、いきなり値が飛んでしまったりするんですよね。例えば1プリセット目は1トラック目のボリュームに割り当てていたノブを、2プリセット目は2トラック目のボリュームに割り当てていたとします。
1つ目のプリセットを使っているとき、ノブを全開にしていたとして、2つ目のプリセットでそのノブをちょっとでも動かすと、いきなり最大ボリュームになってしまう（ノブの位置としてはマックス状態だから）……というややこしい事情があるわけなんですが、そういうのをなんとかしてくれるのがPick Up Modeでして、MIDIコントローラーとしてかなり嬉しい作りになっています。ストレスフリーに使えるように設計されているという配慮を感じますね……！
EP.2はここまで。新しいWebエディターの全体像と、旧エディターからの変更点を紹介しました。次のエピソードでは、マクロ設定の応用や実際のセットアップ例を掘り下げていきます。