Safari機能拡張を使った高度な検索補助用iOSアプリ「Jotsuyo」をリリース

こんにちは。今回は新しいiOSアプリ「Jotsuyo」をリリースしたので紹介します。

リリースしたアプリ

• Safari機能拡張を使って、google.co.jp/search, google.com/searchでURLの読み取り、更新を行っています。
• 無料です。
• 名前の由来: 情報強者 -> じょうつよ（じょうきょう）-> Jotsuyo

https://apps.apple.com/jp/app/id1615374881
※iOS15.4以上対応です（特に理由はないのですが、ターゲットを15.4にしていました...）

できること

• 予め登録したキーワード・除外キーワードをワンタップで、検索クエリに追加できる
• 完全一致検索などがワンタップでできる
  

なぜ作ったか

• Safari機能拡張で何か作ってみたかった
• SwiftUIも勉強してみたかった
• スマホで検索するときに、検索オプションとかが使いづらかった
• ブラウザやサイトをデフォルトから変えないで（=Safari・アドレスバー検索で）できるようにしたかった
  • 別のアプリを入れたりするのが、あまり好きではないので...

使用技術

iOSアプリ

• SwiftUI
• Core Data

Safari機能拡張（popup.js）

• React
• Chakra UI
• esBuild

勉強になった点

• Core Data
  • ちょっと慣れた
• SafariWebExtensionHandler.swift
  • ここでCore Dataのデータを読み取って、js側に返すなどやっているのですが、結構大変だった
  • popup.js, background.js, SafariWebExtensionHandler.swift間でのデータのやり取り手順などがよく分かった

    if req.action == "getKeywords" {
      do {
        let fetchRequest = Keyword.fetchRequest()
        fetchRequest.predicate = NSPredicate(format: "keywordgroup == nil AND isDisplayed == true")
        fetchRequest.sortDescriptors = [NSSortDescriptor(key: "sortKey", ascending: true)]
        
        let records = try self.managedObjectContext.fetch(fetchRequest)
        let encoder = JSONEncoder()
        let data = try encoder.encode(records)
       
        let jsonstr: String = String(data: data, encoding: .utf8)!
        let response = NSExtensionItem()
        response.userInfo = [ SFExtensionMessageKey: jsonstr ]
  
        context.completeRequest(returningItems: [response], completionHandler: nil)
      } catch {
        print(error.localizedDescription)
      }
    }

• React
  • 状態管理は、recoil使わずに久しぶりにContextとCustomHooksで書きました。
• Chakra UI
  • Tailwindより好きかも！
• esBuild
  • ビルドが速い...！
  • 今までcreate react appばかり使っていて、ビルドの仕組みとか分かってなかったので、esBuild使って、1から作ると少し分かった気になりました。

ソースコード

そのうち公開したいと思います。

参考にした

https://zenn.dev/shun_kashiwa/articles/story-of-svadilfari
めっちゃ勉強になりました。ソースコードやディレクトリ構成、選定技術もかなり参考にさせていただきました。