https://shunshun94.github.io/shared/sample/discordLogPicker.html で取得したログの扱い方の話。

• Discord Log Picker に機能を追加した
• Discord のチャットログを取得する何か

これで取得したログを編集するときの色々を書いていく。

発言の構造

ダウンロードしてきたファイルは以下のような内容がたくさん並んだものである。

<p class="tab0 _302451274706583553"  id="msgId_560307394102427653">
		<span class="time"><span class="unixTime">1553658092762</span>
		<span class="readbleTime redableTime">12:41:32</span></span>
		<span class="name">ひよこ</span>
		<span class="message">よろしくお願いします。<br/>
落ち着いたらごりっといれます。</span>
		</p>

各行の説明をしていく。

1. 発言の外枠。使い方は後程説明する
2. 発言の時間が含まれている。一般的に表示されないので無視してよい
3. 発言の時間がここにも含まれている。こっちはもう少し読みやすい表示だが、無視してよい
4. 発言者の名前情報である。この場合「ひよこ」が名前となる。ここを変えれば発言者の名前を変えられる
5. 発言内容 (1行目) である。<br/> と記入することで改行できる。これを入れずに改行しても表示上は改行されないので注意。ここを編集することで発言内容を編集できる。誤字とかを直すときはここ
6. 発言内容 (2行目) である
7. 発言の外枠。必要だけど忘れてよい

コメント? 雑談? っぽくする

この tab0。これを tab1 にすると背景が黄色に、文字が小さくなりコメントっぽくなる。なお背景が黄色なのは身内には不評なのでどこかで変わるかもしれない。

<p class="tab0 _302451274706583553"  id="msgId_560307394102427653">
		<span class="time"><span class="unixTime">1553658092762</span>
		<span class="readbleTime redableTime">12:41:32</span></span>
		<span class="name">ひよこ</span>
		<span class="message">よろしくお願いします。<br/>
落ち着いたらごりっといれます。</span>
		</p>

tab0 の直後にあるこの数字の羅列。以下の例だと _302451274706583553。これは各発言の発言者ごとに付与される class となる。CSS を用いてこの class のフォントカラーを設定すればその人の発言すべてのフォントカラーが変わる。ログ取得の際に自動彩色するようにしていた場合は無効なので注意。

<p class="tab0 _302451274706583553"  id="msgId_560307394102427653">
		<span class="time"><span class="unixTime">1553658092762</span>
		<span class="readbleTime redableTime">12:41:32</span></span>
		<span class="name">ひよこ</span>
		<span class="message">よろしくお願いします。<br/>
落ち着いたらごりっといれます。</span>
		</p>

見出し

基本的な HTML の知識となるが、以下のようにすると見出しを出せる。

<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<h4>もっと小見出し</h4>
<h5>さらに小見出し</h5>
<h6>すごく小見出し</h6>