ラズパイ×iOSウィジェットでCO2濃度を可視化する👀

第0回 個人開発者のオンラインLT会（https://k-dev.connpass.com/event/175072/）
で話した資料です

Qiitaで書いた記事のToday Extension部分をちょっと詳しく書きました。
https://qiita.com/akeome/items/997d2f2bd9aea538857e

Transcript

1. ラズパイ×iOSウィジェットで CO2濃度を可視化する Yuki Yamashita @akeome Work from homeの生産性向上を目指して
2. 自己紹介
3. 自己紹介 ・事務職：トランプ作ってた ・旅人：ママチャリで日本一周した ・SES：Java、C++、C#とか ・個人アプリ開発：累計14万DLぐらい ・フリーランスエンジニア：Swift
4. 今日お話すること
5. こんな感じでCO2濃度（ついでに室温）が見れるようになる
7. 今日お話すること iOSウィジェットにCO2濃度を表示する 【Raspberry Pi × CO2-mini × co2meter】 - Qiita (https://qiita.com/akeome/items/997d2f2bd9aea538857e) ・Raspberry Pi のセットアップ ・Raspberry Pi をWebサーバーとして動かす ・iOSウィジェットに表示する
8. 今日お話すること iOSウィジェットにCO2濃度を表示する 【Raspberry Pi × CO2-mini × co2meter】 - Qiita (https://qiita.com/akeome/items/997d2f2bd9aea538857e) ・Raspberry Pi のセットアップ ・Raspberry Pi をWebサーバーとして動かす ・iOSウィジェットに表示する この部分！
9. iOSのウィジェットとは？
10. iOSのウィジェットとは？ ・App Extensionsのうちのひとつ ・Today画面に表示される小さな表示の こと ・簡単な表示をするのに向いている
11. ウィジェットを追加するには？
12. ウィジェットを追加するには？　（1/3）
13. ウィジェットを追加するには？　（2/3）
14. ウィジェットを追加するには？　（3/3）
15. ウィジェットの実装
16. ウィジェットの実装 アプリ本体 ・Main.storyboard ・ViewController.swift ウィジェット ・MainInterface.storyboard ・TodayViewController.swift
17. ウィジェットの実装 アプリ本体 ・Main.storyboard ・ViewController.swift ウィジェット ・MainInterface.storyboard ・TodayViewController.swift だいたい同じ ≒
18. ウィジェットと本体アプリの違いは… class TodayViewController: UIViewController, NCWidgetProviding { override func viewDidLoad() { super.viewDidLoad() } func widgetPerformUpdate(completionHandler: (@escaping (NCUpdateResult) -> Void)) { completionHandler(NCUpdateResult.newData) } }
19. ウィジェットと本体アプリの違いは… class TodayViewController: UIViewController, NCWidgetProviding { override func viewDidLoad() { super.viewDidLoad() } func widgetPerformUpdate(completionHandler: (@escaping (NCUpdateResult) -> Void)) { completionHandler(NCUpdateResult.newData) } } なんやこれ なんやこれ
20. NCWidget Providing // ウィジェットのサイズが変わったときに呼び出される func widgetActiveDisplayModeDidChange( NCWidgetDisplayMode, withMaximumSize: CGSize) // ウィジェットが表示される度に呼び出される func widgetPerformUpdate(completionHandler: (NCUpdateResult) -> Void) The interface for customizing the appearance and behavior of a Today widget. ウィジェット表示用のprotocol iOSで使えるメソッドは2つだけ
21. func widgetPerform Update // 新規データあり -> 更新される completionHandler(NCUpdateResult.newData) // 新規データなし -> 更新されない completionHandler(NCUpdateResult.noData) // 失敗 -> 更新されない completionHandler(NCUpdateResult.failed) Called to give a widget an opportunity to update its contents. 表示の度に呼ばれるメソッド 更新するかどうかのenumを引数に渡して クロージャを実行する
22. ウィジェットと本体アプリの違いは… class TodayViewController: UIViewController, NCWidgetProviding { override func viewDidLoad() { super.viewDidLoad() } func widgetPerformUpdate(completionHandler: (@escaping (NCUpdateResult) -> Void)) { completionHandler(NCUpdateResult.newData) } } なんやこれ なんやこれ
23. ウィジェットと本体アプリの違いは… class TodayViewController: UIViewController, NCWidgetProviding { override func viewDidLoad() { super.viewDidLoad() } func widgetPerformUpdate(completionHandler: (@escaping (NCUpdateResult) -> Void)) { completionHandler(NCUpdateResult.newData) } } ウィジェットを表示したり更新したりするた めのprotocolです 表示の度に呼び出されるメソッドです 更新するかどうかのクロージャを実行します
24. ウィジェット更新がわかったので 通常のアプリ同様 @IBOutlet による紐付け
25. ウィジェット更新がわかったので // ウィジェットが表示される度に呼び出される func widgetPerformUpdate(completionHandler: (@escaping (NCUpdateResult) -> Void)) { // 通信処理 API.request(completion: { roomCondition in 　　　　　// UI更新なのでメインスレッド DispatchQueue.main.async { self.temperatureLabel.text = roomCondition.temp self.co2Label.text = roomCondition.co2 // 新規データあり -> 更新される completionHandler(NCUpdateResult.newData) } }) }
26. ウィジェット更新がわかったので // ウィジェットが表示される度に呼び出される func widgetPerformUpdate(completionHandler: (@escaping (NCUpdateResult) -> Void)) { // 通信処理 API.request(completion: { roomCondition in 　　　　　// UI更新なのでメインスレッド DispatchQueue.main.async { self.temperatureLabel.text = roomCondition.temp self.co2Label.text = roomCondition.co2 // 新規データあり -> 更新される completionHandler(NCUpdateResult.newData) } }) } 1. ウィジェットが表示される度に呼び 出される処理の中で
27. ウィジェット更新がわかったので // ウィジェットが表示される度に呼び出される func widgetPerformUpdate(completionHandler: (@escaping (NCUpdateResult) -> Void)) { // 通信処理 API.request(completion: { roomCondition in 　　　　　// UI更新なのでメインスレッド DispatchQueue.main.async { self.temperatureLabel.text = roomCondition.temp self.co2Label.text = roomCondition.co2 // 新規データあり -> 更新される completionHandler(NCUpdateResult.newData) } }) } 2. 通信処理を行って
28. ウィジェット更新がわかったので // ウィジェットが表示される度に呼び出される func widgetPerformUpdate(completionHandler: (@escaping (NCUpdateResult) -> Void)) { // 通信処理 API.request(completion: { roomCondition in 　　　　　// UI更新なのでメインスレッド DispatchQueue.main.async { self.temperatureLabel.text = roomCondition.temp self.co2Label.text = roomCondition.co2 // 新規データあり -> 更新される completionHandler(NCUpdateResult.newData) } }) } 3. UIを更新して
29. ウィジェット更新がわかったので // ウィジェットが表示される度に呼び出される func widgetPerformUpdate(completionHandler: (@escaping (NCUpdateResult) -> Void)) { // 通信処理 API.request(completion: { roomCondition in 　　　　　// UI更新なのでメインスレッド DispatchQueue.main.async { self.temperatureLabel.text = roomCondition.temp self.co2Label.text = roomCondition.co2 // 新規データあり -> 更新される completionHandler(NCUpdateResult.newData) } }) } 4. completionHandler(NCUpda teResult.newData) を呼び出せばOK
30. (optional) 本体アプリとデータを共有するには？
31. 本体アプリとデータを共有するには？ App Group を使います
32. 本体アプリとデータを共有するには？ // 値を設定する側 let userDefaults = UserDefaults(suiteName: "group.グループ名") userDefaults?.set(123, forKey: "test") // 値を取得する側 let userDefaults = UserDefaults(suiteName: "group.グループ名") print(userDefaults?.integer(forKey: "test")) // 123 UserDefaultsを使った例
33. なんやかんややって
34. こんな感じでCO2濃度（ついでに室温）が見れるようになる