最近使っている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.parseURL('http://b.hatena.ne.jp/hotentry/it.rss')
//console.log(feed.title);
feed.items.forEach(item => {
console.log(item)
console.log('bookmarkcount: ' + item['hatena:bookmarkcount']);
})
})();
おかげで、はてブ数とコメントURLをRSSから取得することができたので、あとはPull Requestを出してしばらくしたら、私の駄目な英語の部分と日付を修正してくれて、マージされた。
https://github.com/raycast/extensions/tree/main/extensions/hatena-bookmark
お、マージされたぞ。
これでRaycastで はてブ見放題だ！https://t.co/LuE3paBHFb— Inamuu🏕 (@kzm0211) December 7, 2022
TypeScriptに触れて、拡張を作ってみて
正直まだ全然良くわかってないけど、TypeScriptは型定義できるのはやっぱりいいなと思った。
最初コンパイルするのだるいなと思ったけど、ホットリロードしてやれば問題ないし、Raycastの拡張については、 npm run dev さえすれば自動的に拡張として認識してくれるので開発がめちゃくちゃしやすかった。
なので、Javascriptもよくわからん、npmも雰囲気で触ってます、TypeScriptも初めて〜〜！みたいな駆け出しおっさんエンジニアみたいなノリでも拡張を作れたのは良かったなと思う。（？）
また、もう少し勉強して別の拡張も作ってみたいし、TypeScriptもやっていきたい。
コメントを投稿するにはログインしてください。