iOSのVoiceOver対応開発

7,699 views
7,490 views

Published on

iPhoneのVoiceOverの実装について

0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,699
On SlideShare
0
From Embeds
0
Number of Embeds
570
Actions
Shares
0
Downloads
18
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

iOSのVoiceOver対応開発

  1. 1. iPhoneアプリのVoiceOver対応開発 伊勢 シン スマートフォン勉強会@関東#13
  2. 2. 自己紹介• 伊勢 シン といいます! – あれ、なんで僕2回連続で関東にいるの・・・?• スマートフォン勉強会の関西代表やってます。• 大阪でスマートフォンのアプリ作っています – iPhoneアプリのビルド待ちしている間に、 Androidアプリを書くとかそういうお仕事
  3. 3. 自己紹介• 趣味でもスマートフォンアプリ作ってます。• 趣味で作った主なプロダクト – EbIRC – ZEROProxy – Giraffe – SongTweeter• Microsoft MVPでもある – Microsoft MVP for Windows Phone (Oct 2009 - Sep 2011) – でも今日はiPhoneのお話。ちなみに前回はAndroid。
  4. 4. おしながき• 開発者にとってアクセシブルにするメリットとは – 普通に作ったらVoiceOverで悲しい事態に!• アクセシビリティサポート 実際のところ – VoiceOverアクセシビリティ要素の基本 – アクセシビリティ簡単対応 – 独自描画コントロールのアクセシビリティ対応• アクセシビリティ属性の指定の仕方• アクセシビリティのデバッグ
  5. 5. アクセシビリティサポートをするメリット
  6. 6. なぜアクセシビリティサポートが重要か• ユーザー層の拡大 – 今まで使うことができなかった人たちへリーチ – より多くの人にアプリを使ってもらう機会ができる• アクセシビリティガイドラインへの対応 – 政府機関によって発行されている アクセシビリティガイドラインへ対応することができる。• “正しいことである”
  7. 7. あなたのアプリはVoiceOverで使えますか?• アプリ開発者の皆さん、VoiceOverでテストしてます か? – 設定>一般>アクセシビリティ>VoiceOver – ホームトリプルクリックでVoiceOver切り替えにできる• 変な英語が読み上げられていたりしませんか?• 使えない機能が存在してたりしていませんか?• 自分のアプリに「みっともない」側面を残さないために も、アクセシビリティサポートしておきたい
  8. 8. みっともない事例 1• 画像ボタンにアクセシビリティ属性指定しないと、 画像ファイル名を読み上げてしまう! – 伊勢的VoiceOverみっともない事例遭遇率第1位• 例:btn_hoge.png という画像をボタンにすると 「びー てぃー えぬ ほーじ ボタン」と読み上げられる。 何も指定されていないから 画像ファイル名が採用されている
  9. 9. みっともない事例 2• VoiceOver使ってる状況下 では全く使えなくなってしまう 機能もある – VoiceOver環境下では スクロール系の機能が 弱いことに注意 – はみ出す領域への引っ張りが サポートされないので、 Pull to Refreshは 一切使えない。
  10. 10. Interface Builderで簡単にできるので• 恥ずかしい思いをする前に対応しましょう。
  11. 11. アクセシビリティサポート実装実際のところ
  12. 12. UIAccessibility、5つの基本要素 Label Valu Traits e UIAccessibility Hint Frame
  13. 13. 5つの特性種類 内容Label ボタンの名前とか。文字列。(ラベル) 「追加」「削除」Traits コントロールの種類や、選択状態とか。定数から指定。(特性) 「ボタン」「リンク」「テキストフィールド」「選択中」Frame その項目のスクリーン上の絶対位置。CGRectで指定。(フレー コントロールの場合はframeプロパティそのもの。ム)Hint そのコントロールを使うと何が起こるのかを説明。文字列。(ヒント) 特段必要でなければ設定されていないようです。Value そのコントロールがどの値を示しているか。スライダーなどで利用。(値) 文字列。「50%」
  14. 14. Demo• 簡単に設定できる方法でオブジェクトに アクセシビリティ属性を追加してみます• カスタムドロークラスの内包しているオブジェクトに アクセシビリティ属性を指定してみます
  15. 15. Interface Builderで簡単に設定するには• Interface Builderでプロパティをちゃんと指定する – 普通はこれだけで事足りる 画像ボタンにもTitleを指定する、等
  16. 16. Interface Builderで簡単に設定するには• 詳細に指定するならIdentity inspectorで設定 属性ごとに 入力があります
  17. 17. カスタムドロークラスでの使用• drawRectで中身を全部描画してる時などは、カ スタムドローUIViewで UIAccessibilityContainer を実装する – accessibilityElementCount, accessibilityElementAtIndex, indexOfAccessibilityElement を実装 – NSArrayをつくっておき、上記3つのメソッドに委譲
  18. 18. カスタムドロークラスでの使用• すべてのオブジェクトがすでにUIAccessibilityを 実装しているのでオーバーライドする• accessibilityFrameはスクリーン上の座標なの で変換が必要
  19. 19. UITableViewCell で気をつけること• セルの中に複数のViewが含まれている場合、 子の要素はアクセシビリティ無効にしておく。 – その要素にフォーカスが当たって残念なことに• UITableViewCellのaccessibilityLabelメソッドをオー バーライドして、そのセル全体を読み上げるようにする 内部のビューは アクセシビリティ属性無効にしておく 伊勢的新常識 10 伊勢的新常識 お気に入り 10件の未読項目
  20. 20. アクセシビリティ属性の指定の仕方
  21. 21. 正しい情報を提供しましょう• ここまででアクセシビリティ属性の指定が できるようになりました。• どのような属性情報を指定すれば良いのでしょう か。• 属性指定の基本は「短く」「正しく」「役に立つ」 – 特にLabelとHintの指定は気をつけたい
  22. 22. Labelの指定• 短く、わかりやすく。 – なるべく1つの単語ですむように指定する – ただし、同じ画面に2つ以上の同じ機能がある場合 は「〜を追加」みたいにする• コントロールの種類を含めないこと – 「追加ボタン」とLabelを指定すると、Traitsとあわせて 「追加ボタンボタン」と読み上げられてしまう• 英語の場合先頭は大文字にする – 抑揚の制御に使われる• Labelの末尾にピリオドは付けない。
  23. 23. Hintの指定• 必要なときに指定する• そのコントロールを使用したときに何が起こるかを 「非常に簡潔に」説明 – 「曲を再生します」「コメントを送信します」など – 名前をつけないこと (「戻る ボタン 戻るを押すと〜」と冗長になってしまう) – 「タップすると〜」といった操作方法の説明は付けないこと (混乱のもとになる)• 英語の時は以下の点にも注意 – 複数形で始める (命令っぽさをなくす) – 先頭大文字と末尾のピリオドは省略するのは Labelと同じ
  24. 24. Traitsの指定• 以下の属性から複数指定できる – 「Not Enabled」な「Button」なども表せる■ Button ■ Plays Sound■ Link ■ Selected■ Search Field ■ Summary Element■ Keyboard Key ■ Updates Frequently■ Static Text ■ Not Enabled■ Image ■ None
  25. 25. アクセシビリティのデバッグ
  26. 26. シミュレータを使ったデバッグ• iOSシミュレータで設定されている アクセシビリティ属性を見ることが できます。• iOSシミュレータで以下の場所に。 設定 >一般 >アクセシビリティ >アクセシビリティインスペクタ
  27. 27. シミュレータを使ったデバッグ• クリックすると指定してある アクセシビリティ属性が 表示される• ただし読み上げされないので、 最終的に実機デバッグが 必要なのは他の機能と同じ
  28. 28. まとめ• 新たなユーザーへリーチするため、自分のアプリの 死角をなくすため、アクセシビリティ対応をしましょ う。• ツール系アプリならInterface Builderで簡単にで きます。• 属性設定は「短く」「正しく」「役に立つ」ようにする
  29. 29. 参考資料• iOSアクセシビリティプログラミングガイド – http://developer.apple.com/jp/devcenter/ios/lib rary/documentation/iPhoneAccessibility.pdf
  30. 30. おまけ• ところでVoiceOverが有効かどうかが知りたい – UIAccessibilityIsVoiceOverRunning 使えばいい よ BOOL UIAccessibilityIsVoiceOverRunning();• ステータスの変化はNSNotificationCenterで UIAccessibilityVoiceOverStatusChanged を監視すればOK。

×