ダイナミックタイプの導入

ダイナミックタイプの導入

ダイナミックタイプは、システム全体およびすべてのアプリを対象に、ユーザーが好みのテキストサイズを選択できるようにする機能です。このセッションでは、ダイナミックタイプのサポートを導入するための基本事項をご紹介します。ダイナミックタイプの仕組み、アプリにおけるテキストサイズの変更に関する問題を見つける方法、SwiftUIとUIKItを使用して優れたダイナミックタイプの体験を実現するための実践的なステップを確認しましょう。ラージコンテンツビューアを使用して、ナビゲーションコントロールをすべてのユーザーが利用できるようにする方法もご紹介します。

関連する章
- 0:00 - Introduction
- 3:11 - Scaled text
- 6:00 - Dynamic layouts
- 8:56 - Images and symbols
- 11:58 - Large content viewer
リソース
ダウンロード

こんにちは Gaethです Accessibilityチームのエンジニアです Appleはアクセシビリティに関するあらゆるニーズに配慮しています多くのコンテンツでは情報伝達の手段はテキストであるため本セッションの内容は視覚的アクセシビリティにおいて重要な意義を持ちます具体的にはユーザーがアプリ内でテキストを読み操作する体験をダイナミックタイプによりすべての人にとって優れたものにする方法についてお話ししますダイナミックタイプを使うとシステム全体とアプリにおいてユーザーがテキストサイズを選べるようになりますみなさんのアプリを使う多くのユーザーがこの設定をカスタマイズしますこの機能をサポートすることはアプリが提供する価値を最大限に活用してもらう上で非常に重要ですより大きなテキストサイズでのアプリの動作を考慮したことがない方はぜひ本セッションを参考にしてください
ダイナミックUIを利用して構築したインターフェイスは画面のサイズや向きおよびプラットフォームを問わず機能しますこれはとても重要なことですなぜならテキストサイズに関する好みやニーズは人によって異なるためですダイナミックタイプではあらゆるサイズのテキストが読みやすくなりますユーザーは自身のニーズに合わせてテキストサイズを選び変更できます大きいテキストサイズでのアプリの動作を確認したことがない方はアクセシビリティ設定にアクセスしぜひ試してみてくださいテキストサイズをカスタマイズするにはアクセシビリティ設定のでを選択しますデフォルトではテキストサイズを 7段階から選べるようになっていますをオンにするとサイズをもう5段階大きくできますテキストサイズのコントロールをコントロールセンターに追加しておけば好みのサイズにすばやく変更できます
デフォルトのテキストサイズはLargeです
テキストサイズを変更するとすぐに変更が反映されますこの例の設定アプリの画面ではテキストサイズを大きくしたことですべてのテキストのサイズが自動で大きくなりましたタイトル本文各セルのラベルに表示されているテキストなどですこのテーブルビューのレイアウトも大きくなったコンテンツに合わせて各サブビューのサイズが大きくなっていますアクセシビリティ設定でさらに大きなテキストサイズを選択するとコンテンツがディスプレイの境界を越えるほど大きくなっていますがスクロールすればすべてを読めますこのセッションではダイナミックタイプを使ってアプリのコンテンツを拡大し最高の体験を提供できるよう調整するための方法をいくつかご紹介しますまずはダイナミックタイプの使い方について説明します次に大きなサイズに合わせてレイアウトを調整する方法をご紹介しますまたインライン画像や記号のためのオプションを確認します最後に解説するのはラージコンテンツビューアを使ってほかのコンテンツに合わせて拡大できないコントロールを読みやすくする方法です
まずテキストサイズの変更方法の説明ですダイナミックタイプによりアプリの体験を向上させる第一歩は組み込みのテキストスタイルを活用することです固定フォントではなくシステムに用意されているスタイルからテキストを選ぶことができます例えばテキストスタイルを「本文」にすると複数行のテキストも読みやすくなります「ヘッドライン」スタイルにすると見出しをほかのコンテンツと区別しやすくなりますこれらのスタイルを使うとコンテンツの視覚的階層を維持したままデバイスでユーザーが選択したサイズに合わせてアプリのテキストが自動的に調整されます
組み込みのテキストスタイルの指定には SwiftUIでfontモディファイアを使います例えば「タイトル」スタイルを選ぶには titleパラメータを渡します UIKitでテキストスタイルを指定するには UILabelの adjustsFontForContentSizeCategory プロパティをtrueに設定すればシステムのテキストサイズに応じてラベルのフォントも自動更新されるようになります次に preferredFont(forTextStyle)を使ってフォントを好みのスタイルに設定します labelのnumberOfLinesを0にするとテキストの表示行数がテキストの量に応じて調整されるのでテキストが途切れずに表示されますアプリでのダイナミックタイプの使用を検討する際は次のような点に注意してくださいテキストサイズを大きくした時に必要な行数が表示できないとテキストが途中で切れてしまいます表示スペースの枠が固定だとテキストが一部しか表示されない場合があります幸いこのような問題は簡単に検出できますそのための最適なツールの1つが Xcodeプレビューです SwiftUIをお使いの場合は Xcodeでプレビューキャンバスを表示しバリアントのボタンをクリックしてを選択します
選択可能なテキストサイズの各バリアントを Xcodeでプレビューできるので特定の表示に問題がある場合すぐに気づけますまたは Xcodeのキャンバスで設定のボタンをクリックして特定のサイズを選択することもできます Xcodeのデバッグ機能を使ってテキストサイズをテストする方法もあります設定アイコンをクリックするとダイナミックタイプとアクセシビリティのその他の設定をオーバーライドできますアプリの監査を実行しアクセシビリティの問題がないか確認することもできます監査によってアプリのビュー階層を検証しアクセシビリティに関する様々な問題をチェックして切り取られたテキストやラベルの欠落低いコントラスト比などを検出できます
ダイナミックタイプの導入はまずシステムフォントのテキストスタイルから始めるとよいでしょうさらに大きいサイズのテキストを使ってアプリ体験を向上させるにあたり最適な体験を提供できるようコンテンツのレイアウトの調整も検討しましょう例えば連絡先アプリで新しい連絡先ポスターを作成する際ポスターのオプションは横方向スタックに表示されますがテキストサイズを大きくするとレイアウトが縦方向スタックに変わり各セルがディスプレイの幅いっぱいに表示されます
このような場合大きなテキストに合わせてレイアウトを変更させずフォントがデフォルトまたは小さいサイズの時のレイアウトを維持することもできます
このアプリには4つの画像が横方向スタックに配置されており各画像の下に Standing FigureやRolling Figureなどのラベルが表示されていますこのラベルはデフォルトの大きなサイズでも読めるかもしれませんがアクセシビリティ設定の大きなサイズにすると表示が崩れてしまいますこれは各画像の幅が狭くスペース内にラベルが収まらないためですセルを一つずつ見ていきましょう FigureCellはVStackで画像とタイトルが含まれています SwiftUIで動的なレイアウトを実装するには EnvironmentのKeyPathを dynamicTypeSizeにします次に AnyLayout型のプロパティとして dynamicLayoutを指定しますこれでアクセシビリティ設定のテキストサイズには HStackLayoutがほかのテキストサイズには VStackLayoutが適用されます次に本文のレイアウトを VStackからdynamicLayoutに更新しますあとはセルを縦方向に配置するだけですこれらを含むビューで同じ手順でメインコンテンツのビューを設定しアクセシビリティ設定のテキストサイズでは VStackLayoutになりそれ以外の場合は HStackLayoutになるようにします
いいですねこれでテキストがアクセシビリティ設定のサイズに変更されるとレイアウトが動的に変更されてテキストの表示幅が確保されるのでテキストが途切れずかつ読みやすくなっています
これをUIKitで実現するには UIStackViewを使います StackViewにはサブビューを縦または横方向に配置するために必要なロジックがすべて含まれており軸プロパティの更新のみで適用できます
軸を定義するにはビューコントローラのtraitCollectionの preferredContentSizeCategoryで isAccessibilityCategoryプロパティを使用します
アプリ実行中のテキストサイズ変更に対応できるようにするには UIContentSizeCategoryの didChangeNotificationにサブスクライブしスタックビューの軸を最適な方向に更新します大きなサイズのテキストを使う時はレイアウトだけではなくテキストと一緒に表示される画像や記号にも調整が必要な場合がありますテキストを大きくする時の画像やアイコンの処理ではテキストに合わせてアイコンを拡大した際にテキストのスペースが狭くなり過ぎないようにバランスを調整することが重要です例えば iPhoneの設定アプリにはテーブルビューの各項目にテキストラベルと装飾画像が含まれていますテキストサイズを大きくするとラベルは大きくなりますが装飾画像のサイズは変わりません
これはアプリでは装飾用のビューよりも重要なコンテンツのサイズ変更が優先されるためです画像サイズが変更されない場合はスペースを活用できるようテキストを画像の次の行へ改行しますテキストサイズを非常に大きくする場合装飾的要素を削除することもできますがこれは例外的なケースに限定すべきです使用する場合機能と重要なコンテンツに影響が出ないよう注意する必要がありますでは SwiftUIとUIKitでこれを実装する方法を確認しましょう SwiftUIではテキストを簡単にアイコンの次の行へ改行できます ViewをListに含めるだけでテキストをアイコンの次の行へ改行できほかの作業は不要です Listビュー以外でも画像を直接テキスト内に挿入することもできます UIKitでこの動作を実装するには NSAttributedStringを使用します AttributedStringを作成しそれに NSTextAttachmentとして指定した画像を追加します
画像のサイズもテキストに合わせて調整されるようにすべきケースもあります特に画像にテキストが含まれる場合やコンテンツのほかの部分に関連する重要なアイコンがある場合などです
画像がSF Symbolsならサイズは自動的に調整されますしかしアセットに画像やPDFが含まれる場合は対応が必要ですこの場合 ScaledMetric APIを使えば選択したテキストサイズに合わせて画像のサイズが調整されるようになります ScaledMetricを追加して画像の幅や高さを指定するだけでテキストサイズが変更されると実行時にこの値が自動的に調整されます
素晴らしいです！テキストサイズを大きくすると画像とテキストのサイズが自動的に変更されます
UIKitでこの動作を実装する際に使うのは UIImage.SymbolConfigurationです例えば SymbolConfigurationと textStyleを使って特定のテキストスタイルの Configurationを作成しそのSymbolConfigurationを使って UIImageを作成します最後にラージコンテンツビューアについて説明しますラージコンテンツビューアを使うと大きなテキストサイズとともに拡大されないコントロールも見やすくなりますその機能の仕組みをご紹介します iPhoneの時計アプリには画面下部にタブが4つありますこのタブをタップしそのまま押し続けると画面中央にラージコンテンツビューアが表示されタップしているタブのラベルとアイコンが大きなサイズで表示されます
スワイプでほかのタブに移動し目的のタブが表示されたら指を離します
この方法ならタブバーの高さが画面の10%未満に収まりますをオンにするとタブバーの高さも増える設定にしている場合タブバーが画面の約4分の1を占めてしまいますこのバーは常に表示されているのでアプリのコンテンツを邪魔しないように表示することが大切ですシステムのデフォルトのコントロールバーを使っている場合は特に何もする必要がありませんこれはすでにサポートされていますしかしカスタムのバーやビューを使用する場合はラージコンテンツビューアを必要に応じて利用できるようにしましょう
SwiftUIではカスタムのタブバーをこの例のような形で構築できますこの例では表示される各タブのボタンが HStackに含まれていますバインディングによりタブバーが選択された項目を追跡できるようになります
ラージコンテンツビューアのサポートを追加するには accessibilityShowsLargeContentViewerモディファイアを使ってビューに表示するボタン名や記号などのラベルを指定します
ラージコンテンツビューアを UIKitでサポートするには UILargeContentViewerItemプロトコルにビューを準拠させてタイトルや画像を指定するプロパティとラージコンテンツビューアを表示するタイミングを示すプロパティを指定します次に UILargeContentViewerInteractionのインスタンスを作成してビューに追加しますコントロールで独自のジェスチャリコグナイザを使う場合は追加の処理を行ってまずラージコンテンツビューアがジェスチャを処理できるようにする必要があります
ほかのジェスチャリコグナイザとの認識や失敗の関係を設定するには UILargeContentViewerInteractionの gestureRecognizerForExclusionRelationship について調べてみてください
ダイナミックタイプの導入方法の説明は以上ですさっそくご自身のアプリで大きなテキストのサイズを試してみてくださいシステム定義のテキストスタイルの使用やレイアウトのカスタマイズによりテキストの読みやすさの向上に注力しアプリを改善できる部分を検討しましょうテキストサイズに関する好みやニーズはユーザーごとに異なります各ユーザーのニーズにアプリが柔軟に対応できるようにすればアプリでテキストを読むすべての人に優れた体験を提供できますさらに UIテストにアクセシビリティの監査を追加すればアプリを変更するたびにダイナミックタイプに関する問題がないか確認できます SwiftUIを活用した支援技術について詳しく解説している「Catch up on accessibility in SwiftUI」のセッションもぜひご覧くださいご視聴ありがとうございました

