iOS 8 Widget ~ 導入から Tips まで
Upcoming SlideShare
Loading in...5
×
 

iOS 8 Widget ~ 導入から Tips まで

on

  • 34 views

 

Statistics

Views

Total Views
34
Views on SlideShare
34
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

iOS 8 Widget ~ 導入から Tips まで Presentation Transcript

  • 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. ご清聴ありがとうございました