iOS 8 Widget ~ 導入から Tips まで
-
Upload
yuki-tanabe -
Category
Engineering
-
view
25.256 -
download
2
Transcript of iOS 8 Widget ~ 導入から Tips まで
![Page 1: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/1.jpg)
田邉 裕貴
iOS 8 / Swift エンジニア勉強会 2014/10/18 (Sat.)
iOS 8 Widget導入から Tips まで
![Page 2: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/2.jpg)
このスライドの情報
http://bit.ly/ios8_widget
![Page 3: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/3.jpg)
どんな人向けの発表か
・iOS アプリ開発経験者 ・Widget の開発未経験者 もしくは軽く触ってみた程度
![Page 4: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/4.jpg)
発表の流れ
・Widget とは ・Hello World ・詰まりどころ& Tips 集
![Page 5: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/5.jpg)
発表の流れ
・Widget とは ・Hello World ・詰まりどころ& Tips 集
![Page 6: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/6.jpg)
Widget とは
http://imgc.appbank.net/c/wp-content/uploads/2014/06/140603ios8widget-2.jpg
![Page 7: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/7.jpg)
Widget とは通知センターに Today タブが
新しく追加された
Widget のコンテンツ
Today という名前の通り リアルタイム性の高い コンテンツが並ぶ・カレンダー ・天気 ・リマインダー ・株価 など
http://imgc.appbank.net/c/wp-content/uploads/2014/06/140603ios8widget-2.jpg
![Page 8: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/8.jpg)
DEMO
![Page 9: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/9.jpg)
発表の流れ
・Widget とは ・Hello World ・詰まりどころ& Tips 集
![Page 10: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/10.jpg)
前提知識
Extension はそれだけを申請することが出来ない。 そのため通常通りプロジェクトを作り、 本体アプリの中に Extension を追加して実装する流れとなる。
https://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/Art/simple_communication_2x.png
![Page 11: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/11.jpg)
前提知識
![Page 12: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/12.jpg)
前提知識
本体アプリ
作成する Widget
Widget の呼び出し元 今回だと通知センター
![Page 13: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/13.jpg)
前提知識
本体アプリ
作成する Widget
Widget の呼び出し元 今回だと通知センター
両方を Xcode の1プロジェクトにまとめる
![Page 14: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/14.jpg)
1. プロジェクト作成(いつも通りに)
![Page 15: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/15.jpg)
2. プロジェクト作成(いつも通りに)
![Page 16: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/16.jpg)
3. プロジェクト作成(いつも通りに)
![Page 17: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/17.jpg)
プロジェクト作成完了
![Page 18: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/18.jpg)
4. Target を追加
![Page 19: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/19.jpg)
5. Application Extension > Today Extension
3
2
1
![Page 20: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/20.jpg)
6. Product Name を設定
今回は Widget と入力
![Page 21: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/21.jpg)
Widget のファイル群が追加された
![Page 22: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/22.jpg)
MainInterface.storyboard
はじめから Hello World の UILabel がセットされている
![Page 23: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/23.jpg)
7. Widget 起動
12
![Page 24: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/24.jpg)
Hello World が表示される
![Page 25: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/25.jpg)
Hello World
簡単に作れる! が
詰まりどころが多い
![Page 26: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/26.jpg)
発表の流れ
・Widget とは ・Hello World ・詰まりどころ& Tips 集
![Page 27: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/27.jpg)
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
![Page 28: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/28.jpg)
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
![Page 29: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/29.jpg)
Product name が表示されている
Widget の表示名変更
![Page 30: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/30.jpg)
Widget の表示名変更
Bundle display name を変更
![Page 31: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/31.jpg)
Widget の表示名変更
![Page 32: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/32.jpg)
Widget の表示名変更
afterbefore
![Page 33: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/33.jpg)
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
![Page 34: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/34.jpg)
左余白の消し方
デフォルトだと余白ができる
![Page 35: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/35.jpg)
左余白の消し方
TodayViewController.m
![Page 36: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/36.jpg)
左余白の消し方
UIEdgeInsetsZero 指定すると余白が消える
![Page 37: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/37.jpg)
左余白の消し方
あくまでデフォルトは余白ありなので、 必要な場合のみ検討したほうが良い。
![Page 38: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/38.jpg)
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
![Page 39: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/39.jpg)
ビューのライフサイクル
-‐ viewDidLoad -‐ viewWillAppear -‐ viewDidAppear
-‐ viewWillDisappear -‐ viewDidDisappear
表示のタイミング 非表示のタイミング
表示、非表示の度に上記メソッドが呼ばれる
![Page 40: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/40.jpg)
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
![Page 41: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/41.jpg)
Widget からアプリを起動
(逆にアプリからウィジェットを開くことは出来ない。)
カスタム URL スキーマでアプリを開く
TodayViewController.m
NSExtensionContext に openURL メソッドが用意されている
![Page 42: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/42.jpg)
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
![Page 43: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/43.jpg)
本体アプリとデータ共有本体アプリのプロセス
Widget のプロセス
本体アプリのデータ保存領域
Widget のデータ保存領域
https://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/Art/app_extensions_container_restrictions_2x.png
![Page 44: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/44.jpg)
本体アプリとデータ共有本体アプリのプロセス
Widget のプロセス
本体アプリのデータ保存領域
Widget のデータ保存領域
保存領域が異なる
![Page 45: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/45.jpg)
本体アプリとデータ共有
![Page 46: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/46.jpg)
本体アプリとデータ共有
共有して保存できる領域
![Page 47: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/47.jpg)
本体アプリとデータ共有
共有して保存できる領域App Group により定義される- group.jp.co.yahoo.search - group.jp.co.yahoo.weather - group.jp.co.yahoo.news
(アプリ~ウィジェット間に留まらず、 Developer が同じであれば他のアプリでもデータ共有が可能)
>この文字列が識別子となる
![Page 48: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/48.jpg)
本体アプリとデータ共有
データ共有のための手順1. App Group の作成 2. 本体、ウィジェットで App Group を有効化 3. コーディング
![Page 49: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/49.jpg)
App Group の作成の前に本体アプリとデータ共有 /
iOS Dev Center の Certificates のページにアクセス
ここで App Group 一覧を確認できる
![Page 50: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/50.jpg)
1
2
App Group の作成本体アプリとデータ共有 /
![Page 51: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/51.jpg)
App Group の作成本体アプリとデータ共有 /
![Page 52: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/52.jpg)
App Group の作成本体アプリとデータ共有 /
グループの識別子を設定する
![Page 53: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/53.jpg)
App Group の作成本体アプリとデータ共有 /
今回は group.<Bundle ID> とする
![Page 54: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/54.jpg)
App Group の作成本体アプリとデータ共有 /
App Groups に追加された
同時に手順2の有効化も完了
![Page 55: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/55.jpg)
App Group の作成本体アプリとデータ共有 /
App Groups に追加されたことを確認
![Page 56: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/56.jpg)
App Group の作成本体アプリとデータ共有 /
編集・削除が可能
![Page 57: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/57.jpg)
本体、ウィジェットで App Group を有効化本体アプリとデータ共有 /
1
2
ウィジェットでも App Group を有効化しておく
![Page 58: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/58.jpg)
実装方法NSUserDefaults の場合
本体アプリとデータ共有 /
![Page 59: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/59.jpg)
実装方法NSUserDefaults の場合
作成した App Group を指定
イニシャライズメソッドが異なる(あとの操作は通常通り)
本体アプリとデータ共有 /
![Page 60: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/60.jpg)
まとめと補足本体アプリとデータ共有 /
・本体アプリとのデータ共有には App Group を利用 ・同一 Developer なら複数アプリのデータ共有も可能 ・NSUserDefaults, CoreData, SQLite などの共有が可能
![Page 61: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/61.jpg)
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
![Page 62: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/62.jpg)
本体とコード共有本体アプリのプロセス
Widget のプロセス
プロセスが別なので、相互にクラスを import できない
![Page 63: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/63.jpg)
本体とコード共有
Embedded Framework を利用
http://dev.classmethod.jp/references/ios-8-embedded-framework/手順は以下が参考になる
![Page 64: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/64.jpg)
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
![Page 65: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/65.jpg)
NG 事項
・キーボード使用 ・スクロールビューの配置 ・大きすぎるコンテンツ(高さ)
https://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/NotificationCenter.html
![Page 66: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/66.jpg)
参考文献
https://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/index.html
App Extension Programming Guide
Creating Extensions for iOS and OS X, Part 1Creating Extensions for iOS and OS X, Part 2
https://developer.apple.com/videos/wwdc/2014/
WWDC2014 資料
![Page 67: iOS 8 Widget ~ 導入から Tips まで](https://reader034.fdocument.pub/reader034/viewer/2022052215/557d2b40d8b42a5a448b4f66/html5/thumbnails/67.jpg)
ご清聴ありがとうございました