【iOS】ウィジェットとCoreDataを連携する入門

ウィジェット上でアプリの情報を確認できるように出来るようにして、よりユーザーに優しいアプリ作りを目指したいということでCoreDataと連携したウィジェットの実装方法について調べることにしました。

ウィジェットとは

よく使うAppの情報をひと目で分かるように表示できる機能で、ホーム画面に追加したり、iOS 16からはロック画面に追加したり出来ます。またウィジットをタップすることでアプリをすぐ利用出来ます。

作ったもの

はじめに

今回は、ウィジェットとCoreDataを連携する部分に中心に記載している為、Widget Extension内のメソッドの説明などは省略しております。

【iOS】WidgetKit 入門にWidgetの説明が分かりやすく書いてあったので参考にさせていただきました。

環境

• Xcode 14.2
• iOS 16.2

新規プロジェクトを作成

途中から追加することも可能ですが、今回は0からプロジェクトを作成するところから進めていきます。

プロジェクト作成時にUse Core Dataのチェックを入れます。

Widget Extensionを追加

File > New > Targetでテンプレート選択画面が表示される為、Widget Extensionを選択して追加します。

今回は使用しない為、Incluede ~のチェックボックスは両方とも行いません。別の機会に説明できればと思います。

アクティベートしますか？と問われるのでアクティベートを行います。

ウィジットに関するファイルが追加されました。

この時点で、アプリを立ち上げるとウィジットが機能するのを確認出来ます。

App Groupsを追加

App Groupsとは、簡単にいうと共有領域にデータを保存することによって、複数のアプリ間でデータの読み書きが行える機能になります。アプリ側とウィジェット側でデータの参照先が違う為、CoreData連携を行う為に共有領域を活用します。

• アプリ側ターゲットかウィジェット側ターゲットを選択
  • (最終的に両方共に追加するのでどちらからでも問題ありません)
• 上部にある+ Capabilityをタップ

追加するCapabilityを選択できる画面が表示されるので、App Groupsをタブルクリックします。

App Groupsが追加されたので画面下部の+ボタンをクリックします。

コンテナを作成するダイアログが表示されるので、任意の名前を入力してOKボタンを押します。今回はgroup.example.coredatawidgetとしました。

アプリ側ターゲットかウィジェット側ターゲットでまだApp Groupsを追加していない方に同様の手順でApp Groupsを追加します。

Widget ExtensionとCoreDataを連携

Target MembershipにWidget Extensionを追加

デフォルトで組み込まれているPersistence.swiftと.xcdatamodelIdファイルのTarget MembershipにWidget Extensionも含めるためにチェックボックスにチェックを入れます。

CoreDataとApp Groupsを連携

Persistence.swiftのコードをAppGroupsに適用させるために変更を加えます。

struct PersistenceController {
    static let shared = PersistenceController()

    // ~ 省略

    let container: NSPersistentContainer

    init(inMemory: Bool = false) {

        // 参照先をAppGroupsで追加したコンテナに指定
        let appGroupId = "group.example.coredatawidget"
        guard let containerUrl = FileManager.default.containerURL(forSecurityApplicationGroupIdentifier: appGroupId) else {
            fatalError("Failure to init store URL for AppGroup ID: \(appGroupId)")
        }
        let storeUrl = containerUrl.appendingPathComponent("CoreDataWidgetFirst")

        let description = NSPersistentStoreDescription(url: storeUrl)

        container = NSPersistentContainer(name: "CoreDataWidgetFirstPractice")
        container.persistentStoreDescriptions = [description]
        // ここまでを追加

        if inMemory {
            container.persistentStoreDescriptions.first!.url = URL(fileURLWithPath: "/dev/null")
        }
        container.loadPersistentStores(completionHandler: { (storeDescription, error) in
            if let error = error as NSError? {
                fatalError("Unresolved error \(error), \(error.userInfo)")
            }
        })
        container.viewContext.automaticallyMergesChangesFromParent = true
    }
}

データの参照先をAppGroupsで追加したコンテナに指定することで共有領域を使用できるようにします。

ウィジェット側でPersistenceControllerを参照

ウィジェット側でPersistenceControllerを参照する為に、CoreDataWidgetの.environmentにpersistenceControllerを追加します。

struct CoreDataWidget: Widget {
    let persistenceController = PersistenceController.shared

    let kind: String = "CoreDataWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { _ in
            CoreDataWidgetEntryView()
                // 追加
                .environment(\.managedObjectContext,
                              persistenceController.container.viewContext)
        }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

WidgetEntryViewでCoreDataの値を参照

