はじめに
iOSデバイスをPCのコントローラとして使うため、以下の3つのレガシーコントローラViewを作りました。
数年前に作ったものですが、新たにSwiftUI向けのラッパーを作りましたので、今回まとめておきます。
今回は、その4として、PCコントローラのUIを作成する応用編。
PCコントローラ
PC（ここではMacを想定）を操作する上で必要な機能として、以下の機能を想定している。
- キーボード系機能
- 任意のキーコードシーケンスの送出（Write / Press / Release）
- 任意のキーコードシーケンスの送出（Write / Press / Release）
- マウス系機能
- マウスポインタ移動（上下 / 左右）
- マウスホイール操作（垂直 / 水平）
- マウスボタン操作（左 / 中央 / 右ボタン の Down / Up）
- カーソル移動系機能
- 矢印キー（↑ / ↓ / ← / →）
- Home / End
- Top(⌘↑) / Bottom(⌘↓)
- Page Up / Page Down
- Tab / BackTab(⇧tab)
- 検索系機能
- 検索(⌘F) / 次検索(⌘G) / 前検索(⇧⌘G)
- 検索(⌘F) / 次検索(⌘G) / 前検索(⇧⌘G)
- ズーム機能
- 拡大(⌘+) / 縮小(⌘-) / 原寸100%(⌘0)
- 拡大(⌘+) / 縮小(⌘-) / 原寸100%(⌘0)
- メディア系機能
- メディア選択 次 / 前 / ポーズ
- 音量 上げ / 下げ / ミュート
- ブラウザ系機能
- ページ 戻る / 進む / ホームページ
- ページ 戻る / 進む / ホームページ
上記の操作について、どのコントローラが相性がよいか（使い易いか）を検討した。
適用するレガシーコントローラ
| 機能群 | # | 機能 | 適用可能なコントローラ |
|---|---|---|---|
| キーボード系機能 | 1.1 | 任意のキーコードシーケンスの送出（Write / Press / Release） | -（Button） |
| マウス系機能 | 2.2 | ポインタ移動（上下 / 左右） | ・十字ボタン ・回転つまみ |
| 2.3 | ホイール操作（垂直 / 水平） | ・十字ボタン ・回転つまみ |
|
| 2.4 | ボタン操作（左 / 中央 / 右ボタン の Down / Up） | -（Button） | |
| カーソル移動系機能 | 3.2 | 矢印キー（↑ / ↓ / ← / →） | ・十字ボタン ・回転つまみ |
| 3.3 | Home / End | ・十字ボタン ・回転つまみ |
|
| 3.4 | Top(⌘↑) / Bottom(⌘↓) | ・十字ボタン ・回転つまみ |
|
| 3.5 | Page Up / Page Down | ・十字ボタン ・回転つまみ |
|
| 3.6 | Tab / BackTab(⇧tab) | ・十字ボタン ・回転つまみ |
|
| 検索系機能 | 4.2 | 検索(⌘F) | -（Button） |
| 4.3 | 次検索(⌘G) / 前検索(⇧⌘G) | ・十字ボタン ・回転つまみ |
|
| ズーム機能 | 5.2 | 拡大(⌘+) / 縮小(⌘-) | ・十字ボタン ・回転つまみ |
| 5.3 | 原寸100%(⌘0) | -（Button） | |
| メディア系機能 | 6.2 | メディア選択 次 / 前 | ・十字ボタン ・回転つまみ |
| 6.3 | ポーズ | -（Button） | |
| 6.4 | 音量 上げ / 下げ | ・十字ボタン ・回転つまみ |
|
| 6.5 | ミュート | -（Button） | |
| ブラウザ系機能 | 7.2 | ページ 戻る / 進む | ・十字ボタン ・回転つまみ |
| 7.3 | ホームページへ移動 | -（Button） |
ジョイスティックが一つも登場しないのは意外だった。マウスカーソルの移動に使えるのだが、それは実物のマウスでよいし、PCコントローラでマウスカーソルを移動したい場面は、水平もしくは垂直に正確に1ドット、2ドットの移動を行うことであるため、ジョイスティックでは不向きだ。
十字ボタンと回転つまみ（ロータリーエンコーダー）はどちらも使えるが、十字ボタンは指を押して離してを繰り返すのに対して、ロータリーエンコーダーは指を離さず円を描くことで操作できるため、連続して同じ操作を繰り返す場合に有利である。
iPhone用コントローラ画面
iPhoneは画面サイズが小さいため、タブで機能を切り替えることにした。
| タブ | UIイメージ | 説明 |
|---|---|---|
| タブ共通機能 |  |
上部の8つのボタンは、どのタブからも共通で使えるキーボード系の機能。Esc, Delはwrite、Shift, Control, Option, Commandはその他の機能との併用するため、press/release式とした。QuickとSlowは、操作の反応を変える機能で、例えば、ロータリーエンコーダーなら、通常は一周24クリックをSlow時は一周8クリック、Quick時は一周60クリックと変化させる等 |
| マウス系機能 |  |
Left, Middle, Rightのマウスボタンはマウスドラッグ等での併用のため、press/release式。マウス移動、ホイール移動は水平、垂直を別々のコントロールとした |
| カーソル移動系機能 |  |
カーソル移動は十字ボタンとして、上下左右のカーソル移動を確実に操作できるようにした。Quick/Slowで移動数も変化。前検索/次検索とTab/backTabも十字ボタン。前ページ/次ページはロータリーエンコーダーとした |
| メディア系/ブラウザ系機能 |  |
十字ボタンで前/次、上/下を操作できるようにした |
十字ボタンを多用しているが、ほとんどが、左右のボタンだけ、上下のボタンだけで使っており、他の方向イベントは無視する。このため、十字ボタンを改修して、必要とする方向を指定し、それ以外のイベントは通知しないように機能追加した。（<その1>改訂履歴 参照）
十字ボタンとロータリーエンコーダーの使い分けは、操作性の好みもあるので、使ってみてコントロールを取り替えることで対応するつもりである。
使うコントロールを自由に変えることができるのも、ソフトウェアならではの利点である。
iPad用コントローラ画面
iPhoneのコードそのまま使い、iPhoneを横に3つ並べたデザインとした。
（広い画面を有効に使えておらず、手抜き感があるが・・・）
その後、Findを回転つまみに変更している。iPhone用も。
デモ動画
iPhone用のUIを実行させた動画。
（単にクリック/ドラッグしているだけで、実際のPC操作とは無関係）
今回、iPhone用、iPad用のUIを設計しました。今後、PC制御部分を作り込んでいきます。
以上