ちなエリヤさんは現状こんな感じで試験中というか制作途中

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

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

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

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

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

やりたいことはこれ。

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

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

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

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

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

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

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

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

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

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

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

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

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

それではまた～

[愚痴] 進捗ダメです……orz

調教システムが作りたかった

絵 西木三去さま

　というわけでございました。

どんなイラストが必要になるかなぁと検討するために先にシステム的なところを進めていたわけですが、むずかしいですねぇ

　何が難しいってルール作りが一番難しい
　あとバランス的な部分とか

　ルールの大部分は今は亡きSTUDIO B-ROOMさまをパクった感じにしてやろうと思ってるわけですが、どうしていいのかわかりません（何

　ひとまず
　カードを並び替えて⇒３つまで選択⇒選択した後にカードを消去。

　ここまでで止まりました（初歩も初歩

　つぎはカードそれぞれにどんな効果があるのかとか、コンボとかを設定しないといけないかなと。
　あとここの能力値のパラメータを戦闘力に置き換えたりとかもしたいなと。

　ただ、正直ここからはトライアンドエラーの連続になると思うので今まで以上にカメの歩みになりそうな気がする……。

　あとはカードとかボタンのデザインもなんとかしないとですね。
　カードはイラストお願いしたいと思うとりますが、さて……

　なんとか頑張り切りたいところです。

忘備録というか愚痴

文字送りでハマった。あと変なエラー出てるんだけど……

というわけで愚痴です（黙れ

えー。サムネイルに意味はありません。

意味はありませんが、エリヤさんのトレーニング風景です。
相変わらず三去先生の絵は素晴らしいと思う！輝いてるもん。

それらもお披露目したく、早いとこゲームに仕上げて公開したいんだけど、まぁそんなうまくいくわけはないですやねぃ。

今日も見事にはまりました。

ずばり『文字送り』で……。
エロゲ履修済みの諸氏には見慣れてるだろう、あのテキストが流れるように表示されるあれ。
あれ意外とわたしには難しかったのです。
いやまぁ「簡単じゃん」って仰る貴方はシンプルにわたしより頭いいんだと思うし素直にすごいと思う。皮肉じゃないぞ。

単純に流れるように表示するだけならそうでもないんだけど、再生中にクリックとかタップされたら一気に全表示とか。
もちろん全表示させてるときには処理は停止しないとねーとかもうめちゃ大変でしてね。。。

最初はPromiseとsetTimeoutの組み合わせで「再帰」ってなんやねんとか思いながら特に理解も深めずに「おお動いた。やんややんや。はいつぎつぎー」ってやってたんだけど、それがよくなかったね。
先のこと考えてなかったね。まったくね。

音声の再生と停止の処理を追加追加ーってやる段になってようやくあたくしらくうぇるは現実に目を向けました。
ほら、音声再生中にクリックしたら再生中の声は停止して次のセリフをしゃべらさないといけないやん？？

「……PromiseっていうかsetTimeoutどうやって止んのこれ？？」

いやさ、clearIntervalとかは知ってるよ。
でもこれとまんねーの。
コンソール見てたら、次のメッセージ表示されて一見止まってるように見えても「おー動いとる動いとる。このテキストって今いったいどこにあるんだろな？」とか鼻ほじったりしつつ見てたんだけど、冷静に考えるとこれよくないよね。
ぜったい後で支障出てくるやつやんねこれ。

ってことで、なんとかできんかなぁってあちこちグーグル先生の力を借りつつやってみたんだけど、これがぜーんぜん笑
笑っちゃうくらいどうにもならなかったんさｗｗ
久しぶりに無力感に打ちのめされてついついお酒飲んじゃったくらいよ。うほほ。

それでまぁ、いっそこれ繰り返し処理とか使わずにタイマーだけでなんとかなんねーかなとかやってみたけど、なんとかならなくて。
「どーすっぺーえどーすっぺーえやんやほーれ」って踊ってたら、意外なとこに答えが転がってたわさ。

「CSSのアニメーションでやれるよ」って親切なサイトがあって、そこのを参考にさせてもらいました。

