Download - Apple watchアプリを作ってみた
![Page 1: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/1.jpg)
Apple Watch アプリを作ってみた2015. 07. 31 三宅 暁
![Page 2: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/2.jpg)
Glancely今の時間と今日の天気を素早く確認するためのシンプルなアプリ
![Page 3: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/3.jpg)
Apple Store で無料配信中https://itunes.apple.com/jp/app/glancely/id1010268723?l=ja&ls=1&mt=8
![Page 4: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/4.jpg)
Agenda
• Apple Watch を2ヶ月間使ってみて • Watch アプリでできないこと • Watch アプリ開発
• Programming • Design
• Watch OS 2
![Page 5: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/5.jpg)
Apple Watch を 2ヶ月間使ってみて
![Page 6: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/6.jpg)
• Model • Apple Watch Sport 38mm
• Third party apps • 1Password • Amazon • Apple Store • Do Button • Evernote • Foursquare • Glancely • SoundCloud • Swarm • Twitter • Uber
![Page 7: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/7.jpg)
Good
• デバイスのデザイン • 簡単な情報の確認や単純な操作を素早く行える • 通知を見逃しにくい • アクティビティトラッキング
![Page 8: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/8.jpg)
Not Good• ほとんどの操作に両手が必要 • ホーム画面からアプリを起動するのが煩わしい • レスポンスの悪さ • 操作中のスクリーンオフ • たまに Digital Crown が反応しなくなる • Siri があんまり賢くない • Apple Watch 未対応アプリの通知
![Page 9: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/9.jpg)
Watch アプリで できないこと
![Page 10: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/10.jpg)
• Apple Watch 単体での動作 • Digital Crown の動作のカスタマイズ • Force Touch の動作のカスタマイズ • Taptic Engine の利用 • アプリ内でのインタラクティブなマップの利用 • マイクを用いた録音 • メディアの再生 • 心拍センサやジャイロセンサなどへのアクセス • iPhone アプリのフォアグラウンド起動 • iPhone アプリからのデータの送信 • バックグラウンドでの動作
![Page 11: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/11.jpg)
• Watch アプリはあくまでも iPhone アプリの補助的な位置づけ
• Apple Watch がないと利用できないアプリはリジェクトの対象になる模様
![Page 12: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/12.jpg)
Watch アプリ開発
![Page 13: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/13.jpg)
Programming
![Page 14: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/14.jpg)
アーキテクチャ
![Page 15: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/15.jpg)
• WatchKit App • Apple Watch にインストールされ、Storyboardやイメージなどのリソースを保持
• WatchKit Extension • iPhone にインストールされ、アプリ利用時に実行されるコードを保持
![Page 16: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/16.jpg)
• WatchKit Extension は iPhone 上で実行され、その状態に応じて Apple Watch は表示を更新
• アプリ起動やインタラクティブな操作のたびに、iPhone と Apple Watch の間で Bluetooth による通信が発生
![Page 17: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/17.jpg)
WatchKit Extension• iOS 8 から利用可能になった App Extension と同じような仕組み
• iPhone アプリとは異なる Sandbox 上で動作するため、相互のデータアクセスは基本的に不可
• 利用できない API は App Extension と同様 • UIApplication を取得する sharedApplication • HealthKit と EventKit UI
![Page 18: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/18.jpg)
Embedded Framework & Shared Container
![Page 19: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/19.jpg)
• Embedded Framework • 複数のアプリや Extension で利用するコードをモジュール化することが可能
• Extension から利用する場合は、アクセスする API には注意が必要
• Shared Container • 同じ App Group に属する複数のアプリがアクセス可能な領域
• iPhone アプリと Watch アプリのデータを共有する際にも有効
![Page 20: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/20.jpg)
Design
![Page 21: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/21.jpg)
https://developer.apple.com/watch/human-interface-guidelines/
![Page 22: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/22.jpg)
小さなディスプレイ
![Page 23: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/23.jpg)
![Page 24: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/24.jpg)
テキスト入力には大きな制約
• 選択肢からテキストを選択 • 絵文字 • 音声でテキスト入力
![Page 25: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/25.jpg)
• 小さなディスプレイやデータ入力方法の制限、アーキテクチャに起因するBluetoothの待ち時間から、複雑な操作を要求するアプリは不向き • 多くのコンテンツを閲覧するアプリ • 編集がメインのアプリ • 選択がメインのアプリ
![Page 26: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/26.jpg)
• ユーザの利用シーンを想定しアプリの機能を絞る • 表示するデータを厳選する • 通知を効果的に使う • Notification Action を活用する
![Page 27: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/27.jpg)
Watch OS 2
![Page 28: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/28.jpg)
![Page 29: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/29.jpg)
![Page 30: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/30.jpg)
![Page 31: Apple watchアプリを作ってみた](https://reader030.vdocuments.site/reader030/viewer/2022032513/55d192b3bb61eb506b8b4596/html5/thumbnails/31.jpg)
• ネイティブアプリの開発が可能に • レスポンスの向上
• Complication • 時計のフェイスに情報を表示できるように • アプリへの導線の確保
• Apple Watch の機能やセンサへのアクセス • Digital Crown や Taptic Engine を用いたよりユーザビリティの高いアプリの開発が可能に
• 心拍数を計測したり、ジェスチャーで操作するようなアプリの開発が可能に