Live TextのインタラクションをAppに追加する

Live TextのインタラクションをAppに追加する

静止画や一時停止したビデオフレームのLive TextサポートをAppに追加する方法をご覧ください。iOS、iPadOS、macOS上の画像ビュー内で、テキストの操作、翻訳、データ検出、QRコードスキャンを簡単に有効化する方法を紹介します。また、インタラクションするタイプの指定、補助的なインターフェイスの管理、潜在的なジェスチャーの競合を解消する方法も紹介します。ライブカメラのプレビューで検出されたデータでのキャプチャやインタラクションの詳細については、WWDC22の「VisionKitで機械可読コードやテキストをキャプチャする」をご覧ください。

リソース
- Enabling Live Text interactions with images
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC23
- VisionKitの新機能
WWDC22
- 卓越したビデオ再生体験の実現
- VisionKitで機械可読コードやテキストをキャプチャする
ダウンロード

♪ 明るい音楽ヒップホップミュージック♪ ♪ こんにちは私は Adam Bradford と申します VisionKit チームでエンジニアをしていますあなたの App に Live Text を追加する方法を説明しますまず Live Text とは何なのか説明します Live Text は画像を分析し認識結果を操作する機能をユーザーに提供します住所を地図で開く電話番号の発呼 URLへのジャンプなどのデータ検出ワークフローを提供しテキストの選択とコピーなどコンテンツとインタラクションしたり検索や翻訳のようなアクションを実行できます Live Text は QR コードのインタラクションにも対応しますこれをあなたの App でどのように使えるか想像してみてくださいもっと詳細が知りたいですかそれに適切に回答していきますこのセッションでは Live Text APIの一般的な概要を説明し既存の App にこの API を実装する方法を説明しますそして Live Text を App に追加する際に役立つヒントとトリックを見ていきます Live Text API の概要を説明します Live Text API は Swift で利用可能です静的画像で美しく機能し一時停止した動画にも適用できますライブカメラストリームで動画を分析してテキストまたはQRコードなどのアイテムを検索する必要がある場合 VisionKit のデータスキャナーが利用できます詳細については私の同僚である Ron のこのセッションで確認してください Live Text API は iOS 16 以降の Apple Neural Engine 搭載のデバイスで使えます Mac の場合は macOS 13 対応のすべてのデバイスで利用可能です 4つの主なクラスで構成されています使用するにはまず最初に画像が必要ですこの画像は ImageAnalyzer にフィードされ非同期で分析されます分析が完了すると結果が ImageAnalysis オブジェクトとしてプラットフォームに応じて ImageAnalysisInteractionまたは ImageAnalysisOverlayView に提供されますここまではある程度単純な説明だったかと思いますここからは既存の App に追加する方法についてデモを行いますここに当社の App がありますこれはシンプルな画像ビューアでありこれはスクロールビュー内に画像ビューがありますズームとパンどちらも実行できますしかしこのテキストを選択することもデータ検出器を起動することもできませんこれは単純にできないことですここに Xcode のプロジェクトがあります Live Text をこの App に追加するためにはビューコントローラーのサブクラスを変更しますまず初めに ImageAnalyzer および ImageAnalysisInteraction が必要となりますここでは viewDidLoad をオーバーライドし imageview にインタラクションを追加します次にいつ分析を行うのか知る必要があります
画像が設定された時にまず前の画像で設定された preferredInteractionTypes をまずリセットしますこれで新しい分析の準備が全て整いました呼び出す関数を作成し画像の存在を確認します
そしてタスクを作成します検索したい対象をアナライザに指定するためにコンフィギュレーションを作成します今回はテキストと機械読み取り可能なコードにします解析の生成はエラーの場合があるので適切に処理しますこれで分析処理を開始する準備ができました analyzeImageWithConfiguration メソッドを呼び出して解析処理を開始する準備ができました分析が完了したら解析が成功したことと時間の経過によって App の状態が変化している可能性があるため表示画像が変化していないことを確認しますこれらのすべての問題がなかった場合インタラクションに analysis を設定し preferredInteractionTypes を設定しますここでは .automatic を使用しますこれはデフォルトのシステム動作を提供しますこれでテストの準備が整ったかと思いますご覧ください Live Text ボタンが表示されテキストを選択できるようになりましたこれらのインターフェイス要素は自動的に配置され画像境界と可視領域の両方の内側に何もしなくても位置が維持されています Live Text ボタンをタップすると選択可能なアイテムがハイライトされデータの検出部分に下線が付きクイックアクションボタンも表示されますこのクイックアクションはタップで電話をかけることができ長押しで他のオプションが出ますこれはとても便利な機能ですよねこれらの数行のコードでただの画像に命が吹き込まれたのですこのシンプルな App は画像上のテキストを選択したりデータ検出器やQRコードを起動したりルックアップやテキストの翻訳などさまざまな機能を備えていますこの数行のコードだけで可能になる機能です Live Text を実装する方法をご覧いただきましたがこれから導入に役立ついくつかのヒントをご紹介していきますインタラクションタイプから見ていきたいと思いますほとんどの開発者はテキストを選択できる .automatic を選びます Live Text ボタンがアクティブになると検出された該当するアイテムに下線が引かれデータ検出器としてハイライトされワンタップでアクティベートしますこれは内蔵 App の挙動と全く同じですデータ検出器を使用せずにテキスト選択のみを行いたい場合はタイプを .textSelection に設定します Live Text ボタンの状態によって変化することはありませんテキストを選択させずにデータ検出器のみを使用したい場合はタイプを .dataDetectors に設定しますこのモードでは選択が無効であるため Live Text ボタンは表示されませんがデータ検出器には下線が引かれワンタップでアクセスできます preferredInteractionTypes を空白にするとインタラクションが無効になります最後にテキスト選択や自動モードでも長押しをすることでデータ検出器を有効にすることができますこれは allowLongPressForDataDetectorsInTextMode により管理されておりデフォルトで true つまり有効です必要であれば false に設定して無効にします次に下部にある補足インターフェースのボタンについて説明します通常は右下にある Live Text ボタンと左下のクイックアクションですクイックアクションは解析から取得された任意のデータ検出器を表し Live Text ボタン有効時に表示されますサイズ位置可視性はインタラクションによって制御されますデフォルトの位置と外観はシステム標準にマッチしたものですが App にはカスタムのインターフェース要素があり干渉したり異なるフォントやシンボルのウェイトを使っている場合がありますこのインターフェースをカスタマイズする方法を見ていきますまず初めは isSupplementaryInterfaceHidden プロパティについてですテキストを選択できるようにしたいが Live Text ボタンを表示したくない場合 SupplementaryInterfaceHidden を True に設定すると Live Text ボタンまたはクイックアクションが表示されなくなります ContentInsets のプロパティも利用可能です補足のインターフェースに重なってしまうインターフェース要素がある場合コンテンツの内側へのオフセットを設定し Live Text ボタンとクイックアクションを表示したときに既存の App のコンテンツにうまく調和させることができます App がインターフェースにカスタムフォントを使用している場合 supplementaryInterfaceFont を設定すると Live Text ボタンとクイックアクションはテキストに指定したフォントとシンボルのウェイトを使用しますボタンサイズの一貫性を保つために Live Text はポイントサイズを無視することを留意してください話は少し変わりますが画像の表示に UIImageView を使用していない場合ハイライトが画像とずれる場合があります UIImageView であれば VisionKit がその contentMode プロパティを使って contentsRect を自動的に計算しますのでずれませんこのインタラクションを設定したビューは画像よりも大きな領域を持っていますが認識領域の座標はインタラクションの領域との比率ですこれを修正するにはデリゲートメソッドの contentsRectForInteraction を実装しインタラクション領域の大きさを１として画像の領域を比率で表す Rect に設定すると解決します例えばこれらの値で Rect を設定すれば問題が修正されます App の現在のビューレイアウトに対する画像コンテンツの領域を正しく正規化された矩形で設定してください contentsRectForInteraction はインタラクション領域の大きさが変わるたびに呼び出されますが contentsRect が変更されてもインタラクション領域の大きさが変更されていない場合は setContentsRectNeedsUpdate() を呼び出して明示的に更新するようにインタラクションにリクエストします Live Text を導入する際にインタラクションを設定する最適な場所はどこでしょう理想的には画像コンテンツをホストするビューに直接配置します前に述べたように UIImageView であれば contentsRect から計算してくれるので必須ではありませんがお勧めです UIImageView を使用している場合 imageView にインタラクションを設定すればあとは VisionKit がやってくれます ImageView が ScrollView の中に配置されている場合 ScrollView にインタラクションを設定したくなるかもしれませんがこれは推奨されておらず contentsRect が継続的に変化するため管理が難しくなりますこの場合も解決方法は同じでたとえ拡大機能を実装した ScrollView 内であっても画像コンテンツをホストするビューにインタラクションを配置しましょうジェスチャーについて少しお話しますと控えめに言っても Live Text は非常に多くのジェスチャーを使っています App の構造によっては本来 App が処理すべきジェスチャーやイベントにインタラクションが反応したりその逆もあり得ますこのような問題が生じた場合に修正に役立つテクニックをいくつか紹介しますこれを修正する一般的な方法として interactionShouldBegin- AtPointForInteractionType を実装し false を返した場合 Live Text のアクションは実行されません指定されたポイントにインタラクティブなアイテムがあるのかアクティブなテキスト選択があるのか確認することから始めますテキスト選択のチェックはテキストの他をタップして選択解除できるようにするために使用しますまたインタラクションがジェスチャーに応答していない場合それは App のジェスチャー認識が代わりに処理しているからかもしれませんこの場合同様の解決策であるあなたの gestureRecognizer の gestureRecognizerShouldBegin デリゲートメソッドを実装して回避することができます同様の確認を行いその場所にインタラクティブなアイテムがあるか有効なテキスト選択がある場合は false を返すようにします余談ですがこの例ではまず nil を渡して gestureRecognizer の位置をウィンドウ空間の座標に変換し次にインタラクションのビューに変換していますこれはインタラクションが拡大表示された ScrollView にある場合に必要となる可能性がありますポイントが合わない場合はこのテクニックを試してみてくださいもう1つのオプションとして UIView の hitTest:WithEvent をオーバーライドする方法も便利ですここでもまた似たような話で前と同じ種類のチェックを行いこの場合は適切なビューを返します Appを可能な限り反応を良くするために Neural Engine は非常に効率的な分析を行いますが ImageAnalyzer で最高のパフォーマンスを得るためのヒントをいくつかご紹介します理想的には App で同時に使用する ImageAnalyzer は1つだけにしましょうまた複数の画像タイプをサポートしていますが元の画像タイプを送信することで常に画像変換が最小になります CVPixelBuffer がある場合は最も効率的ですシステムリソースを最大限に活用するために画像が画面に表示されたときまたはその直前にのみ解析を開始します例えばタイムライン上などで App のコンテンツがスクロールする場合はスクロールが止まってから解析を開始します Live Text はこの API だけでなく App がすでに使っているであろう複数のフレームワークで対応しています例えば UITextField または UITextView にはカメラを使ってキーボード入力する Live Text をサポートしています Live Text は WebKit および Quick Look でもサポートされています詳細につきましてはこれらのセッションを確認ください iOS 16 の今年の新機能として AVKit に Live Text のサポートが追加されました AVPlayerView と ViewController はデフォルトで有効になっている allowsVideoFrameAnalysis プロパティを介して一時停止フレームでの Live Text に対応します FairPlay で保護されていないコンテンツのみで利用可能であることに注意してください AVPlayerLayer を使用している場合解析とインタラクションの管理はあなたの責任ですが現在のフレームを取得するために currentlyDisplayedPixelBuffer プロパティを使用することは非常に重要なことですこれは適切なフレームが分析されていることを保証する唯一の方法です動画再生速度がゼロの場合にのみ有効な値が返されますがこれは shallow copy であり書き込むことは安全ではありません繰り返しになりますが FairPlay で保護されていないコンテンツにのみ利用可能です私たちはあなたの App に Live Text 機能を提供するお手伝いができることを嬉しく思っています Live Text チームのみんなを代表してこのセッションに参加してくれてありがとうございます App 内の画像にどのように使用されるのか楽しみにしています楽しい時間を過ごしてください！ ♪

import UIKit
import VisionKit

class LiveTextDemoController: BaseController, ImageAnalysisInteractionDelegate, UIGestureRecognizerDelegate {
   
    let analyzer = ImageAnalyzer()
    let interaction = ImageAnalysisInteraction()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        imageview.addInteraction(interaction)
    }
    
    override var image: UIImage? {
        didSet {
            interaction.preferredInteractionTypes = []
            interaction.analysis = nil
            analyzeCurrentImage()
        }
    }
    
    func analyzeCurrentImage() {
        if let image = image {
            Task {
               let configuration = ImageAnalyzer.Configuration([.text, .machineReadableCode])
                do {
                    let analysis = try await analyzer.analyze(image, configuration: configuration)
                    if let analysis = analysis, image == self.image {
                        interaction.analysis = analysis;
                        interaction.preferredInteractionTypes = .automatic
                    }
                }
                catch {
                    // Handle error…
                }
            }
        }
    }
}

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

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

リソース

関連ビデオ

WWDC23

WWDC22