33
Gunosy for Apple Watch ができるまで 株式会社Gunosy 開発本部 川邉雄介

Gunosy for Apple Watchができるまで

Embed Size (px)

Citation preview

Page 1: Gunosy for Apple Watchができるまで

Gunosy for Apple Watchができるまで株式会社Gunosy 開発本部

川邉雄介

Page 2: Gunosy for Apple Watchができるまで

@jeffsukeiOS App Developer

https://github.com/jeffsuke

今年のWWDCは安全な地域に泊まれそうです

Page 3: Gunosy for Apple Watchができるまで

WWDC2014における@jeffsuke宿泊先付近

Page 4: Gunosy for Apple Watchができるまで

SF危険な地域マップ 外務省ホームページより

Page 5: Gunosy for Apple Watchができるまで

Gunosy

• 情報キュレーションサービス

• 900万ダウンロード

• 社員の標準言語はGoらしい

Page 6: Gunosy for Apple Watchができるまで

概要

• Apple Watch上で快適な体験を実現するまで頑張った話

Page 7: Gunosy for Apple Watchができるまで

目次

• Apple Watchアプリ概要

• Watch Appの最適化

• Glanceの最適化

• 申請後の話

Page 8: Gunosy for Apple Watchができるまで

Gunosy for Apple Watchで出来ること

GlanceWatch app

Page 9: Gunosy for Apple Watchができるまで

Apple Watchアプリ

アプリ本体 Extension Watch app

Storyboard Image assetsController, Model

Setter

UIEvent

Page 10: Gunosy for Apple Watchができるまで

Apple Watchアプリの仕組み

• 可能な限り画像はApple Watch側に保存しておく

• 表示しているviewの情報は取得出来ない

Page 11: Gunosy for Apple Watchができるまで

Watch Appにおける最適化

Page 12: Gunosy for Apple Watchができるまで

GunosyにおけるWatch App

• Alamofire • SwiftyJSON

• APIから受け取った話題の情報を元に記事を表示。詳細ページでは、本体に保存、本体で開く事ができる。

• 描画までを最短にする • iPhoneとAppleWatchの通信を減らす • 保存出来るものは保存する

ポイント

概要

Page 13: Gunosy for Apple Watchができるまで

willActivate()の活用

• initとawakeでの処理を最小限に

1. Watch Appが呼び出される 2. Storyboardが読み込まれる 3. 対象画面のinit, awakeが走る 4. Watch上で画面が表示される 5. willActivate()が呼ばれる

起動までの手順

Page 14: Gunosy for Apple Watchができるまで

willActivate()の活用

Page 15: Gunosy for Apple Watchができるまで

WKInterfaceGroupの利用

• Placeholderとして • 角丸

Page 16: Gunosy for Apple Watchができるまで

addCachedImage

• BLEの為通信速度に制限がある。可能な限り再利用する画像はキャッシュ

• 各アプリ5MBまでキャッシュ可能 • kiavashfaisali/KFSwiftImageLoaderとか使うと便利っぽい

参考: https://developer.apple.com/library/ios/documentation/General/Conceptual/WatchKitProgrammingGuide/Images.html http://qiita.com/_tid_/items/55667b00ce158a28428a

Page 17: Gunosy for Apple Watchができるまで

addCachedImage

読み込み

保存

Page 18: Gunosy for Apple Watchができるまで

Watch Appにおける最適化

• ライフサイクルを知り描画可能な物から順次描画する

• 画像は可能な限りWatch本体に

Page 19: Gunosy for Apple Watchができるまで

Glanceにおける最適化

Page 20: Gunosy for Apple Watchができるまで

GunosyにおけるGlance

• APIから受け取った話題の情報を元に画像を表示。時計1画面でニュースが分かる体験。

• 人に見せて自慢したくなる機能

Glance• 読み込みまでの時間がポイント • ひと目で分かるUI

ポイント

概要

Page 21: Gunosy for Apple Watchができるまで

可能な限りキャッシュする

• 共通のAppGroupを設定し、NSUserDefaultで必要なデータを共有した。

• [[NSUserDefaults alloc] initWithSuiteName:@“group.mycompany.myapp"]

App Group

画像キャッシュ• addCachedImage

Page 22: Gunosy for Apple Watchができるまで

本体で画像を生成する

Page 23: Gunosy for Apple Watchができるまで

本体で画像を生成する

Page 24: Gunosy for Apple Watchができるまで

Githubで公開しています

• https://github.com/jeffsuke/GlanceWordRainbowImage

Page 25: Gunosy for Apple Watchができるまで

Glanceにおける最適化

• 画像に描画することで複雑な表現を実現

• 可能な限り画像等をキャッシュしておく

Page 26: Gunosy for Apple Watchができるまで

申請後の話

Page 27: Gunosy for Apple Watchができるまで

リジェクトの話

• 発売日である4/24を目指して開発

• しかし二度のリジェクト

• 二の鉄を踏まないTips

Page 28: Gunosy for Apple Watchができるまで

リジェクト事例1

• Watch appを使う前に一度iPhoneの起動を要求し、リジェクト。

• ウォッチ単体で意味のある機能を提供できていない為、本体アプリで認証を実行することに。

• ただし、JALやUber等ログインを要求するアプリも存在するので、ログインならば良いのかも。

Page 29: Gunosy for Apple Watchができるまで

リジェクト事例2

• iPhoneで読むボタンを押してもWatchアプリでの変化がないためリジェクト。

• openParentApplication:reply:を用いて開いたかどうかを返す

変更前

変更後

Page 30: Gunosy for Apple Watchができるまで

リジェクト事例2Watch側

本体側

Page 31: Gunosy for Apple Watchができるまで

リジェクトの話まとめ

• Apple Watch単体で体験が成り立っている必要がある

Page 32: Gunosy for Apple Watchができるまで

Apple Watchまとめ

• Apple Watchアプリバイナリに可能な限りView関連の要素を含めておく

• 複雑な処理はExtension、時間がかかる処理は本体アプリで実施

• Watchアプリ単体で体験を届ける必要がある

Page 33: Gunosy for Apple Watchができるまで

質疑応答