1. iOS 8 Widget
導入から Tips まで
田邉 裕貴
iOS 8 / Swift エンジニア勉強会
2014/10/18 (Sat.)

2. このスライドの情報
http://bit.ly/ios8_widget

3. どんな人向けの発表か
・iOS アプリ開発経験者
・Widget の開発未経験者
もしくは軽く触ってみた程度

4. 発表の流れ
・Widget とは
・Hello World
・詰まりどころ＆ Tips 集

5. 発表の流れ
・Widget とは
・Hello World
・詰まりどころ＆ Tips 集

6. Widget とは
http://imgc.appbank.net/c/wp-content/uploads/2014/06/140603ios8widget-2.jpg

7. Widget とは
通知センターに Today タブが
新しく追加された
Widget のコンテンツ
Today という名前の通り
リアルタイム性の高い
コンテンツが並ぶ
・カレンダー
・天気
・リマインダー
・株価
など
http://imgc.appbank.net/c/wp-content/uploads/2014/06/140603ios8widget-2.jpg

8. DEMO

9. 発表の流れ
・Widget とは
・Hello World
・詰まりどころ＆ Tips 集

10. 前提知識
Extension はそれだけを申請することが出来ない。
そのため通常通りプロジェクトを作り、
本体アプリの中に Extension を追加して実装する流れとなる。
https://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/Art/simple_communication_2x.png

11. 前提知識

12. 前提知識
作成する Widget
本体アプリ
Widget の呼び出し元
今回だと通知センター

13. 前提知識
作成する Widget
本体アプリ
Widget の呼び出し元
今回だと通知センター
両方を Xcode の１プロジェクトにまとめる

14. 1. プロジェクト作成（いつも通りに）

15. 2. プロジェクト作成（いつも通りに）

16. 3. プロジェクト作成（いつも通りに）

17. プロジェクト作成完了

18. 4. Target を追加

19. 5. Application Extension > Today Extension
3
2
1

20. 6. Product Name を設定
今回は Widget と入力

21. Widget のファイル群が追加された

22. MainInterface.storyboard
はじめから Hello World の
UILabel がセットされている

23. 7. Widget 起動
2 1

24. Hello World が表示される

25. Hello World
簡単に作れる！
が
詰まりどころが多い

26. 発表の流れ
・Widget とは
・Hello World
・詰まりどころ＆ Tips 集

27. 詰まりどころ＆ Tips 集
・Widget 表示名変更
・左余白の消し方
・ビューのライフサイクル
・Widget からアプリを起動
・本体アプリとデータ共有
・本体アプリとコード共有
・NG 事項

28. 詰まりどころ＆ Tips 集
・Widget 表示名変更
・左余白の消し方
・ビューのライフサイクル
・Widget からアプリを起動
・本体アプリとデータ共有
・本体アプリとコード共有
・NG 事項

29. Widget の表示名変更
Product name が表示されている

30. Widget の表示名変更
Bundle display name を変更

31. Widget の表示名変更

32. Widget の表示名変更
before after

33. 詰まりどころ＆ Tips 集
・Widget 表示名変更
・左余白の消し方
・ビューのライフサイクル
・Widget からアプリを起動
・本体アプリとデータ共有
・本体アプリとコード共有
・NG 事項

34. 左余白の消し方
デフォルトだと余白ができる

35. 左余白の消し方
TodayViewController.m

36. 左余白の消し方
UIEdgeInsetsZero 指定すると余白が消える

37. 左余白の消し方
あくまでデフォルトは余白ありなので、
必要な場合のみ検討したほうが良い。

38. 詰まりどころ＆ Tips 集
・Widget 表示名変更
・左余白の消し方
・ビューのライフサイクル
・Widget からアプリを起動
・本体アプリとデータ共有
・本体アプリとコード共有
・NG 事項

39. ビューのライフサイクル
表示のタイミング非表示のタイミング
-­‐ viewDidLoad
-­‐ viewWillAppear
-­‐ viewDidAppear
-­‐ viewWillDisappear
-­‐ viewDidDisappear
表示、非表示の度に上記メソッドが呼ばれる

