金儲けのためには、ユーザー様の多いサービスにあやかるのがいいのではと考え、「わんコメ」に目をつけたのです。
まずは、自分自身が理解しないことには始まらないと思い、自分の配信用にテンプレートを作ってみることに。
取り急ぎ、コメントを画面に流しつつ「!グラス」というコメントが来るたびにグラスの絵が1つずつ増えていくという仕組みを作りました。

先日の配信で初使用してみたのですが、バグも多く、リスナー様からのご要望をいただいたこともあり改修してみることにしました。
しかし、直していった過程がなかなか一筋縄ではいかなかったので、備忘録として残しておきます。

そもそもの要望は2つだった

最初に直したかったのは、シンプルな2点でした。

1. グラスがどんどん増えると枠からはみ出すので、10杯たまったら「樽」1つにまとめて表示したい
2. たまに、カウントが1ずつではなく急に何十も増えることがある（さっきまで50だったのに、次のコメントで65になる、みたいな）

1つ目は見た目の話なので難しくありません。
10で割った数だけ樽を出して、余りの数だけグラスを出すという単純な計算で済みます。

問題は2つ目でした。

過去分をまるごと数え直していた

わんコメの仕組みを調べると、コメントを受け取るコールバックには、毎回「これまでの全コメント」が配列でまるごと渡ってくることがわかりました。

最初のコードは、そのコールバックが呼ばれるたびに配列の中身を先頭から全部数え直していました。
つまり、コメントが増えるたびに、過去に「!グラス」だったコメントも含めて、また最初から数え直していたわけです。これでは、コメントが増えれば増えるほど、カウントが跳ね上がるのも当然でした。

これが2つ目の不具合の正体でした。

直したはずが、今度は全く反応しなくなった

「同じコメントを2回数えなければいい」と考えて、コメント1件ずつに一意のIDのようなものを振り「もう処理したコメントは無視する」という仕組みを入れてみました。

ところが、これを入れた途端、今度は「!グラス」と送っても一切反応しなくなってしまいました。

原因は、コメントの中に期待していたようなID情報が入っておらず、代わりに使ったフォールバック(オブジェクトの中身をまるごと文字列化してIDの代わりにする方法)が、複数のコメントで同じ値になってしまっていたことでした。結果、2件目以降の「!グラス」がすべて「処理済みの重複」とみなされて握りつぶされていたのです。

件数ベースの方式に変えて動いた！と思ったら84件で停止

IDに頼るのをやめて、「前回のコールバックで配列は何件だったか」を覚えておき、そこから増えた分だけを新規コメントとして処理するという方式に変えてみました。

これでようやく、1杯ずつ正しくカウントされるようになりました。

ところが、テストを続けていくと今度は84件のあたりでピタッとカウントが止まってしまいました。リセットのコマンドも効かなくなりました。

デバッグログを仕込んで、ようやく核心に辿り着く

ここで、推測だけで直すのをやめて実際に何が起きているかをコンソールに全部出力するようにしました。

ログを見て分かったのは、次のようなことでした。

• わんコメのコメント配列には、どうやら100件という上限があるらしい
• 100件に達すると、それ以降は「配列の件数はそのままで、古いものが1件減って、新しいものが1件増える」という、入れ替え式の動きに切り替わる

これまでの「件数が何件増えたか」を見る方式は、まさにこの「件数は増えないけど中身は入れ替わっている」状態に対応できていませんでした。
件数だけを見ていると、新しいコメントが来ているのに「増えていない」と判断してしまい、そこで検知が止まってしまっていたのです。

最終的な解決：末尾を追いかける方式

最終的にたどり着いたのは、「件数」ではなく「前回、配列の一番最後に見たコメントが、今の配列のどこにあるか」を、末尾から順に探すという方式でした。

• 配列が普通に伸びているときは、前回の最後のコメントのすぐ後ろに、新しいコメントが1件見つかる
• 100件の上限に達して中身が入れ替わっているときも、前回の最後のコメントは(1つ前にずれただけで)まだ配列の中に残っているので、やはりその後ろに新しいコメントが1件見つかる

この方式に変えたことで、件数が増えているときも、上限に達して入れ替わっているときも、どちらでも正しく「新しく届いた分」だけを見つけられるようになりました。

おまけの問題：グラス連投で普通のコメントが消える

ここまで直したところで、もう一つ問題が見つかりました。

「!グラス」が連投されると、わんコメの100件の枠を「!グラス」コメントが埋めてしまい、通常のコメントがどんどん枠から押し出されて消えてしまう、というものです。これは、わんコメ側の仕様なので、こちらのテンプレート側だけではどうにもできません。

そこで、表示用の「直近の通常コメント」を、わんコメ側のデータに頼らず、自作テンプレートの中で独自に覚えておく形に変えました。一度画面に表示されたコメントは、その後わんコメ側の元データから消えてしまっても、テンプレート側の記憶にはそのまま残るので、表示上は消えなくなります。

振り返って

今回一番の反省点は、最初の数回実際のデータを見ないまま「恐らくこうだろう」で直しにいってしまったことでした。IDがあるはず、件数だけ見れば大丈夫なはず、という推測がそれぞれ一部は当たっていて、一部は外れていました。結局、コンソールに実際のログを出して何が起きているかを確認してから直した部分が、一番早く、一番確実に直りました。

見た目だけを直すつもりが、思いのほか奥の深い沼にハマってしまいましたが、おかげで「わんコメの配列は100件で入れ替わる」という、地味だけど今後も役立ちそうな知見が得られたのは収穫でした。