Swan's Quest　第1章：暗闇からの声

Swan's Quest　第1章：暗闇からの声

Swift Playgroundsはすべての世代に向けて4章から成るインタラクティブな冒険、"Swan's Quest"をお届けします。第1章では、ヒーローが暗い洞穴を移動します。トーチに明かりを灯すただ一つの方法は、トーチをアクセス可能なものにする、ただそれだけです。 VoiceOverや面白い音声解説について学びましょう。そうすればあなたは、ヒーローが帰り道を見つけ・・・次のチャレンジへのヒントを手に入れることを手助けことができるかもしれません。 Swan's QuestはiPadとMacのSwift Playgroundsのために作成されており、Sonic Workshop、Sensor Arcade、Augmented RealityなどのPlaygroundsの多くで教育的体験を生むフレームワークとリソースを統合しています。Playgroundを作成するには、"Create Swift Playgrounds content for iPad and Mac"をご覧ください。 Developer Forumに立ち寄るのも忘れずに。Swan's Questへのご意見をぜひお聞かせください。

リソース
関連ビデオ

WWDC20
ダウンロード

こんにちは WWDCへようこそ “Swan's Quest　第１章：暗闇からの声” 今回はSwan's Questです司会のロブです私たちのチームが作成した― Swift Playgroundsチャレンジの内側をご案内しますこのチャレンジはコーディングの楽しさを思い出していただくために作られました Swift PlaygroundsはたくさんのフレームワークやAPIが詰め込まれた開発環境です複雑なテクノロジーを少量のコードでシンプルに試すことができます皆さんが構築したい内容に集中できてやり方を調べることに時間をかけずにすみますこのエピソードでは
４つの章に分けて Swan's Questをご紹介します各章にはプログラミングチャレンジが用意されており前の章の続きを構築していきます第一回のチャレンジでは暗くミステリアスな洞窟を探検しなければなりません皆さんの装備はVoiceOverとオンスクリーン要素に説明的なコンテキストを提供する使いやすいAPIだけです VoiceOverを皆さんのデバイスでオンにする方法とさらにアクセシビリティAPIの入門編をご紹介しますこれは私たちの教育用コンテンツを最高にアクセシブルなプログラミング環境にしてくれます最後にこれらのAPIを使用して洞窟を通り抜けスワンに会うための手がかりをお教えします用意はいいかな？
Swan's Questのチャレンジは４パートです皆さんのプログラミングスキルを使って勇者のカメの伝説のクエストを導いてもらいます
旅の中でカメは暗い洞窟へと入りスワン王を探して先へ進みますスワンはカメに王国を通過する許しを与えますただしカメのことを気に入った場合に限ります
気に入られるにはスワンからの音楽のチャレンジを成し遂げなくてはなりませんここで皆さんの助けが必要なのです
そしてトカゲもスワンの謎の手がかりを解く助けをくれます
トカゲは皆さんにどのAPIを使うかのヒントをくれます
Swan's Questは４つのプログラミング演習で構成され構築に使用されているフレームワークは教育用コンテンツをSwift Playgroundsで配信するために使うものと同じです私たちはこのフレームワークで初級のプログラマーに Swiftのコーディング方法をお教えしています私たちのコンテンツを取り入れて皆さんのプロジェクトで同じフレームワークを使えるのをご存じですか？ SDKを学び始める最良の方法はここにある３つのようなテンプレートから始めることですこれらはテンプレート形式のプレイグラウンドブックで新しいページと新しいSwiftモジュールを作成でき Swift Playgroundsだけで完結できますこれらのテンプレートには指導者付き学習コンパニオンの作成用に構築されたものと同じモジュールが含まれます “Sonic Create”ではオーディオAPIを簡単に実験できるようにしています “Sensor Create”ではさまざまなiPadのセンサーを利用し “AR Create”では皆さんが独自の拡張現実体験を作成できますカスタムアートはサラ･ロスバーグさんの作品です
Swan's Questでは新しいよりパワフルなテンプレートを作成しましたいくつかのテンプレートの APIを組み合わせています
Swan's Questと併せてこのテンプレートをデベロッパアプリケーションから直接ダウンロードしてください提供されるすべてのコンテンツと同様これらのブックはオープンソースですつまり Macで展開して各チャレンジの構築で私たちがどのように APIを使ったか見ることができます
全４回のセッションでは各チャレンジをクリアするのに必要ないくつかのAPIを解説します今日のチャレンジで使うのはアクセシビリティAPIと VoiceOverです後で必要になります両方を使って暗い洞窟を抜けてスワンに会いに行くのですご安心ください最初のゲストのジョーディンはアシスティブテクノロジーの第一人者です VoiceOverの集中講義をしてくれます VoiceOverは洞窟の謎を解く最重要ツールですので注意してください
ありがとうロブ皆さんこんにちは Appleのアクセシビリティエンジニアのジョーディンですアシスティブテクノロジーの構築を支援するだけでなく自分で毎日使って家族や友人と連絡を取り合ったり猫のフードを注文したりピアノを習ったりもちろんコードも書いていますコーディングの話が出たところで早速始めましょう第１回のチャレンジをクリアするには VoiceOverを使用します VoiceOverはAppleの画面読み上げ機能ですべての製品に埋め込まれていますテキストコントロールその他の要素についての情報をアプリケーションのインターフェイスの操作中にテキスト読み上げ点字またはその２つの組み合わせで提供します
VoiceOverは暗く不気味な洞窟を通りまた道を照らすコードを書くために必要になります VoiceOverを使ってコードを書くのですご心配なくコツがわかればそんなに難しくありません大丈夫ですよ始める前にアクセシビリティショートカットを設定しましょうアクセシビリティ設定をすばやくオンまたはオフに切り替えられますホームまたはスリープ/スリープ解除ボタンを３回押します設定のアクセシビリティへ移動し一番下まで行くとアクセシビリティショートカットがありますここの VoiceOverを選択します次に VoiceOverをオンにします iPadの場合設定アクセシビリティそして VoiceOverに移動します上にトグルスイッチがありますここのVoiceOverをオンにして有効にするかまたは先ほど設定したアクセシビリティショートカットを使用しますまた Siriに頼むこともできます “VoiceOverをオンにして” 最初に “VoiceOverオン”というプロンプトが聞こえます
ここで場合によっては OKボタンをダブルタップして VoiceOverが有効になるとジェスチャが変更されることを確認する必要があります
選択中のコントロールの周囲にある黒色の四角形は VoiceOverカーソルと呼ぶもので
VoiceOverのフォーカスがどこにあるかを視覚的に確認するものです
指で左右にフリックしてカーソルを画面上のさまざまな要素に移動します
“アクセシビリティ機能を利用すると…” “視覚サポート見出し”“VoiceOver オン” “ズームオフ”“VoiceOverオンボタン”
または画面上を指でドラッグしてカーソルをより速く要素に移動させることができます
“バリアフリー音声ガイ…” “VoiceOver オ…” ここで VoiceOverの読み上げ速度をお好みに調整します読み上げ速度のスライダーを１本の指で上または下にスワイプします
“読み上げ速度 45% 55% 65% 75%”
“85% 95% 100% 95% 80% 70%” 経験豊富なVoiceOverユーザーの多くは読み上げ速度を最速にしてすばやく情報を取得し効率的に操作します１分あたり約720ワードのスピードですこんな感じになりますね “読み上げ速度…” 不思議かも知れませんが私はこの速さでVoiceOverを理解でます設定を閉じるには iPadのホームボタンを押すかホームボタンのないデバイスでは画面の下の端から指１本で音が聞こえるまで上にスライドしますそこで止めると VoiceOverが次のように言います
“指を離すとホーム画へ” ホーム画面に戻ったら Swift Playgroundsのアイコンに移動しダブルタップして開きます
“Playgrounds”
“開くにはダブル…” “Playgrounds” Macの場合 Command＋F5キーまたは Touch IDボタンをトリプルクリックで VoiceOverを有効にします
有効になったら画面上で VoiceOverカーソルを Control＋Option＋左または右の矢印キーを押して移動します
同じように上下も Control＋Option＋上下の矢印キーを使って移動しますコントロールや要素のグループに入力する場合たとえばプレイグラウンドのソースコードエディタなどでは Control＋Option＋Shift＋下向き矢印キーを押しますこれをインタラクティングと呼びたいと思います
インタラクティングを停止してコントロールのグループから抜けるには Control＋Option＋Shift＋上向き矢印キーを押します
Control＋Option＋スベースバーでコントロールをアクティブ化します VoiceOverとオンにする方法基本的なジェスチャそしてコマンドに慣れたところでお話ししたいのが皆さんが開発したアプリケーションから去っていってしまう― 多くの視覚障害者の悲しい体験についてです
Appleは私たちの製品のインターフェイスデザインが同クラスで最高であることに誇りを持っています同じ品質がアクセシビリティにも備わっていますアクセシビリティは Appleのコアバリューの１つなのです VoiceOverをオンにしたときに豊富なコンテキストが設定やホーム画面に触れるのに合わせ提供されていました
しかしデベロッパ全員がアクセシビリティにこれほどの注意を払うことはありません実際にそうです
まずアプリケーションをダウンロードするとすぐに聞こえてくるのは豊富な詳細ではなくラベルなしのボタンばかりなのです画面をスワイプすると聞こえてくるのはボタンボタンボタン… たまに画像ファイル名が挿入されていることはありますその場合画面をスワイプしたときにどう聞こえるかというと “画面 20…”“トーチ２グラフィック” “トーチ３グラフィック” “トーチ６グラフィック” それで思うわけですトーチって一体何？
これをどうしろというの？そしてアプリケーションの場合途方に暮れるわけですこのボタンたちは何をするボタン？どうやって使えばいいの？ラベルなしのボタンがあるアプリケーションは削除してしまいます開いて１分以内にですでもこのような体験を変える力が皆さんにはあるのです皆さんはすべての人のためのより良いインターフェイスを作れますボタンとコントロールにラベルを追加するところから始められます
“画面”“トーチ３”“トー…”“トーチ” “神秘的な青い炎を点す12インチの支柱” この方がずっと意味がありますこれはいいです Swift Playgroundsを使うときに優れたユーザー体験を期待します私たちのコンテンツはコーディング方法を学ぶ― すべての人のためにデザインされなくてはなりません例外はありませんそのために私の同僚のエンジニアたちが使いやすいAPIを構築し完全にアクセシブルなSwift Playgrounds コンテンツを構築できるようにしました
それらのAPIの詳細については Swift Playgroundsチームのスティーブンに説明してもらいますありがとうジョーディン Swift Playgroundsチームの教育エンジニアのスティーブンです私たちのコンテンツではジョーディンのような経験を誰にもして欲しくありません Appleは“すべての人がコーディングできる” という信念を持っていますそれが私たちが使いやすいアクセシビリティインターフェイスを Swift PlaygroundsのコンテンツSDKに構築した理由ですコンテンツSDKの基礎には４つのオンスクリーン要素がありますグラフィックボタンスプライトラベルですすべてBaseGraphicを継承しアクセシビリティをサポートするプロパティを持っていますここにオプションの accessibilityHintsプロパティがありますこのプロパティの設定によりこのオンスクリーン要素が VoiceOverによって読み上げられる必要があることを示し他の支援サービスで可視化できるようにします VoiceOverをサポートするためにこれらの値の設定が必要です makeAccessibilityElementは VoiceOverにこの項目でカーソルを停止するよう伝えます accessibilityLabelは項目で停止したときに VoiceOverが読み上げる内容です
例を見ていきましょうまず accessibilityHintsのインスタンスを作成します VoiceOverがこのグラフィックで停止し次の文言を読み上げます “ボタンをアクティブにしてパーティーを開始します” 次に Graphicを作成してそのaccessibilityHintsを最初の手順で作成した hints変数に設定しますこの例の意味が伝わるよう願っていますというのも第１回のチャレンジで必要になるからですありがとうステファンお察しのとおり第１回のチャレンジ “暗闇の声”はオンスクリーンコントロールをもっとアクセシブルにする内容です洞窟に入るとトーチは点いていません実際何も見えないでしょう皆さんが十分な数のトーチを点灯させるまでキャラクターは動きませんトーチを点灯させるにはそれらにアクセシビリティラベルを設定します VoiceOverでそれぞれのトーチに移動できますトーチのところまで来るとプロパティ名が聞こえてきます “トーチ１”とか“ トーチ３”のようにです
それぞれのトーチにアクセシビリティラベルを追加するとキャラクターは洞窟を進んでいきスワンに会うことができます
Playgroundsのソースエディタであの不親切なラベルをもっと説明的なものに置換します耳を使ってラベルを変更してくださいこのようにして完了するとスワンに会って次のチャレンジの手がかりをもらえますこのエピソードでは Swan's Questをご紹介しました WWDC参加者向けの４パートのチャレンジです皆さんには VoiceOverをご紹介し Swift Playgroundsでアクセシブルなソフトウェアを書く方法をご紹介しました最後に洞窟を進んでスワンに会いに行くためのいくつかのヒントを差し上げました明日は第２章をご説明しますそれまで幸運を祈りますフォーラムに参加して第１回のチャレンジの感想を教えてくださいね