40. 詰まりどころ＆ Tips 集
・Widget 表示名変更
・左余白の消し方
・ビューのライフサイクル
・Widget からアプリを起動
・本体アプリとデータ共有
・本体アプリとコード共有
・NG 事項

41. Widget からアプリを起動
カスタム URL スキーマでアプリを開く
TodayViewController.m
NSExtensionContext に openURL メソッドが用意されている
（逆にアプリからウィジェットを開くことは出来ない。）

42. 詰まりどころ＆ Tips 集
・Widget 表示名変更
・左余白の消し方
・ビューのライフサイクル
・Widget からアプリを起動
・本体アプリとデータ共有
・本体アプリとコード共有
・NG 事項

43. 本体アプリとデータ共有
本体アプリのプロセス
Widget のプロセス
本体アプリのデータ保存領域
Widget のデータ保存領域
https://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/Art/app_extensions_container_restrictions_2x.png

44. 本体アプリとデータ共有
本体アプリのプロセス
Widget のプロセス
本体アプリのデータ保存領域
保存領域が異なる
Widget のデータ保存領域

45. 本体アプリとデータ共有

46. 本体アプリとデータ共有
共有して保存できる領域

47. 本体アプリとデータ共有
共有して保存できる領域
App Group により定義される
- group.jp.co.yahoo.search
- group.jp.co.yahoo.weather
- group.jp.co.yahoo.news
＞この文字列が識別子となる
（アプリ～ウィジェット間に留まらず、
Developer が同じであれば他のアプリでもデータ共有が可能）

48. 本体アプリとデータ共有
データ共有のための手順
1. App Group の作成
2. 本体、ウィジェットで App Group を有効化
3. コーディング

49. 本体アプリとデータ共有 /A pp Group の作成の前に
iOS Dev Center の Certificates のページにアクセス
ここで App Group 一覧を確認できる

50. 1
2
本体アプリとデータ共有 / App Group の作成

51. 本体アプリとデータ共有 / App Group の作成

52. 本体アプリとデータ共有 / App Group の作成
グループの識別子を設定する

53. 本体アプリとデータ共有 / App Group の作成
今回は group.<Bundle ID> とする

54. 本体アプリとデータ共有 / App Group の作成
App Groups に追加された
同時に手順２の有効化も完了

55. 本体アプリとデータ共有 / App Group の作成
App Groups に追加されたことを確認

56. 本体アプリとデータ共有 / App Group の作成
編集・削除が可能

57. 本体アプリとデータ共有 / 本体、ウィジェットで App Group を有効化
1
ウィジェットでも App Group を有効化しておく
2

58. 実装方法
本体アプリとデータ共有 /
NSUserDefaults の場合

59. 実装方法
本体アプリとデータ共有 /
NSUserDefaults の場合
作成した App Group を指定
（あとの操作は通常通り） イニシャライズメソッドが異なる

60. 本体アプリとデータ共有 / まとめと補足
・本体アプリとのデータ共有には App Group を利用
・同一 Developer なら複数アプリのデータ共有も可能
・NSUserDefaults, CoreData, SQLite などの共有が可能

61. 詰まりどころ＆ Tips 集
・Widget 表示名変更
・左余白の消し方
・ビューのライフサイクル
・Widget からアプリを起動
・本体アプリとデータ共有
・本体アプリとコード共有
・NG 事項

62. 本体とコード共有
本体アプリのプロセス
Widget のプロセス
プロセスが別なので、相互にクラスを import できない

63. 本体とコード共有
Embedded Framework を利用
手順は以下が参考になる
http://dev.classmethod.jp/references/ios-8-embedded-framework/

64. 詰まりどころ＆ Tips 集
・Widget 表示名変更
・左余白の消し方
・ビューのライフサイクル
・Widget からアプリを起動
・本体アプリとデータ共有
・本体アプリとコード共有
・NG 事項

65. NG 事項
・キーボード使用
・スクロールビューの配置
・大きすぎるコンテンツ（高さ）
https://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/NotificationCenter.html

66. 参考文献
App Extension Programming Guide
https://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/index.html
WWDC2014 資料
https://developer.apple.com/videos/wwdc/2014/
Creating Extensions for iOS and OS X, Part 1
Creating Extensions for iOS and OS X, Part 2

67. ご清聴ありがとうございました