3:53 - Built-in text styles with SwiftUI

// Use built-in text styles with SwiftUI

import SwiftUI

struct ContentView: View {

    var body: some View {
        Text("Hello, World!")
            .font(.title)
    }

}

4:06 - Built-in text styles in UIKit

// Built-in text styles in UIKit

import UIKit

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let label = UILabel(frame: .zero)
        setupConstraints()
        label.text = "Hello, World!"
        label.adjustsFontForContentSizeCategory = true
        label.font = .preferredFont(forTextStyle: .title1)
        label.numberOfLines = 0
        
        self.view.addSubview(label)
    }
}

7:20 - Dynamic layout in SwiftUI

// Dynamic layout in SwiftUI

import SwiftUI

struct FigureCell: View {
    @Environment(\.dynamicTypeSize) 
    private var dynamicTypeSize: DynamicTypeSize
    
    var dynamicLayout: AnyLayout { 
        dynamicTypeSize.isAccessibilitySize ?
        AnyLayout(HStackLayout()) : AnyLayout(VStackLayout())
    }
    
    let systemImageName: String
    let imageTitle: String
    
    var body: some View {
        dynamicLayout {
            FigureImage(systemImageName: systemImageName)
            FigureTitle(imageTitle: imageTitle)
        }
    }
}

