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