《忘備録》本日のハマりごと『流れる文章にルビを振りたい』（JavaScript）

流れる文章にルビを振りたい

こういう風にしたい（うまくいったテスト動画）

おはようございます。
ええーと。まだそんなことやってんのかいと言われてしまいそうですが、今回はメッセージウィンドウにルビ振り入れるの忘れてたので、ひーこら言いつつ実装しました。

今さらルビ振りかいてな感じですが、他のとこは全部ルビ振ってたんです。
わけあってメッセージウィンドウだけ未実装だったんです。
そのわけというのが表示の仕方。
全部のテキストを一括で表示するんじゃなくて、少しずつ流れるように表示したくて。
それとルビ振りを両方しようとするとなんかややこしそうだから放置してたんです（ﾏﾃ

やりたいことはこれ。

①メッセージにルビを振りたい（|陽葵《ひまり》：なろうと同じ入力）
②メッセージを少しずつ流れるように表示したい

たったこれだけなのですが、たったこれだけのために六時間くらいカタカタやってました。
主に正規表現がうまくいかなかったんですが、まぁそれは置いておきます。
正規表現いまだに苦手です。

JavaScriptで実現したい流れはこんな感じ。
おおざっぱすぎてわけわからんやろうけど、、、

①メッセージのテキスト（ルビ込み）を読み込む
②ルビの読み仮名をテンポラリ（配列。ルビ振りがある数だけ）に保存
③ルビ振りのタグを差し込む位置に仮の記号~を挿入（というか置換）
④cssのanimationでopacity０→１に遷移
⑤テキスト1文字ずつをspanタグで囲ってanimation-delayを1文字ごとに遅らせる時間を加算して指定
⑥⑤で出来上がったテキスト（HTMLタグ込み）にルビ振りに必要なruby、rp、rtタグを挿入して事前に~にしておいたところに読み仮名も挿入（というか置換）

ところがこれだと思ったように表示してくれません。

うまくいかなかった動画。ルビだけ先に表示されている……。

ご覧の通り、読み仮名が先に表示されて漢字が表示されてない……orz

そういやルビ振りはアニメーションで遅らせられんのか？？っていうことで、

⑦rubyの子要素、読み仮名（rt）にもanimation-delayの値を指定（事前⑤の時に秒数は取得しておく）

これを追加したらなんとか動いてくれました。

コードも書こうかと思ったけど、ぐちゃぐちゃして汚いしスタイルシートも書かないとなので今回はパスしました。

まぁこんな感じでただいま制作中です。
イラストも追加で発注しないとなのでまだもう少しかかりそうです。
この辺が仕上がったら最後に声も吹き込んでもらいたいな。

あとタイトル画面とかシステム画面とかデザインちゃんとしないと……(;´Д`)ｸﾞﾌｯ

それではまた～