Formatters：データをヒューマンフレンドリーに

Formatters：データをヒューマンフレンドリーに

時間の節約とフラストレーションの軽減：Appに日付、時間、測定結果、名前、リスト、数字、文字列などのデータを表示する際に、それを正しくフォーマットして優れたエクスペリエンスを提供する方法を学びましょう。ここでは、Formatter APIと、stringsdictでSwiftUIが機能する仕組みをご紹介し、データのフォーマットに関する手間のかかる作業の実行にそれらがどのように役立つかをご覧いただきます。ベストプラクティスと、よくあるミスの回避方法を学びましょう。

リソース
関連ビデオ

WWDC22
- グローバルAppをビルドする：事例を挙げてローカライズ化
WWDC21
- 各言語に対応したテキストの簡素化
WWDC20
- 位置情報を利用するエンタープライズAppを構築する
ダウンロード

こんにちはようこそWWDCへ
“Formatters：データをヒューマンフレンドリーに” みなさんこんにちはカラン･ミシュラです今日はアプリケーションのデータを扱いやすくわかりやすくする方法をお話しします毎日さまざまな種類のデータを表示するたくさんのアプリケーションを使用していますたとえば天気アプリケーションはさまざまな計測でいっぱいですほかにもヘルスアプリケーションでは傾向と主要な統計を表示しますさらに“メモ”のように単純な日付とタイムスタンプだけしか表示しないものもありますデータがどれほど目立つように表示されていたとしてももどの単位どのフォーマットが使用されているのか正しく理解することが重要ですこれは極めて重要なことでアプリケーションが１つの言語のみで利用できるのかまたは複数の異なる言語で利用できるのかは関係ありませんそしてフォーマッタを強化する基本的なアルゴリズムとデータセットをアップデートし― 言語と地域の組み合わせに対するサポートを拡大しましたなぜか？我々はグローバル化がすすむ世界で生活しているからです世界中でユーザーが地域と伝統的に関連のない言語でデバイスを使用しています
たとえばアブダビに住む人がフランス語でiPhoneを使うかもしれません “言語と地域のさらなる組み合わせ” 以前はここでホームアプリケーションに表示されているようにフランス式の数値形式で小数点区切りにコンマを使用することを意味していました
現在 iOS 14 最新バージョンのMac OS watchOS tvOSではより地域に合う― この場合は UAEに適した形式になりますそして言うまでもなくこの変更はひとつの言語と地域に限定されず無数の言語と地域の組み合わせにわたるフォーマットを改善する一般的なアルゴリズムです
アプリケーションでフォーマッタAPIを使用するメリットとそれにより節約できる時間と労力そして APIを使用し多用途のUIを構築する方法をご紹介します “すべてをフォーマットする” いくつかのセクションで説明します各セクションを説明するさい Apple独自のアプリケーションの実際の例を用い最も具体的なものから一般的なものの順に説明します私の目標は自由に使用できる広範なAPIセットを紹介することですシンプルなことは簡単にでき複雑なことも可能です “日付と時刻‐測定単位- 名前 - リスト - 数値 - 文字列” 日付と時刻からはじめましょう
シンプルな例を用います “メモ”ではメモの最上部で最後に変更した日付と時刻を確認できますなにができるか見ていきましょう
ここに年月日そして時刻で完全な日付を表示したいですこれはDateFormatterの事前に定義されたスタイルで達成でき日付にはミディアムスタイルを時間にはショートスタイルを使用しますミディアム長の形式であるため “at”という単語が自動的にここに追加されることに注意してくださいお伝えしたとおりシンプルなことは簡単にできました
ではより複雑なことも可能であることをご紹介します設定でスクリーンタイムのUIが表示されていますここで日付月につづき曜日を表示したいとしますでも年はふくみませんこれは事前定義スタイルが提供するものではなくテンプレートを指定することで可能です
スクリーンタイムのもう一つの例でほかの多くのUIでも見られることですが曜日の省略形のみ必要な場合カスタムテンプレートでリクエストできますご覧のとおりテンプレートのメカニズムは本当に強力ですではテンプレートについて詳しくみていきましょう “テンプレート” Unicodeはさまざまな技術報告書を公開していて “日付”を含む7シリーズから成ります実は AppleがUnicodeメンバーとして主要な貢献者の１つとなっていることを誇りに思っていますこれはテンプレートへ参照するのに優れていて多くの説明と例が記載されています曜日を探すときにはスクロールしてこのセクションを見つけますここの大文字の“Ｅ”欄と小文字の“ｅ”と“ｃ”欄の中から選べますどれを使うべきでしょう？覚えておいでと思いますがグラフで曜日ラベルを表示していたのでこれらはスタンドアロンでロング形式の一部ではありませんこれがテンプレートに小文字の“ｃ”を選択するのに役立ちます
テンプレートを選択したところでどう機能するかみてみましょう
さまざまな長さの小文字“ｃ”の出力が表示されていますここで５つのＣを含むテンプレートが適切だということに注意してください最も省略された形式が必要なためですまたこれらの長さの解釈のされ方がさまざまな言語間で異なることに気を付けてください英語では５つの長さがすべて異なって表示されていますが― アラビア語と日本語ではそうではありませんなので適切なテンプレートの選択が重要でサポートしているすべてのロケールを考慮します一部の違いは特定の言語またはロケールのみで現れる場合があるためですこれがスタンドアロンスタイルを選択することが極めて重要だった理由でもあります英語では違いはありませんが他の言語では生じるかもしれませんテンプレートについてもう一つ大事なことはフィールドの順序は重要ではないということですこのテンプレートもこれもこのテンプレートも　同じです
テンプレートは私たちが興味のあるデータの一部を取り出しそれをロケールにとって意味あるものに構築するのはフォーマッタの仕事です
アメリカ英語では　みてわかるようにコンマを追加しますイギリス英語ではこのように日に月が続くようにします逆ではいけません最後の例ですが日本語では“月”と“日”の文字を追加します日本語で日付を分かりやすくするために必要です
さいごにDateFormatterは dateFormatというプロパティをもちますテンプレートをプロパティに直接セットしてはいけませんそれが文字通りに解釈されほぼ確実に間違った結果を生じさせるからですかわりに常にテンプレートから日付フォーマットを作成すべきです
日付と時刻をフォーマットするための APIがさらにいくつかあります
DateComponentsFormatterは期間に使われているようなコンポーネントのフォーマットに役立ちますまた時間範囲もこのヘルスアプリケーションのように DateIntervalFormatterでフォーマットできます開始日と終了日の両方にあるエレメントの繰り返しの回避にも対処します
さいごに RelativeDateTimeFormatterは強力なツールで自然な方法で過去や未来の日付を表示します次は計測についてみていきましょうアプリケーションが何かしらの計測を使用する場合 MeasurementFormatterが有用です天気アプリケーションでいくつか使用例をみてみましょう
温度からはじめますすべての例はメートル単位で計測を設定していますが右側のディスプレイの表示はすべて US向けにローカライズされヤード単位を使用していますですので摂氏16度は華氏61度で表示されますスピードも同じです時速の値がUS向けにマイルになります気圧も同様ですこれらの例をお見せするのは計測のデータソースがメートル又はその他の単位を使用するかもしれないからです MeasurementFormatterは面倒な作業を単位にとどまらず言語とロケールにわたってすべて行います３種類の異なる種類の計測をご紹介しましたが MeasurementFormatterはさらに多くをサポートしていますそして使用したい単位をサポートしていない場合カスタム単位の作成も可能です詳細は WWDC 2016 の素晴らしい “Measurements and Units”をご覧ください
次に名前について話します
名前はアプリケーションに表示する最も個人的なデータの１つで― 誰しも画面で名前を見ると非常に強く反応します名前形式を正しく取得することはよい印象を与えるためにきわめて重要です幸い PersonNameComponentsFormatterの使用で― 略して“Name Formatter”と呼んでいます正しいことを簡単に実行できます
やることはコンポーネントオブジェクトを設定しフォーマットされた文字列を要求することだけです
デフォルトではName Formatterはミディアムスタイルを選びます姓と名などのすべての主要なコンポーネントが含まれます
ユーザーの好みに合わせてショートスタイルも要求でき― ニックネームや名前の短縮版に使用します
ここで見られるように省略形はモノグラムのような特定のユースケースが対象ですここ数年でより多くのアプリケーションがモノグラムを使用するようになりましたではより徹底的にみていきましょう
モノグラムは写真やアバターがない場合に最適な選択肢で UIを親しみやすく魅力的なものにします Name Formatterはモノグラムを考慮して設計されていますただしすべての名前に対しモノグラムを生成することはできず一部の省略名は長すぎて特定のUIに収まらない場合があることに注意してください Swiftで長さチェックに基づいてモノグラムを制限するのは簡単です Swiftカウントはユーザー視認文字に基づいていて Unicodeコードポイントではないので言語間でうまく機能しますもちろん文字数はレンダリング時の文字列の高さと幅を決定することはできませんなので文字列が適切に収まるか確認する必要があります
文字数が長すぎるまたは文字列が大きすぎて収まらないときフォールバックオプションを使用する必要がありますモノグラムの代わりに使われる一般的なアイコンのようなものです
さいごにお話ししたいのは Name Formatterには多くのインテリジェンスが組み込まれていて名前をフォーマットするさいにいくつかの情報を使用するということですユーザーの言語設定名前の順序などの連絡先設定名前そのものなどです
たとえばここでは英語で動作しているiPhoneに日本人の名前が表示されています意図的にこの例をお見せしています Name Formatterはすべてのケースで適切に名前をレンダリングします名前の言語がiPhoneの言語と異なる場合でもそうです
中国語日本語韓国語で書かれた名前の場合常に姓のあとに名が続きますそれが名前を書くための唯一の適切な方法です次に適切にフォーマットされたリストの作成方法を見てみましょう人間が読めるテキストとしてフォーマットされたアイテムのリストを表示するさいには ListFormatterを使用できます時間を節約するだけでなく微妙な差異を正しくすることでアプリケーションの見た目を洗練することを紹介します APIはこれほど簡単ではありませんシンプルに文字の配列やそのほかリストに組み合わせたいオブジェクトを特定し― 結合リストを返しますこれにより得られるメリットを見ていきましょう UIのキーボード設定です２つのとてもシンプルなリストでフォーマットしています言語名は“英語”と“スペイン語”です英語では途中に “and”という単語を挿入するだけです言語の順序が変更された場合も同じですしかしスペイン語にローカライズされた同じUIをみてみると単語“and”がスペイン語で表示されますただスペイン語の“and”はかなり文脈によって変化することをご存知でしょうか？エレメントの順序を変更するさいスペイン語での“and”も変化するということに注意してください実際 iOS 14では最新バージョンのmacOS tvOS watchOSと同様に ListFormatterは文法のルールを順守するよう更新されましたスペイン語を含むいくつかの言語が対象ですこれがフォーマッタAPIをできる限り使用する多くの理由のうちの１つです膨大な複雑性を抽象化しローカリゼーションを無料で提供するだけでなく基盤となる実装が更新と改善されるためコードを一行も修正することなくアプリケーションの動作を改善しますここで二つの一般的なデータタイプについて話します数字から始めましょうクイズです画面になんの数字が見えていますか？ちょっとしたひっかけ問題ですどの言語を使用しどの地域にいるかによってこれを32,768か32.768として解釈しますこの場合電卓には小数点がなく 32,768と表示しています
フォーマットする方法をご説明しますとても簡単です
アプリケーションがアラビア語でエジプト地域で立ち上げられた場合どうなるでしょう？見てわかるとおりNumberFormatterが面倒なことを行ってくれますすべてを適切に確実にローカライズします
言語やロケールにより変化する特定の記号にアクセスする必要がある場合パーセント記号と小数区切り記号を引き出す便利な方法があります実際にはもっと多くの便利なAPIがありますがここには示されていません
NumberFormatterはいくつか異なるスタイルをサポートし― パーセントスタイルも含みますここでも同じように言語と地域における微妙な差異を処理することを期待しますたとえばこれが数字を適切にフォーマットしているのが分かりますトルコ語向けにパーセント記号が数字の前にきていますここではこれ以上 NumberFormatterの詳細をお話しません役立つ機能が圧倒的に多いためですですがドキュメントをチェックするか Xcode Playgroundで使用してみてくださいさいごに文字列についてのお話ですさまざまなフォーマッタAPIがすべてのアプリケーションで共通してフォーマットされている広範なデータタイプをカバーする一方で標準フォーマッタを持たない独自のデータをアプリケーションが保持しているかもしれませんたとえば写真の数をフォーマットする標準フォーマッタはありませんどう機能しているか例を見てみます極めて単純にこれを行います SwiftUIでテキストエレメントを使用し通常行うようにテキストを特定しますコードが進む限り私たちは書くだけです “STRINGSDICT” そして対応する文字列をふくむ stringsdictファイルがあることを確認するだけです stringsdictや一般的なローカリゼーションについて詳細を知るにはここに示されているURLのドキュメントを確認してくださいテキストを英語とアラビア語に翻訳しました結果がどのように見えるかみてみましょう 1枚の写真が選択されると英語では数字の“1”が使用される一方でアラビア語ではより自然に表示するために数詞に書き換えます
2枚の写真が選択されるさいは英語ではここでも数字を使いますが英文法に従い “photo”が“photos”となります一方でアラビア語ではアラビア語文法に準じて双数形になります
3枚の写真だと英語とアラビア語は似ていて “photo”の複数形に数字が続いています
10枚までは同じです 11枚以上になるとアラビア語文法では異なる複数形を使用することが規定されていますみなさんいまいろんな言語の文法規則の学習に興味を持ったかもしれませんねわかりますよでもこのセッションではつぎのことを理解していただきたいです stringsdictを使用して文字列を正しくローカライズし― アプリケーションでできる限りフォーマッタを使用するとサポートする言語数に関係なくアプリケーションに磨きがかかりますそしてこのすべてのことはたった一度コードを書くだけでできます現在または将来的にアプリケーションでサポートする言語数は関係ありません
さいごにお話ししたフォーマッタのさらなる機能をお見せし探求してもらうためにダウンロードして試せるサンプルアプリケーションを用意しましたフォーマットを楽しんでください