//  Graphic.swift

open class BaseGraphic: InternalGraphic {
   
    public var accessibilityHints: AccessibilityHints?

    // ...
}

12:32 - AccessibilityHints.swift

//  AccessibilityHints.swift

public struct AccessibilityHints: Codable {

   /// Indicates a graphic should be treated as a UIAccessibilityElement by VoiceOver.
   public var makeAccessibilityElement: Bool = false
    
   /// Label spoken by VoiceOver for the accessible graphic (a localized character name).
   public var accessibilityLabel: String?

   // ... 

}

12:45 - Make an Accessible Graphic

// Make an Accessible Graphic

import SPCCore
import SPCAccessibility

let hints = AccessibilityHints(makeAccessibilityElement: true, 
                               accessibilityLabel: "Activate button to start the party")

let graphic = Graphic(name: "Let's get it Started")
graphic.accessibilityHints = hints

13:51 - Activating torch1 and torch2

// activate torch1 and torch2

cave.torch1.accessibilityHints = AccessibilityHints(makeAccessibilityElement: true, 
        accessibilityLabel: "Torch next to a stairwell, where dripping water can be heard.")
cave.torch2.accessibilityHints = AccessibilityHints(makeAccessibilityElement: true, 
        accessibilityLabel: "Right before the edge of the platform—be careful!")

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

Swan's Quest 第1章：暗闇からの声

リソース

関連ビデオ

WWDC20