Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

20150707 wwdc21cafe

12,010 views

Published on

20150707 wwdc21cafe

  1. 1. 簡単! Complication!! 長尾 聡一郎 @sohichiro 2015/07/07 WWDC2015 情報共有会 at 21cafe
  2. 2. Complication
  3. 3. ・Complicationとは ・実装 ・Tips
  4. 4. Complicationとは? • clockFace上に配置される領域に 情報を表示できる(バッチの代用) • カスタマイズが可能 • textとImageが使用可能 • 過去と未来の状態を確認できる 「Time Travel」機能がある
  5. 5. Complicationとは? • clockFace上に配置される領域に 情報を表示できる(バッチの代用) • カスタマイズが可能 • textとImageが使用可能 • 過去と未来の状態を確認できる 「Time Travel」機能がある
  6. 6. アプリから様々な情報をClockFaceに表示できる
  7. 7. Complicationとは? • clockFace上に配置される領域に 情報を表示できる(バッチの代用) • カスタマイズが可能 • textとImageが使用可能 • 過去と未来の状態を確認できる 「Time Travel」機能がある
  8. 8. Complicationとは? • clockFace上に配置される領域に 情報を表示できる(バッチの代用) • カスタマイズが可能 • textとImageが使用可能 • 過去と未来の状態を確認できる 「Time Travel」機能がある
  9. 9. イメージ
  10. 10. Complicationとは? • clockFace上に配置される領域に 情報を表示できる(バッチの代用) • カスタマイズが可能 • textとImageが使用可能 • 過去と未来の状態を確認できる 「Time Travel」機能がある
  11. 11. ・Complicationとは ・実装 ・Tips
  12. 12. どう実装するのか?
  13. 13. そのまえに。。。
  14. 14. 実装する、その前に。。 • Complicationで使う用語の解説 • CLKImageProvider,CLKTextProviderと CLKComplicationTemplate • TimeLineと CLKComplicationTemplateEntry
  15. 15. CLKImageProvider,CLKTextProv iderとCLKComplicationTemplate • complicationの表示パーツ(PlaceHolder)は、 CLKComplicationTemplateで構成する • CLKComplicationTemplateの表示情報は、 CLKImageProvider(画像情報)と CLKTextProvider(文字情報)で作成する →UIImageとNSStringではない
  16. 16. CLKComplicationTemplate
  17. 17. CLKImageProvider,CLKTextProv iderとCLKComplicationTemplate • complicationの表示パーツ(PlaceHolder)は、 CLKComplicationTemplateで構成する • CLKComplicationTemplateの表示情報は、 CLKImageProvider(画像情報)と CLKTextProvider(文字情報)で作成する →UIImageとNSStringではない
  18. 18. 画像は CLKImageProviderで
  19. 19. 文字は CLKTextProviderで
  20. 20. CLKImageProvider
  21. 21. 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.
  22. 22. • 様々なオプションを持つTextProvider CLKSimpleTextProvider CLKTimeTextProvider :(2:15pm etc) CLKTimeIntervalTextProvider :(11:00am-12:30pm) CLKDateTextProvider :(Wed,Sep 23; Sep 23 etc) CLKRelativeDateTextProvider :(+14 DAYS etc) CLKTextProvider
  23. 23. CLKComplicationTemplate • CLKComplicationTemplateはCLKTextProviderや CLKImageProviderによって構成
  24. 24. • 必要なPlaceFolderに応じたTemplateのみ実装
  25. 25. Time Travelと Time Line
  26. 26. Time Travel • Degital Crownを回すことで、現在と過去の状 態をcomplicationより確認する機能
  27. 27. Time Line • complicationの状態を過去から未来まで並べた もの
  28. 28. Time Line • complicationの状態を過去から未来まで並べた もの • CLKComplicationTemplateを時系列に並べ、 順に参照するもの
  29. 29. Time Line • complicationの状態を過去から未来まで並べた もの • CLKComplicationTemplateを時系列に並べ、 順に参照するもの • CLKComplicationTemplateに日付情報を付加 し、Arrayで管理
  30. 30. CLKComplicationTemplateとNSDateを合わせて CLKComplicationTimelineEntryとする
  31. 31. CLKComplicationTimelineEntryをArrayで持つ
  32. 32. では、実装。 • 既存のプロジェクトに、TargetとしてApple watchを追加 • Product Nameを入力する際に、Include Complicationにチェックを入れる • Sample プロジェクトは以下(complication表示) https://github.com/sohichiro/ complicationBasicSample
  33. 33. ・Complicationとは ・実装 ・Tips
  34. 34. Tips • comlicationをタッチすると、アプリが起動する • watch OS 2 Beta2においてcomplicationにバ グあり(Known Issue) • CLKComplicationTimelineEntryは、WCsession から追加することが可能→iphoneからバックグラ ウンドでcomplicationを更新することができる • complicationをリロードするには reloadTimelineForComplicationを使う
  35. 35. ご静聴 ありがとうございました
  36. 36. 参考資料 • WWDC2015 209 Creating Complications with ClockKit https://developer.apple.com/videos/wwdc/ 2015/?id=209

×