Core Graphics on watchOS 2

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 Diffs から見る iOS 9 の新機能

• 基調講演やニュース記事を見るだけではわからない、iOS 9

の細かい新機能を「API Diffs」「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 をふりかえる

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

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

• Apple公式サンプルでは、360

個の連番pngを利用して

Circular Progress 的なUIを実現

『WatchKitを実際にさわってみてわかったこと』

@watchOS 2

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

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

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

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

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

• 何ができて、何ができないのか？ 試してみる

Trial1 : Draw a line

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

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

実行結果：うまくいった

※NDAに配慮しスクリーンショットは会場のみとします

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

Trial3: Draw using UIBezierPath※NDAに配慮しスクリーンショット

は会場のみとします

Trial4: Draw from a SVG file

※ SVG to UIBezierPath の変換にはOSS『PocketSVG』を利用

※NDAに配慮しスクリーンショットは会場のみとします

Trial5: Draw a gradation※NDAに配慮しスクリーンショット

は会場のみとします

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 に依存する処理は不可

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

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

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

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

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

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

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

UIView または CALayer オブジェクトの内容を描画する必要があるため watchOS では（いまのところ）利用不可

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

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

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

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

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

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

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

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

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

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

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

• すなわち現状では不可

まとめ

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

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

• ビットマップコンテキスト上に描画し、UIImage を生成してそれを表示する

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

• ビットマップコンテキスト上に描画し、UIImage を生成してそれを表示する

• この制約の範囲内であれば、結構いろんなことができる

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

• ビットマップコンテキスト上に描画し、UIImage を生成してそれを表示する

• この制約の範囲内であれば、結構いろんなことができる

• CALayer オブジェクトにアクセスできないので、スクリーンキャプチャやキーパスアニメーションは不可