iPad用Scribbleの紹介

iPad用Scribbleの紹介

Scribbleは、Apple Pencilを使って、iPadにテキストを入力するための軽量でかつ人間工学に基づいた、楽しい方法を提供します。標準のテキスト入力コントロールを使用したり、カスタムのテキスト編集エクスペリエンスを実装したりするAppで、Scribble と手書きテキストをどのように活用できるかをご紹介します。Scribble が TextKit とどのように統合されているか、また、新しい UIScribbleInteraction API と UIIndirectScribbleInteraction API を使って、App内で Scribble を楽しく一貫した体験を提供する必要があるケースについても学びます。このセッションで多くのことを学んでいただくためには、UIKitテキスト入力コントロール、およびキーボード入力技術についての知識が必要です。“Keyboard Input in iOS”をご覧ください。カスタマイズされたテキストエディターを作成されている場合、UITextInputプロトコル、TextKit、またそれに関連するテキスト入力のAPIの知識が必要です。詳細は“TextKit Best Practices”および“The Keys to a Better Text Input Experience”をご覧ください。ペンシルを使った交流に関するデザインの手引きについては、“Apple Pencil Design Essentials”をご確認ください。

リソース
- Customizing Scribble with Interactions
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC20
- Appで外部キーボードをサポートする
ダウンロード

