🏃

Vim 駅伝にランキングページを追加しました

2024/02/19に公開

はじめに

Vim 駅伝はVim に関する記事を持ち回りで執筆する企画です。この記事もその1つとなっています。駅伝ページでは 150 を超える Vim に関する記事へのリンクが貼られています。ぜひご覧ください。

この度、Vim 駅伝のサイトに新しいページを追加したのでお知らせします。

新たに追加された「ランキング」ページでは、今までに誰が何本の記事を投稿したか、多い順に閲覧できるようになっています。

2024/02/19時点でのランキングの様子

Vim 駅伝でこれまでに投稿・公開された記事の数に応じて、10位の人までのランキングが表示されるようになっています ^[1]。ランキングは自動で集計され、記事公開のたびに更新されます。

駅伝記事は季節（3ヶ月）スパンでふんわりと分けられており、「2023年度冬季」などのリンクを踏むことで季節ごとのランキングも見られるようになっています。最近駅伝記事を書き始めたばかりの方も、季節ごとであれば高順位が狙いやすそうですね。

2024/02/19時点での2023年度冬季のランキング

このままだと報告と宣伝だけになってしまうので、少しだけ技術の話を。

グラフ描画のため、新たに @astrojs/svelte を導入しました。

@astrojs/svelte を使うことで、Astro 内で Svelte のコンポーネントを導入できます。
公式ページの案内に従ったところ、特に大きく詰まることなく導入できました。さすが Astro。
Astro では、React や Vue など Svelte 以外のフレームワークも導入できるものの、個人的に最も興味があり、かつ vim-jp にも詳しい人がいそうな Svelte を採用してみました。
Svelte の導入によってできることの幅がかなり広がりそうです。今後、記事のタイトル検索なども実装されるかもしれません。

グラフは chart.js で描画しました。

正確には、その Svelte ラッパーである svelte-chartjs を用いました。
レイアウトが細かく制御できてすごい！と思いきや、不慣れなためかどこにどう設定を書けばいいのか分からないことが多く、手こずりました。
- たとえば xtick（今回のケースだと執筆者の名前が並んでいるところ）を左寄せにするにはどうするの？とか。
本当は著者名や棒グラフをクリックするとその著者の記事一覧ページに飛ぶようにしたかったのですが、そういった仕組みを実装するのが面倒そうだったので諦めました。
- 我こそはという方、コントリビュートお待ちしています。

私はフロントエンド、特に CSS 周りは全くの素人なのですが、@staticWagomU さんに色々アドバイスをいただき無事に実装することができました。様々なバックグラウンドを持つ方が集うのもテキストエディタのコミュニティの良いところですね。ありがとうございました！

Vim 駅伝では走者（記事投稿者）を募集しています。皆さんもぜひバンバン投稿して、1位を目指しましょう！

脚注