狠狠撸

Core Graphics
on
watchOS 2
堤修一 @shu223
2015.7.14 potatotips #19

? iOS専業フリーランス
? ブログ『Over&Out その後』
? 著書
- 『iOS×BLE?Core Bluetoothプログラミング』
- 『iOSアプリ開発達人のレシピ100』
堤修一

お手伝いしたプロダクト（BLE関連）
Music for the Deaf

お手伝いしたプロダクト（?Watch関連）
よしだっち（DLE）
鷹の爪団の吉田君を育成するアプリ
WatchMe（Pocket Supernova）
? Watch に最適化されたビデオメッセージングア
プリ。ウォッチで動画メッセージのプレビュー、
素早い返信ができる
※お手伝いしたのは開発の初期、ウォッチ側
メール、Facebookメッセージ、TwitterのDM等を一
元管理するアプリ
Swingmail（BHI）
※ウォッチ機能は現在開発中

iOS 9 / watchOS 2 関連の
これまでのアウトプット
おさらい

API Di?s から見る iOS 9 の新機能
? 基調講演やニュース記事を見
るだけではわからない、iOS 9
の細かい新機能を「API Di?s」
「What’s new」から抜粋
? http://d.hatena.ne.jp/
shu223/20150609/1433813938

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

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

UI/UX に影響の大きい watchOS 2 の新機能
? watchOS 2 の数ある新機能の中で、
UI/UX に影響の大きそうな機能を3
つ抜粋して紹介
? 『UI Crunch #5』というデザイナー
さん、ディレクターさんも来る勉強
会での発表
- （なのでコードは出てきません）
? http://www.slideshare.net/t26v0748/
uiux-watchos-2-3

Core Image の新機能
? iOS 9 の Core Image の新機能について
紹介＆デモ
- 文字認識
- 新フィルタ47種
? @『WWDC Afterparty Roppongi』
? slideshare.net/t26v0748/ios-9-core-image
? d.hatena.ne.jp/shu223/20150622/
1434924215

Audio Unit Extensions?
～オーディオエフェクトのアプリ間共有～
? iOS 9 で追加された Extension Point
? Audio Unit をアプリ間で共有できる
? @『WWDC2015報告共有会@ネクスト』
? www.slideshare.net/t26v0748/wwdc-next-
201506232
? d.hatena.ne.jp/shu223/20150624/
1435098847

本題：
Core Graphics
on
watchOS 2
※Appleの公開ドキュメントの範囲で発表します

watchOS 1 をふりかえる
? Core Graphics は使えなかった

watchOS 1 をふりかえる
? Core Graphics は使えなかった
? Apple公式サンプルでは、360
個の連番pngを利用して
Circular Progress 的なUIを実現
『WatchKitを実際にさわってみてわかったこと』

@watchOS 2
? Core Graphics がネイティブSDKに追加された

@watchOS 2
? Apple のWWDC動画やサンプル、GitHub?
StackOverflow にも具体的なコードは見当たらず

@watchOS 2
? Apple のWWDC動画やサンプル、GitHub?
StackOverflow にも具体的なコードは見当たらず
? 何ができて、何ができないのか？試してみる

Trial1 : Draw a line
実行結果：<Error>: CGContextDrawPath: invalid context 0x0.

Trial1 : Draw a line
実行結果：<Error>: CGContextDrawPath: invalid context 0x0.
→ watchOS では、UIGraphicsGetCurrentContext() でグラ
フィックスコンテキストを取得できない？

Trial2: Create a bitmap-based graphics
context and draw lines

実行結果：
うまくいった
※NDAに配慮しスクリーンショット
は会場のみとします

ここさえクリアできれば、
大抵のことは可能

Trial3: Draw using UIBezierPath

Trial4: Draw from a SVG file
※ SVG to UIBezierPath の変換にはOSS『PocketSVG』を利用

Trial5: Draw a gradation

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
今回のサンプル

UIView とか CALayer に依存する処理は不可

例：スクリーンキャプチャ

例：スクリーンキャプチャ
UIView または CALayer オブジェクトの内容を描画する必要があ
るため watchOS では（いまのところ）利用不可

「手書き」も不可
? 自由なパスの描画は可能になっ
たものの、タッチ位置を取得
するAPIがまだ開放されていな
い

キーパスアニメーションも不可

? CAKeyframeAnimation を使うと、パスに
沿ってオブジェクトをアニメーションさ
せるとか、生成したパス自体をアニメー
ションさせたりできる

? こういうの →?
をやりたいときには必要

? CALayer オブジェクトにアクセスできな
いので、addAnimation: できない。

? CALayer オブジェクトにアクセスできな
いので、addAnimation: できない。
? すなわち現状では不可

まとめ
? watchOS 2 から Core Graphics を用いた動的な描画が
可能になった

まとめ
可能になった
? ビットマップコンテキスト上に描画し、UIImage を生
成してそれを表示する

まとめ
可能になった
? この制約の範囲内であれば、結構いろんなことがで
きる

まとめ
可能になった
? この制約の範囲内であれば、結構いろんなことがで
きる
? CALayer オブジェクトにアクセスできないので、スク
リーンキャプチャやキーパスアニメーションは不可

狠狠撸

Core Graphics on watchOS 2

More Related Content

Core Graphics on watchOS 2