Successfully reported this slideshow.
Your SlideShare is downloading. ×

Core Graphics on watchOS 2

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 47 Ad
Advertisement

More Related Content

Slideshows for you (20)

Similar to Core Graphics on watchOS 2 (20)

Advertisement

More from Shuichi Tsutsumi (20)

Advertisement

Core Graphics on watchOS 2

  1. 1. Core Graphics on watchOS 2 堤 修一 @shu223 2015.7.14 potatotips #19
  2. 2. • iOS専業フリーランス • ブログ『Over&Out その後』 • 著書 - 『iOS×BLE Core Bluetoothプログラミング』 - 『iOSアプリ開発 達人のレシピ100』 堤 修一
  3. 3. お手伝いしたプロダクト(BLE関連) Music for the Deaf
  4. 4. お手伝いしたプロダクト(Watch関連) よしだっち(DLE) 鷹の爪団の吉田君を育成するアプリ WatchMe(Pocket Supernova)  Watch に最適化されたビデオメッセージングア プリ。ウォッチで動画メッセージのプレビュー、 素早い返信ができる ※お手伝いしたのは開発の初期、ウォッチ側 メール、Facebookメッセージ、TwitterのDM等を一 元管理するアプリ Swingmail(BHI) ※ウォッチ機能は現在開発中
  5. 5. iOS 9 / watchOS 2 関連の これまでのアウトプット おさらい
  6. 6. API Diffs から見る iOS 9 の新機能 • 基調講演やニュース記事を見 るだけではわからない、iOS 9 の細かい新機能を「API Diffs」 「What’s new」から抜粋 • http://d.hatena.ne.jp/ shu223/20150609/1433813938
  7. 7. watchOS-2-Sampler • watchOS 2 の新機能のサンプルコード集 - Accelerometer - Gyroscope - Pedometer - Heart Rate - Table Animations - Animated Properties - Audio Rec & Play - Picker Styles - Taptic Engine - Alert - Animation with Digital Crown - Interactive Messaging - Open System URL - Audio File Player • GitHub で公開中 - github.com/shu223/watchOS-2-Sampler • 紹介記事 - d.hatena.ne.jp/shu223/20150614/1434313771
  8. 8. watchOS 2 新機能の細かい話5つ • watchOS-2-Sampler 実装にあたって気付いた細かい 諸々について - 2つのアセットカタログの 使い分け - メディアデータの 保存場所 - WKAudioFilePlayer - ウォッチ側 Bluetooth の (直接)利用 - Watch Connectivity のメッセージ送信可否の条件 • 『potatotips #18』での発表 • slideshare.net/t26v0748/uiux-watchos-2-3 • d.hatena.ne.jp/shu223/20150616/1434454680
  9. 9. UI/UX に影響の大きい watchOS 2 の新機能 • watchOS 2 の数ある新機能の中で、 UI/UX に影響の大きそうな機能を3 つ抜粋して紹介 • 『UI Crunch #5』というデザイナー さん、ディレクターさんも来る勉強 会での発表 - (なのでコードは出てきません) • http://www.slideshare.net/t26v0748/ uiux-watchos-2-3
  10. 10. Core Image の新機能 • iOS 9 の Core Image の新機能について 紹介&デモ - 文字認識 - 新フィルタ47種 • @『WWDC Afterparty Roppongi』 • slideshare.net/t26v0748/ios-9-core-image • d.hatena.ne.jp/shu223/20150622/ 1434924215
  11. 11. Audio Unit Extensions
 ∼オーディオエフェクトのアプリ間共有∼ • iOS 9 で追加された Extension Point • Audio Unit をアプリ間で共有できる • @『WWDC2015報告共有会@ネクスト』 • www.slideshare.net/t26v0748/wwdc-next- 201506232 • d.hatena.ne.jp/shu223/20150624/ 1435098847
  12. 12. 本題: Core Graphics on watchOS 2 ※Appleの公開ドキュメントの範囲で発表します
  13. 13. watchOS 1 をふりかえる
  14. 14. watchOS 1 をふりかえる • Core Graphics は使えなかった
  15. 15. watchOS 1 をふりかえる • Core Graphics は使えなかった • Apple公式サンプルでは、360 個の連番pngを利用して Circular Progress 的なUIを実現 『WatchKitを実際にさわってみてわかったこと』
  16. 16. @watchOS 2
  17. 17. @watchOS 2 • Core Graphics がネイティブSDKに追加された
  18. 18. @watchOS 2 • Core Graphics がネイティブSDKに追加された • Apple のWWDC動画やサンプル、GitHub・ StackOverflow にも具体的なコードは見当たらず
  19. 19. @watchOS 2 • Core Graphics がネイティブSDKに追加された • Apple のWWDC動画やサンプル、GitHub・ StackOverflow にも具体的なコードは見当たらず • 何ができて、何ができないのか? 試してみる
  20. 20. Trial1 : Draw a line
  21. 21. Trial1 : Draw a line 実行結果:<Error>: CGContextDrawPath: invalid context 0x0.
  22. 22. Trial1 : Draw a line 実行結果:<Error>: CGContextDrawPath: invalid context 0x0. → watchOS では、UIGraphicsGetCurrentContext() でグラ フィックスコンテキストを取得できない?
  23. 23. Trial2: Create a bitmap-based graphics context and draw lines
  24. 24. Trial2: Create a bitmap-based graphics context and draw lines
  25. 25. 実行結果: うまくいった ※NDAに配慮しスクリーンショット は会場のみとします
  26. 26. ここさえクリアできれば、 大抵のことは可能
  27. 27. Trial3: Draw using UIBezierPath ※NDAに配慮しスクリーンショット は会場のみとします
  28. 28. Trial4: Draw from a SVG file ※ SVG to UIBezierPath の変換にはOSS『PocketSVG』を利用 ※NDAに配慮しスクリーンショット は会場のみとします
  29. 29. Trial5: Draw a gradation ※NDAに配慮しスクリーンショット は会場のみとします
  30. 30. watchOS-2-Sampler GitHub: shu223/watchOS-2-Sampler Blog: watchOS 2 の新機能のサンプルコード集『watchOS-2-Sampler』 watchOS 2 新機能のサンプルコード集 - Accelerometer - Gyroscope - Pedometer - Heart Rate - Table Animations - Animated Properties - Draw Paths - Gradations - Audio Rec & Play - Picker Styles - Taptic Engine - Alert - Animation with Digital Crown - Interactive Messaging - Open System URL - Audio File Player 今回のサンプル
  31. 31. 何ができないのか?
  32. 32. UIView とか CALayer に依存する処理は不可
  33. 33. UIView とか CALayer に依存する処理は不可 例: スクリーンキャプチャ
  34. 34. UIView とか CALayer に依存する処理は不可 例: スクリーンキャプチャ
  35. 35. UIView とか CALayer に依存する処理は不可 例: スクリーンキャプチャ
  36. 36. UIView とか CALayer に依存する処理は不可 例: スクリーンキャプチャ UIView または CALayer オブジェクトの内容を描画する必要があ るため watchOS では(いまのところ)利用不可
  37. 37. 「手書き」も不可 • 自由なパスの描画は可能になっ たものの、タッチ位置を取得 するAPIがまだ開放されていな い
  38. 38. キーパスアニメーションも不可
  39. 39. キーパスアニメーションも不可 • CAKeyframeAnimation を使うと、パスに 沿ってオブジェクトをアニメーションさ せるとか、生成したパス自体をアニメー ションさせたりできる
  40. 40. キーパスアニメーションも不可 • CAKeyframeAnimation を使うと、パスに 沿ってオブジェクトをアニメーションさ せるとか、生成したパス自体をアニメー ションさせたりできる • こういうの →
 をやりたいときには必要
  41. 41. キーパスアニメーションも不可 • CAKeyframeAnimation を使うと、パスに 沿ってオブジェクトをアニメーションさ せるとか、生成したパス自体をアニメー ションさせたりできる • こういうの →
 をやりたいときには必要 • CALayer オブジェクトにアクセスできな いので、addAnimation: できない。
  42. 42. キーパスアニメーションも不可 • CAKeyframeAnimation を使うと、パスに 沿ってオブジェクトをアニメーションさ せるとか、生成したパス自体をアニメー ションさせたりできる • こういうの →
 をやりたいときには必要 • CALayer オブジェクトにアクセスできな いので、addAnimation: できない。 • すなわち現状では不可
  43. 43. まとめ
  44. 44. まとめ • watchOS 2 から Core Graphics を用いた動的な描画が 可能になった
  45. 45. まとめ • watchOS 2 から Core Graphics を用いた動的な描画が 可能になった • ビットマップコンテキスト上に描画し、UIImage を生 成してそれを表示する
  46. 46. まとめ • watchOS 2 から Core Graphics を用いた動的な描画が 可能になった • ビットマップコンテキスト上に描画し、UIImage を生 成してそれを表示する • この制約の範囲内であれば、結構いろんなことがで きる
  47. 47. まとめ • watchOS 2 から Core Graphics を用いた動的な描画が 可能になった • ビットマップコンテキスト上に描画し、UIImage を生 成してそれを表示する • この制約の範囲内であれば、結構いろんなことがで きる • CALayer オブジェクトにアクセスできないので、スク リーンキャプチャやキーパスアニメーションは不可

×