見出し画像

HTMLでルビをワンクリックで振る方法

HTMLコードでルビを設定する際、ものすごーーーく手間だということに気づいた。
基本的にプログラマーなので、プログラムでこれを解消出来ないかとシンプルに考える。

最初に考えたのはツールを作ること。
ルビをつけたい文章を貼り付けると、ルビのためのタグを設定する、というもの。
ただおいら、めんどくさがり人間。
これはちょっと違うよな〜と思い、別の方法を模索した。
まぁこの時点である程度結論が出ていたのだが。

結論としては、普段使っているVisual Studio Codeの拡張機能を開発しちゃおうというもの
ちなみに、拡張機能でルビを振るツールがあるかどうかを探してみたところ、特になかったので初めて作る拡張機能にも手頃でいいだろうとやる気を出した。

拡張機能はruby-tags、またはルビなどで検索すると見つかる。
これがおいらがとりあえず初めて作った拡張機能。

ruby-tags拡張機能

使い方は簡単で、日本語文章を選択状態にし、右クリックでRubyタグを挿入をクリックするだけ。
複数行でも対応し、かつ既にルビタグを設定した箇所、含んでない箇所の混合でもタグを振ることが可能。

ruby-tagsの使い方

ルビを入れるってかなり手間なので敬遠してしまいがちだけど、これなら入れてみようかな、という気になるんじゃないかな。

今後の展望として、現状、ルビの部分は「xxx」が設定され、ひらがなを設定しないといけないが、これをひらがな補完まで行えるようにすることかな?

なお、コードはGitに上げてるので参考にしてみたい人はご自由にどうぞ。
https://github.com/ichihara-yamato/ruby-tags/


この記事が気に入ったらサポートをしてみませんか?