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