｜漢字《かんじ》と書くだけ。無料ツール「ルビ（ふりがな）HTML生成」を公開しました。

難読な地名、業界の専門用語、人名の読み。Webページを書いていて「この漢字、読んでもらえるだろうか」と迷う場面は意外に多いものです。デザイン事務所AMIXは、漢字にふりがな（ルビ）を付けるHTMLを生成する無料Webツール「ルビ（ふりがな）HTML生成」を公開しました。青空文庫でおなじみの記法で本文を書くと、ruby タグに組み立てたHTMLがその場で出来上がります。アプリのインストールやアカウント登録は不要で、ブラウザを開けばすぐに使い始められます。

どんなツールか

「ルビ（ふりがな）HTML生成」は、ふりがな付きの文章を書くための記法で入力すると、そのままWebページに貼れるHTMLを返してくれるツールです。「入力（青空文庫式）」の欄に「私は｜吾輩《わがはい》である。名前《なまえ》はまだ無い。」のように書けば、下の「HTML」欄に ruby タグへ変換されたコードが表示されます。あわせて「プレビュー」欄には、実際にふりがなが振られた状態の見た目が出るので、読みの割り当てが正しいかを目で確かめられます。

ルビのHTMLは、手で書くとかなり煩わしい構造をしています。ひとつの語にふりがなを付けるだけで、たとえば互換用の rp を付ける場合、ruby と rt に加え、括弧用の rp を二組書きます。開始・終了を合わせると一語あたり八つのタグになり、一段落に十箇所あれば八十個です。開き忘れ・閉じ忘れが起きやすく、書き上がったあとの本文も読みづらくなります。このツールは、その入れ子を記法から機械的に組み立てる役割を引き受けます。書く側は「どの語に、どんな読みを当てるか」だけを考えていられます。

入力から変換までの処理はすべてお使いのブラウザ内で行われ、当方のサーバーへ送信・保存されることはありません。テキストが端末内にとどまる仕組みのため、公開前の原稿や社内資料の下書きをそのまま貼り付けて試す使い方にも向いています。パソコンでもスマートフォンでも、ページを開けばそのまま動きます。

青空文庫式の記法で書ける

入力の書き方は二種類です。ひとつは「漢字《かんじ》」の形で、二重山括弧の直前にある文字のまとまりが自動でルビの対象になります。もうひとつは「｜任意《よみ》」の形で、縦棒から二重山括弧までの範囲を明示的にルビ対象として指定します。縦棒は全角の「｜」だけでなく、半角の縦棒でも受け付けます。

自動判定の中身を知っておくと、狙いどおりに振れる確率が上がります。このツールは二重山括弧の直前の一文字を見て、それと同じ種類の文字が続く範囲までをさかのぼって対象にします。文字の種類は、漢字（「々」「〆」「ヶ」「〇」も漢字として扱われます）、ひらがな、カタカナ、半角英数字、全角英数字の系統に分かれています。つまり「名前《なまえ》」なら「名前」の二文字がきれいに拾われますが、「受け付け《うけつけ》」のように送り仮名が末尾に来る語では、直前が「け」であるためひらがなの範囲だけが対象になってしまいます。こういう語は「｜受け付け《うけつけ》」と範囲を明示するのが確実です。

対象の文字列と読みのどちらかが空のとき、また二重山括弧の閉じが見つからないときは、ルビ化されずに本文や括弧が残ります。ただし、範囲指定に使う縦棒は出力時に取り除かれるため、入力が完全にそのまま残るわけではありません。記法を書きかけの状態でもプレビューが壊れないので、長い原稿を上から流し込みながら少しずつ整えていけます。

ruby / rt / rp の役割

生成されるHTMLは三つの要素で構成されます。ruby はふりがなを付ける範囲全体を囲む器で、その中に対象となる漢字と読みが入ります。rt は読み、つまりふりがなの本体です。そして rp は、ルビ表示に対応していない環境向けに読みを丸括弧でくるむための要素です。

rp を付けた場合の出力は、ruby の中に対象の漢字、開き括弧の rp、読みの rt、閉じ括弧の rp が並ぶ形になります。付けない場合は対象の漢字と rt だけの、すっきりした二要素構成です。どちらを出すかは画面の切り替えひとつで変わり、プレビューとHTML欄が即座に追従します。

主な機能・特徴

貼り付けまでを一画面で終えられるよう、必要な要素だけを並べています。

