Upload
sohichiro-nagao
View
4.338
Download
1
Embed Size (px)
Citation preview
簡単!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