見出し画像
Photo by hiilagram

noteのルビ機能の実験

滝川海老郎


なろう、カクヨムユーザーとして、またプログラマの端くれとして、ルビ機能について、詳細に迫ってみたいと思います。

※記載されてる内容は執筆時点の情報です。機能アップデートなどで変更になる可能性があります。

参考

ルビ（ふりがな）をふる - noteヘルプ
https://help.note.com/hc/ja/articles/4406430353817

環境

執筆環境には、まずwebブラウザのWindows/Mac用、それからiPhone/Android用があります。PC系とスマホ系が同じhtmlでできているのか、それとも別々のプログラムなのかは未確認ですが、おそらく別々でしょう。
それとは別に、iPhoneアプリ版、Androidアプリ版が存在しているようです。
どのようにJavaScriptやサーバープログラムが対応しているかはわかりませんが、すべての環境で同じようになるとは限らない可能性があります。
「新エディタ」という言葉もちらほら見えるので、どうなるかはよく分かりません。

ルビ記法

他の説明記事の通り「|」(半角)または「｜」(全角)を前に置き、ルビの親文字を書いた後に、「《》」(二重山括弧)の中にルビ文字を置きます。

表示：青天の霹靂へきれきとはこのことだった。
表記：青天の|霹靂≪へきれき≫とはこのことだった。
　※ ≪≫は実際には《》を使用します。

説明によれば、特殊文字(中国簡体字、タイの文字、ハングル、発音記号etc）も使用可能とのことですが、すべての文字が使えるわけでないっぽいニュアンスを含んでいます。

noteの執筆エディタは、見たままがほぼそのまま記事になる「WYSIWYGエディタ」です。しかし、ルビはそうではなく、エディタ上に記法がそのまま表示されます。プレビューはないのですが「下書き保存」にするとルビが反映されて表示されます。
これは一見デメリットのように感じるかもしれませんが「小説をコピペして貼り付ける」などの主要用途では、WYSIWYGよりも記法がそのままコピーできるのは、強いメリットです。

また「カクヨム」では｜なしでも親文字が漢字、「なろう」では｜なしで親文字が漢字かつルビがひらがなカタカナだと、勝手にルビになってしまいます。noteはそういうことはしません。個人的には誤爆などを考慮するなら、noteの仕様のほうがシンプルで分かりやすく好みです。

ヘルプによると、ルビの途中で強調表示にすることができない制限があります。

テスト

同じ文字同じ文字　←ルビ文字と親文字が同じ
日本語にほんご
日本語japanese
絶対領域アブソリュート・フィールド
これはペンです。This is pen.
This is apple.これはリンゴです。
アイあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよらりるれろわゐうゑを
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやいゆえよらりるれろわゐうゑをアイ
一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十いちにさん...
一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十いちにさんしごろくななはちきゅうじゅういちにさんしごろくななはちきゅうじゅういちにさんしごろくななはちきゅうじゅういちにさんしごろくななはちきゅうじゅう
あい　うえお愛　上尾
エスケープ|《escape》
縦棒が複数|ふくすう
縦棒が|複数|ふくすう
縦棒が|複数ふくすう
ルビに縦棒ルビに|｜たてぼう
《》二重山括弧　あ》《二重山括弧　《》い二重山括弧
あ》い《二重山括弧
アリス》@aliceおはよう
カクヨムの《圏点表記》のテスト
二重ルビ|にじゅうるび《double ruby》のテスト
"ダブルクォート""double quote"
`シングルクォート`'single quote'
<HTMLタグ><html tag>
(丸括弧)(あいう)
（全角丸括弧）（まる）

引用文いんようぶんにもルビrubyを書かくことができます。
ちなみに、引用中いんようちゅうの強調文きょうちょうぶんでも適用てきようできます。
#include <stdio.h>
void myfunction(int x){
    const int mymax制限値 = 100;
    |printf《フォーマット出力》("hello world.\n(文字列)ようこそ世界\改行");
    printf(|"1+1 %d\n", 1+1《"計算結果を表示"》);
    if(mymax < x){
        printf("x は %d より大きいです。\n", mymax);
    }
}

テスト結果

Firefoxでは、ルビ親とルビ文字が同じときにはルビが表示されません。これはブラウザ側の制限です。
ルビの文字数に上限はない、もしくはほとんどないようです。
Firefoxでは、表示領域以上の長さのルビを書くと、折り返されず、見切れます。
Chrome系では、表示領域以上のルビは折り返されるものの、上にルビ複数段、下に親文字複数段の表示になります。
ルビ親、ルビ文字に半角空白、全角空白を含めることができます。
ルビ親、ルビ文字に少なくとも「| ｜' "<> () （）」を含めることができます。
ルビ文字に「《」を含めることができます。
ルビ親に文字列「《》」を含めることができます。これはちょっと面白いです。
ルビ親に「》」を含めることができます。

逆説的に、ルビ親には「《」を含めることができません。
ルビ文字には「》」を含めることができません。
この2条件以外はほとんどの文字が使えそうです。

「エスケープ|《escape》」のように書いて、直前に|を置くと、エスケープになるような処理が実装されていません。
そのため、例としてルビ表記をそのままの形で記事中に書くことができません。
なろうではこのエスケープ処理は少しおかしいですが、カクヨムでは機能します。

複数の縦線「ぽむぽむ｜なんだか｜ほにゃらら《》」みたいに書かれていた時に、最長一致になってしまっています。これはちょっと良くないですね。他のサイトでこういう実装はほぼないです。ただしあまりそう言う表記をする機会がないというのは幸運でしょう。

カクヨム圏点の展開のされ方から、ルビ文字には「《」を含めることができるようです。もちろん「》」を含めることはできず、最初に現れた》がルビ文字の終端になるようです。

もちろんルビ中に同じルビを書いてみる二重ルビはうまく展開されません。

「ソースコード」中でもルビは適用されるようです。
ただし文字列の色分けなどシンタックスハイライトと干渉するとルビが適用されません。ちょっとよく分からないですね。
まあ、使いようもあんまりないと思います。
テーブルとか正規表現や条件文で|　|を書いて強調表示の記号として《》を使ってるプログラムとかを例にすると誤爆する可能性はあります。そう言う意味では誤爆の可能性は、小説とかより高いです。
コードブロック中はルビを無効にしてほしい、と要望したいと思います。

カクヨム圏点

表示：俺よりも金・髪・男・のほうがいいのでは
ルビ表記：俺よりも|金≪・≫|髪≪・≫|男≪・≫のほうがいいのでは
圏点表記：俺よりも《《金髪男》》のほうがいいのでは
　※ ≪≫は実際には《》を使用します。

前出の通りルビ表記はサポートされましたが、これで圏点を書くと、かなりダサいです。
複数文字列をひとつの《・・・・》←こういう風にまとめてしまうと、改行されなくなってしまいます。そのため1文字ずつ指定するのがベターなのですが、かなり面倒くさい上に長くなってしまっていまいちです。
小説家になろう系では、それしかないので諦めもあります。
しかしこれには解決策があり、カクヨム記法の圏点は、なかなか良い表記法だと思うので、是非、対応してほしいと思います。


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