iOS 8 Widget ~ 導入から Tips まで

Engineering

yuki-tanabe
  • 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 の1プロジェクトにまとめる
  • 14. 1. プロジェクト作成(いつも通りに)
  • 15. 2. プロジェクト作成(いつも通りに)
  • 16. 3. プロジェクト作成(いつも通りに)
  • 17. プロジェクト作成完了
  • 18. 4. Target を追加
  • 19. 5. Application Extension > Today Extension321
  • 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.mNSExtensionContext に 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. 12本体アプリとデータ共有 / App Group の作成
  • 51. 本体アプリとデータ共有 / App Group の作成
  • 52. 本体アプリとデータ共有 / App Group の作成グループの識別子を設定する
  • 53. 本体アプリとデータ共有 / App Group の作成今回は group.<Bundle ID> とする
  • 54. 本体アプリとデータ共有 / App Group の作成App Groups に追加された同時に手順2の有効化も完了
  • 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 Guidehttps://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/index.htmlWWDC2014 資料https://developer.apple.com/videos/wwdc/2014/Creating Extensions for iOS and OS X, Part 1Creating Extensions for iOS and OS X, Part 2
  • 67. ご清聴ありがとうございました
    Please download to view
  • 67
    All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
    Description
    Text
    • 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 の1プロジェクトにまとめる
  • 14. 1. プロジェクト作成(いつも通りに)
  • 15. 2. プロジェクト作成(いつも通りに)
  • 16. 3. プロジェクト作成(いつも通りに)
  • 17. プロジェクト作成完了
  • 18. 4. Target を追加
  • 19. 5. Application Extension > Today Extension321
  • 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.mNSExtensionContext に 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. 12本体アプリとデータ共有 / App Group の作成
  • 51. 本体アプリとデータ共有 / App Group の作成
  • 52. 本体アプリとデータ共有 / App Group の作成グループの識別子を設定する
  • 53. 本体アプリとデータ共有 / App Group の作成今回は group.<Bundle ID> とする
  • 54. 本体アプリとデータ共有 / App Group の作成App Groups に追加された同時に手順2の有効化も完了
  • 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 Guidehttps://developer.apple.com/library/ios/documentation/General/Conceptual/ExtensibilityPG/index.htmlWWDC2014 資料https://developer.apple.com/videos/wwdc/2014/Creating Extensions for iOS and OS X, Part 1Creating Extensions for iOS and OS X, Part 2
  • 67. ご清聴ありがとうございました
  • Comments
    Top