7:52 - Dynamic layout in SwiftUI

// Dynamic layout in SwiftUI

import SwiftUI

struct FigureContentView: View {
    @Environment(\.dynamicTypeSize) 
    private var dynamicTypeSize: DynamicTypeSize
    
    var dynamicLayout: AnyLayout {
        dynamicTypeSize.isAccessibilitySize ?
        AnyLayout(VStackLayout(alignment: .leading)) : AnyLayout(HStackLayout(alignment: .top))
    }
    
    var body: some View {
        dynamicLayout {
            FigureCell(systemImageName: "figure.stand", imageTitle: "Standing Figure")
            FigureCell(systemImageName: "figure.wave", imageTitle: "Waving Figure")
            FigureCell(systemImageName: "figure.walk", imageTitle: "Walking Figure")
            FigureCell(systemImageName: "figure.roll", imageTitle: "Rolling Figure")
        }
    }
}

8:20 - Dynamic layout in UIKit

// Dynamic layout in UIKit

import UIKit

class ViewController: UIViewController {
    private var mainStackView: UIStackView = UIStackView()
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        NotificationCenter.default.addObserver(self, selector: #selector(textSizeDidChange(_:)), name: UIContentSizeCategory.didChangeNotification, object: nil)
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupStackView()
    }

    @objc private func textSizeDidChange(_ notification: Notification?) {
        let isAccessibilityCategory = self.traitCollection.preferredContentSizeCategory.isAccessibilityCategory
        mainStackView.axis = isAccessibilityCategory ? .vertical : .horizontal
        setupConstraints()
    }
}

