Download to read offline
Uploaded byShuichi Tsutsumi
Core Graphics on watchOS 2
watchOS 2 でウォッチ側でも使えるようになった Core Graphics について、何ができて何ができないのか、検証しました。
![UIImageView vs Metal [日本語版] #tryswiftconf](https://cdn.slidesharecdn.com/ss_thumbnails/tryswift20180302japanese-180304220322-thumbnail.jpg?width=640&height=640&fit=bounds)
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.
- 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 に影響の大きい watchOS2 の新機能 • 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
- 12.
- 13.
- 14. watchOS 1 をふりかえる •Core Graphics は使えなかった
- 15. watchOS 1 をふりかえる •Core Graphics は使えなかった • Apple公式サンプルでは、360 個の連番pngを利用して Circular Progress 的なUIを実現 『WatchKitを実際にさわってみてわかったこと』
- 16.
- 17. @watchOS 2 • CoreGraphics がネイティブSDKに追加された
- 18. @watchOS 2 • CoreGraphics がネイティブSDKに追加された • Apple のWWDC動画やサンプル、GitHub・ StackOverflow にも具体的なコードは見当たらず
- 19. @watchOS 2 • CoreGraphics がネイティブSDKに追加された • Apple のWWDC動画やサンプル、GitHub・ StackOverflow にも具体的なコードは見当たらず • 何ができて、何ができないのか？ 試してみる
- 20. Trial1 : Drawa line
- 21. Trial1 : Drawa line 実行結果：<Error>: CGContextDrawPath: invalid context 0x0.
- 22. Trial1 : Drawa line 実行結果：<Error>: CGContextDrawPath: invalid context 0x0. → watchOS では、UIGraphicsGetCurrentContext() でグラ フィックスコンテキストを取得できない？
- 23. Trial2: Create abitmap-based graphics context and draw lines
- 24. Trial2: Create abitmap-based graphics context and draw lines
- 25.
- 26.
- 27. Trial3: Draw usingUIBezierPath ※NDAに配慮しスクリーンショット は会場のみとします
- 28. Trial4: Draw froma SVG file ※ SVG to UIBezierPath の変換にはOSS『PocketSVG』を利用 ※NDAに配慮しスクリーンショット は会場のみとします
- 29. Trial5: Draw agradation ※NDAに配慮しスクリーンショット は会場のみとします
- 30. watchOS-2-Sampler GitHub: shu223/watchOS-2-Sampler Blog: watchOS2 の新機能のサンプルコード集『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 では（いまのところ）利用不可
- 37.
- 38.
- 39.
- 40.
- 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 オブジェクトにアクセスできないので、スク リーンキャプチャやキーパスアニメーションは不可