[動くWebデザインアイデア集]さま(https://coco-factory.jp/ugokuweb/move02/8-11/)
ここの「1文字ずつ文字が出現」って記事を参考にさせていただきました

まぁさすがにこれそのままは使ってないけど（これこのままじゃ止まらんしｗ
でも基本的な骨組みはほぼそのまんまです。
これほとんどJavascriptは使ってなくて、cssのアニメーション属性持ってるクラスを作って、一文字ずつそのクラスを持たせましょうっていうことなのでわたしでもわかりやすい。

あとはanimation-delayで段階的に（1文字ごとに）遅らせていけば何もしなくても1文字ずつ表示されるわよっていう。
天才かと思いました。
だってこれもうこの時点で処理終わってるから、JSの処理がとまんねーとか考えなくていいときたもんだ。
アニメーション止める方法なんて「animation:none」をJSで書いてやればいいだけなので超かんたんです。超こわくない。

「CSSってすごいなぁ弱者の味方だなぁ」って思いました。

BGMがとまらねぇ

ついでにもう一つ、ハマりはしなかったけど時間食ったのがBGMの扱い。

まぁこれは再生だけできてりゃなんとかなるだろって放置してたので予想外に分岐考えるのが面倒くさかった。
そんなに難しい話じゃないんだけど、まぁわたしの場合、一つのテキストに対して立ち絵の挙動とかSEとかBGMとかを設定してて、クリックしたら次のテキストに応じたそれらの設定を全部読み込む感じにしてるわけです（わかりにくい説明

で、面白いことに同じシーンだからBGM同じでいいんだけど、一回クリックするごとに同じ曲がまた最初っから再生される＆前の分のバッファが生きてて鳴り続けているというなかなかカオスな重奏になってたのです。

要するにスルーする処理が抜けてたんですね。
あと止める処理も。

スルーするしないは条件分岐でなんとでもなるんだけど（とはいえ条件が複数あったのでこれはこれで混乱もしたんだけど）、停止のほうがそもそも「再生中のバッファはどうやって特定するかいのぅ？？」ってとこからはじまったので時間を繰ってしまいましたと。
結論からいうとaudioプリロードしてるんだからそれを見ていけばいいじゃないっていう。
うーん、。じつに簡単ですね。

あ、ちなみにWEB AUDIO APIはやめました。
わたしには難しすぎた。
再生だけならAUDIO要素で十分でした。

で、最後にエラーについて
ずばりこちら

”Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). https://goo.gl/LdLk22”

いや知らんし。
たぶんSE鳴らしてるところで引っかかってるエラーなんだと思うんだけど、STOPの処理に心当たりがあまりなく。
一回一周カチカチ進める分には最後まで出ないんだけど、最後まで行ってタイトルに戻って、もっかい始めると2クリック目くらいから出るのよね。

グーグル先生に聞いたら「settimeoutでplayするまでに時間間隔とりな」って書いてあったのだけど、テキストをカチカチやるのにそんな3秒も4秒も毎回かかるかね？？って思うとちょっと現実的ではないのかなと。

まぁ優先度は低いのですけど、これもちょっと気にしながらもうちょい頑張りたいと思います。

なんちゅーか。
早いとこシミュレーション的なとこに手を付けたい。
そして調教シーンのイラストをさんきょ先生にお願いしたい。

以上でございます。
お疲れさまでした。

クリエイターの諸兄、あまり根を詰めすぎないように頑張ってくだせぇ。
それでわﾉｼ

サイト制作中　進捗とか愚痴とかパート２

サイズ変動で苦戦中……もう諦めようかなと（何

いえこれは明らかに設計ミスなんですがね（ぉ
今回、制作にあたってスマホに対応したい、というかスマホとかiPhoneから見た時に一番映りがいいようにしたい！と思って縦向きのレイアウトを考えてたんですけど、横向きのイラストもやっぱりあってですね（ぉ

せっかく描いていただいたイラストだしこれも出したいと思いつつ、でもこれ試しに表示させてみたら目も当てられないことになってしまってて、

ここ数日はそれらの修正を余儀なくされていました（何

ただ、それにしても完全ではなくて。
たとえばPCとかiPadくらいから見てもらったらまぁなんとか最大画面表示でそこそこ映えるかなぁって感じなんですけど、

問題はスマホの横向きにしたとき（あと画面を倒したとき
この時の表示がどうしても狂う。狂ってくる。

ただ、いつまでもそれにかかずらってる場合でもないし、ついに書き出し祭りも始まっちゃったし（まぁこれは原稿自体は用意できてるんでいいんだけど

せっかくある程度までウェブ制作のほうも進んだんだから、作り切れてないシミュレーション要素以外の部分は公開できるようにしたいかなぁと頭の隅でいつも考えてて

なのに、そういう時に限ってけっこういろいろと細々した用事とか出てくるんですよねぇ……

今年は公募にも出してみたいなぁとか思ってるんですけど、それもまだ半分ほどしか出来上がっておらず。

本当に書かないといけないことがたまってます。

とりあえずがんばらねばだ……

あ。それとお願いしてたギャルビッチのラフが届きましたー(*´∀`)
今はトップ絵だけを飾ってますけど、この子の何かも作りたいなと思ってるので。

あと軍人さんも輪○とか枕（？）のラフが上がってきてまする（凌○スキー

イラスト見ると元気になるんですねぇ。
わたしなどのご依頼を受けて下さるイラストレーター様には感謝しかなく。
ほんとがんばろと思う。

それでは。次くらいは何かアップできるといいなと思います。