• 青空文庫式の二種類の記法に対応。「漢字《よみ》」で手早く、「｜任意《よみ》」で範囲を厳密に、と書き分けられます。
• 入力するたびに変換が走るライブ更新。プレビューとHTML欄が同時に書き換わるので、記法の書き間違いにすぐ気づけます。
• プレビューは実際の ruby 表示で確認できます。読みは本文より小さく淡い色で表示され、行間も広く取っているため、ルビが本文に食い込まないかを見た目で判断できます。
• 「rp フォールバックを付ける」の切り替えを用意。初期状態はオンで、ルビ非対応の環境では「漢字（よみ）」のように読める形になります。
• HTMLに含まれる記号は自動でエスケープされます。本文に不等号やアンパサンドが混ざっていても、そのまま貼ってタグが壊れることを避けられます。
• 「HTMLをコピー」でクリップボードへ一括コピー。押すとボタンの表示が「コピーしました」に変わるので、コピー操作の結果を確認できます。ブラウザによっては書き込みに失敗することもあるため、実際に貼り付けられることも確認してください。
• 「クリア」で入力を空にして、そのまま次の原稿に取りかかれます。

使い方

手順は三つです。まず入力欄に、ふりがなを付けたい箇所を記法で書いた本文を入れます。既存の原稿を貼り付けてから、読ませたい語に二重山括弧を足していく進め方でも構いません。次に「プレビュー」で、意図した語に意図した読みが載っているかを確認します。範囲がずれていたら、その語の頭に縦棒を足して対象を明示します。最後に「HTMLをコピー」を押し、貼り付け先のエディタに Ctrl+V（Macでは Cmd+V）で貼れば完了です。

「rp フォールバックを付ける」のスイッチは、コピーする前に決めておきます。切り替えるとHTML欄の中身がその場で変わるので、両方の出力を見比べてから選べます。入力の改行はHTMLにも改行としてそのまま残ります。Webページで行を分けたいときは、貼り付け先で改行を反映させる設定にするか、br を自分で足してください。

rpフォールバックはいつ必要か

現在の主要なブラウザはルビ表示に対応しているため、rp は必須ではありません。それでも付ける値打ちがあるのは、HTMLが「ブラウザ以外の場所」へ流れていく可能性がある場面です。

たとえば、記事本文をメールマガジンやRSSリーダーへ配信する場合、ルビを解釈しない表示系に当たることがあります。そのときに rp があれば「漢字（かんじ）」という読み方のできる文になり、なければ漢字と読みが「漢字かんじ」と地続きに並んでしまいます。文章として最低限成立させたいなら付ける、HTMLの量を絞りたい・自サイト内でしか使わないなら外す、という判断で十分です。迷ったときは初期状態のオンのままで問題ありません。

CMSに貼るときの注意

HTML出力をWordPressなどのCMSに貼る場合は、カスタムHTMLブロックやHTML編集機能など、HTMLとして扱える場所を使ってください。編集権限やCMS側の処理によってタグが取り除かれる場合もあるため、保存後の表示も確認してください。ビジュアルエディタに貼ると、タグが文字としてそのまま画面に出てしまうことがあります。エディタによっては、保存時に見慣れないタグを取り除く整形が働く場合もあるため、公開前に実際のページで表示を確かめておくと確実です。

ルビの大きさや色は、CSS側の調整範囲です。rt に対して文字サイズを本文の半分程度に指定する、色を少し淡くする、といった一行の指定で読みやすさが変わります。本ツールが担当するのはHTMLの構造生成までで、見た目の最終調整はサイトのスタイルシートに委ねる設計です。行間が詰まったデザインのサイトでは、ルビが上の行に重なって見えることがあるので、ルビを使う段落だけ行間を広げておくのがおすすめです。

活用シーン

• 難読な地名・人名・社名を含む記事を、読みごと掲載したいとき
• 子ども向け・学習向けのページで、学年に応じたふりがなを付けたいとき
• 神社名や古典の引用など、読みが割れる語を扱う文章を書くとき
• 業界の専門用語が初出で登場する箇所に、読みを添えておきたいとき
• 商品名やブランド名の正しい読みを、ページ上で明示したいとき
• 短歌・俳句・詩の作品ページで、原文の表記を保ったまま読みを示したいとき
• 手書きの ruby タグの入れ子に、もう時間を取られたくないとき

原稿の段階から記法で書いておけば、後からまとめてHTMLへ変換できます。ふりがなを付けるかどうかの判断だけを執筆時に済ませ、タグ化は公開直前にひとまとめで行う、という進め方が取りやすくなります。

ご利用にあたって

本ツールおよび本ページは現状有姿（as-is）で提供されるため、ご利用は利用者ご自身の責任においておこなってください。生成されるのはHTMLの構造のみで、ふりがなの内容そのものは入力した読みをそのまま用います。読みの正しさは公開前にご自身で確認してください。ルビの表示は、お使いのOS・ブラウザ・フォントや貼り付け先サイトのCSSによって、大きさや位置が異なる場合があります。ブラウザの種類・バージョンや端末環境によっては、表示・動作・コピー結果が異なる場合があります。本ツールの利用、または利用できなかったことにより生じたいかなる損害についても、AMIXは責任を負いかねます。本ツールの仕様・内容は、予告なく変更または提供を終了する場合があります。

記法で書いて、プレビューで確かめて、コピーする。ふりがな付きの文章づくりが一気に軽くなります。ぜひ気軽にお試しください。