iPadでタッチ操作した部分をみえるようにしたい(外部モニタ出力・録画・キャプチャ)

知っている人は割といそうなのですが、自分の仕事で使用しそうな感じだったのでメモ。

やりたいことは、iPadで操作部分にカーソルを表示させたいということになります。iPadは操作する動画を撮ろうとすると、どこのボタンをタッチしているかが画面だけではわかりません。そのままでは、再撮(操作している様子を別カメラで撮影する)をする必要があります。

再撮も指で触っている様子がわかることもあり、臨場感があっていいのですが2つほど弱点があって、

  1. 指で画面を隠してしまい全体像が見えなくなってしまうことがある
  2. 撮影をする場所のライティングが難しくなる

が問題としてあります。ただ、これはマウスの使用により解決に向かいそうです。 以前のiOSではマウスが使用できませんでした。ただ、現在ではマウスを使用可能になっています。 そこで、マウスカーソルを画面上に表示させ操作動画(外部モニタ表示・キャプチャも含む)の作成ができるようにしたいと思います。

大したネタではないですけどね。

iPadBluetoothマウスを使用する

設定するのはBluetoothマウスになります。

今回使用したのはAmazonで購入した以下のものになります。

このマウスわりと良くて2.4GHzでもBluetoothでも動作するデュアル仕様のマウスになります。2.4GHzのドングルもマウスに埋め込める様になっています。値段もお安い感じで、厚さも薄いので持ち運びも便利です。あと、USBでの充電が可能なので電池の必要もありません。個人的にイケてないのは、表面がラバーっぽい質感というところでしょうか。この手のラバー素材は時間が立つとニチャニチャしてしまう可能性があるが微妙かなと思います。

また、iOSでマウスが使用できるようになったのはバージョンがiOS13以降です。今回使用したiPadiPad mini (第5世代)iOSバージョン13.3.1でした。

設定

では設定を始めていきます 手法は問いませんが、まずは【設定】を開きます。

f:id:ueponx:20200428005402p:plain

【設定】の中から【アクセシビリティ】をクリック(タップのほうが正しそうですが…)します。

f:id:ueponx:20200428005413p:plain

右側のペインに【アクセシビリティ】の設定が表示されたら【タッチ】をクリックします。

f:id:ueponx:20200428005420p:plain

右側のペインに【タッチ】の設定が表示されたら、一番上にある【AssitiveTouch】のオフの部分にタッチします。

f:id:ueponx:20200428141750p:plain

すると、右側のペインに【AssitiveTouch】の設定が表示されます。

f:id:ueponx:20200428141800p:plain

表示が変更されたら、一番上にある【AssitiveTouch】のトグルボタンをオンに変更します。これを行うと画面上にホームボタンのようなボタンを追加することができるのですが、これの機能を使用してマウスカーソルを表示させているようです。

f:id:ueponx:20200428152553p:plain

そのまま、【AssitiveTouch】のペインにある【デバイス】をクリックします。

f:id:ueponx:20200428005427p:plain

右側のペインに【デバイス】の設定が表示されます。すると【Bluetoothバイス…】というメニューが表示されるのでクリックします。ここでBluetoothのデバイス登録を行うことができます。(事前にiPad本体のBluetoothをONにしておきましょう)

ここをクリックしたあとにマウス(Bluetoothバイス)をペアリングモードに変更して待機します。

f:id:ueponx:20200428005432p:plain

少し時間がたつと見つかったデバイスが表示されます。デバイスによってはPinの入力を求められることがあります。今回使用したマウスでは求められましたが0000を入力したところ無事に認識が行われました。

この時点でBluetoothマウスは使用できるようになります。

f:id:ueponx:20200428005441p:plain

マウスカーソル(ポインターのスタイル)とカラーの変更

ここまでの設定が終わったら、一階層上の【AssitiveTouch】のペインに戻ります。今度は【ポインターのスタイル】をクリックします。

f:id:ueponx:20200428005450p:plain

右側のペインに【ポインタのスタイル】の設定が表示されます。上のバーがポインタ(カーソル)の【サイズ】、下のプルダウンがポインタの【カラー】になります。ここは好みの設定にしてください。

f:id:ueponx:20200428005456p:plain

ポインタ表示時に【AssitiveTouch】ボタンを消去する

マウスカーソルを表示する設定を行うと、マウスカーソルが表示されているときには常に【AssitiveTouch】のボタンが表示されてしまします。そこでマウスカーソルのみが表示されるように設定します。

アクセシビリティ】の【AssitiveTouch】のペインから【メニューを常に表示】がオンになっているので、クリックしてオフにします。

f:id:ueponx:20200428152739p:plain

これで、マウスカーソルが表示されているときには【AssitiveTouch】のボタンは非表示となります。ただし、マウスをiPadに接続していない場合には、必ず【AssitiveTouch】のボタンが表示されるという副作用もあります。流石にこれは微妙なので更に設定を行います。

アクセシビリティ】の【AssitiveTouch】のペインから【待機状態時の不透明度】をクリックします。

f:id:ueponx:20200428005513p:plain

すると、ボタンの不透明度の設定を行うことができます。この値は最小が15%までしか設定はできませんが、こうすることでかなり目立ただなくすることはできます。これが限界のようです。

f:id:ueponx:20200428005518p:plain

これで概ねマウスカーソルの表示に関する設定ができました。これで、外部ディスプレイなどに表示した際にどの操作をしたかを見てもらうことができるかと思います。

キャプチャ時にマウスカーソル(ポインタ)が消える?

これで一見問題はなくなったようにおもうのですが、マニュアルなどを作成するときの画面キャプチャを撮ると、マウスカーソルが消えるという状態になります。

その場合には次の手順で画面キャプチャを行います。

通常の画面キャプチャは本体の【ホームボタン】+【ロックボタン】の同時押しですが、マウスカーソルを含める場合にいはマウスの【右ボタン】をクリックして出てくるキャプチャ機能(【AssitiveTouch】ペインの【最上位メニューをカスタマイズ】の機能で設定します)を使用することで、マウスカーソル付きの画面キャプチャができるようになります。

マウスカーソル付きで画面キャプチャを行うと以下の様になります。オレンジの丸がついているのが、カーソルになります。

f:id:ueponx:20200428140611p:plain

ブラウザなどアプリを起動しても表示ができます。

f:id:ueponx:20200428140623p:plain

おわりに

マニュアルなどであれば、後から枠や矢印をつけておけ説明はできるのですが、iPadを使用しながら説明するといった環境では、なかなかタッチする場所の指示ができないという問題があります。

今回の設定で動画、対面でもできるようになりました。 できればもう少しポインタの形状なども選べると嬉しいかなとは思います。

/* -----codeの行番号----- */