最近使っているRaycastで、はてブを見るための拡張を作った。 https://www.raycast.com/inamuu/hatena-bookmark Store Hatena Bookmark と検索すれば出てくる。 ※もちろん This extension is not official by Hatena としてる。 実際の画面 こんな感じ。はてブのホットエントリーのみだが、その上位はてブ数を表示して、Raycastのビルトインショートカットの Cmd+K で各ブックマークのリンクへジャンプする。 また、ちょっとしたこだわりポイントとして、コメントのURLにも Cmd+K で表示される Open Comments in Browser でブラウザに飛べるので、そこでブクマも可能。 なんで作ったのか 最近、Raycastを使い始めて、とても便利に使ってる。 そこで、なにか拡張を作れないかな〜と思ったのがキッカケ。 あと、APIはTypeScript、Node.jsで基本Javascriptだったので不慣れだったのもあるが、これを機にTypeScriptに入門だ！と思い、チュートリアルと思ってトライした。 最初は、ryo_kawamataさんの拡張を参考にした。 https://zenn.dev/ryo_kawamata/articles/965ef95ad8bb0d ある程度ざーーっくりと中身を見た上で、どんなAPIがあるとか、構造を理解した。 と言っても、TypeScriptが全然分からないので、最初は結構困った。 昨日初めてTypeScriptを触ったけどReact hooksとか出てきてなんも分からなかった。 Raycastの拡張から始めたのが良くなかった。 とりあえず入門書みたいなのやってみるか。 — Inamuu🏕 (@kzm0211) November 26, 2022 そこで、改めて下記公式のサイトの開発を順番に見ていき、参考コードになっているHacker Newsを真似することにした。 https://developers.raycast.com/ 中身はRSSを読んで一覧表示して、ブラウザでも開けるようになっているもので、まさに入門には丁度良さそうだったのでトライすることにした。 こだわりポイント 最初にも書いたが、コメントのURLを表示する所がポイント。 rss-parserというライブラリが使われており、簡単にRSSをパースできるのは良いものの、デフォルトで取得できるタグが決まっていて、拡張タグはそのままでは取得できないことがわかった。 そうしたら、まさにTypeScriptで拡張タグを取得するための記事を書いてる方がいてとても助かった。感謝。 https://note.com/kamimi01/n/n0fa5ca0bf82f 参考に修正してみたコードが下記。 import Parser from 'rss-parser'; type CustomItem = { 'hatena:bookmarkcount': number } const parser: Parser<CustomItem> = new Parser({ customFields: { item: ['hatena:bookmarkcount'], } }); (async () => { const feed = await parser.