# 推しの配信タイムスタンプをローカルで検索できるようにした話
Chrome拡張「CommentTimeline for YouTube」v.1.2.0に実装されたタイムスタンプ一覧の書き出し機能を使い、タイムスタンプのHTMLファイルを集めて、全文検索できるデータベースにするスクリプトを作ったので公開する。
## できること
- 配信年ごとにタブ分けされた一覧ページの生成
- 全ファイル横断の瞬間テキスト検索（曲名・ゲーム名など）
- タイムスタンプのリンクから該当動画の該当時間に直接ジャンプ
- バックエンド不要。HTMLとJSだけで動く。
## 必要なもの
- Chrome拡張「CommentTimeline for YouTube」
- Python 3.x
## タイムスタンプのダウンロード手順
Chrome拡張「CommentTimeline for YouTube」を使う。
### 1. 拡張機能のインストール
Chromeウェブストアから「CommentTimeline for YouTube」をインストールする。
### 2. 動画ページを開く
YouTube上で、タイムスタンプを保存したい動画のページを開く。
### 3. タイムスタンプを収集する
動画の右側に「⏱︎ タイムスタンプ」というボタンが出る。表示されなかった時はリロードする。クリックするとパネルが開き、コメント欄にあるタイムスタンプ付きコメントが一覧表示される。
コメントがまだ全部読み込まれていない場合は、パネル上部の「**自動読込**」ボタンを押す。自動でページをスクロールして全コメントを読み込んでくれる。完了すると自動で止まる。
### 4. HTMLとしてダウンロード
パネル上部の「**DL**」ボタンをクリックすると、`txt` と `html` の選択肢が出る。
**`html` を選ぶ。**
ファイルが自動でダウンロードされる。ファイル名は `チャンネル名_YYYYMMDD_動画タイトル.html` の形式。
ダウンロードされたHTMLには以下が含まれる：
- 動画タイトル（`<h1>`タグ）
- 動画URL
- 配信日・ダウンロード日
- 全タイムスタンプ（再生時間リンク＋テキスト）
### 5. 繰り返す
保存したい配信すべてについて、手順2〜4を繰り返す。
ダウンロードしたHTMLファイルは1つのフォルダにまとめておく。
## データベースの構築
### 1. フォルダ構成
```
MyTimestampDB/
├──
├── チャンネル名_20240315_配信タイトル.html
├── チャンネル名_20240320_配信タイトル.html
├── チャンネル名_20240401_配信タイトル.html
└── ...（HTMLファイルをどんどん追加）
```
```powershell
[Console]::OutputEncoding = [System.Text.Encoding]::UTF8; python
```
`index.html` と `search_data.js` が生成される。
### 3. 確認
`index.html` をブラウザで開く。
- 上部の検索ボックスにキーワードを入力すると、全ファイルから該当するタイムスタンプが瞬時にリストアップされる
- 年別タブで一覧を切り替えられる
- タイムスタンプのリンクをクリックするとYouTubeの該当時間に飛ぶ
## 別チャンネルで使う場合
titleとh1はスクリプト内にハードコードされているので、必要に応じて書き換える。
よければご利用ください。