Widget Extensionで追加した名前 + EntryViewという構造体がウィジェットのView部分になります。この中の処理をCoreDataの値を参照するように変更しました。

struct CoreDataWidgetEntryView : View {

    @Environment(\.managedObjectContext) private var viewContext

    @FetchRequest(
        sortDescriptors: [NSSortDescriptor(keyPath: \Item.timestamp, ascending: true)],
        animation: .default)
    private var items: FetchedResults<Item>

    var body: some View {

        VStack {
            Rectangle()
                .fill(.blue.gradient)
                .frame(height: 32)
            Divider()

            Spacer()

            ForEach(items) { item in
                Text(item.timestamp ?? Date(), style: .time)
            }

            Spacer()
        }
    }
}

CoreDataから取得したItemをループ処理で描画しているシンプルなものになります。

ウィジェットを更新する処理を追加

ウィジェット側で更新する処理

デフォルトで作成されているProvider構造体の中にあるgetTimelineメソッドでウィジェットの更新タイミングを指定することが出来ます。

func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
    var entries: [SimpleEntry] = []

    // 現在の日付から1時間ごとに5つのエントリで構成されるタイムラインを生成します
    let currentDate = Date()
    for hourOffset in 0 ..< 5 {
        let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
        let entry = SimpleEntry(date: entryDate)
        entries.append(entry)
    }

    let timeline = Timeline(entries: entries, policy: .atEnd)
    completion(timeline)
}

デフォルトでは1時間ごとに更新されるようになっています。今回は、タイムラインでの更新は行わない為、特に変更も加えずそのままにしておきます。

アプリ側でウィジェットを更新する処理を追加

今回はアプリ側の特定の処理の際にウィジェットを更新する方法で実装します。

import SwiftUI
import CoreData
// 追加
import WidgetKit

struct ContentView: View {
    @Environment(\.managedObjectContext) private var viewContext

    @FetchRequest(
        sortDescriptors: [NSSortDescriptor(keyPath: \Item.timestamp, ascending: true)],
        animation: .default)
    private var items: FetchedResults<Item>

    var body: some View {
        NavigationView {
            List {
                ForEach(items) { item in
                    NavigationLink {
                        Text("Item at \(item.timestamp!, formatter: itemFormatter)")
                    } label: {
                        Text(item.timestamp!, formatter: itemFormatter)
                    }
                }
                .onDelete(perform: deleteItems)
            }
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    EditButton()
                }
                ToolbarItem {
                    Button(action: addItem) {
                        Label("Add Item", systemImage: "plus")
                    }
                }
            }
            Text("Select an item")
        }
    }

    private func addItem() {
        withAnimation {
            let newItem = Item(context: viewContext)
            newItem.timestamp = Date()

            do {
                try viewContext.save()
                // 追加
                WidgetCenter.shared.reloadAllTimelines()
            } catch {
                let nsError = error as NSError
                fatalError("Unresolved error \(nsError), \(nsError.userInfo)")
            }
        }
    }

    private func deleteItems(offsets: IndexSet) {
        withAnimation {
            offsets.map { items[$0] }.forEach(viewContext.delete)

            do {
                try viewContext.save()
                // 追加
                WidgetCenter.shared.reloadAllTimelines()

            } catch {
                let nsError = error as NSError
                fatalError("Unresolved error \(nsError), \(nsError.userInfo)")
            }
        }
    }
}

private let itemFormatter: DateFormatter = {
    let formatter = DateFormatter()
    formatter.dateStyle = .short
    formatter.timeStyle = .medium
    return formatter
}()

アプリのContentViewファイルにWidgetKitをインポートして、addItemとdeleteItemsの処理完了後に、WidgetCenter.shared.reloadAllTimelines()を実行しています。

これでアプリ側で変更加えるとウィジェットに変更が反映されるアプリが出来ました。

reloadAllTimelines

アプリに含まれているすべての構成済みウィジェットのタイムラインを再読み込みします。

おわりに

テンプレートで用意されていたものに少し変更を加えて、CoreDataと連携されたウィジェットを作成出来ました。今回はウィジェットとCoreDataの連携の箇所を中心に説明したので色々と省略したのですが、少しでも誰かの参考になれば嬉しいです。

アプリを開かずとも、ウィジェット上でデータが確認できるとアプリを開く手間が省けて嬉しいですね。

次はロック画面のウィジェットについても調べてみたいと思います。

参考

• 【iOS】WidgetKit 入門
• iPhoneでウィジェットを追加する
• WidgetCenter
• reloadAllTimelines()