🔭

Zenn の記事選択を快適にする telescope.nvim の拡張を書いた

2023/11/11に公開

Lua

概要

Zenn の記事をタイトルおよび topic ベースで検索できるような telescope.nvim の拡張を書きました。

機能としては、

Zenn の記事タイトルを確認および対話的に検索しながら編集したい記事を選択する
記事を作成または削除する (2023/12/15 追加)

というものです。
以下の画像から、だいたいどんなことができるのかイメージしていただけるかと思います。

この記事では、プラグインを作成したモチベーションと使い方について解説しています。
Neovim で快適に Zenn の記事を執筆したい方はぜひ使ってみてください。

同時に書いたこちらの記事では、telescope.nvim 拡張機能の作成方法に焦点を当てて書いているので拡張機能を自分で書いてみたい方はこちらも読んでみてください。

背景

最近 Zenn で記事を書き始めるようになったのですが、Github 連携が使いやすく執筆体験が良いので気に入っています。しかし、Zenn を使う上でひとつ扱いにくいと感じていたのが記事の名前の管理でした。
Zenn では各記事にサービス全体で一意なファイル名 (slug) で管理されます。
zenn-cli を用いると、npx zenn new:article コマンドで新しい記事のテンプレートを生成することができますが、このときファイル名 (= slug) はランダムな文字列になります。
ファイル名がランダムな名前だと一見してもどれがなんの記事だか一切わからないとい状態になってきて特に記事数が増えてくれば収集がつかなくなります。ls してみても何だこれは...という状態です。

[~/zenn/articles]$ ls
0353c388e941d2.md 06ff8e6f6fea8b.md 1cddd3c08582a1.md 4ce4d80d8ec719.md 679ca498a3c9f1.md 69ba90ff55a598.md

Slug に自分にとってわかりやすい識別子を指定して記事を作成することもできますが、この運用方法の場合でも以下のような負担があります。

Slug に文字数制約があり、一定以上短い/長い slug を指定できない。
一意な slug を考えなければならないため記事作成時の負担がやや増える。
- Slug の衝突を事前に検知できないので、公開段階になって考え直しになることもありうる。
公開後に slug を変更すると別記事扱いになってしまうので、公開後にタイトルを変えたくなった場合などに slug を連動して修正できない。

そこで、ランダムな slug を用いつつ手軽にタイトルを確認および検索しながら記事を選択できたら良いなと思い、その機能を telescope.nvim の拡張機能として実装できそうだと考えました。

telescope.nvim とは

本拡張機能が利用している telescope.nvim プラグインについてごく簡単に紹介します。

telescope.nvim の中心となっている機能は、fuzzy finder による対話的な検索と選択対象に対する操作です。telescope.nvim で扱える対象は様々ですが、例えばファイル名検索や grep による検索, git のコミット検索などを扱うコマンドがビルトインで提供されています。

拡張性にも優れており、検索対象のソースを記述することで容易に拡張機能を作成することができます。フィルタ, ソート処理や UI 設計などは telescope.nvim がもともと提供してくれている機能をそのまま使えるので、拡張をそれほど作り込まなくても使いやすいインターフェースを提供することができます。

つくったもの

今回作ったのは、Zenn の記事情報を検索対象として見やすく表示し、選択した記事を neovim 内で編集対象として開くための機能です。

使い方

プラグインマネージャの標準的な方法でインストールすれば、あとは基本的には特別な設定は不要です。
使用時の注意点としては、Zenn のレポジトリのルートで nvim を起動することが必要です。

インストールが済んだら、

:Telescope zenn article_picker

をコマンドラインで入力すれば Zenn の記事用の picker が起動します。
Picker 起動用のキーマップを設定する場合は以下のような設定を init.lua 等に記述してください。

vim.keymap.set('n', '<leader>fz', telescope.extensions.zenn.article_picker)

Picker 使用中のキーマップ等は telescope.nvim 用に設定しているデフォルトの設定がそのまま適用されます。
プロンプト内に slug, タイトル, topics を入力して記事を検索することができます。
また、ノーマルモードでは以下のキーマッピングで記事を作成・削除できます。

name	description	default mapping (normal mode)
`create`	新規記事を作成	`c`
`delete`	記事を削除	`d`

カスタマイズ

slug の表示幅を変更するオプションを提供しています。
ランダムな文字列を設定している場合は短くて良いと思いますが、記事タイトル風の slug などをつけている場合はやや長くしたほうが見やすいかもしれません。

require("telescope").setup({
  extensions = {
    zenn = {
      slug_display_length = <slug の表示幅>, -- default value: 7
    },
  },
})

まとめ

Neovim で快適に Zenn の記事の検索, 編集を行うための telescope.nvim の拡張を作成しました。このプラグインにより Zenn の記事の slug を管理しづらい問題を軽減できることを期待しています。よい Zenn ライフを!

今後の課題

記事作成部分のインターフェースや preview の部分を含めた zenn-cli の機能についても連携を強化できたら便利かなと思っています。
たとえば、Neovim 内のコマンドから新規記事を作成して開くことができるなどできると良さそうです。

作ったあとで気づいたのですが、ほぼ同じ思想で telescope.nvim の拡張を作成している方が過去にいらっしゃいました。

実装も概ね似ていますが、検索時の画面表示や検索対象文字列がやや異なります。
Zenn のプロジェクト内にいるときだけキーマップを有効にするといった機構があるようですが、これらについては今回考慮できていなかったので確認して真似してみたいなと思っています。

GitHubで編集を提案