ios 8 widget ~ 導入から tips まで
TRANSCRIPT
田邉 裕貴
iOS 8 / Swift エンジニア勉強会 2014/10/18 (Sat.)
iOS 8 Widget導入から Tips まで
このスライドの情報
http://bit.ly/ios8_widget
どんな人向けの発表か
・iOS アプリ開発経験者 ・Widget の開発未経験者 もしくは軽く触ってみた程度
発表の流れ
・Widget とは ・Hello World ・詰まりどころ& Tips 集
発表の流れ
・Widget とは ・Hello World ・詰まりどころ& Tips 集
Widget とは
http://imgc.appbank.net/c/wp-content/uploads/2014/06/140603ios8widget-2.jpg
Widget とは通知センターに Today タブが
新しく追加された
Widget のコンテンツ
Today という名前の通り リアルタイム性の高い コンテンツが並ぶ・カレンダー ・天気 ・リマインダー ・株価 など
http://imgc.appbank.net/c/wp-content/uploads/2014/06/140603ios8widget-2.jpg
DEMO
発表の流れ
・Widget とは ・Hello World ・詰まりどころ& Tips 集
前提知識
Extension はそれだけを申請することが出来ない。 そのため通常通りプロジェクトを作り、 本体アプリの中に Extension を追加して実装する流れとなる。
https://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/Art/simple_communication_2x.png
前提知識
前提知識
本体アプリ
作成する Widget
Widget の呼び出し元 今回だと通知センター
前提知識
本体アプリ
作成する Widget
Widget の呼び出し元 今回だと通知センター
両方を Xcode の1プロジェクトにまとめる
1. プロジェクト作成(いつも通りに)
2. プロジェクト作成(いつも通りに)
3. プロジェクト作成(いつも通りに)
プロジェクト作成完了
4. Target を追加
5. Application Extension > Today Extension
3
2
1
6. Product Name を設定
今回は Widget と入力
Widget のファイル群が追加された
MainInterface.storyboard
はじめから Hello World の UILabel がセットされている
7. Widget 起動
12
Hello World が表示される
Hello World
簡単に作れる! が
詰まりどころが多い
発表の流れ
・Widget とは ・Hello World ・詰まりどころ& Tips 集
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
Product name が表示されている
Widget の表示名変更
Widget の表示名変更
Bundle display name を変更
Widget の表示名変更
Widget の表示名変更
afterbefore
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
左余白の消し方
デフォルトだと余白ができる
左余白の消し方
TodayViewController.m
左余白の消し方
UIEdgeInsetsZero 指定すると余白が消える
左余白の消し方
あくまでデフォルトは余白ありなので、 必要な場合のみ検討したほうが良い。
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
ビューのライフサイクル
-‐ viewDidLoad -‐ viewWillAppear -‐ viewDidAppear
-‐ viewWillDisappear -‐ viewDidDisappear
表示のタイミング 非表示のタイミング
表示、非表示の度に上記メソッドが呼ばれる
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
Widget からアプリを起動
(逆にアプリからウィジェットを開くことは出来ない。)
カスタム URL スキーマでアプリを開く
TodayViewController.m
NSExtensionContext に openURL メソッドが用意されている
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
本体アプリとデータ共有本体アプリのプロセス
Widget のプロセス
本体アプリのデータ保存領域
Widget のデータ保存領域
https://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/Art/app_extensions_container_restrictions_2x.png
本体アプリとデータ共有本体アプリのプロセス
Widget のプロセス
本体アプリのデータ保存領域
Widget のデータ保存領域
保存領域が異なる
本体アプリとデータ共有
本体アプリとデータ共有
共有して保存できる領域
本体アプリとデータ共有
共有して保存できる領域App Group により定義される- group.jp.co.yahoo.search - group.jp.co.yahoo.weather - group.jp.co.yahoo.news
(アプリ~ウィジェット間に留まらず、 Developer が同じであれば他のアプリでもデータ共有が可能)
>この文字列が識別子となる
本体アプリとデータ共有
データ共有のための手順1. App Group の作成 2. 本体、ウィジェットで App Group を有効化 3. コーディング
App Group の作成の前に本体アプリとデータ共有 /
iOS Dev Center の Certificates のページにアクセス
ここで App Group 一覧を確認できる
1
2
App Group の作成本体アプリとデータ共有 /
App Group の作成本体アプリとデータ共有 /
App Group の作成本体アプリとデータ共有 /
グループの識別子を設定する
App Group の作成本体アプリとデータ共有 /
今回は group.<Bundle ID> とする
App Group の作成本体アプリとデータ共有 /
App Groups に追加された
同時に手順2の有効化も完了
App Group の作成本体アプリとデータ共有 /
App Groups に追加されたことを確認
App Group の作成本体アプリとデータ共有 /
編集・削除が可能
本体、ウィジェットで App Group を有効化本体アプリとデータ共有 /
1
2
ウィジェットでも App Group を有効化しておく
実装方法NSUserDefaults の場合
本体アプリとデータ共有 /
実装方法NSUserDefaults の場合
作成した App Group を指定
イニシャライズメソッドが異なる(あとの操作は通常通り)
本体アプリとデータ共有 /
まとめと補足本体アプリとデータ共有 /
・本体アプリとのデータ共有には App Group を利用 ・同一 Developer なら複数アプリのデータ共有も可能 ・NSUserDefaults, CoreData, SQLite などの共有が可能
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
本体とコード共有本体アプリのプロセス
Widget のプロセス
プロセスが別なので、相互にクラスを import できない
本体とコード共有
Embedded Framework を利用
http://dev.classmethod.jp/references/ios-8-embedded-framework/手順は以下が参考になる
詰まりどころ& Tips 集・Widget 表示名変更 ・左余白の消し方 ・ビューのライフサイクル ・Widget からアプリを起動 ・本体アプリとデータ共有 ・本体アプリとコード共有 ・NG 事項
NG 事項
・キーボード使用 ・スクロールビューの配置 ・大きすぎるコンテンツ(高さ)
https://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/NotificationCenter.html
参考文献
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 資料
ご清聴ありがとうございました