// Dates and Times

// Date with Day/Month/Year and Time
let dateFormatter = DateFormatter()
dateFormatter.dateStyle = .medium
dateFormatter.timeStyle = .short
dateFormatter.string(from: Date())

// Day of Week + Date + Month
let dateFormatter = DateFormatter()
dateFormatter.setLocalizedDateFormatFromTemplate
    ("MMMMdEEEE")
dateFormatter.string(from: Date())

// Abbreviated Day of Week
let dateFormatter = DateFormatter()
dateFormatter.setLocalizedDateFormatFromTemplate
    ("ccccc")
dateFormatter.string(from: Date())

5:56 - Date components formatter

// Dates and Times

// Date and Time Components
let formatter = DateComponentsFormatter()
formatter.unitsStyle = .abbreviated
let components = DateComponents(hour: 2, minute: 26)
formatter.string(from: components)

// Date and Time Intervals
let formatter = DateIntervalFormatter()
formatter.dateTemplate = "dMMM"
formatter.string(from: startDate, to: endDate)

// Relative Dates and Times
let formatter = RelativeDateTimeFormatter()
formatter.dateTimeStyle = .named
formatter.localizedString(from: DateComponents(day: -1))

6:29 - Measurements

// Measurements

// Temperature
let formatter = MeasurementFormatter()
let temperature = Measurement<UnitTemperature>
    (value: 16, unit: .celsius)
