esa の記事を簡単に検索できる Raycast 拡張を作ってみた
Alfred の代替となるランチャーアプリ Raycast の拡張機能を作ってみたので紹介です。
作ったもの
以下 Tweet の動画のように esa の記事を Raycast 上で手軽に検索できる拡張機能です。
検索結果から記事の内容やメタ情報も確認できます。
使い方
インストール
Raycast の Store にて esa で検索して追加してください。
設定
初回実行時にはチーム名とアクセストークンの入力画面が表示されます。
アクセストークンはhttps://[チーム名].esa.io/user/applicationsから発行した値を入力してください。
検索
Raycast でSearch Postと検索すると使えます。
Create Post で記事の新規追加もできます。
ワークスペースの切り替え
検索バーの右側にある dropdown メニューから検索対象のワークスペースの切り替えもできます。
利用する場合は、拡張機能の設定から、secondary team name と secondary token を設定してください。
実装時のポイント
日本語変換確定時 の Enter キーのイベントハンドリング
かなり詰まったのが、日本語変換確定時の Enter キーのイベントハンドリングです。
Raycast の提供する<ActionPanel>コンポーネントを利用すると、Enter キーにデフォルトのイベントが割り当てられます。
The first and second action become the primary and secondary action. They automatically get the default keyboard shortcuts assigned. In List, Grid, and Detail, this is ↵ for the primary and ⌘ ↵ for the secondary action. In Form it's ⌘ ↵ for the primary and ⌘ ⇧ ↵ for the secondary. Keep in mind that while you can specify an alternative shortcut for the primary and secondary actions, it won't be displayed in the Action Panel.
このイベントが、日本語変換確定の Enter キーでも発火してしまい、Primary の<Action>で指定した処理が実行されてしまうという問題がありました。
このままだと、日本語を含む記事検索が実質かなり不便になります（変換確定時に選択状態のリストのページが常に開いてしまう。。。）。
ロジックでのハンドリングが難しそうだったので、<ActionPanel>を持たない<List.Item>を必ず一行目に表示することで、日本語変換確定時の Enter キーの発火を抑制することにしました。
Action ブロック用の<List.Item>はどのようなワードで表示した場合でも必ず検索結果の一番上に表示したいので、検索結果のフィルタリングには<List>の Custom filtering を利用しています。
実装はこちらです。
SWR での記事取得
esa API との通信部分は、SWR と esa-api を使いました。
今回 SWR をはじめて使ったのですが、stale-while-revalidate での cache や、error ハンドリング、loading 処理等々を使いやすい API を提供してくれてとてもいいですね。
Figma テンプレートを利用したアイコン・スクショ作成
Raycast では拡張機能のアイコンと、スクリーンショット用の Figma テンプレートが公開されています。
今回はそちらを使って画像を作成してみました。
いつもアイコン作成は迷うポイントなのでかなり助かりました。
Store 公開
Raycast の Store へ公開するためには、extension リポジトリに PR を送る必要があります。
レビュー、マージまで 1 週間ちょいかかったので、気軽に待つのが良いと思います。
（実際すごいペースで New Extensions の PR が作られていてレビューも大変そう。。）
また、わりと命名規則などが厳しいので PR のまえに以下のページをみて、規則に合わせておくとスムーズにマージされると思います！
おわりに
ぜひ使ってみてください〜。
機能追加の要望やバグの修正あれば、気軽に PullRequest お願いします。
Raycast 拡張機能作りのポイントもわかったので今後も色々作っていきたいです。
Discussion