簡単!Complication！！

長尾　聡一郎　@sohichiro 2015/07/07 WWDC2015 情報共有会 at 21cafe

Complication

・Complicationとは ・実装 ・Tips

Complicationとは？• clockFace上に配置される領域に情報を表示できる(バッチの代用)

• カスタマイズが可能 • textとImageが使用可能 • 過去と未来の状態を確認できる「Time Travel」機能がある

Complicationとは？• clockFace上に配置される領域に情報を表示できる(バッチの代用)

• カスタマイズが可能 • textとImageが使用可能 • 過去と未来の状態を確認できる「Time Travel」機能がある

アプリから様々な情報をClockFaceに表示できる

Complicationとは？• clockFace上に配置される領域に情報を表示できる(バッチの代用)

• カスタマイズが可能 • textとImageが使用可能 • 過去と未来の状態を確認できる「Time Travel」機能がある

Complicationとは？• clockFace上に配置される領域に情報を表示できる(バッチの代用)

• カスタマイズが可能 • textとImageが使用可能 • 過去と未来の状態を確認できる「Time Travel」機能がある

イメージ

Complicationとは？• clockFace上に配置される領域に情報を表示できる(バッチの代用)

• カスタマイズが可能 • textとImageが使用可能 • 過去と未来の状態を確認できる「Time Travel」機能がある

・Complicationとは ・実装 ・Tips

どう実装するのか？

そのまえに。。。

実装する、その前に。。

• Complicationで使う用語の解説

• CLKImageProvider,CLKTextProviderとCLKComplicationTemplate

• TimeLineとCLKComplicationTemplateEntry

CLKImageProvider,CLKTextProviderとCLKComplicationTemplate

• complicationの表示パーツ(PlaceHolder)は、CLKComplicationTemplateで構成する

• CLKComplicationTemplateの表示情報は、CLKImageProvider(画像情報)とCLKTextProvider(文字情報)で作成する→UIImageとNSStringではない

CLKComplicationTemplate

CLKImageProvider,CLKTextProviderとCLKComplicationTemplate

• complicationの表示パーツ(PlaceHolder)は、CLKComplicationTemplateで構成する

• CLKComplicationTemplateの表示情報は、CLKImageProvider(画像情報)とCLKTextProvider(文字情報)で作成する→UIImageとNSStringではない

画像は CLKImageProviderで

文字は CLKTextProviderで

CLKImageProvider

CLKImageProvider• backgroundImageは必須(foregroundImageは任意)

• 画像はアルファ値のみを参照する

→ユーザがカラーを設定するため

WWDC2015 session 209 creating complication with ClockKit 00:12:14～ So you can provide a background image and you provide it as a template image, an image that only contains alpha information and no color of its own. It can be -- the pixels can be whatever color you want, but we are only going to pay attention to the alpha channel.

• 様々なオプションを持つTextProvider

CLKSimpleTextProvider

CLKTimeTextProvider :(2:15pm etc)

CLKTimeIntervalTextProvider :(11:00am-12:30pm)

CLKDateTextProvider :(Wed,Sep 23; Sep 23 etc)

CLKRelativeDateTextProvider :(+14 DAYS etc)

CLKTextProvider

CLKComplicationTemplate

• CLKComplicationTemplateはCLKTextProviderやCLKImageProviderによって構成

• 必要なPlaceFolderに応じたTemplateのみ実装

Time Travelと Time Line

Time Travel

• Degital Crownを回すことで、現在と過去の状態をcomplicationより確認する機能

Time Line• complicationの状態を過去から未来まで並べたもの

Time Line• complicationの状態を過去から未来まで並べたもの

• CLKComplicationTemplateを時系列に並べ、順に参照するもの

Time Line• complicationの状態を過去から未来まで並べたもの

• CLKComplicationTemplateを時系列に並べ、順に参照するもの

• CLKComplicationTemplateに日付情報を付加し、Arrayで管理

CLKComplicationTemplateとNSDateを合わせてCLKComplicationTimelineEntryとする

CLKComplicationTimelineEntryをArrayで持つ

では、実装。• 既存のプロジェクトに、TargetとしてApple watchを追加

• Product Nameを入力する際に、Include Complicationにチェックを入れる

• Sample プロジェクトは以下(complication表示)

https://github.com/sohichiro/complicationBasicSample

・Complicationとは ・実装 ・Tips

Tips• comlicationをタッチすると、アプリが起動する

• watch OS 2 Beta2においてcomplicationにバグあり(Known Issue)

• CLKComplicationTimelineEntryは、WCsessionから追加することが可能→iphoneからバックグラウンドでcomplicationを更新することができる

• complicationをリロードするには reloadTimelineForComplicationを使う

ご静聴 ありがとうございました

参考資料• WWDC2015

209 Creating Complications with ClockKit

https://developer.apple.com/videos/wwdc/2015/?id=209