淡色のグラフィックコンプリケーションについて

watchOS 6の多くの文字盤では、コンテンツの色合いをカスタマイズできるため、Appleの最もパーソナルなデバイスをさらにパーソナライズすることができます。このセッションでは、ClockKitのデータプロバイダを使用して、各種のコンプリケーションファミリーにフルカラーと淡色のオプションを提供する方法を紹介します。これにより、お客様はどの文字盤を選択しても、重要な最新情報を一目で確認できます。

リソース

関連ビデオ

Tech Talks

Apple Watch Series 4用のコンプリケーションの開発

ダウンロード

(音楽)

watchOSのエンジニアジャレド･マギャンです watchOS 5では文字盤に新しいインフォグラフが追加され watchOS 6ではティントモードが加わりました

コンプリケーションのグラフィックはティント対応です watchOS 6で例を見てみましょうコンプリケーションのグラフィックはゲージテキストイメージの３つで構成されますこれで文字盤の表情が変えられます見ていきましょうティントの場合ゲージは無地のカラーで表示されます

ユーザが選択したとおりにゲージのカラーは設定されますゲージの情報をカラーによって取得していた方は― コンプリケーションの表示方法を再考してみてください

ティントの場合テキストのカラーも単色ですユーザが選択した色のとおりにカラーが設定されますご覧いただいているように多色使いのテキストも単色になります

ティントのデフォルトは彩度が低くなっていますが新しいAPIを使えば別のイメージを作成できます

APIの話をする前にデータプロバイダについてお話しします ClockKitにはデータプロバイダがあり― コンプリケーションに表示するデータを管理します

フルカラーの場合を見てみましょう

まずimageのプロパティでフルカラーを指定します

そして accessibilityLabelでイメージの用途を指定しますではティントの場合はどうすればいいのでしょうか watchOS 6では新しく tintedImageProviderが加わりましたフルカラーより彩度を下げたくない場合に使う― オプションのプロパティですこれはCLKImageProviderのタイプですこのクラスでは onePieceかtwoPieceのテンプレートを作成できます

watchOS 2からあるCLKImageProviderを詳しく見てみましょうまずCLKFullColorImageProviderとは関係ありませんまったく別のクラスです CLKImageProviderがテンプレートのイメージを管理します指定されたイメージとカラーに則ったコンプリケーションが文字盤に表示されます

最初のプロパティは必須であるonePieceImageです

次はtintColorですクラシックのコンプリケーションにおいて― ティントカラーはイメージには適用されていましたが― グラフィックには適用されませんカラーはユーザの選択する色によって決定されるからです

twoPieceImageのプロパティは― twoPieceImageBackgroundと twoPieceImageForegroundの２つです

twoPieceImageはクラシックでは多色のコンテキストに使用され― グラフィックではティントに使われています場合によってはonePieceより twoPieceImageを優先させます twoPieceImageでは Backgroundの上に Foregroundのイメージを重ねますこの２つがイメージのテンプレートですクラシックのコンプリケーションでは― カラーはBackgroundに白はForegroundに適用されますグラフィックではティントカラーは無視されます BackgroundとForegroundのカラーはユーザの選択に左右されます

ではティントを使ったグラフィックを見てみましょうまずティントのコンテキストでフルカラーにした場合です右が彩度の低いフルカラーでほぼモノクロです

これを実行するためには CLKFullColorImageProviderをイニシャライズするだけです tintedImageProviderを“nil”にすれば彩度の低いフルカラーで表示されます

必要な場合は別のテンプレートも表示できます彩度をうまく下げられなかったり― 色が変わってしまう心配がある時に使います

この場合は onePieceImageをつけた CLKImageProviderをつくり― それをCLKFullColorImageProvider イニシャライザに渡しますフルカラーのコンテキストなら ClockKitを― ティントのコンテキストなら CLKImageProviderを使います

tintedImageProviderではフルカラーと同じイメージを生成でき― そのイメージをテンプレート化できますこの方法は多くのwatchOSで共通です

最後にティントで別のtwoPieceImageを作成する方法です

onePieceImageとtwoPieceImageのついた CLKImageProviderをつくり― CLKFullColorImageProvider イニシャライザに― fullColorImageをつけて渡しますティントの場合はClockKitが onePieceかtwoPieceのどちらを使うかを決定します

これは Human Interface Guidelinesにある― コンプリケーションのレイアウトです

同じレイアウトをティントにしました

ClockKitを使えばコンプリケーションをティントに変更できますグラフィックではユーザが選ぶ色によって― ティントカラーが決まりますそして新しいAPIがティントのコンテキストで表示される― 別のテンプレートを提供してくれます

さらに情報が必要な方は developer.apple.comのビデオをご覧ください

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