Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Core Graphics on watchOS 2

34,452 views

Published on

watchOS 2 でウォッチ側でも使えるようになった Core Graphics について、何ができて何ができないのか、検証しました。

Published in: Mobile
  • Be the first to comment

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 オブジェクトにアクセスできないので、スク リーンキャプチャやキーパスアニメーションは不可

×