Chatwork株式会社 モバイルアプリケーション開発部 iOSチーム 中山 龍 2024年6月21日 - mobile.stmn #6 Translation API について 〜WWDC24〜

自己紹介 中山 龍 (なかやま りゅう) ● Chatwork株式会社 ○ 新卒2年目のiOSエンジニア(22) ○ (6月19日に22歳になりました) ● フルリモート勤務で愛知県在住 2 @ryu_develop 7月から社名がkubellに変わるので、Chatwork社員としてはラストの登壇です

今日のテーマ Translation APIを使った アプリ内のテキストを機械翻訳する方法について ざっくりお伝えします 3 注意: 開発環境の影響で手元で動作確認ができない機能があるため、理解の正しさに 不安がある部分に関する言及は極力避けています 注意: 本スライドの内容や説明に登場するコードは所属組織とは一切関係ありません

Translation APIとは

Translation API ● WWDC24の「Translation APIについて」(Meet the Translation API)にて紹介 ● アプリ内のテキストをある言語から別の言語に翻訳できる ○ 従来の翻訳アプリとその背後にある機械学習モデルを活用できるようにす るAPI ● iOS / iPadOS / macOSでサポートされている 5 概要

Translation API 1. オーバーレイによるテキストの翻訳 6 実現できること 2. 柔軟なテキスト翻訳 ● システム翻訳UIを表示し、アプリ内のテキストの翻訳操作を提供する ● iOS17.4+ / iPadOS17.4+ / macOS14.4+ で利用可能 ● システム翻訳UIを表示し、アプリ内のテキストの翻訳操作を提供する ● iOS18.0+ / iPadOS18.0+ / macOS15.0+ で利用可能 ● 現在はBeta

オーバーレイによるテキストの翻訳 1 TITLE タイトル

実装できるもの 8 ボタンを押すと... 下から翻訳のUIが表示される

実装できるもの 9 下から翻訳のUIが表示される ● 実際の画面 → ● 現在リリースされている環境で利用可能 ○ iOS17.4+ ○ iPadOS17.4+ ○ macOS14.4+

実装方法 10 下から翻訳のUIが表示される SwiftUIView() .translationPresentation( isPresented: $showsTranslation, text: inputText ) import Translation

実装方法 11 下から翻訳のUIが表示される SwiftUIView() .translationPresentation( isPresented: $showsTranslation, text: inputText ) import Translation Bool値 trueになると翻訳のUIが 表示される

実装方法 12 下から翻訳のUIが表示される SwiftUIView() .translationPresentation( isPresented: $showsTranslation, text: inputText ) import Translation String ここに渡した文字列が翻訳 の対象となる

実際のコード 13 import SwiftUI import Translation struct OverlayTranslateView: View { @State var showsTranslation = false let text = “Hello World!” var body: some View { HStack { Text(text) Button { showsTranslation = true } label: { // 任意の表示 } } .translationPresentation( isPresented: $showsTranslation, text: inputText ) } }

実際のコード 14 import SwiftUI import Translation struct OverlayTranslateView: View { @State var showsTranslation = false let text = “Hello World!” var body: some View { HStack { Text(text) Button { showsTranslation = true } label: { // 任意の表示 } } .translationPresentation( isPresented: $showsTranslation, text: inputText ) } }

柔軟なテキスト翻訳 2 TITLE タイトル

実装できるもの 16 ボタンを押すと... アプリ内のテキストが翻訳され たものに置き換わる Hello 翻訳 こんにちは 翻訳 上記画像は実際のものではなく参考画像として作成したものです (動作には現状はiOS18 betaが必要であるため、手元に動作環境がなく、また、 beta版 の画像は掲載することができないため )

実装できるもの 17 アプリ内のテキストが翻訳され たものに置き換わる こんにちは 翻訳 上記画像は実際のものではなく参考画像として作成したものです (動作には現状はiOS18 betaが必要であるため、手元に動作環境がなく、また、 beta版 の画像は掲載することができないため ) ● 参考の画面 → ● WWDC24で発表された新OSの環境で利 用可能 ○ iOS18.0+ ○ iPadOS18.0+ ○ macOS15.0+

実装方法 18 SwiftUIView() .translationTask { session in do { let response = try await session.translate(sourceText) targetText = response.targetText } catch { // エラーハンドリング } } import Translation アプリ内のテキストが翻訳され たものに置き換わる こんにちは 翻訳

実装方法 19 SwiftUIView() .translationTask { session in do { let response = try await session.translate(sourceText) targetText = response.targetText } catch { // エラーハンドリング } } import Translation アプリ内のテキストが翻訳され たものに置き換わる こんにちは 翻訳 Viewが表示されるときに１ 回実行される

実装方法 20 SwiftUIView() .translationTask { session in do { let response = try await session.translate(sourceText) targetText = response.targetText } catch { // エラーハンドリング } } import Translation アプリ内のテキストが翻訳され たものに置き換わる こんにちは 翻訳 翻訳したい文字列を渡し、 翻訳をかける

実装方法 21 SwiftUIView() .translationTask { session in do { let response = try await session.translate(sourceText) targetText = response.targetText } catch { // エラーハンドリング } } import Translation アプリ内のテキストが翻訳され たものに置き換わる こんにちは 翻訳 responseから翻訳後の文字列 を取り出す (そして表示用の変数に代入す ることで翻訳結果が UIに反映さ れる...)

実装方法 22 SwiftUIView() .translationTask { session in do { let response = try await session.translate(sourceText) targetText = response.targetText } catch { // エラーハンドリング } } import Translation アプリ内のテキストが翻訳され たものに置き換わる こんにちは 翻訳 responseから翻訳後の文字列 を取り出す (そして表示用の変数に代入す ることで翻訳結果が UIに反映さ れる...) TranslationSession.Configuration を使って翻訳タイミングの制御も可能！

実装方法 23 SwiftUIView() .translationTask { session in do { let response = try await session.translate(sourceText) targetText = response.targetText } catch { // エラーハンドリング } } import Translation アプリ内のテキストが翻訳され たものに置き換わる こんにちは 翻訳 responseから翻訳後の文字列 を取り出す (そして表示用の変数に代入す ることで翻訳結果が UIに反映さ れる...) TranslationSession.Configuration を使って翻訳タイミングの制御も可能！ ですが、まだ手元に動作確認できる環境がない ため、間違った情報を発信する恐れがあり... ということで、今日はこの話はしません (またいつか...!)

開発時の注意

開発時の注意 Translation APIはシミュレータでは機能しない 実機にビルドして挙動を確認する必要がある 25

まとめ

まとめ ● Translation APIとは ○ 翻訳アプリの背後にある機械学習モデルを活用できるようにするAPI ● 2種類の翻訳 ○ オーバーレイによるテキストの翻訳 ■ とてもシンプルな実装で翻訳UIを表示可能 ■ iOS17.4+ / iPadOS17.4+ / macOS14.4+ で利用可能 ○ 柔軟なテキスト翻訳 ■ アプリ内に翻訳後のテキストを表示可能 ■ iOS18.0+ / iPadOS18.0+ / macOS15.0+ で利用可能 ■ 現在はBeta ● 注意 ○ Translation APIはシミュレータでは動作しない 27

働くをもっと楽しく、創造的に