0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【個人開発】webページにふりがなをふる『ふりがなくん』を作ってみた

0
Posted at

これは何?

chrome拡張機能として、日本語のwebページにふりがな(ルビ)をふる拡張機能『ふりがなくん』を開発・公開いたしました。

どんな感じで動く?

こんな感じです。

movie.gif

右上の「ふりがなOFF / ON」切り替えトグルからwebページ全体の文章にふりがなをつける・つけないの切り替えが可能です。ごくシンプルなインターフェースとしました。

導入の手順


  • 『「ふりがなくん」を追加しますか?』メッセージの「拡張機能を追加」をクリックします。
    スクリーンショット 2026-09-08 18.52.33.png

  • Chrome右上の「三点メニュー」→「拡張機能」→「拡張機能を管理」をクリックします。
    スクリーンショット 2026-09-08 18.53.22.png

  • 「ふりがなくん」の右側のトグルボタンをONに変更、「詳細」ボタンをクリックします。
    スクリーンショット 2026-09-08 18.54.30.png

  • 「サイトの設定」→「ツールバーに固定する」トグルをONにします。
    スクリーンショット 2026-09-09 19.56.25.png

  • chrome右上に鉛筆マークが表示されることを確認します。

スクリーンショット 2026-09-08 18.54.54.png


  • 鉛筆マークをクリックすると、ふりがなのON, OFFを切り替えるボタンが表示されます。ONにすると、みているページにふりがなが振られます。
    スクリーンショット 2026-09-09 20.10.23.png

どんな人に使ってほしい?

以下のような人に使われることを想定しています。

  • 日本語を学習中の方:小学生・中学生や外国からきてまだ日本語に慣れていない方
  • 日本語を読むのが難しい方:識字困難(ディスレクシア・読み書きに障害)をかかえている方

なぜ作ったか?

ある日、テレビ番組『視点・論点』(NHK Eテレ)にて、元マネックス証券・松本大(おおき)さんが出演されていた『もっと社会に振り仮名を』という番組をみたのがきっかけでした。
松本さんは幼い頃から読書が好きでよく本を読んでいましたが、ふりがなに大いに助けられた、大人向けの書籍であっても積極的にふりがなを付与していくべきである、というような主張でした。そのなかで「一般財団法人 ルビ財団」を設立され、webページにふりがなをふるコードを作成する活動をされておられることも紹介されていました。

ん? webページにふりがなをふるコード? 当時私はなんとなく仕事で「形態素解析」という仕組みを触った経験があり、chrome拡張機能を開発したこともあったため、「それだったら自分で作ってみよう!」と開発に取り組み始めました。

技術的なこと(超ざっくり解説)

日本語のふりがなを付与するために、「形態素解析」というライブラリを利用しています。形態素解析とは、日本語の文章をインプットとして与えると、それを解析し、意味のある単語の単位で分解し、品詞の情報をつけてくれるツールです。MeCabというライブラリが有名です。日本語を品詞分解することが主な目的かな、と思いますが、読み仮名の情報も付与してくれています。今回のchrome拡張機能では、この「読み仮名」の情報を拾って使っています。

chrome拡張機能ではJavaScriptで閲覧中のページの情報を取得できます。このなかから 全TextNodeを拾い、文章を「ふりがなAPI」に投げる。返ってきた「漢字混じりテキスト」と対応する「ふりがな」の情報を、JavaScript側で解析し、元のWebページに <ruby> タグを追加して更新する…というような動作をさせています。

この「ふりがなAPI」ですが、最初はRubyのAPIサーバーを作ってそこに向けていたのですが、速度的に遅いものでした。そのためGo言語でのAPIを開発し、Google Cloud の Cloud Run にAPIサーバーを立てて使っていました。これでかなりレスポンスの速度は満足のいくものではあったのですが、Cloud Runではアクセス数が1か月で約100万件以上になった場合は有料になる、とのこと。正直なところ、そんなにバズった経験はないんですが、有料になるのは嫌だな…とぐずぐず考えているうちに、形態素解析のライブラリで新しく開発されたものを発見しました。

この説明ページの中にwasmの動作サンプルがあり、とても快適に動くものだったので、こちらを今回のchrome拡張機能に利用させていただきました。GoのAPI向けプログラムを少し改修し、コンパイル時にwasm向けオプションをつけるだけで想定するwasmファイルが作成できます。

今後の展望

技術的な興味があって作りはじめましたが、このツールを必要とする人・使いたい人に届けられるように、なんとか宣伝活動を頑張っていきたいと思います!

ソースコード

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?