iOS 8 Widget ~ 導入から Tips まで

Deprecated: The each() function is deprecated. This message will be suppressed on further calls in /home/zhenxiangba/zhenxiangba.com/public_html/phproxy-improved-master/index.php on line 456
iOS 8 Widget ~ 導入から Tips まで

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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

このスライドの情報
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 という名前の通り
リアルタイム性の高い
コンテンツが並ぶ
・カレンダー
・天気
・リマインダー
・株価
　な...

DEMO

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

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

前提知識

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

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

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 起動
2 1

Hello World が表示される

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

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

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

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

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

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

Widget の表示名変更
before after

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

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

左余白の消し方
TodayViewController.m

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

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

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

ビューのライフサイクル
表示のタイミング非表示のタイミング
-‐ viewDidLoad
-‐ viewWillAppear
-‐ viewDidAppear
-‐ viewWillDisappear
-‐ viewDid...

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

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

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

本体アプリとデータ共有
本体アプリのプロセス
Widget のプロセス
本体アプリのデータ保存領域
Widget のデータ保存領域
https://developer.apple.com/library/ios/documentati...

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

本体アプリとデータ共有

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

本体アプリとデータ共有
共有して保存できる領域
App Group により定義される
- group.jp.co.yahoo.search
- group.jp.co.yahoo.weather
- group.jp.co.yahoo...

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

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

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

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

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

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

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

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

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

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

実装方法
本体アプリとデータ共有 /
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/E...

参考文献
App Extension Programming Guide
https://developer.apple.com/library/ios/documentation/General/Conceptual/Extensibil...

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