TRILL Tech Blog

国内最大級の女性向けメディアTRILLの開発ブログです。

TRILLアプリでiOS14のWidgetに対応しました & Tips集

TRILL開発部の石田です。

TRILLでは、ver.3.5.0でiOS14で新しく登場したWidgetに対応しました。

f:id:trill_tech:20201007160943p:plain:w400

もともとToday Extensionには対応していたのですが、Widget Extensionは新しい機能ということでデザインや実装を見直しました。

Widget自体はWidgetKitフレームワークとSwiftUI用のウィジェットAPIを使って実装していくのですが、以下ではWidgetの実装で悩みやすい部分についてサンプル実装を紹介したいと思います。

サイズごとに別のViewを実装する

WidgetにはSmall、Medium、Largeの3種類のサイズがあります。

f:id:trill_tech:20201007161020p:plain

f:id:trill_tech:20201007161031p:plain

f:id:trill_tech:20201007161040p:plain

デフォルトでは、EntryViewで定義したViewがそれぞれのサイズに伸縮され描画されますが、WidgetFamilyを使って場合分けすることでサイズごとに別のViewを設定することができます。

例えば以下のようになります。

struct SampleWidgetEntryView : View {
    @Environment(\.widgetFamily) var family: WidgetFamily
    var entry: Provider.Entry

    @ViewBuilder
    var body: some View {
        switch family { 
        case .systemSmall: Text("Small")
        case .systemMedium: Text("Medium")
        case .systemLarge: Text("Large")
        default: Text("NotAvailable")
        }
    }
}

特定のサイズのみ対応する

上述の通り、Widgetには3種類のサイズがあります。 その中でもLargeには対応せず、SmallとMediumのみに対応したい場合があると思います。 そのときは、 supportedFamilies(_:))を使うことで、対応するサイズを定義することができます。

@main
struct SampleWidget: Widget {
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: "widget", provider: Provider()) { entry in
            SampleWidgetEntryView(entry: entry)
        }
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
        .supportedFamilies([.systemSmall, .systemMedium])
    }
}

同じサイズで別のViewを設定する

Widgetは同じサイズでも別のViewを設定することができます。 例えば天気アプリのWidgetを考えたとき、Smallサイズでも「現在の天気」と「雨雲レーダー」の2種類を実装したいという場合です。 その場合、WidgetBundleを使い、Widgetを複数定義することで実装することができます。

@main
struct SampleWidgets: WidgetBundle {
    @WidgetBundleBuilder
    var body: some Widget {
        WeatherWidget()
        RainRadarWidget()
    }
}

定期実行する

ニュースアプリなどのWidgetでは、定期的にサーバにアクセスし、最新の情報をWidgetで提示したいと思います。 その場合、TimelineのTimelineReloadPolicyに所望の時間を設定することで実現できます。 下記は15分ごとに実行するサンプルとなります。

func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
    let currentDate = Date()
    let refreshDate = Calendar.current.date(byAdding: .minute, value: 15, to: currentDate)!
        
    ...
        
    let timeline = Timeline(entries: [entry], policy: .after(refreshDate))
    completion(timeline)
}

Deep Linkを設定する

Widgetはデフォルトではタップするとアプリを開くだけです。 特定の画面に遷移させるにはwidgetURL(_:))を設定することで実現できます。

Smallサイズではタップ領域は1つだけですが、Mediumサイズ、Largeサイズには複数のタップ領域を設けることができます。 その場合、Linkを使うことで複数の導線を設定できます。

例えば下記のようになります。

var body: some View {
    VStack {
        Link(destination: hogeDeepLink) {
            Text("Hoge")
        }
        Link(destination: fugaDeepLink) {
            Text("Fuga")
        }
    }.widgetURL(piyoDeeplink)
}

まとめ

Widgetの実装において、「これってどうやるんだ?」という機能のサンプル実装を紹介しました。 Widgetはサイズが固定されており、機能的な制限もありますが、既存の機能とは異なる新しい価値をユーザに提供できるのではないかと思います。 まだ登場したばかり対応しているアプリは少ないですが、今後どのようなWidgetが出てくるかウォッチしながら、さらなるブラッシュアップをしていきたいと考えています。

TRILLではiOS限らずAndroid、サーバなどでエンジニアを積極採用中です。 Widgetなど新しい機能にも積極的に取り組めますので、ご興味がありましたら採用ページよりご連絡ください!


TRILLプロダクトについて

皆さん、こんにちは。

はじめましてTRILL開発部の永井です。

 

ここではTRILLのプロダクトにおいて取り入れている技術だったり、エンジニアの考えてることやナレッジを発信していけたらと思っています。

 

さて今回は初記事ということで、TRILLのプロダクトや開発環境について紹介したいと思います。

 

「TRILL」は、月間利用者数4000万MAU、アプリ累計DL1000万のまだまだ拡大を続けている国内No.1女性向けメディアで、「女性が元気に活躍する社会」というビジョンを掲げ、女性たちの自己実現をサポートできる存在でありたいと考えています。また圧倒的なリーチ力を生かして女性向けのサービスを展開するクライアントのマーケティング・ブランディング課題の解決を行なっています。

 

開発として、現在はユーザ規模を生かした広告事業を主軸にメディアとしてのアプリグロースを進めていますが、巨大メディアにとどまることなくTRILLがユーザから強烈に求められる価値を提供できるようなビジネスモデルへの「進化」も構想中ですので、こういった価値の実現に向け開発に取り組んでいます。

 

note.com

 

開発では以下の技術を採用しています。

アプリ

・Java、Kotlin、RxJava2、Material Design

・Swift、RxSwift、Fastlane

・MVP、Clean Architecture

・DI、ReactiveX、Retrofit、Realm

・Firebase、Repro

Web、BE

・Ruby、Rails、React、Node.js、Swagger

・MySQL、Elasticsearch、Redis

・GCP、AWS

その他

・GA、BigQuery、Adjust

・GitHub、Slack、DocBase、LGTM

 

これからもモダンな技術を取り入れ開発していく中で、そういった技術やノウハウをアウトプットしていければと思いますので、どうぞよろしくお願いします。

 

いかがでしたでしょうか。

女性向けメディア「TRILL」を運営するdelyは、更なる成長を目指して各ポジション採用を強化していきます!世の中の女性を元気にするメディアを一緒に作っていきたい方の応募お待ちしております。