Discord音声配信Hydraterをつくる
この記事は『ゆる言語学ラジオ』というYoutube,Spotify番組のファンによるアドベントカレンダー企画に参加しています。
昨日の記事はYujin6さんによる『ゆる言語学ラジオサポーターコミュニティから生まれた数学』でした。
明日はdzさんによる『ロングヘアとかいう固定資産』です。
ゆる言語学ラジオ
『ゆる言語学ラジオ』というYoutubeチャンネルが好きだ。
「ゆるく楽しく言語の話をするラジオ」という紹介文の通り、言語学をメインのテーマとしつつ、堀元さん・水野さんという二人のパーソナリティが楽しく話しているチャンネルである。
読書量が多く、言語化能力・抽象化能力に秀でたお二人が、リサーチした資料や読んだ文献をもとに盛大にふざけるところが見どころの番組で、「事実と主張」「分かっていることとよくわからないこと」「裏が取れていることと曖昧なこと」を明確に線引きして語ってくれる。知的な人やものに対するリスペクトも随所に感じられるし、パーソナリティの人間臭さも大きな魅力だ。二人とも下ネタが大好きだったり、聞いていてとにかく好感が持てる。
もしもこの記事を読んでいて、まだゆる言語学ラジオを聞いていないという人がいればぜひ一度聞いてみてほしい。分野の第一人者のような先生をゲストに呼んでふざけている回もあったり、僕と話が合うタイプの人は絶対に気に入る番組だと思う。
そんなゆる言語学ラジオには、「サポーターコミュニティ」というものがある。Youtubeのメンバーシップみたいなものが想像する上で一番近いかもしれない。月額（1000円）を支払うことで、限定公開の動画を見たり、ファン同士で交流が出来たりする。
ただ、ゆる言語学ラジオのこれはYoutubeの機能を利用しているわけではなく、会員登録した人のみが閲覧できるdiscordサーバーという形式をとっている。
そしてこのdiscordサーバー、めちゃくちゃ活気がある。
「森羅万象すべてについてのスレッドが存在する」というジョークを真に受けてしまいそうになるほど扱われている話題は多岐に渡るし、
24時間365日、どのタイミングを切り取っても恐らく一つも新着レスがつかない時間は30分とない。
日中に半日discordを開けないタイミングがあったら全てのログに目を通すのは諦めたほうがいいくらい、たくさんの人が様々なことについて話す場になっている。
そしてそんな場だからこそ、あまり他のコミュニティにはないのではないか、という文化が存在する。
ボイスチャットでの「ゆる○○ラジオ」という文化だ。
ゆる○○ラジオ文化
これは「コミュニティのメンバーが聞き手や聴衆を募り、自分の詳しいテーマについて語るイベントを開催する」という文化であり、そのテーマに従って「ゆる野球ラジオ」のようなイベント名が付けられる。
イメージするときに参考になりそうなのは、オモコロチャンネルの『ちょい詳しい専門学校』という企画だろうか。
あるいは、ゆる言語学ラジオ自身やその姉妹番組の形式だと言った方が早いかもしれない。
コミュニティの参加者であるメンバー自身がパーソナリティになってみんなに自分の知っている面白いことを伝える、というようなイベントである。
主催者となるメンバーも、語られるテーマも非常にバリエーションに富んでいる。
その道の有資格者や博士の方が自分の専門分野について語るラジオもあれば、趣味で何かについて調べている人がそれについて話すものもある。
かくいう僕自身、後者のタイプのラジオとして過去に
「ゆる変化球ラジオ」（野球の変化球のメカニズムと分類について話したもの）
「ゆる塁学ラジオ」（野球における「ベース」という概念の特徴と歴史について話したもの）
「ゆるRSコンパレータ学ラジオ」（Minecraftのゲーム内の要素であるレッドストーン回路に使う部品のうち、レッドストーンコンパレータについて話したもの）
といったイベントをスピーカーとして開催したことがある。
（3つ目についてはアドベントカレンダー初日のO-Lanさんの記事でも少し触れられている）
このくらいニッチなテーマでも全然許される、そんな空気感のイベントなのだ。
ちなみに、このイベントはdiscord内のボイスチャンネルにスピーカーと聞き手や参加者が入って話を聞きつつ、イベント専用のテキストチャンネルに参加者がコメントや質問などを書き込む形で行われる。
もしも都合が合わずリアルタイムで参加できなかった場合にも安心で、多くのラジオでは参加者の誰かがボイスチャットの録音機能（そういうのを提供してくれるBotがある）を実行してくれている。後日その録音のファイルがダウンロードできるようになるので、聞き逃してしまった場合にも後からそれを聞くことが出来る。
僕自身、イベントが開催される時間帯は外にいたり他に用事があったりすることが結構あって、この録音を後から聞くことが多い。
イベント中スピーカーの人はだいたいテキストチャットの方を見ながら喋っているので、自分が聞くときもそのログを眺めながらの方が理解がスムーズだ。（テキストチャットの内容を拾って答えたりすることがある）
だから僕は録音ファイルをバックグラウンド再生しながらdiscordをゆっくりスクロールしてふだん楽しんでいる。
課題
現状この楽しみ方で別に全然支障はないし、そもそも誰かが録音してくれたおかげで後からでも聞けるようになっているのでありがたい限りなのだが、人間というのは欲深い生き物だ。何か欲求が充足されると、さらに傲慢な欲求が芽生えてしまう。
こうやってログを追いながら聞いていると、どうしても「不便だな～」と感じる部分が出てきてしまうのだ。
それは、
いちいちログをスクロールして追っていくのがめんどくさい
目と耳（と手）両方のリソースを要求される
という二点である。
discordの画面を開きつつ、テキストチャットをスクロールして眺めていくことになるので、基本的に聞いている間はずっとdiscordを開いておく必要がある。
特にスマホで聞いている場合なんかだと、スマホのdiscordアプリは過去に開いていたチャンネルのスクロール位置にあまり頓着しないところがあって、一回別のアプリを起動した後また開きなおしたら最新のメッセージのところに飛んでいたりすることがある。（これはAndroidや僕の端末の機種に固有の問題である可能性もある）
アプリを開き続けている必要があるし、その上にカーソルも意識も置いておかなくてはいけない。だから他のPC作業の合間に聞くということがちょっと難しい。これが一点目の不満だ。
二点目については、そもそも「ログを見ながらラジオ音声を聞く」ということに起因する不満だ。見ながら聞く、なので、目も耳も使う。ついでに言うとスクロールするときに手も使う。
だから他のPCを使わない作業のついでに聞くということがちょっと難しい。
どちらの不満も、「聞きながら何か別のことをするのがやりにくい」というのが不便さを感じる原因になっている。できることなら、作業中や入浴中、料理中に聞きたいのだ。
例えば、音声が流れているときに画面上で勝手にチャットがスクロールしてくれていて、スピーカーがチャットの内容に言及した時にふと目を上げればそのチャットが画面上にあればいいのに。
もっと欲を言えば、ニコ生とかみたいな感じで寄せられたコメントを棒読みちゃんが読み上げてくれればいいのに。
そうなっていれば、画面を全く見なくても何も不満なくラジオを聞き続けることができるのに。
そんな傲慢なあなたに今回このツールをご紹介いたします！
名付けて、ゆるラジオHydrater!
使い方
アクセスするとテキスト読み込み用のモーダルが開いた状態になっているので、そこに
録音の音声
discord上のログを全部コピーしたテキスト
を貼り付ける。
そして下部の「読込」ボタンを押下すると以下のような画面になる。
画面上部のナビゲーションにある左側のボタンを押すと音声の再生/停止が切り替わる。（デフォルトではオフ）
右側のボタンでログのスクロールの再生/停止も切り替え可能。（こっちはデフォルトでオン）
左側のボタンの横にあるのは音声のシークバー。2つの再生/停止ボタンとシークバーを駆使して音声とログの位置を合わせよう。
ちなみに中央右にあるチェックボックスではログの音声読み上げのON/OFFを切り替えられる。チェックすれば一番上まで来たコメントを読み上げてくれるので、目を離した状態でも楽しむことができるぞ！
注意点と言い訳
※1: ログのスクロール具合と音声を完全にシンクロさせることはできません。
ちゃんとスタート位置を合わせて再生開始しても、読み上げるタイミングが早すぎたり遅すぎたりが絶対に発生します。
これは「discordから文字列をコピー＆ペーストしてもらう」という形でログを読み込んでいることによる問題で、こうやってコピペした文字列には、時刻情報が分の単位までしか残らない。
なので「秒」のところは「分」までが同じコメントの数を数えて均等な秒数ごとに割り付ける、という形で処理している。
そのせいで「○○分0秒-20秒くらいまでのタイミングで3つくらい続けてコメントが来てその後40秒来なかった」みたいな偏り方をしている場合、「スピーカーが3つ目のコメントに言及し終わった後に2つ目以降が読み上げられる」みたいなことが高確率で起こる。
本当はdiscordのAPIとかを使えばもっと細かい単位の時間まで取れるのだが、discordはサードパーティクライアントの使用を認めていないらしかったり、どういうものなら作ってよくてどっからがダメなのかよく分からなかった。ちゃんと調べるのもめんどくさかった。
また、Botをサーバに参加させてもらってコマンドなどを通してテキストを拾ってアプリケーションと連携する形であればまず規約違反になることはないだろうが、ちょっと開発の規模が大きくなりすぎる感じがしたのでとりあえず最低限のものを作ることにした。のでこういう問題が残っている。
※2:メッセージをまたいでテキスト形式でコピペするのはPC版Discordでのみ可能です。（スマホアプリ版だと選択が出来ないため）
これは作ってから気づきました。主にスマホで聞きたいのに、スマホからのコピペに対応してません。
どうにもならないので、PCでコピーしたテキストをNotionみたいなメモアプリ経由とかで受け渡すか、スマホブラウザからDiscordにアクセスするとかしかないです。すみません。
※3:ブラウザがバックグラウンドに行くと読み上げが動作しません。
スマホで利用する場合、スリープになっても同様です。
これはなんらかの対応策がありそうな気がしてるんですが、それがちゃんと動くかをいろんなブラウザで検証するのを諦めました。
※4: ちょっと変わった形式のメッセージがあったりコピペの切れ目が違ったりするとうまく動かないことがよくあります。
これは受け付ける入力の自由度に対してテストしたケースの数が全然足りてないことによるものです。簡単に言うと技術と時間が足りなかったからです。
（以下は言い訳にもならない内容）
元々特にテーマも決めず、とりあえずアドベントカレンダー参加してえ！と思って飛び込んだのが11/22。「あ、こういうもの作れば記事になるのでは？」と思い付いたのが確かそれから一週間後くらい。
「そういえばSvelte（フレームワークというやつの名前）触ったことねえな、素振りにちょうどいい題材かも」と思ったのが12/3。
なのでこのアプリケーションはフレームワークの素人が突貫工事で作ったものです。みちょぱに内装工事をさせた店だと思ってください。
一応、ユーザの入力を受け付けるところはFWのお作法に従っているし、外部との通信をしたりデータをサーバに保存するわけでもないので取り返しがつかないような壊れ方をすることはないはず。（フリじゃないです）
総じてPoCレベルというか、まだモックレベルと言ってもいいかもしれない。さすがにもうちょっと使えるものにはしていきます。
もし不具合など見つけたら僕に教えてください！DMでも何でも大丈夫です！
今後の課題
バックグラウンドでの読み上げに対応する
主音声と読み上げ音声の音量を調整できるようにする
もう少し壊れにくくする（テストケースを増やす）
発表スライドとか動画とかも読み込んで一緒に見られるようにする
BOTとかと連携するようなシステムにする？
といったことは今後時間があればやりたいとは思っている。全部やるかどうかはわからない。やらないような気もする。自分が使うために、3つ目くらいまではやるかな？たぶん。
余談
その他の使いみち
ちなみに、音声を読み込まずチャットだけ読み込ませて再生することもできるので、ゆる○○ラジオとかのイベント時に限らず「なんか昨日の夜祭発生してたっぽいけどチャット量多すぎて追えねえ！」といった場合に読み上げツールとして使うことも一応はできる。（なんか今年のどっかでそんなことがあったような気もしますね）
あと、ゆサD（ゆる言語学ラジオサポーターコミュニティDiscord）に限らず、
Discord内で行われた配信で
音声の録音が残っている
ようなものであれば同じように使うことが出来る。たぶんそんなのは滅多にないと思うので、実質的にゆサD専用、もっと言うと僕しか使ってないアプリになりそうな気もしている。そもそもそのつもりで作ったものでもあるし。
Hydraterってなに
hydrateという「水分を与える」的な意味の動詞があって、それをするもの(er)という意味。
このhydrateという動詞、おそらく日常的には「乾物を水で戻す」みたいなときに使うのだと思うのだけど、webエンジニアをやっていると他の意味で聞くことがよくある。
例えば静的なwebページの状態から動かせるwebアプリケーションの状態にする処理だったり、
配列やオブジェクトリテラル（これの意味は説明しません）の状態のデータを色んな操作が実行可能な「モデル」というものにする処理だったり。
まあ概ね、「保存や生成用の素朴なものを、水で戻して動かせるものにする」といったイメージでこの単語が使われているのだと思う。
それに倣って、録音とログを水で戻し、リアルタイムで配信を聞いているような形式で再生するツール、という意味で「Hydrater」と呼ぶことにした。
凄惨な実装