こんにちは WWDCにようこそ “iPad用 Scribbleの紹介” こんにちは “iPad用 Scribbleの紹介”にようこそダニエル･ゴベラです私はPencil and Paperチームのエンジニアです後から同僚のエヴァン･ロングが加わります ScribbleはiPadでテキストを入力する画期的な新しい方法で― 手書き文字認識を通じて Apple Pencilを使いますこの動画では Scribbleがどのように動作するのか概要を見ていきますすばらしいライティング体験を生み出す側面を見ていきます ScribbleをサポートするAPIを一通り説明した後 Scribbleの動作をカスタマイズする方法の例を最後にいくつか紹介しますアプリケーションの中ですばらしい体験が得られます iPadにScribbleを導入するとき画期的なものとなるように目指しました Apple Pencilを中心として― Scribbleはシステムに完全に統合されますつまり個別の書き込みエリアではなくどんなテキストフィールドにも直接書き込むことができます書いていくと自動的に入力されます特別なモードはなくタップすることもなくただ書くだけです iPadOS上のScribbleはシステム体験の一部ですつまりScribbleはキーボードと同じように全てのアプリケーションから― デフォルトで利用できますテキストを入力できる場所ならどこでも機能します最高クラスの手書き文字認識エンジンの上に構築されているのでエンジンは高速で非常に精度が高く完全にデバイス上で実行されますこのため常に利用でき完全にプライベートです
エンジンが認識する手書きは― 英語簡体字中国語繁体字中国語広東語ですではすばらしいライティング体験を生み出す側面の概要を見ていきましょうアプリケーションでScribbleによるすばらしい体験が実現するように使うことのできるガイドラインをお見せします
最初の重要な側面は― Scribbleによってテキスト入力が自在で楽に感じられることですマップ内で検索する例を見てみます最初にフィールドをタップすることなく直接書き始められることに注目してくださいもしアプリケーションの中に Scribbleによる直接の書き込みを受け付けず― 最初にタップが必要なフィールドがある場合もう少し後でお見せするAPIを使うべきです Scribbleは“ダイレクト” つまりテキストを挿入すべき位置は Pencilの位置によってシステムに伝えられます Safariで複数のフィールドがあるフォームに記入する例を見てみますフィールド間で簡単にジャンプする方法にも注目してくださいストロークは消えていき― 書くにつれて自動的に入力されます Motionでディクテイトしているような感覚です
２つ目の設計原理は“一貫性”です Scribbleはテキストを入力したいあらゆる場所で機能する必要がありますリマインダでの例を見てみますリストの各項目には普通に編集できるテキストが含まれます当然どのフィールドからも書き始められます人によっては新しいエントリを作成するのに― リストの下の空白エリアに書くことが自然であると感じますそこは通常ではテキスト入力ビューではなくこのためReminderではこのエリアに書けるように少し後で説明するAPIを採用していますこれにより新しいリマインダを簡単に追加する新たなすばらしい方法が生まれました編集ジェスチャの小さなセットもありジェスチャは一度覚えればよいものです Scribbleでテキストを編集できる場所ならジェスチャはどこでも同じように機能します Eメールを作成するときの例を見てみましょう水平線を引いてテキストを選択し普通のテキスト編集操作を実行できます削除したいテキストを消すこともできますこれらにより信頼できてなじみのあるインタラクションモデルとなるのです３つ目の設計原理は “Pencilの使いやすさ”です iOSユーザインタフェースは主としてTouch用に設計されており Pencilの入力に非常にうまく機能しますただし調整した点がいくつかあることに気が付きますそのいくつかを説明します第一に “書くこと”に集中できますテキストフィールドのプレースホルダーが良い例ですプレースホルダーのあるフィールドに書き始めと― ストロークと重ならないようにプレースホルダーが消えて手書き文字が読めるように保たれますこの動作はStandard Text Controlsによって無料で得られます
“安定的なレイアウト”とは書いている間にテキストフィールドと― その中のテキストが移動したりスクロールしないことです例えば検索フィールドによってはフォーカスされると位置が移動することがありますこれはキーボードの場合には重要ですが Pencilで書き込もうとするときには問題となり得ます
このためScribbleは― 移動する検索フィールドに書いていることを検出すると書き込みが一段落するのを待ってからフィールドをファーストレスポンダにしてテキストを挿入します標準の検索コントローラを使えばこの動作は無料で得られますただし同様のシフトアニメーションのあるカスタムフィールドがある場合そのことをScribbleに伝える必要がありフィールドのフォーカスを遅らせるように要求して同じ動作を得ることができます
書き込むスペースが常に十分にあることも重要です Messagesアプリケーションが良い例ですメッセージフィールドが画面の隅にあることに気づきます数ワード以上を書くための大きなスペースはありません
このためMessagesは Scribbleが使われていることを検出しフィールドの大きさを調整するため長いセンテンスでも余裕をもって書くことができます
特にメッセージングアプリケーションなど多くのものは同様のレイアウトですのでこの後紹介するAPIを使って同じ動作を適用することをお勧めします “サポートするAPI” ScribbleをサポートするAPIの概要を見てみましょういくつかは既存のAPIでいくつかは新しいものです
Scribbleは iOSからの既存のText Input APIである― Standard Text Controlsと UIKit Text Inputインフラストラクチャに依存しますさらにiOS 14では２つの新しいAPIも導入されこれらはScribbleの動作をカスタマイズできるようにします
最初に既存のText Input APIについてお話しましょう Standard Text Controlsは UIKitから入手できる― テキストフィールドテキストビュー検索フィールドなどですまたWebKitを通じ Webページ内において標準的な編集が可能な Webコンテンツとフォームも含まれますすばらしいことにこれらは全てすぐに機能し Scribbleで実にうまく機能しますできる限りこれらを使うことをお勧めしますこれらはアプリケーションの― ルックアンドフィールに合わせて大きくカスタイマイズが可能ですただしScribbleはパスワードフィールドをサポートしていませんなぜならパスワードはAutoFillを通じて入力する方法が推奨されるためです次はUIKit Text Inputインフラストラクチャですカスタムのテキスト編集体験がある場合ビューがキーボードおよび iOSテキスト入力システムを使って動作するように実装しなければならない一連のプロトコルがあります Scribbleはテキストビューに話すのと同じAPIに依存します特に UITextInputを― 適切かつ完全に実装することはとても重要ですこれはScribbleがテキストコンテンツや選択に関する情報をどのように取得するかそしてビュー内のテキストにどのように変更を加えるかですまたシステムから標準のカーソルと選択UIを取得する際 UITextInteractionを使うことをお勧めしますご自身でUIを実装する必要はありませんこれらのトピックについてさらに興味のある方は過去のWWDC 2012 および2017のすばらしいセッションをご覧ください次にエヴァンがアプリケーション内の Scribbleの動作について新しいAPIを使ってカスタマイズする方法の概要をお話ししますありがとう　ダニエル彼が紹介したように標準の UIKitテキストコントロールを使うと Scribbleはそのまま機能しますしかし Scribble体験のカスタマイズが必要なケースがありますこのカスタマイズをサポートするため iOS 14では UIScribbleInteractionと― UIIndirectScribbleInteractionが導入されましたまず UIScribbleInteractionです
インタラクションがビューに追加されますここではテキストフィールドに UIScribbleInteractionを追加しました
インタラクションはデリゲートを持ちアプリケーションはデリゲートを通じて Scribble体験をカスタマイズできます例えばビュー上でScribbleを無効にすると手書きが一時的に停止するまでビューがファーストレスポンダになることを遅らせたりまたはScribbleでの手書き開始時や終了時に通知を受けたりします次にUIScribbleInteractionを使用した実際のケースをいくつか見てみましょうアプリケーションによってはインライン完了フィールドが追加されています例えば Spotlightの検索フィールドですこのフィールドはキーボード入力ではうまく機能しますが手書きではフィールドからはみ出ることがあります
前にこのフィールドに追加した UIScribbleInteractionを使うことでビューが現在手書きを処理しているかチェックして― それに応じて完了テキストを更新することが可能ですこの場合には単に完了テキストを隠します次にScribble用に UIのレイアウトを最適化するため手書きが完了しているかどうかを確認する必要があります
確認する場所は最初の登場時かまたはUIの設定時ですこのときアプリケーションは UIScribbleInteractionのクラスプロパティ― isPencilInputExpectedを使いますこのプロパティが“true”のときにはアプリケーションはテキストエリアを少し大きくします
ビューの設定の一部として UIを変更するではなくユーザが書き終えた後にデリゲートメソッドの― scribbleInteractionDidFinishWritingを通じて UIを更新することも可能です注意すべき点としてこれまで紹介したいずれの方法でも UIはユーザが書いていない間に変更されますアプリケーションによっては描画と編集可能テキストがミックスされますこのような場合描画できるように Scribbleを無効にすることが有効ですこれは ScribbleInteractionのデリゲートメソッドであるshouldBeginAtを使いアプリケーションが描画モードのときに “false”を返すことによって行えます
次に UIIndirectScribbleInteractionを見てみましょう
UIScribbleInteractionと同様に UIIndirectScribbleInteractionもビューに追加されますインタラクションは Reminderによって使用され― 現在のリマインダリストの下に書き込み新しいリマインダを作成できるようにします
これはタップジェスチャに反応して編集可能になる― UIに使われるインタラクションでもあります
このインタラクションはデリゲートを持ちますこのデリゲートはエレメントに関するシステム情報を提供しますエレメントとは書き込むことのできるビュー内のエリアです２つ以上のエレメントを含めることが可能でエレメントのサイズは問いませんサンプルアプリケーションを用いて― UIIndirectScribbleInteractionがどのように使われたか詳しく説明します
サンプルアプリケーションではパソコンの背景に刻印を追加できますこの刻印エレメントはタップされるまで編集可能になりません指でタップすると― ファーストレスポンダになるテキストフィールドがインストールされ名前を入力できますしかしテキストを削除して― Apple Pencilで書こうとしてもこのエレメントは機能しませんなぜなら刻印フィールド単独では編集可能なテキストフィールドではないためですそこでこのフィールドが Scribbleで動作するように UIIndirectScribbleInteractionを追加してみましょう
刻印フィールドを書き込み可能エリアにするため UIIndirectScribbleInteractionをインストールします
次に書き込み可能領域を記述するデリゲートメソッドを― 実装する必要があります
最初に実装するものは全ての書き込み可能エレメントの― 識別子のリストを提供するデリゲートメソッドです
この場合刻印フィールドは１つの書き込み可能領域を持ちますこのため識別子を用いてただちに Completionハンドラを呼び出すことができます次にエレメントの位置に関するシステム情報を提供する必要があります
これはデリゲートメソッド frameForElementによって行います書き込むことのできる小さい領域を返すことも可能ですがここではビュー全体に書き込めるようにしてみましょう従ってこの場合では boundsを返すだけです
次にテキスト入力をサポートするレスポンダをフォーカスするよう― システムから要求されるケースを扱う必要がありますこれは focusElementIfNeededメソッドによって行います
テキストフィールドがインストールされていなければそれを作成してビュー階層に加えますインストールされたテキストフィールドがファーストレスポンダになるようにします最後にそのテキストフィールドを Completionハンドラによって返します
システムによって要求される最後の情報は特定のエレメントがフォーカスされるかどうかを示すことです
この場合１つのフィールドがあるだけですフィールドがありそれがファーストレスポンダの場合には"true"を返しそうでない場合には常に"false"を返します
これで刻印エリアに私の名前を書こうとすれば― 書くことができます
ScribbleをサポートするAPIを要約すると UIKitからのシステム内の― Standard Text Controls および WebKitがそのまま機能しますテキスト入力プロトコルを実装するカスタムのテキストエディタに対しても Scribbleは機能します ScribbleをカスタマイズするためこれはiOS 14に追加された２つのインタラクションを通じて行われます Pencilを持って Scribbleを備えたアプリケーションをテストします前半で説明した設計原理を適用する方法とこれらの動作の対部分を― Standard Text Controlsを使って無料で得る方法を確認してください Scribbleのインタラクションを適用して書き込み用のスペースを作成したり予測位置をScribbleに認識させたりして最終仕上げを行いましょうご視聴ありがとうございました iOS 14のアプリケーションで Scribbleが活躍することを楽しみにしています

