1. HOME
  2. ブログ
  3. IT技術
  4. 【iOS14】Realmで保存したデータをWidgetに表示してみた
【iOS14】Realmで保存したデータをWidgetに表示してみた

【iOS14】Realmで保存したデータをWidgetに表示してみた

Realmで保存したデータをWidgetに表示する方法をまとめてみた!

小林先生

(株)ライトコードの小林(こばやし)です!

前回の記事では、iOS 14から追加された WidgetKit を使い、Widget 実装を実践してみました。

今回は Realm を使って、アプリ内で保存したデータを、Widget に表示する方法をまとめていきます!

開発環境

開発環境は以下のとおりです。

MacOS10.15.4
Swift5.3
Xcode12.0.1
Realm5.5.0

では早速、始めていきましょう!

前回の記事

Widgetの元となるアプリを実装する

それでは前回と同様、Widget の元となるアプリを、まずは実装していきます。

ちなみに今回作るアプリは、テキストフィールドに入力した値を、Realm に保存するのみの機能です。

構成は MVVM で、Combine を使っていきます。

実装準備

まずは、プロジェクトを作成します。

プロジェクトを作成

次に、Realm を導入します。

今回は、SPM(Swift Package Manager)を使って、Realm をインストールしてみましょう。

メニューバーから、「File > Swift Packages > Add Package Dependency… 」を開いて、Realm のリポジトリ URL を入力します。

Realm をインストール

「Up to Next Major」で、バージョンを5.0.0に指定し、次に進みます。

「Up to Next Major」で、バージョンを5.0.0に指定

最後に、Realm と RealmSwift にチェックをつけて、インストール開始です。

Realm と RealmSwift にチェックをつけて、インストール開始

これで、実装前の準備は完了です。

アプリ実装

今回は、Realm を使ってデータを保存するので、まずは Realm に保存する「データ項目」と「処理を定義したクラス」を作ります。

次に、ViewModel を実装します。

最後に、画面を実装していきましょう!

「Build & Run」すると、こんな感じになりました!

皆さんも、同じような感じになりましたか?

アプリ実装

Widgetを実装する

それでは、作ったアプリの Widget も実装してきます。

Widgetを追加する

メニューバーから「File > New > Target…」を開いて、「widget」を検索します。

メニューバーから「File > New > Target…」を開いて、「widget」を検索

ProductName などを入力して、Finish を押します。

次に、プロジェクト配下に新しく、Widget 用ディレクトリを追加していきましょう。

プロジェクト配下に新しく、Widget 用ディレクトリを追加

続いて下記画像のように、Memo.swift と ContentViewModel の Target Membership に追加します。

Memo.swift と ContentViewModel の Target Membership に追加

また、WidgetExtension でも RealmSwift を使用したいので、WidgetExtension の Build Phases で Library を連携します。

WidgetExtension でも RealmSwift を使用したいので、WidgetExtension の Build Phases で Library を連携

Widgetを実装する

では、いよいよ Widget を実装します。

とりあえずは、「空のデータを表示する Widget 」とします。

Widgetに保存したデータを表示する

アプリの実装と、Widget 追加が完了したので、Widget にアプリ内で保存したデータを表示するようにします。

App Groupsを設定する

現在の状態では、Widget でアプリ内に保存したデータを、取得することができません。

Widget にデータ共有するには、App Groups という機能が必要になります。

したがってまずは、App Groups の設定を行っていきます。

アプリの Target を選択し、Signing & Capabilities タブで、App Groups を追加します。

アプリの Target を選択し、Signing & Capabilities タブで、App Groups を追加

次に、下記のように名前をつけて、Group を追加します。

名前をつけて、Group を追加

Widget の Extension でも、同様に App Groups を追加して、先ほど作成した Group を選択します。

これで、データを共有する準備が完了しました!

Widget内でアプリのデータを取得する

まず、Realm に保存する「データ項目」と、「処理を定義したクラス」を修正していきます。

先ほど設定した App GroupsのIdentifier を、 Realm.Configuration() に設定します。

次に、Widget 内で Realm に保存したデータを、取得する処理を実装します。

続いて、アプリ内でデータを更新したときに Widget も更新させたいので、ContentViewModel.swift に Widget 更新処理を追加します。

最後に、「Bulid & Run」して、Widget を追加すると…

Realm に保存したデータが、Widget に表示

無事、Realm に保存したデータが、Widget に表示されました!

さいごに

今回は、Realm に保存したデータを、Widget に表示する方法をまとめていきました。

前回は静的なデータを表示するのみでしたが、アプリ内のデータが共有できるようになると、表現できる幅も広がります。

また、 Timeline の機能を使うと、「時間になったら DB の値を更新する」といったこともできます。

ぜひ試してみてくださいね!

こちらの記事もオススメ!


書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア