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

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

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

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

関連記事

採用情報

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

バックエンドエンジニア

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

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

\ 世界を変える…! /

Androidエンジニア

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

iOSエンジニア