func updateSearchCompletion() {
    customSearchField.hideCompletionText = interaction.isHandlingWriting
}

9:35 - UIScribbleInteraction.isPencilInputExpected

override func viewDidAppear(_ animated: Bool) {
    if UIScribbleInteraction.isPencilInputExpected {
        let lineHeight = textField.font?.lineHeight ?? 17.0
        let heightForScribble = lineHeight * 4.0
        heightConstraint.constant = heightForScribble
    }
}

9:51 - scribbleInteractionDidFinishWriting

func scribbleInteractionDidFinishWriting(_ interaction: UIScribbleInteraction) {
    let lineHeight = textField.font?.lineHeight ?? 17.0
    let heightForScribble = lineHeight * 4.0
    heightConstraint.constant = heightForScribble
}

10:08 - Should Begin

func scribbleInteraction(_ interaction: UIScribbleInteraction,
                         shouldBeginAt location: CGPoint) -> Bool {
    return !appIsInDrawingMode()
}

11:41 - Install UIIndirectScribbleInteraction in Engraving Field

override init(frame: CGRect) {
    super.init(frame: frame)
    indirectScribbleInteraction = UIIndirectScribbleInteraction(delegate: self)
    addInteraction(indirectScribbleInteraction)
    ...
}

11:48 - Request Elements

func indirectScribbleInteraction(_ interaction: UIInteraction,
                                 requestElementsIn rect: CGRect,
                                 completion: @escaping ([ElementIdentifier]) -> Void) {
    completion(["EngravingIdentifier"])
}

12:14 - Frame for element

func indirectScribbleInteraction(_ interaction: UIInteraction,
                                 frameForElement elementIdentifier: String) -> CGRect {
    return bounds
}

12:28 - Focus Element if Needed

func indirectScribbleInteraction(_ interaction: UIInteraction,
                                 focusElementIfNeeded elementIdentifier: String,
                                 referencePoint focusReferencePoint: CGPoint,
                                 completion: @escaping ((UIResponder & UITextInput)?) -> Void)
{
    if editingTextField == nil {
        createTextField()
    }
    editingTextField?.becomeFirstResponder()
    
    completion(editingTextField)
}

12:57 - Is Element Focused

func indirectScribbleInteraction(_ interaction: UIInteraction,
                                 isElementFocused elementIdentifier: String) -> Bool {
    // Indicate if our only element is currently installed and focused
    return editingTextField?.isFirstResponder ?? false
}

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

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

リソース

関連ビデオ

WWDC20