Appのキーボード入力のためのカメラの使用

Appのキーボード入力のためのカメラの使用

テキストの認識表示をサポートし、カメラからテキストデータをインテリジェントに取り込んで、App内のフォームやテキストフィールドに入力する方法を確認しましょう。ユーザがカメラをキーボード代わりに使用してテキストを入力する際に、コンテンツフィルタリングを適用して正しい情報を抽出して、その情報を適切なUITextFieldに取り込む方法を紹介します。これにより、Appで電話番号、住所、フライト情報などのデータを入力できるようになります。カスタムインターフェイスを作成して、UIImageViewsのような他のコントロールを拡張してこの機能をサポートする方法なども検証します。 AppでAutofillをサポートする方法について詳しくは、WWDC20の「どこにでもAutofill」と、WWDC17の「The Keys to a Better Text Input Experience」をご確認いただくことをお勧めします。

リソース
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- VisionKitの新機能
WWDC21
- キーボードレイアウトのガイド
WWDC20
- どこにでもAutoFill
ダウンロード

♪ (Appのキーボード入力のためのカメラの使用) 皆さんこんにちはロンサントスですキーボードの業務を行っているソフトウェアエンジニアですここで紹介するのは新機能を最大限活用してテキスト入力を行う方法ですディクテーションで入力するのではなくカメラを使用しますこのニュースリリースに対して一生懸命働いてきました WWDCがとうとう開催されることになりやっと休暇がとれます安全になったらすぐに休暇をとり旅行したいと思います旅行に関して気になるのはデジタル化されていないテキストの処理です言っていることがおわかりでしょうか？請求書パンフレット大きなバインダーなどホテルの部屋にあるものです幸いiOS 15には新しい機能がありテキストをいろいろなものからキャプチャリングできますここでお見せしましょうチェックしてみてくださいこの旅行記のAppを作っています旅行について文書化するために使用します最近行ったハワイのように泊った場所も文書化しますこの一番上に画像ヘッダを追加できますカメラロールの素敵な風景写真がいいでしょう次にホテルの情報のフィールドがあります名前電話番号住所などです実は書類にこれら全ての情報があります目の前にです
全てを入力したくありません今はその必要もないのです例えば電話番号の欄を 2回タップすると編集メニューに新しいオプションが表示されカメラからのテキストを使用できます起動するとカメラは瞬時に書類にあるテキストのグループを認識しますフリーズして電話番号だけを選択できあます次にをタップして完了ですこれはかなりすばらしいと思います百聞は一見に如かずということわざを思い出しますしかしこの機能では何千語ものテキストを絵に抽出できるのですいずれにせよ既にお伝えしたようにこの機能を最大限利用する方法を紹介したいと思います初めにコンテンツのフィルタついて話します覚えているかもしれませんが電話番号を大量のテキストからドラッグして選択する必要がありました電話番号を探していることを Appが知っていればこのようなことは必要ないはずです他のものを無視して番号だけをキャプチャできるはずですまずどれぐらい簡単に必要なコンテンツをフィルタできるかをお見せしますフィルタは TextConentTypeと keyboardTypeのプロパティにより行えますこれはテキストフィールとやテキストビューにあります事実このようなプロパティをおそらくは既に使用して AutoFillのようなものに使用していると思いますもしそうだとしたらすばらしいですカメラからの入力で追加のメリットを得られます使用したことがない場合はここにいくつかの前の年のビデオがありこれにより方法を確認できます TextContentTypeに戻りましょう TextContentTypeは様々な値のどれにもなる可能性がありますがカメラはこれらの全タイプをフィルタしませんこれら7つだけをフィルタするだけですいくつか例を見てみましょうこれが最初の4つです電話番号住所全体 URL Eメールでこれら全て現在 iOSに事前に用意されています iOS 15では新たに3つのタイプが追加されましたフライト番号出荷追跡番号そして日付・時間・期間のコンビネーションです旅行Appでフライト番号がどれぐらい役立つか想像できると思いますまたパッケージ追跡Appで追跡番号がどれぐらい役立つかも想像できると思いますこれらのコンテンツタイプの使用方法を説明します非常にシンプルです Interface Builderを使用している場合 ContentTypeと Keyboard TYpeを Attributesインスペクタで探してくださいコードでこれを行う場合は好きな値を割り当てるだけですこの旅行記Appで欄はphonePadのキーボードを使用し欄には fullStreetAddressの textContentTypeがあります電話番号の場合は autocorrectionTypeをに設定することに気づいてください自動補正や予測テキスト候補がないと iOSはカメラへのクイックアクセスを促すボタンを表示します私のAppに戻ってみましょうホテルの電話番号を再度キャプチャーできますが今回は変化がありますカメラを使うと賢くなっていて電話番号以外の他のテキストをすべて無視します欄で再度試してみましょう
非常に高速ですタッピングやスワイピングの回数が大幅に減りましたコンテンツのフィルタ方法は以上です次に別のことに挑戦してみましょうこの機能の利用を促進してもっと発見してもらえるようにするにはどうしたらよいのでしょうか？ Appの開発者として合理化されたユーザインターフェースを好みますこれはメニューやジェスチャーの背後に追加の機能が潜んでいてユーザが知らないことを意味することがあります例えば私のAppの欄を使用する場合ここの入力にカメラを使用できることはあまり知られていません 2回目のタップの際に編集メニューのみが表示されます予測テキストの候補のバーが先ほどお見せしたボタンの代わりに表示されますカメラの入力を求める画面上のボタンが必要な場合専用のランチャボタンを独自に追加した方がいいでしょうこれにはまずUIActionを作成する必要があります iOS 15の captureTextFromCameraという新しいFactory Methodを使用しますアクションはカメラの起動方法を把握していますが画像とラベルもボタンやメニューと共に使用されたときに提供しますカメラからテキストを挿入するためのアイテムのある私のAppにメニューを追加してみましょうさてここで再度私の Appを確認します欄の編集時にキーボードの上にこのツールバーが表示されますカメラのアイコンのある2番目のアイテムがタップされるときにカメラ関連のアクションを多数表示するメニューが現れるようにしたいですカメラからのテキスト入力の新機能のようにですここではアクションを作成しますオプションの識別子の他は Factory Medhodがレスポンダーにテキストの受け入れを求めるだけであることに気づいてください次に他のメニュー項目のアクションを作成します最後にメニューをアセンブルして作成します今作成したアクションのそれぞれに対してです textFromCamera アクションも含まれますタイトルや使用する画像を指定する必要がないことを思い出してくださいアクションによりこれは全て提供されていますタイトルはローカライズまでされますさあ試してみましょう Appに戻りますここに欄がありカメラメニューのあるツールバーがテキストを挿入してみましょう目の前にあるパンフレットからです
完了です！数行のコードだけのユーザが検出できるランチャですしかし念頭に置くことが1つありますカメラランチャを追加する前に canPerformActionwithSenderの結果をまず確認した方がいいということです captureTextFromCameraと呼ばれる UIResponderオブジェクトに対して新らしいメソッドを呼び出すことにより UIActionが機能するためです削除コピー貼り付けなどの標準的な編集アクションに似た形で機能しますこれらのアクションは常に利用できるわけではありませんコンテキストによります例えば何も選択していないとテキストを削除できませんが同じことがここでも言えます captureTextFromCamera アクションには前提条件がありこの1つのメソッドが必ず全要件が満たされる事を保証しますそれぞれを見てみましょうその方がなぜそのメソッドがfalseを返すことがあるのかよく分かりますまずハードウェアの要件がいくつかあります iOS 15を実行している全てのデバイスがこの機能をサポートしているわけではありませんデバイスは iPhoneである必要がありますどのiPhoneでもいいわけではありません Neural Engine 非常に高い学習機能のあるマシンの iPhoneが必要なのですハードウェアの他にもレスポンダーはテキスト挿入を処理する必要がありますこれについては後で詳細を説明します次に明らかかもしれませんがレスポンダーがテキストビューかテキストフィールドの場合編集可能にする必要があります最後にユーザは7つのサポートしている言語のうち少なくとも 1つを優先言語のリストに用意する必要がありますカメラの入力を処理する機能が整いましたしかしまとめに入る前に私のAppに追加した楽しいものをお見せしますヘッダの写真を覚えていますか？すばらしいですが字幕を追加するとさらによくなると思いますカメラから抽出される字幕かもしれませんそこでランチャボタンをここに追加しましたメニュー項目でやったようにです（紙のカサカサという音）
今はテキストをキャプチャして画像の上に置くことができますしかしどのようにしたらいいのでしょうか？これはイメージビューでテキストコントロールではありません少し戻ってテキストコントロールが機能する方法を確認してみましょうそしてその後イメージビューについて話しましょうテキストコントロールは UIKeyInputというプロトコルに準拠していますこれはレスポンダーがキーボード入力を受け入れる方法の標準セットを定義しますプロトコルには3つのメソッドがありそのうちの1つはinsertTextというメソッドですこのメソッドはテキストをカメラから Appにトランスポートするために使用されたメソッドと同一ですしたがってレスポンダーがカメラの入力をサポートするにはこのプロトコルに準拠する必要がありますテキストコントロールが UIKeyInputに準拠していることを言ったばかりですが実際には UITextInputというプロトコルに実際は準拠していますこれはUIKeyInputの extensionです UITextInputに準拠するとカメラの使用時に追加の機能が提供されます挿入するテキストのプレビューです setMarketTextメソッドの説明はこれで終了ですただしプレビューはオプションです使用する場合は UIKeyInputに準拠すればいいだけです最後にもう1つ説明すべきプロトコルがあります数分前にすでに確認したかもしれません UIKeyInputそのものは UITextInputTraitsを拡張しそのプロトコルはオプションのプロパティで構成されます keyboardTypeや textContentTypeのようにです前から分かっていますが特定のコンテントのためにカメラの入力をフィルタするために使用されますですからカメラの入力にはUIKeyInputに準拠し求める機能レベルに応じてオプションで UITextInputTraitsや UITextInputに準拠しますさてImageViewに戻りましょう HeadlineImageViewという新しいクラスを作成しますこれはUIImageViewのサブクラスを作成し UIKeyInputに準拠しますここにコードの形でありますこれはUIImageViewのシンプルなサブクラスで UILabelのサブビューがあります字幕を表示するのに使用されます UIKeyInputに準拠するには 3つの方法が必要であることを思い出してください hasText deleteBackward insertText ですレスポンダーは通常UIKeyInputに準拠してキーボードを呼び出しますキーボード入力は必要なくカメラ入力しか必要ないため insertTextを実装すればいいだけです hasTextはfalseを返すだけでよく deleteBackwardは何もする必要がありません insertTextについては実装が非常にシンプルですテキストをカメラから抽出しラベルに提供するだけですこれですべて完了です！カメラからキャプチャした字幕を表示する形で画像を表示できていますご視聴いただきありがとうございます！覚えておいてほしいことをお伝えしますテキストのコンテンツタイプを活用してください 2つ以上の方法で役立ちますカメラからのテキストをフィルタすることも含まれますカメラ入力を本当に向上させたい場合は自分のランチャを作成します一貫した外見を保持するためにラベルや画像を提供していますこれを使えば複数のAppでカメラ入力と連想できますしかしまず機能が利用可能であるかを必ず確認してください最後にカメラ入力をテキストコントロールではない自分のカスタムレスポンダーに使用できます UIKeyInputプロトコルに準拠する必要があるだけです安全な旅行を！WWDC 2021 の残りの時間をお楽しみください！ ♪