formatter.numberFormatter.maximumFractionDigits = 0
formatter.string(from: temperature)

// Speed
let speed = Measurement<UnitSpeed>
    (value: 14, unit: .kilometersPerHour)
formatter.string(from: speed)

// Pressure
let pressure = Measurement<UnitPressure>
    (value: 1.01885, unit: .bars)
formatter.string(from: pressure)

7:49 - Names

// Names

let formatter = PersonNameComponentsFormatter()
var nameComponents = PersonNameComponents()
nameComponents.familyName = "Iwasaki"
nameComponents.givenName = "Akiya"
nameComponents.nickname = "Aki-chan"

// Full Name
formatter.string(from: nameComponents)

// Short Name: Respects User Preferences
formatter.style = .short
formatter.string(from: nameComponents)

// Abbreviated Name
formatter.style = .abbreviated
formatter.string(from: nameComponents)

8:31 - Abbreviated name (monogram)

// Abbreviated Name: Monogram
formatter.style = .abbreviated
let monogram = formatter.string(from: nameComponents)
if (monogram.count <= 2) {
    // Use Monogram
}
else {
    // Use Icon
}

9:23 - Name formatter

// Names

let formatter = PersonNameComponentsFormatter()
var nameComponents = PersonNameComponents()
nameComponents.familyName = "岩崎"
nameComponents.givenName = "晃也"
nameComponents.nickname = "あきちゃん"

