1. HOME
  2. ブログ
  3. IT技術
  4. 【iOS14】WidgetKitを使ってみた!
【iOS14】WidgetKitを使ってみた!

【iOS14】WidgetKitを使ってみた!

WidgetKitの実装方法をまとめてみた

小林先生

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

iOS14からホーム画面にWidget機能が追加されましたね。

筆者自身気になってはいたものの実装したことがありませんでした!

そこで、この機会に色々触ってみつつ実装方法をまとめてみました。

開発環境

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

MacOS10.15.4
Swift5.3
Xcode12.0.1

Widget/WidgetKitとは

Widgetとは、iOS14から追加された機能であり、ホーム画面にアプリに関する情報を一目でわかる形で表示することができるものです。

iOSホーム画面

Widget 自体は、SwiftUI でできた View であり、Timeline という機能によっては時間の経過とともに View が更新されていきます。

また、WidgetKit とはそれらの機能を実現するためのフレームワークで、これを用いて Widget を構築していきます。

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


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

それでは早速、Widget を実装していきましょう!

…と言いたいところですが、その前に Widget の元となるアプリが必要になるので、まずは事前準備として ToDo を表示するだけの簡単なアプリを作っていきます。

プロジェクト作成

Xcode のメニューバーから

File > New > Project...

を開いて、App を選択します。

プロジェクト作成

プロジェクト名を入力し、Interface は SwiftUI、Life Cycle は SwiftUI App で作成します。

プロジェクト名入力

Preview を起動すると「Hello, World!」と表示される View が確認できます。

アプリ実装

次に、ToDo を表示するためのアプリの実装を行っていきます。

ディレクトリ構造は下記のようになっています。

ディレクトリ構造画面

今回の記事は Widget の実装がメインとなるので、このアプリの実装の説明は省略し、ソースコードのみを載せる形にします。

Build&Run すると、下記のようなアプリが立ち上がります。

作成したToDo List画面

それでは、このアプリを使って Widget を作っていきましょう!

Widgetを実装する

アプリの準備が完了したので、Widget を実装していきます。

Widgetを追加する

まずは Widget を追加しましょう。

メニューバーから

File > New > Target...

を開いて「widget」を検索します。

widget追加画面

ProductName 等を入力して、Finish を押すとプロジェクト配下に新しく Widget用ディレクトリが追加されます。

ProductName 等の入力画面

ToDoManagerWidget.swift を開いて Preview を見てみると現在時刻を確認できる Widget が表示されます。

Preview画面

また、作成した WidgetExtension を下記画像のように Model と View の Target Membership に追加します。Target Membership に追加

Widgetを実装する

それではアプリ用の Widget を実装していきましょう!

まずは、 configurationDisplayNamedescription を設定します。

これらで設定した値は、Widget選択時に表示されるタイトルと説明文になります。

Widgetを実装画面

次は、Widget に表示する View 周りを実装していきます。

SimpleEntity に対し、View に渡したいデータ項目(今回の場合はToDo)を追加します。

SimpleEntity を使用している箇所で引数不足のエラーが出てくるので、それぞれ引数を追加します。

続いて、EntryView で表示したい View を body に追加します。

この状態で一度実行してみましょう!

ToDoの詳細画面

いい感じですね!

Widgetのサポートサイズを設定する

サポートできるサイズには systemSmallsystemMedium 、 systemLarge の3つがあります。

また、 systemSmallはタップ領域が一つだけですが、 systemMediumsystemLargeは複数設置できたりします。

デフォルトではすべてのサイズがサポートされている状態ですが、下記画像のように systemLargeサイズだと余白が多くもったいない感じがします。

Widgetのサポートサイズを設定する

別の View を使って表示したいのでここでは systemSmallsystemMediumのみをサポートするように設定します。

まずは、supportFamilies の設定を追加します。

次に、WidgetKit が提供している widgetFamily の環境変数を利用して、 systemSmallでの表示と systemMediumでの表示を少し変えてみます。

これで Build&Run してみると…

サイズ変更後の画面

systemMediumサイズもいい感じになりました!

Widgetに表示するデータを変更できるようにする

これまでは表示しているデータは魔法使いの ToDo である「素材を集める」しか表示してませんでしたが、他のユーザーのToDoにも表示切り替えができるようにしたいですね。

選択できるようにするには IntentDefinition を追加する必要があります。

まずは、File > New > File... で Intent を検索して、「SiriKit Intent Definition File」を選択し追加します。

Widgetに表示するデータを変更できるようにする

作成した intentdefinitiontarget ファイルの Target Membership に Widget が含まれていることを確認します。

作成した intentdefinitiontarget ファイルの Target Membership に Widget が含まれていることを確認

次に、intentdefinitiontarget ファイルを開き左下の+ボタンを押して New Enum で Enum を追加し、下記のように編集します。

intentdefinitiontarget ファイルを開き左下の+ボタンを押して New Enum で Enum を追加し、下記のように編集

同様に+ボタンを押して New Intent で Intent を追加し、下記のように編集します。

同様に+ボタンを押して New Intent で Intent を追加し、下記のように編集

続いて、Widget を編集していきます。

まず、StaticConfiguration をIntentConfiguration に変更し、intent の引数に先程作成した UserSelectionIntent を設定します。

IntentConfiguration を使うには IntentTimeProvider が必要なので、Provider の TimelineProviderをIntentTimeProvider に変更します。

また、選択したユーザーのToDoが表示されるように修正を加えます。

Build&Runしてみると…

ユーザー選択画面

ユーザー選択ができるようになりましたね!

WidgetBundleを設定する

最後に、サポートしていなかった systemLargeサイズの Widget を作成していきましょう。

新しくファイルを作成し systemLargeサイズ用の Widget を実装します。

実装内容は今までの説明と同様です。

これで systemLargeサイズの Widget ができたので、実行してみましょう!…と言いたいところですが、このままでは実行できません。

なぜなら、複数の Widgetに@main を設定することはできないからです。

このような場合は、WidgetBundle を設定する必要があります。

下記のように Bundle を作成し@main を設定することで、一つの @main で事足りるようになります。

これで、Build&Run を実行すると…

systemLargeサイズの Widget が表示

ちゃんと systemLargeサイズの Widget が表示されましたね!

さいごに

今回は WidgetKit を使ってアプリに Widget 機能を追加してみました。

今回は静的なデータを表示するのみでしたが、ある一定の時間になったらWidgetを更新したり、アプリ内から更新イベントを受け取って Widget を更新したりなどもできます。

この記事が WidgetKit を使った実装への取っ掛かりになったら嬉しいです!

(自分もWidget機能のあるアプリを作ってリリースしてみよう…!)

記事を書いた人

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

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


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

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

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

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

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

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

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

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

採用情報はこちら

関連記事

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

採用情報

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

バックエンドエンジニア

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

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

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

モバイルエンジニア

\ サービスの守り神! /

インフラエンジニア

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

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