React NativeアプリでSpotlightを使った検索を実装する

こんにちは、アプリ開発担当のエモトです。みなさま給付金は受給されましたか？僕は、あ、あれ、何かノートパソコンが生えてる。不思議なこともあるもんだな。ちなみ、前回の給付金（リーマンショックを受けて、2009年に施行）では、Realforceを購入して、今それを使って、このブログを書いています。

さて、先日のアップデートで iOS 版オーディオブックアプリは、Spotlight を使ったオーディオブック作品の検索に対応しました。Spotlight とは？アプリではどう使われる？と気になる方は、弊社 note に紹介記事「Spotlightで検索できるようになりました」が投稿されています。是非ご覧ください。弊ブログでは技術面を少し話したいと思います。

当初、React Native のサードライブラリを利用して、Spotlight の実装をしようを思っていました。しかしながら、我々の想定にあうライブラリが見当たらなかったので、自作することにしました。もちろん、ブログ3回目の登場、Native Module を使います。以前、紹介した Siri Media Intents や Sign in with Apple とは異なり、Spotlight は iOS 8 に登場して機能です。前者と比べると複雑ではないので、比較的簡単に実装できました。

実装

コード全文を紹介すると長くなるので、エッセンシャルを紹介します。Native Modules の基本的な使い方は今回省略しています。

Spotlightの実装

Spotlitght を使用するには、まず最初に、検索対象となる SearchableItem 型の検索データを用意します。React Native での使用を想定しているので、検索データは連想配列（辞書型）で与えられるとしています。

// import Foundation
// import CoreSpotlight
// import Alamofire
// import AlamofireImage

fileprivate class SearchItemKey {
    static let title = "title"
    static let description = "description"
    static let keywords = "keywords"
    static let imageUrl = "imageUrl"
    static let domain = "domain"
    static let id = "id"
}

/// create dictionary to CSSearchableItem
func createSearchableItem(item: [String: Any],
                          completion: @escaping  (CSSearchableItem) -> () ){
  
    var domain = Bundle.main.bundleIdentifier
    if let d = item[SearchItemKey.domain] as? String{
        domain = d
    }
        
    let attr = CSSearchableItemAttributeSet.init(itemContentType: kCIAttributeTypeImage)
    attr.title = item[SearchItemKey.title] as? String
    attr.contentDescription = item[SearchItemKey.description] as? String
    attr.keywords = item[SearchItemKey.keywords] as? [String]
    attr.domainIdentifier = domain
     
    // 画像データがない or 直接画像データがある場合はダウンロード処理は不要です
    // その場合は直接 return item して問題ありません   
    let callCalback = { () in
        let item = CSSearchableItem.init(uniqueIdentifier: item[SearchItemKey.id] as? String,
                                         domainIdentifier: domain,
                                         attributeSet: attr)
        completion(item)
    }
    if let imageUrl = item[SearchItemKey.imageUrl] as? String{
        Alamofire.request(imageUrl, method: .get).responseImage { response in
            if let image = response.result.value{
                attr.thumbnailData = image.pngData()
            }
            callCalback()
        }
    }else{
        callCalback()
    }
}

次に登録を行います。登録は簡単で先ほど生成した CSSearchableItem 配列を登録メソッドに与えます。なお、登録があれば、もちろん削除もあります。興味ある方はアップルの開発ドキュメントをご確認ください。

let searchableItems = [CSSearchableItem]()
let searchableIndex = CSSearchableIndex.default()
searchableIndex.indexSearchableItems(searchableItems) { (error) in
    // 完了やerror処理など
}

iOS と React Native の連携

Spoltlight の準備ができました。次は、その Spoltlight のイベントを React Native に送る方法です。Native Modules の RCTEventEmitter を継承したクラスを用意します。

fileprivate enum SearchOnDeviceListener: String, CaseIterable {
  case onSearchOnDeviceRequest
}

@objc(SearchOnDevice)
class SearchOnDevice: RCTEventEmitter {

    @objc public static let shared = SearchOnDevice()

    override init() {
      super.init()
      for listener in SearchOnDeviceListener.allCases {
        self.addListener(listener.rawValue)
      }
    }
    
    deinit {
      self.removeListeners(Double(SearchOnDeviceListener.allCases.count))
    }
    
    @objc
    override func supportedEvents() -> [String]! {
      return SearchOnDeviceListener.allCases.map {
        $0.rawValue
      }
    }
    
    @objc(handle:)
    static public func handle(_ userActivity: NSUserActivity) -> Bool {
        var identifier: String? = nil
        if userActivity.activityType == CSSearchableItemActionType{
            identifier = userActivity.userInfo?[CSSearchableItemActivityIdentifier] as? String
        }
        var query: String? = nil
        if userActivity.activityType == CSQueryContinuationActionType {
            // iOS 10以上かつ、plistで設定が必要
            query = userActivity.userInfo?[CSSearchQueryString] as? String
        }
        let obj = SearchOnDevice.shared
        obj.sendEvent(withName: SearchOnDeviceListener.onSearchOnDeviceRequest.rawValue,
                           body: ["id": identifier, "query": query])
    }
}

上記を AppDelegate.m にて Spotlight が実行されると呼ばれるメソッド内で設定します。これにより、実行のたびに、React Native へ検索データが送られます。そのデータを使って、詳細画面や検索画面を開けば OK です。

// AppDelegate.m
- (BOOL)application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
  return [SearchOnDevice handle:userActivity];
}

まとめ

開発当初、適切なライブラリが見つからないとアクシデントがありましたが、Spotlight 自体の実装コストが低いのもあり、比較的に容易に実装できました（これまでの Siri Media Intents や Sign in with Apple の Native Module 実装の経験が役立ちました）。Spotlight は低い開発コストのうえ、iPhone の検索からユーザーが Safari に行くことなく自アプリへ導入できるという非常に魅力的な機能なので、おすすめです。

最後に、オトバンクではエンジニアを募集中です。日頃は Swift や Kotlin を書かれてる方でも、オーディオブックや、React Native 開発（ネイティブコードも書いてます）にご興味があれば、是非どうぞ。