はじめに

こんにちは、iOS/Androidエクスペリエンス開発チームの羽柴です。この記事では、LINE iOSアプリが提供するLINEサービスウィジェットの開発中に私たちが直面した課題と、それを解決するために採用した手法をご紹介します。

背景

ウィジェットとは、iPhoneのホーム画面やロック画面に配置してアプリの情報を一目で確認できるものです。LINEアプリは現在いくつかのウィジェットを提供しており、そのうちの一つが「LINEサービス」です。LINEサービスウィジェットでは、KeepやLINE PayといったLINEの様々なサービスへのショートカットをロック画面に配置できます（ロック画面ウィジェットにLINEを設定する）。

LINEサービスウィジェットは、ユーザによるカスタマイズが可能なウィジェットです。ロック画面に追加しタップすると、ウィジェットに設定できるLINEサービス一覧が表示されます。ここから任意のサービスを選択し、ショートカットを配置します。

要件

昨年のWWDC 22において、iOS 16よりロック画面にウィジェットが配置可能になることが発表され、LINEでもこのウィジェットへの対応を行うための検討が開始されました。LINEサービスへのショートカットを実装する案は当初からありましたが、実現するまでには解決すべき課題がいくつかありました。

LINEサービスウィジェットを開発するにあたり定められた要件は次の3つです：

• ユーザによるカスタマイズが可能であること
• 国ごとに選択肢が調整可能であること
• サービスの更新・終了に対応していること

まず、ショートカットをどのようにユーザに提供するかを議論しました。最も単純な方法は、一つひとつのサービスを個々のウィジェットとして提供することです。技術調査の結果、一つのアプリで提供できるウィジェットの数にはおそらく制限がない（100個まで確認）ことがわかりましたが、管理コストが高く検索機能もないため、この方法は却下されました。そこで、ショートカットにするLINEサービスをユーザが自由に選択できる一つのウィジェットとして実装することが決まりました。

次に検討されたのがローカライズの問題です。LINEはグローバルに利用されていますが、LINEサービスの中には一部地域でしか利用できないものもあります。例えばLINEクーポンは現在日本でのみ利用可能なサービスです。ショートカットの遷移先で利用をブロックすることもできますが、UXを考慮し、「そのユーザが利用できないサービスは選択肢に表示されるべきではない」という方針に固まりました。

最後に、サービスの更新や終了にどのように対応できるかが議題に上がりました。季節限定のアイコンを表示したい場合やサービスが終了した場合に、古いデータが残り続けることなく速やかに更新される必要があります。ウィジェットの描画時にサーバからサービスの情報を取得する方法も検討されましたが、サーバ側の実装コストを踏まえ、アプリ内にリソースを含め、終了時はアプリのアップデートでリソースを削除する方法が選択されました。

実装

このセクションでは、LINEサービスウィジェットで実際に採用した実装をご紹介します。

ユーザによるカスタマイズを可能にする

LINE iOSではSiriKitのカスタムIntentを用いてウィジェットのカスタマイズを行えるようにしています。なお、iOS 17以降ではよりモダンなApp Intentsを使用して同様のことが実現できますが、サポートバージョンの関係で本ウィジェットでは採用していません。

カスタマイズ可能なウィジェットの詳細な作成方法についてはこの記事では省略し、ここではカスタマイズ時にユーザ・OS・アプリ間で発生するやり取りを説明します。

Intentは、ユーザによってカスタマイズされた値を保持するクラスです。ユーザーがウィジェット編集画面を開くと、カスタムIntentの定義に基づいた選択肢が表示されます。

ユーザは任意の選択肢を選び、ウィジェットの編集を完了します。このときOSは選択された値をもとにIntentを更新します。ウィジェットを描画する際は保存されたIntentをOSから受け取って描画します。Intentの値はOSによって保存され、ユーザが再び選択を変更するまで利用され続けます。

国ごとに選択肢を出し分ける

カスタムIntentの定義ファイルで "Dynamic Options"を指定することで、動的に選択肢を生成することができるようになります。ここで適宜ユーザ情報を見るなどして、ユーザの地域を取得します。

LINEサービスウィジェットでは、サービスの情報を以下のように定義しています：

enum FamilyService: String, CaseIterable {
    case keep
    case coupon
    // ...
 
    var info: FamilyServiceInfo {
        switch self {
            case .keep: .keep
            case .coupon: .coupon
            // ...
        }
    }
 
    func isAvailable(in region: Region) -> Bool {
        info.availableRegions.contains { $0 == region }
    }
}
 
struct FamilyServiceInfo {
    var url: URL?
    var availableRegions: [Region]
}
 
extension FamilyServiceInfo {
    static let keep: FamilyServiceInfo = .init(
        url: URL(string: "KEEP_URL"),
        availableRegions: Region.allCases
    )
 
     static let coupon: FamilyServiceInfo = .init(
        url: URL(string: "COUPON_URL"),
        availableRegions: [.jp]
    )
 
    // ...
}

FamilyService.allCases.filter { $0.isAvailable(in: region) }

extension FamilyService {
    static func makeService(from intent: FamilyServiceWidgetSelectionIntent)
        -> Result<FamilyService, InitializationError> {
        guard let identifier = intent.service?.identifier else {
            return .failure(.emptyServiceID)
        }
 
        guard let service = FamilyService(rawValue: identifier) else {
            return .failure(.unknownServiceID)
        }
 
        return .success(service)
    }
}