Mac VoiceOverでのXcodeの操作、ボタンやラベルの位置とサイズを設定する方法、キーボードショートカットでインスペクタを選択

目の見える一般の人がXcodeを使ってiPhoneアプリを作る場合は、マウス操作でボタンやラベルを張り付け、位置やサイズもマウスで調節します。

またGUIのストーリーボードを使わずにコードでボタンやラベルを追加することもできるそうです。

目の見えない全盲の私も、コードで調節する方法を試したのですが、うまくできませんでした。

そこで、まずVoiceOverのキーボード操作でボタンやラベルをどこかに張り付けておいて、その後で「サイズ・インスペクタ」を表示して、位置やサイズの数字を入力する方法を試したところ、この方法が使えそうでした。

試しているるXcodeのバージョンは8.2.1です。



仕様するキーボードショートカット

  • コマンド+1 – プロジェクトナビゲータへ移動
  • コントロール+オプション+コマンド+3 – オブジェクトライブラリへ移動
  • オプション+コマンド+4 – 「アトリビュート・インスペクタ」を開く(ラベルやボタンのテキストや、そのフォントなどを設定)
  • オプション+コマンド+5 – 「サイズ・インスペクタ」を開く(ボタンやラベルの横位置、縦位置、幅、高さを設定(X Y width height))
  • Caps+スペースを連続で何度も押す – オブジェクトライブラリで、ボタンやラベルをキャンバスに連続で張り付ける

(私の環境で、何が原因かわからないのですが、VoiceOverのドラッグ&ドロップのキー操作でのキャンバスへのボタンやラベルの貼り付けができなくなってしまいました。VoiceOverを使用せず、目の見える人がマウスでのドラッグ&ドロップはできます。

Caps+スペースを何度も押して、いくつも張り付けておいて、必要ないものを、ドキュメントアウトラインでデリートキーを押して削除する形で何とか使えてはいます。)



ボタンやラベルの位置やサイズの決め方

本格的にアプリを作る場合には、制約(Constraints)という、異なる画面サイズのiPhoneでも同じように表示できるように、相対的に指定するようですが、まずは固定した位置とサイズの設定を練習しています。

たとえば、私が使っているiPhone SEは横が320ポイント、縦が560ポイントくらいです。

横幅いっぱいで、縦の半分の高さのラベルを画面の一番上に設定するには:

  • X: 0(左端から0ポイント)
  • Y: 0(上から0ポイント)
  • width(幅): 320
  • height(高さ): 280(560の半分)

のような設定になります。

また、画面の中心くらいに横幅200、縦の高さ200ポイントのボタンを設定するには:

  • X: 60(左から60ポイント、200の幅で、残り60で320)
  • Y: 180(上から180ポイント、200の高さ、残り下端まで180ポイント)
  • width: 200
  • height: 200

のように数字を入力します。

サイズ・インスペクタとアトリビュート・インスペクタ

VoiceOverのドラッグ&ドロップのキーボード操作や、Caps+スペースの連続押しなどで、キャンバスにボタンやラベルを張り付けた後で、「ドキュメントアウトライン」というところで、位置やサイズを設定したいボタンやラベルを選びます。

そこで、サイズ・インスペクタを設定するために、オプション+コマンド+5を押します。

ただし前の操作ですでにサイズ・インスペクタが選ばれている場合はVoiceOverのキーボードフォーカスが移動しないので、一度アトリビュート・インスペクタを選ぶショートカット、オプション+コマンド+4を押してから、サイズ・インスペクタのショートカット、オプション+コマンド+5を押します。

(この「一度別の部分に移動させてから目的の部分のショートカットを押す操作」は別の場面でも使えます。

たとえばプロジェクトナビゲータを開くために一度シンボルナビゲータをコマンド+2で開いてから、コマンド+1を押したり。

コントロール+オプション+コマンド+0で、ユーティリティエリアを閉じてから、コントロール+オプション+コマンド+3でオブジェクトライブラリへ移動するなど。)

アトリビュート・インスペクタではボタンやラベルのテキストを設定できるので、これを先に設定しておくと、位置やサイズを変更したいものが選ばれているかどうかを、アトリビュート・インスペクタの選択で確認できます。

サイズ・インスペクタが開いたら、Caps+右カーソルを何度か押して「X」、「Y」、「width」、「height」というところをさがします。

ただし設定値の数字が先になっています。

たとえば「160、X」、「300、Y」、「40、width」、「25、height」のように読み上げられるので、それぞれの項目の前(Caps+左カーソル側)の数字を目的の数字に変更します。

「0 X、20 Y、320 width、200 height」は、左から0ポイント、上から20ポイント、幅320、高さ200の設定になります。



参考



関連投稿