1. 簡単!
Complication！！
長尾 聡一郎 @sohichiro
2015/07/07 WWDC2015 情報共有会 at 21cafe

4. Complication

5. ・Complicationとは
・実装
・Tips

6. Complicationとは？
• clockFace上に配置される領域に
情報を表示できる(バッチの代用)
• カスタマイズが可能
• textとImageが使用可能
• 過去と未来の状態を確認できる
「Time Travel」機能がある

7. Complicationとは？
• clockFace上に配置される領域に
情報を表示できる(バッチの代用)
• カスタマイズが可能
• textとImageが使用可能
• 過去と未来の状態を確認できる
「Time Travel」機能がある

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

9. Complicationとは？
• clockFace上に配置される領域に
情報を表示できる(バッチの代用)
• カスタマイズが可能
• textとImageが使用可能
• 過去と未来の状態を確認できる
「Time Travel」機能がある

11. Complicationとは？
• clockFace上に配置される領域に
情報を表示できる(バッチの代用)
• カスタマイズが可能
• textとImageが使用可能
• 過去と未来の状態を確認できる
「Time Travel」機能がある

12. イメージ

13. Complicationとは？
• clockFace上に配置される領域に
情報を表示できる(バッチの代用)
• カスタマイズが可能
• textとImageが使用可能
• 過去と未来の状態を確認できる
「Time Travel」機能がある

15. ・Complicationとは
・実装
・Tips

16. どう実装するのか？

17. そのまえに。。。

18. 実装する、その前に。。
• Complicationで使う用語の解説
• CLKImageProvider,CLKTextProviderと
CLKComplicationTemplate
• TimeLineと
CLKComplicationTemplateEntry

19. CLKImageProvider,CLKTextProv
iderとCLKComplicationTemplate
• complicationの表示パーツ(PlaceHolder)は、
CLKComplicationTemplateで構成する
• CLKComplicationTemplateの表示情報は、
CLKImageProvider(画像情報)と
CLKTextProvider(文字情報)で作成する
→UIImageとNSStringではない

20. CLKComplicationTemplate

21. CLKImageProvider,CLKTextProv
iderとCLKComplicationTemplate
• complicationの表示パーツ(PlaceHolder)は、
CLKComplicationTemplateで構成する
• CLKComplicationTemplateの表示情報は、
CLKImageProvider(画像情報)と
CLKTextProvider(文字情報)で作成する
→UIImageとNSStringではない

22. 画像は
CLKImageProviderで

23. 文字は
CLKTextProviderで

24. CLKImageProvider

25. 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.

26. • 様々なオプションを持つTextProvider
CLKSimpleTextProvider
CLKTimeTextProvider :(2:15pm etc)
CLKTimeIntervalTextProvider :(11:00am-12:30pm)
CLKDateTextProvider :(Wed,Sep 23; Sep 23 etc)
CLKRelativeDateTextProvider :(+14 DAYS etc)
CLKTextProvider

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

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

29. Time Travelと
Time Line

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

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

32. Time Line
• complicationの状態を過去から未来まで並べた
もの
• CLKComplicationTemplateを時系列に並べ、
順に参照するもの

33. Time Line
• complicationの状態を過去から未来まで並べた
もの
• CLKComplicationTemplateを時系列に並べ、
順に参照するもの
• CLKComplicationTemplateに日付情報を付加
し、Arrayで管理

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

35. CLKComplicationTimelineEntryをArrayで持つ

36. では、実装。
• 既存のプロジェクトに、TargetとしてApple
watchを追加
• Product Nameを入力する際に、Include
Complicationにチェックを入れる
• Sample プロジェクトは以下(complication表示)
https://github.com/sohichiro/
complicationBasicSample

37. ・Complicationとは
・実装
・Tips

38. Tips
• comlicationをタッチすると、アプリが起動する
• watch OS 2 Beta2においてcomplicationにバ
グあり(Known Issue)
• CLKComplicationTimelineEntryは、WCsession
から追加することが可能→iphoneからバックグラ
ウンドでcomplicationを更新することができる
• complicationをリロードするには
reloadTimelineForComplicationを使う

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

40. 参考資料
• WWDC2015
209 Creating Complications with ClockKit
https://developer.apple.com/videos/wwdc/
2015/?id=209