田邉 裕貴

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. プロジェクト作成（いつも通りに）

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 に追加された

同時に手順２の有効化も完了

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 資料

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