iOSアプリのVoiceOver対応開発   Rev.2              伊藤  伸裕    第44回Cocoa勉強会関⻄西
⾃自⼰己紹介•  伊勢  シン(伊藤  伸裕) といいます!•  ⼤大阪で主にスマートフォンのアプリ作っています   –  主にiOS (しあわせ)   –  たまにAndroid (かなしい)   –  Windows Phone (やりたい...
⾃自⼰己紹介•  趣味でもスマートフォンアプリ作ってます。•  趣味で作った主なプロダクト –  ZEROProxy (Windows Mobile) –  EbIRC (Windows Mobile) –  Giraffe (Windows ...
おしながき•  開発者にとってアクセシブルにするメリットとは –  普通に作ったらVoiceOverで悲しい事態に!•  アクセシビリティサポート  実際のところ –  VoiceOverアクセシビリティ要素の基本 –  アクセシビリティ簡単対...
アクセシビリティサポートをするメリット
なぜアクセシビリティサポートが重要か•  ユーザー層の拡⼤大 –  今まで使うことができなかった⼈人たちへリーチ –  より多くの⼈人にアプリを使ってもらう機会ができる•  アクセシビリティガイドラインへの対応 –  政府機関によって発⾏行行さ...
VoiceOverつかったことありますか?•    タップで選択•    ダブルタップで確定•    ⼆二本指でスクロールすると読み上げ•    三本指トリプルクリックでスクリーンカーテン•    ローター     –  読み上げ速度度などを変...
あなたのアプリはVoiceOverで使えますか?•  VoiceOverでテストしてますか? –  設定>⼀一般>アクセシビリティ>VoiceOver –  ホームトリプルクリックでVoiceOver切切り替えにできる•  変な英語が読み上げら...
みっともない事例例 1•  画像ボタンにアクセシビリティ属性指定しないと、   画像ファイル名を読み上げてしまう! –  伊勢的VoiceOverみっともない事例例遭遇率率率第1位•  例例:btn_hoge.png という画像をボタンにすると...
みっともない事例例 2•  VoiceOver使ってる状況下   ではスクロール系の機能が   弱いことに注意 –  Pull to Refresh系の    スクロール⾃自体に機能がある    場合はかなり使いづらくなる
Interface Builderで簡単にできるので•  恥ずかしい思いをする前に対応しましょう。
アクセシビリティサポート実装実際のところ
UIAccessibility、5つの基本要素                  Label     Value                            Traits                UIAccessibility ...
5つの特性種類       内容Label    ボタンの名前とか。⽂文字列列。(ラベル)    「追加」「削除」Traits   コントロールの種類や、選択状態とか。定数から指定。(特性)     「ボタン」「リンク」「テキストフィールド」「...
Demo•  簡単に設定できる⽅方法でオブジェクトに   アクセシビリティ属性を追加してみます•  カスタムドロークラスの内包しているオブジェクトに   アクセシビリティ属性を指定してみます
Interface Builderで簡単に設定するには•  Interface Builderでプロパティをちゃんと指定する  –  普通はこれだけで事⾜足りる                        画像ボタンにもTitleを指定する、等
Interface Builderで簡単に設定するには•  詳細に指定するならIdentity inspectorで設定                            属性ごとに                            ⼊...
カスタムドロークラスでの使⽤用•  drawRectで中⾝身を全部描画してる時などは、   カスタムドローUIViewで   UIAccessibilityContainer を実装する –  accessibilityElementCount...
カスタムドロークラスでの使⽤用•  すべてのオブジェクトがすでにUIAccessibilityを   実装しているのでオーバーライドする•  accessibilityFrameはスクリーン上の座標なの   で変換が必要
UITableViewCell で気をつけること•  セルの中に複数のViewが含まれている場合、   ⼦子の要素はアクセシビリティ無効にしておく。  –  その要素にフォーカスが当たって残念念なことに•  UITableViewCellのac...
アクセシビリティ属性の指定の仕⽅方
正しい情報を提供しましょう•  ここまででアクセシビリティ属性の指定が   できるようになりました。•  どのような属性情報を指定すれば良良いのでしょう   か。•  属性指定の基本は「短く」「正しく」「役に⽴立立つ」 –  特にLabelとH...
Labelの指定•  短く、わかりやすく。 –  なるべく1つの単語ですむように指定する –  ただし、同じ画⾯面に2つ以上の同じ機能がある場合    は「〜~を追加」みたいにする•  コントロールの種類を含めないこと –  「追加ボタン」とL...
Hintの指定•  必要なときに指定する•  そのコントロールを使⽤用したときに何が起こるかを   「⾮非常に簡潔に」説明 –  「曲を再⽣生します」「コメントを送信します」など –  名前をつけないこと    (「戻る  ボタン  戻るを押す...
Traitsの指定•  以下の属性から複数指定できる –  「Not Enabled」な「Button」なども表せる■ Button         ■ Plays Sound■ Link           ■ Selected■ Searc...
アクセシビリティのデバッグ
シミュレータを使ったデバッグ•  iOSシミュレータで設定されている   アクセシビリティ属性を⾒見見ることが   できます。•  iOSシミュレータで以下の場所に。   設定   >⼀一般   >アクセシビリティ   >アクセシビリティインス...
シミュレータを使ったデバッグ•  クリックすると指定してある   アクセシビリティ属性が   表⽰示される•  ただし読み上げされないので、   最終的に実機デバッグが   必要なのは他の機能と同じ
まとめ•  新たなユーザーへリーチするため、⾃自分のアプリの   死⾓角をなくすため、アクセシビリティ対応をしましょ   う。•  ツール系アプリならInterface Builderで簡単にで   きます。•  属性設定は「短く」「正しく」「...
参考資料料•  iOSアクセシビリティプログラミングガイド –  http://developer.apple.com/jp/devcenter/ios/    library/documentation/iPhoneAccessibility...
おまけ•  ところでVoiceOverが有効かどうかが知りたい  –  UIAccessibilityIsVoiceOverRunning 使えばいい   よ  BOOL	  UIAccessibilityIsVoiceOverRunning(...
Upcoming SlideShare
Loading in …5
×

iOSのVoiceOver対応開発 Rev2

1,815 views
1,710 views

Published on

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

No Downloads
Views
Total views
1,815
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

iOSのVoiceOver対応開発 Rev2

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

×