Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

iOS 8 Widget ~ 導入から Tips まで

39,788 views

Published on

Published in: Engineering

iOS 8 Widget ~ 導入から Tips まで

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

×