10:12 - Scale inline images with SwiftUI

// Inline images in SwiftUI

import SwiftUI

struct ContentView: View {

    var body: some View {
        List {
            FigureListCell(figureName: "Standing Figure",
                systemImage: "figure.stand")
            FigureListCell(figureName: "Rolling Figure",
                  systemImage: "figure.roll")
            FigureListCell(figureName: "Waving Figure",
                systemImage: "figure.wave")
            FigureListCell(figureName: "Walking Figure",
                systemImage: "figure.walk")
        }
    }

}

10:30 - Scale inline images with UIKit

// Inline images in UIKit

func attributedStringWithImage(systemImageName: String, imageTitle: String) ->       NSAttributedString {
    let attachment = NSTextAttachment()
    attachment.image = UIImage(systemName: systemImageName)
    
    let attachmentAttributedString = NSMutableAttributedString(attachment: attachment)
    attachmentAttributedString.append(NSAttributedString(string: imageTitle))
    
    return attachmentAttributedString
}

11:05 - Scale images in SwiftUI

// Scaling images in SwiftUI

import SwiftUI

struct ContentView: View {
    @ScaledMetric var imageWidth = 125.0
    var body: some View {
        VStack {
            Image("Spatula")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: imageWidth)
            Text("Grill Party!")
                .frame(alignment: .center)
        }
    }
}

