Discordチャンネルログをちょっと整形してみる
こんにちは、自称平面人、哀しき社会の歯車、生産性がない陰キャ人間です。
今回はDIscordのチャンネルに書き込んだログをファイルとしてダウンロードできる『DiscordChatExporter』さんで落としたHTMLファイルを編集していいかんじにしようって思っていじった時の備忘録をざっくり残しておきます。
本記事はチャンネルログに表示する画像や文字、色の編集をぱぱっと行いたい人向けの記事のため詳細な解説は割愛するものとします。（書いてるわたしもにわかのため）
どのへんいじればいいか見たい人は記事作成のきっかけをスキップして必要な部分を閲覧してください。
記事作成のきっかけ
チャンネルログを落とす用途のひとつとして、TRPGのテキストログをDiscordに残して最終的に見返す用に落とすことが多かったんです。
（少なくとも私は。。。）
TRPGについて
テーブルトークロールプレイングゲームの略称。
ルールブックに記載されたルールやシナリオをもとにプレイヤー（実際の人間）がキャラクター（作ったキャラ）を演じたり行動を宣言するなどして遊ぶ。
歴史が長いので遊び方とかシステムとか多岐に渡る。ボードゲームみたいなものもあれば、物語を作っていくタイプもある。
あくまでTRPG=クトゥルフ神話TRPGではない。（戒め）
クトゥルフ神話TRPGはあくまでデジタルゲームでいうところのハードウェアの一種。
テーブルトークとあるので初期の頃は現地でプレイヤーが集まって会話によってゲームを作っていたが近年はネットの発展もあって必ず同じ場所にいる必要もなくなり、会話もチャットで代用することが可能になったりしている。
で、Discordで遊ぶこともあるんですけどこれだと発言者=ディスコードのアカウント名とかだったりして読み返す時になんかこう、地味に没入感がないんですよね。私はね。少なくともね。
自キャラが自分の名前で発言してるの見るのがつらい。自キャラに殺意を抱くタイプ。
なのでログをダウンロードしたら発言者名をプレイヤーキャラクター名に差し替えたりしたかったんです。。。はい。
その時の作業備忘録が以下となります。
DiscordChatExporterの準備、Discord自アカウントへトークン認証、チャンネルログのダウンロード
ここまでは色んなブログで紹介されているので以下は編集したいログファイルが手元にある前提で解説します。
あとは作業が楽になるのでVS Codeでファイルを開いて編集できると楽かな～って思います。
それではよろしくお願いいたします。
発言者アイコン画像を差替える
発言者アイコン画像はimgタグのsrcにURLが入っているのでここを見に行っています。
任意のものに差し替える場合はURL部分を書き換えればOKです。
個人用ログであればローカルファイルのパスを指定してしまって良いですし、他人に共有したい場合はファイル共有サイトに画像をアップロードして、そのURLを指定しておけばOKです。
例えばですがDropBoxにアップロードした画像を使う場合は
www.dropbox.com部分を dl.dropboxusercontent.comに差し替えると綺麗に見えるようになります。
私がログの画像置き換える時にDropBoxに使いたい画像置いてるので一応の参考までに。
発言者名を書き換える
あんまよくわかってないですがchat_log_authorクラスのtitleと、横にある表示している名称部分両方書き換えておけばOKです。
発言者名の色を変更する
ここに書き込み単位で設定されているので、後はお好みの色に変えておきましょう。
書き込みを段落分けする
HTMLでログを書いているだけなので、書き込みグループを定義してるっぽいdivタグ『
』を足してあげればOKです。
あとはそれっぽく見えるように
修正前の段階だとこんなかんじ 
タグを補って書き込み自体を分けた後
あとはそれっぽく見えるように
<div class=chatlog__message-group><div id=chatlog__message-container-1000677559777890434 class=chatlog__message-container data-message-id=1000677559777890434><div class=chatlog__message><div class=chatlog__message-aside><img class=chatlog__avatar src="https://cdn.discordapp.com/avatars/247758172947873793/a60232d660b5baaacfc0239b89b413fb.png?size=512" alt=Avatar loading=lazy></div><div class=chatlog__message-primary><div class=chatlog__header><span class=chatlog__author style=color:rgb(231,76,60) title=ほーずき/Hozuki#9655 data-user-id=247758172947873793>ほーずき/Hozuki</span> <span class=chatlog__timestamp><a href=#chatlog__message-container-1000677559777890434>24-Jul-22 05:15 PM</a></span></div><div class="chatlog__content chatlog__markdown"><span class=chatlog__markdown-preserve>草生やすなし</span></div></div></div></div> <div id=chatlog__message-container-1000677602584957009 class=chatlog__message-container data-message-id=1000677602584957009><div class=chatlog__message><div class=chatlog__message-aside><div class=chatlog__short-timestamp title="24-Jul-22 05:15 PM">17:15</div></div><div class=chatlog__message-primary><div class="chatlog__content chatlog__markdown"><span class=chatlog__markdown-preserve>こっちは連続投稿のテスト</span></div></div></div></div></div>
<div class=chatlog__message-group><div id=chatlog__message-container-1000677559777890434 class=chatlog__message-container data-message-id=1000677559777890434><div class=chatlog__message><div class=chatlog__message-aside><img class=chatlog__avatar src="https://cdn.discordapp.com/avatars/247758172947873793/a60232d660b5baaacfc0239b89b413fb.png?size=512" alt=Avatar loading=lazy></div><div class=chatlog__message-primary><div class=chatlog__header><span class=chatlog__author style=color:rgb(231,76,60) title=ほーずき/Hozuki#9655 data-user-id=247758172947873793>ほーずき/Hozuki</span> <span class=chatlog__timestamp><a href=#chatlog__message-container-1000677559777890434>24-Jul-22 05:15 PM</a></span></div><div class="chatlog__content chatlog__markdown"><span class=chatlog__markdown-preserve>草生やすなし</span></div></div></div></div> <div class=chatlog__message-group></div><div id=chatlog__message-container-1000677602584957009 class=chatlog__message-container data-message-id=1000677602584957009><div class=chatlog__message><div class=chatlog__message-aside><img class=chatlog__avatar src="https://cdn.discordapp.com/avatars/247758172947873793/a60232d660b5baaacfc0239b89b413fb.png?size=512" alt=Avatar loading=lazy></div><div class=chatlog__message-primary><div class=chatlog__header><span class=chatlog__author style=color:rgb(231,76,60) title=ほーずき/Hozuki#9655 data-user-id=247758172947873793>ほーずき/Hozuki</span> <span class=chatlog__timestamp><a href=#chatlog__message-container-1000677559777890434>24-Jul-22 05:15 PM</a></span></div><div class="chatlog__content chatlog__markdown"><span class=chatlog__markdown-preserve>こっちは連続投稿のテスト</span></div></div></div></div></div></div>
私が作業するときは下記手順で対応しています。
①div class=chatlog__message-groupを追加
②書き込みの定義をしているタグの一番後ろに閉じる方のタグが並んでいるので/divを1個追加
③ほかの書き込みにあるimgタグから実際の書き込み内容（上記例では草生やすなし って書いてあるところ）直前までをコピー
④div class=chatlog__message-asideタグの後ろから、実際の書き込みの手前（上記例ではこっちは連続投稿のテスト って書いてあるところ）までを上書き貼り付け
その他追記した方が良さそうなものがあれば記事を更新しておきます。
記載に誤りがあるもの等あればTwitterで連絡お願い致します。
