Xcode8 swiftでの「Hello World」 iPhoneアプリの作り方、視覚障害者(全盲)がVoiceOverの読み上げとキーボードショートカットで行う場合 #vojp

私は視覚障害者(全盲)で、iPhoneアプリを作りたいと思い勉強中です。

パソコンを使い始めてプログラミングに興味を持って、ずいぶん経つのですが、万年ハローワールドばかり書いていて、なかなか初心者から中級レベルに進めません。

いろいろ調べたり試したりして、ようやくXcodeで「Hello」ボタンをタップすると「こんにちは」と表示するアプリを書くことができました。

私が試した環境は古い(ファンクションキーのついている)MacBook Pro)に、Mac OS Sierra、xcode 8.1です。



視覚障害者(全盲)がxcodeを使うときの3つのポイント

「Hello World」を書くだけでも、画面とマウス操作無しで操作するのに難しい点がいくつかありました。

  1. Xcodeの各部への移動のキーボードショートカット、「プロジェクトエディタ」、「オブジェクトライブラリ」、「アシスタントエディタ」に移動するための操作。
  2. キーボードでのマウス操作のエミュレート、ドラッグ&ドロップの仕方。
  3. ボタンやラベル、テキストフィールドなど、GUIの部品とコードを接続する方法、接続されていない状態で一度ビルドして出てくるエラーのところで操作する。


「Hello World」の作成

iPhoneの画面にボタンを一つ作り、タップすると「こんにちは」と表示するアプリを作ります。

まずXcodeを起動。「Welcome」画面は出ないように設定しています。

  1. Cmd + Shift + n で新規プロジェクト
  2. テンプレート選択画面で、「iOS」にチェック、「Template chooser」で「Single view application」にカーソルを合わせてエンター。
  3. 「Product name」に「hello world」と入力、他の条件も確認して「Next」を押す
  4. ファイルの保存先を選び「Create」を押す


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

  1. Cmd + 1 で「プロジェクトナビゲーター」に移動。
  2. Caps + Shift + 下カーソル で「プロジェクトナビゲーター」を操作できる状態に入り、下カーソルを押していき、「Main_storyboard」に合わせる
  3. Caps + Shift + 上カーソルでプロジェクトナビゲータの操作を抜けて、Caps + ミギカーソルを押していき、「ViewからUIView」と読み上げられるところでCaps + スペースを押す(ここがキャンバス)
  4. Cmd + Option + Ctrl + 3または「View」メニューの「Utilities」の中から「Show Object library」を選んでオブジェクトライブラリに移動
    5.「filter search text」と読み上げられるところで「but」と入力して、Caps + 左カーソルで「Button」と読み上げられるところまで移動
  5. そこで、Caps + Cmd + スペースを押して出てくるメニューから「add item to the canvas」をCaps + スペースで選択
  6. Cmd +1でプロジェクトナビゲータにいき、Caps + ミギカーソルを押していき、「View controller」、「first responder」、「exit なんとかなんとか」、「top layoutなんとか」、そして「Button」と聞こえるのでボタンが張り付けられたことを確認できる。
  7. 「Button」のところでCaps + Cmd + スペースを押して出てくるメニューから「Button なんとかへジャンプ」を選ぶ
  8. Caps + 左カーソルでいくつか戻って「Attributes inspector」を選択し、Caps + ミギカーソルで「Button」というボタンの名前を「helloButton」に変更


アシスタントエディタでコードを追加

Caps + 左カーソルでキャンバスに移動して、ボタンの名前が「helloButton」になっていることを確認。

  1. Cmd + Option + エンターでアシスタントエディタを表示して、Caps + ミギカーソルでエディタのところへ移動。
  2. Caps + Shift + 下カーソルでエディタの編集ができる状態にする

「class ViewController: UIViewController {」の行の下に追加したボタン用のコードを下記のように書きます。(参考にしたページからの切り貼りなので、細かいところの意味はわかっていません。)


@IBOutlet weak var helloButton: UIButton!
@IBAction func sayHello(sender:UIButton) {
    let alertController = UIAlertController(title: "あいさつ", message: "こんにちは", preferredStyle: UIAlertControllerStyle.alert)
    alertController.addAction(UIAlertAction(title: "OK", style: UIAlertActionStyle.default, handler: nil))
    present(alertController, animated: true, completion: nil)
}

これだけではキャンバスに張り付けたボタンとコードは接続されていませんが、このままビルドして「not connected」という警告を出してから接続します。



キャンバス上のオブジェクトとコードの接続

  1. Cmd + Bでビルド
  2. Caps + ミギカーソルを押していき、コードが書かれたエディタのところに一度合わせて、Caps + 左カーソルで戻ると、「not connected」と読み上げられるところが2か所あるのを確認。接続されていないhelloButtonボタンとsayHello関数。
  3. 「not connected helloButton」に合わせて、Caps + Cmd + F5でマウスをVoiceOverカーソルのところにもってくる。
  4. Caps + Shift + Cmd + スペースでドラッグ開始
  5. Caps + 左カーソルを押していき、キャンバスまで移動して、「helloButton」のところで、Caps + Shift + Cmd + スペースを押してドロップする、これで接続される
  6. 「not connected sayHello」についても同じようにしてキャンバスの「helloButton」に接続する
  7. 接続できていれば「not connected」が「connected」に変わっているのを読み上げで確認できる


「destination」のデバイスをusbで接続したiPhoneにして、Cmd + rで実行すると、iPhoneで「helloButton」が表示されタップすると「こんにちは」と表示されるのを確認できます。



参考



関連投稿