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 の値を更新する」といったこともできます。

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

記事を書いた人

\ アプリ開発ならおまかせ /
(株)ライトコードは、WEB・アプリ・ゲーム開発に強い「好きを仕事にするエンジニア集団」です。
システム開発依頼・お見積もりはこちらまでお願いします。
また、WEB・スマホ系エンジニアを積極採用中です!
※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

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


ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事

初心者が3ヶ月でどれくらいプログラミングができるようになるのか

採用情報

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

バックエンドエンジニア

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

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

\ 世界はお前の手の中に・・・ /

モバイルエンジニア

\ サービスの守り神! /

インフラエンジニア

初心者が3ヶ月でどれくらいプログラミングができるようになるのか

初心者が3ヶ月でどれくらいプログラミングができるようになるのか