phone.keyboardType = .phonePad
phone.autocorrectionType = .no

address.textContentType = .fullStreetAddress

5:07 - Custom action to capture text from camera

let textFromCamera = UIAction.captureTextFromCamera(responder: self.notes, identifier: nil)

5:41 - Adding custom UIAction for capture text to a menu

let textFromCamera = UIAction.captureTextFromCamera(responder: self.notes, identifier: nil)

let choosePhotoOrVideo = UIAction(…)
let takePhotoOrVideo = UIAction(…)
let scanDocuments = UIAction(…)

let cameraMenu = UIMenu(children: [choosePhotoOrVideo, takePhotoOrVideo, scanDocuments, textFromCamera])

let menuToolbarItem = UIBarButtonItem(title: nil, image: UIImage(systemName: "camera.badge.ellipsis"), primaryAction: nil, menu: cameraMenu)

9:59 - Implementing UIKeyInput on a custom image view

class HeadlineImageView: UIImageView, UIKeyInput {
    var headlineLabel: UILabel = UILabel()
    var hasText: Bool = false

    override init(image: UIImage?) {
        super.init(image: image)
        initializeLabel()
    }
    
    func insertText(_ text: String) {
        headlineLabel.text = text
    }

    func deleteBackward() { }
}

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

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

リソース

関連ビデオ

WWDC23

WWDC21

WWDC20