「iPhoneをバイブレーションさせるコードの書き方」、視覚障害者(全盲)のVoiceOverユーザーにもできるXcodeの使い方勉強中 #vojp

VoiceOverでのドラッグ&ドロップの仕方

Mac OSのVoiceOverでは、キーボード操作でマウスのドラッグ&ドロップができます。

これを使うとiPhoneアプリを作るためのアプリXcodeを視覚障害者(全盲)でも、ある程度まで使えそうな感じがしてきました。

VoiceOverでのドラッグの開始は「Caps + Shift + Cmd + スペース」です。

Caps + 左または右カーソルを押してドロップしたいところまで移動します。その間「シューシューシュー」と音がします。

そして、ドロップするときも同じく「Caps + Shift + Cmd + スペース」を押します。

Ctrlを押しながらのドラッグ&ドロップはまだ操作方法がよくわかりません。うまく機能するときも、機能しないときもあります。



オブジェクトライブラリから複数のボタンを張り付けるには「stack view」を使う

アプリのキャンバスに複数のボタンをどうやって張り付ければいいのかよくわからなかったのですが、「stack view」というのを先に張り付けておくことで、VoiceOverでも2つのボタンをキャンバスに張り付けることができました。

「stack view」には「horizontal(水平)」と「vertical(垂直)」があり、「stack horizontal view」に張り付けるとボタンが横に並び、「vertical」では縦に並びます。

細かいレイアウトは、どう操作すればいいかまだわかりませんが、とりあえず、見た目は無視して、いろいろ試すことができるようになりました。

「stack view」を使わずにボタンを2回張り付けると、同じ場所に張り付けられてしまい、2つのボタンとして動作しませんでした。



5回バイブレートするボタンと3回バイブレートするボタンを作る

「Hello World」のバイブレーション版を作ってみます。

2つのボタンを作り、一つをタップすると5回「ブー、ブー、ブー、ブー、ブー」バイブレートし、もう一つは3回「ブー、ブー、ブー」とバイブレートするというものです。

Xcodeを起動して次のようにします。

  1. Cmd + Shift + nで新規プロジェクト。
  2. 「iOS」にチェックして、テンプレートから「single view」を選ぶ。テンプレート選択のところでCaps + Shift + 下カーソルで操作できる状態にして、カーソルで「single view」に合わせてエンターを押す。
  3. 「product name」に「vibrate test」と入力。
  4. ファイルの保存先を選び「create」を押す。

次にインターフェイスのキャンバスにボタンを張り付けます。

  1. Cmd + 1でプロジェクトナビゲータに移動し、Caps + Shift + 下カーソルで操作状態にして、カーソルで「main story board」に合わせる
  2. Caps + Shift + 上カーソルで操作状態を抜けて、Caps + ミギカーソルを押していき、キャンバスへ移動。
  3. 「ViewからUI View」と聞こえるところでCaps + スペースを押す。
  4. Cmd + Option + Ctrl + 3でオブジェクトライブラリに移動(このショートカットキーがうまくいかないことがあり、その場合はメニューのView → Utilities → Show Object libraryで選ぶ)
  5. 「filter search」と読み上げられるところで、「stack」と入力して、Caps + 左カーソルを押していき、「Stack vertical view」に合わせる。
  6. Caps + Cmd + スペースを押して出てくるメニューから「add item to the canvas」を選ぶと、「stack view」が張り付けられる。

次に「stack view」にボタンを張り付けるのですが、このときはVoiceOverのドラッグ&ドロップ操作を使います。

  1. オブジェクトライブラリの「search」のところに「but」と入力して「button」に合わせる。
  2. Caps + Shift + Cmd + スペースを押してドラッグ開始にする。
  3. Caps + 左カーソルを押していきキャンバスを通り越して「document outline」のところに合わせる。
  4. Caps + Shift + 下カーソルで操作状態に入り、「stack view」と聞こえるところを探し、さらにそのミギの「ボタン」と聞こえるところに合わせる。
  5. そこでドロップする。Caps + Shift + Cmd + スペース。
  6. Caps + Shift + 上カーソルで操作状態を抜けて、キャンバスへ移動し、「buttonからUI Button」が増えていることを確認する。
  7. このボタンのところでCaps + Cmd + スペースを押して「ボタンへジャンプ」を選ぶ。
  8. 名前を変更できるところへ移動して、「vibrationFiveButton」という名前にする。

同じようにしてもう一つ「vibrationThreeButton」を作る。

キャンバスのボタンとコードの接続

この部分は一般の目の見える人はCtrlキーを押しながらドラッグするのですが、VoiceOverでは確実に行う方法がわかりません。何かの拍子にできることもありました。

なので、手動でコードを書いておいてエラーを出して、その後でドラッグ&ドロップします。

  1. Option + Cmd + エンターでアシスタントエディタを表示して、そのエディタへ移動します。
  2. 「class ViewController: UIViewController {」の行の次に「@IBOutlet weak var vibrationFiveButton: UIButton!」と入力。
  3. Caps + Shift + 上カーソルでエディタを抜けて、Caps + 左カーソルを押すと「not connected」という警告が確認できる。
  4. その「not connected」のところでドラッグ開始する。Caps + Shift + Cmd + スペース。
  5. キャンバスの「vibrationFiveButton」のところでドロップする。Caps + Shift + Cmd + スペース。

同じようにして、「vibrationThreeButton」と、5回バイブレートさせる関数「vibrateFive()」と3回バイブレートさせる関数「vibrateThree()」を手動でコードを書いた後に、ドラッグ&ドロップでキャンバスのボタンに接続します。

最終的に、エディタに書くコードは次の通りです。


import UIKit

import AudioToolbox // vibrateのために追加

class ViewController: UIViewController {

    @IBOutlet weak var vibrationFiveButton: UIButton!
    @IBOutlet weak var vibrationThreeButton: UIButton!

    @IBAction func vibrateFive() {
        for _ in 1...5 { // 5回実行
        AudioServicesPlaySystemSound ( kSystemSoundID_Vibrate ) // バイブレートする
        sleep(1) // 間を置く
        }
    }

    @IBAction func vibrateThree() {
        for _ in 1...3 { // 3回実行
        AudioServicesPlaySystemSound ( kSystemSoundID_Vibrate ) // バイブレートする
        sleep(1)  // 間を置く
        }
    }
    override func viewDidLoad() {

[以下省略]



参考



関連投稿