11:38 - Scale symbols with UIKit

// Symbol configuration in UIKit

import UIKit

func imageWithBodyConfiguration(systemImageName: String) -> UIImage? {
  let imageConfiguration = UIImage.SymbolConfiguration(textStyle: .body)
  let configuredImage = UIImage(systemName: systemImageName, withConfiguration: imageConfiguration)
  return configuredImage
}

13:15 - Add large content viewer support with SwiftUI

// Large content viewer support in SwiftUI

import SwiftUI

struct FigureBar: View {
    @Binding var selectedFigure: Figure
    
    var body: some View {
       HStack {
            ForEach(Figure.allCases) { figure in
                FigureButton(figure: figure, isSelected: selectedFigure == figure)
                    .onTapGesture {
                        selectedFigure = figure
                    }
                    .accessibilityShowsLargeContentViewer {
                        Label(figure.imageTitle, systemImage: figure.systemImage)
                    }
            }
        }
    }
}

13:45 - Add large content viewer support with UIKit

// Large content viewer support in UIKit

import UIKit

class FigureCell: UIStackView {
    var systemImageName: String!
    var imageTitle: String!
    var imageLabel: UILabel!
    var titleImageView: UIImageView!
    
    required init(coder: NSCoder) {
        super.init(coder: coder)
        setupFigureCell()
    }
    
    init(systemImageName: String, imageTitle: String) {
        super.init(frame: .zero)
        
        self.systemImageName = systemImageName
        self.imageTitle = imageTitle
        
        setupFigureCell()

        self.addInteraction(UILargeContentViewerInteraction())
        self.showsLargeContentViewer = true
        self.largeContentImage = UIImage(systemName: systemImageName)
        self.scalesLargeContentImage = true
        self.largeContentTitle = imageTitle
    }
}

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

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

関連する章

リソース