iOS向けレガシーコントローラ（その4、応用編）


# はじめに

iOSデバイスをPCのコントローラとして使うため、以下の3つのレガシーコントローラViewを作りました。
_数年前に作ったものですが、新たにSwiftUI向けのラッパーを作りましたので、今回まとめておきます。_


1. 十字ボタン　[<その1>記事](https://qiita.com/nak435/items/89d18abb68ba1970142c)
2. ジョイスティック　[<その2>記事](https://qiita.com/nak435/items/023678c72514891e9766)
3. 回転ツマミ（ロータリーエンコーダー）　[<その3>記事](https://qiita.com/nak435/items/3b29ef77c7b62951992c)

今回は、その4として、PCコントローラのUIを作成する応用編。


<img width="150" alt="iPhone.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/c656cad9-559c-8d7a-d419-31121421c355.gif" />


# PCコントローラ

PC（ここではMacを想定）を操作する上で必要な機能として、以下の機能を想定している。

<ol>
    <li type="1">キーボード系機能
		<ul>
			<li type="sqare">任意のキーコードシーケンスの送出（Write / Press / Release）<br>　</li>
		</ul>
	</li>
    <li type="1">マウス系機能
	<ul>
			<li type="sqare">マウスポインタ移動（上下 / 左右）</li>
			<li type="sqare">マウスホイール操作（垂直 / 水平）</li>
			<li type="sqare">マウスボタン操作（左 / 中央 / 右ボタン の Down / Up）<br>　</li>
		</ul>
	</li>
    <li type="1">カーソル移動系機能
		<ul>
			<li type="sqare">矢印キー（<b>↑</b> / <b>↓</b> / <b>←</b> / <b>→</b>）</li>
			<li type="sqare">Home / End</li>
			<li type="sqare">Top(⌘↑) / Bottom(⌘↓)</li>
			<li type="sqare">Page Up / Page Down</li>
			<li type="sqare">Tab / BackTab(⇧tab)<br>　</li>
		</ul>
	</li>
    <li type="1">検索系機能
		<ul>
			<li type="sqare">検索(⌘F) / 次検索(⌘G) / 前検索(⇧⌘G)<br>　</li>
		</ul>
	</li>
    <li type="1">ズーム機能
		<ul>
			<li type="sqare">拡大(⌘+) / 縮小(⌘-) / 原寸100%(⌘0)<br>　</li>
		</ul>
	</li>
    <li type="1">メディア系機能
		<ul>
			<li type="sqare">メディア選択　次 / 前 / ポーズ</li>
			<li type="sqare">音量　上げ / 下げ / ミュート<br>　</li>
		</ul>
	</li>
    <li type="1">ブラウザ系機能
		<ul>
			<li type="sqare">ページ　戻る / 進む / ホームページ<br>　</li>
		</ul>
	</li>
</ol>

上記の操作について、どのコントローラが相性がよいか（使い易いか）を検討した。


# 適用するレガシーコントローラ

|機能群|#|機能|適用可能なコントローラ|
|:-|:-:|:-|:-|
|キーボード系機能 |1.1|任意のキーコードシーケンスの送出（Write / Press / Release）|-（Button）|
|マウス系機能 |2.2|ポインタ移動（上下 / 左右）|・十字ボタン<br>・回転つまみ|
| |2.3|ホイール操作（垂直 / 水平）|・十字ボタン<br>・回転つまみ|
| |2.4|ボタン操作（左 / 中央 / 右ボタン の Down / Up）|-（Button）|
|カーソル移動系機能|3.2 |矢印キー（<b>↑</b> / <b>↓</b> / <b>←</b> / <b>→</b>）|・十字ボタン<br>・回転つまみ|
| |3.3|Home / End|・十字ボタン<br>・回転つまみ|
| |3.4|Top(⌘↑) / Bottom(⌘↓)|・十字ボタン<br>・回転つまみ|
| |3.5|Page Up / Page Down|・十字ボタン<br>・回転つまみ|
| |3.6|Tab / BackTab(⇧tab)|・十字ボタン<br>・回転つまみ|
| 検索系機能|4.2|検索(⌘F) |-（Button）|
| |4.3|次検索(⌘G) / 前検索(⇧⌘G)|・十字ボタン<br>・回転つまみ|
|ズーム機能 |5.2|拡大(⌘+) / 縮小(⌘-)|・十字ボタン<br>・回転つまみ|
| |5.3|原寸100%(⌘0)|-（Button）|
|メディア系機能 |6.2|メディア選択　次 / 前|・十字ボタン<br>・回転つまみ|
| |6.3|ポーズ|-（Button）|
| |6.4|音量　上げ / 下げ|・十字ボタン<br>・回転つまみ|
| |6.5|ミュート|-（Button）|
|ブラウザ系機能 |7.2|ページ　戻る / 進む|・十字ボタン<br>・回転つまみ|
| |7.3|ホームページへ移動|-（Button）|


ジョイスティックが一つも登場しないのは意外だった。マウスカーソルの移動に使えるのだが、それは実物のマウスでよいし、PCコントローラでマウスカーソルを移動したい場面は、水平もしくは垂直に正確に1ドット、2ドットの移動を行うことであるため、ジョイスティックでは不向きだ。

十字ボタンと回転つまみ（ロータリーエンコーダー）はどちらも使えるが、十字ボタンは指を押して離してを繰り返すのに対して、ロータリーエンコーダーは指を離さず円を描くことで操作できるため、連続して同じ操作を繰り返す場合に有利である。



# iPhone用コントローラ画面

iPhoneは画面サイズが小さいため、タブで機能を切り替えることにした。


|タブ|UIイメージ|説明|
|:-|:-|:-|
|タブ共通機能|![iPhone-Common.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/f0db9b79-89f3-7ce2-081d-0f192ad9ce83.png)|上部の8つのボタンは、どのタブからも共通で使えるキーボード系の機能。Esc, Delはwrite、Shift, Control, Option, Commandはその他の機能との併用するため、press/release式とした。QuickとSlowは、操作の反応を変える機能で、例えば、ロータリーエンコーダーなら、通常は一周24クリックをSlow時は一周8クリック、Quick時は一周60クリックと変化させる等|
|マウス系機能|![iPhone-Mouse.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/d697ab15-6249-d42c-95f5-74fee9a99327.png)|Left, Middle, Rightのマウスボタンはマウスドラッグ等での併用のため、press/release式。マウス移動、ホイール移動は水平、垂直を別々のコントロールとした|
|カーソル移動系機能|![iPhone-Cursor.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/2360fbbe-c29a-d087-9795-553d0a092de3.png)|カーソル移動は十字ボタンとして、上下左右のカーソル移動を確実に操作できるようにした。Quick/Slowで移動数も変化。前検索/次検索とTab/backTabも十字ボタン。前ページ/次ページはロータリーエンコーダーとした|
|メディア系/ブラウザ系機能|![iPhone-Media.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/25ae9e56-7a8b-1801-687f-55733e8310de.png)|十字ボタンで前/次、上/下を操作できるようにした|

十字ボタンを多用しているが、ほとんどが、左右のボタンだけ、上下のボタンだけで使っており、他の方向イベントは無視する。このため、**十字ボタン**を改修して、必要とする方向を指定し、それ以外のイベントは通知しないように機能追加した。（[<その1>改訂履歴](https://qiita.com/nak435/items/89d18abb68ba1970142c#改訂履歴) 参照）

十字ボタンとロータリーエンコーダーの使い分けは、操作性の好みもあるので、使ってみてコントロールを取り替えることで対応するつもりである。
_使うコントロールを自由に変えることができるのも、ソフトウェアならではの利点である。_




# iPad用コントローラ画面

iPhoneのコードそのまま使い、iPhoneを横に3つ並べたデザインとした。
（_広い画面を有効に使えておらず、手抜き感があるが・・・_）

![iPad_m.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/cb4c5575-b735-68f2-a49d-d2bea1ae28d2.png)

_その後、**Find**を回転つまみに変更している。iPhone用も。_


![iPgone1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/8c0d3abb-daca-2ce8-c18a-26a1894edda8.png) ![iPhone2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/283293/1b0cf4d2-9556-72b8-4395-3da2157e4171.png)




# デモ動画

iPhone用のUIを実行させた動画。
（_単にクリック/ドラッグしているだけで、実際のPC操作とは無関係_）
<p>


<iframe width="214" height="446" src="https://www.youtube.com/embed/CiO6NTEiXRo?rel=0" title="iOS向けレガシーコントローラ（iPhone版）" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</p>

<hr>
今回、iPhone用、iPad用のUIを設計しました。今後、PC制御部分を作り込んでいきます。<br>
以上