// Full Name
formatter.string(from: nameComponents)

// Short Name: Respects User Preferences
formatter.style = .short
formatter.string(from: nameComponents)

// Abbreviated Name
formatter.style = .abbreviated
formatter.string(from: nameComponents)

10:15 - Lists

// Lists

// English Localization

let items = [ "English", "French", "Spanish" ] ListFormatter.localizedString(byJoining: items)

let items = [ "English", "Spanish" ] ListFormatter.localizedString(byJoining: items)

let items = [ "Spanish", "English" ] ListFormatter.localizedString(byJoining: items)

// Spanish Localization

let items = [ "Inglés", "Español" ] ListFormatter.localizedString(byJoining: items)

let items = [ "Español", "Inglés" ] ListFormatter.localizedString(byJoining: items)

12:01 - Numbers

// Numbers

let formatter = NumberFormatter()
formatter.numberStyle = .decimal
formatter.string(from: 32.768) // French (France)

let formatter = NumberFormatter()
formatter.numberStyle = .decimal
formatter.string(from: 32.768) // Arabic (Egypt)

formatter.percentSymbol

formatter.decimalSeparator

12:33 - Numbers formatter

// Numbers

let formatter = NumberFormatter()
formatter.numberStyle = .percent
formatter.string(from: 0.71) // English (US)

let formatter = NumberFormatter()
formatter.numberStyle = .percent
formatter.string(from: 0.71) // Turkish (Turkey)

13:24 - Strings

// Strings

var body: some View {
    Text("\(photosCount) Photos Selected")
}

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

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

リソース

関連ビデオ

WWDC22

WWDC21

WWDC20