YouTubeの"後で見る"をCSVにする

YouTubeの後で見る(Watch later)のデータをCSVにするJavaScriptスクリプトを書いたので少しシェアします。

機能：後で見るのページの動画リストを、タイトル,URLの形式でCSVにして保存する。

不具合：順番がバラバラ。

使い方： Watch later(後で見る)のページに行って、chromeデベロッパーツールを開いて以下ソースコードをコピペ。追記：やっぱり最後のconsole.save(csv,'result.csv')だけ数秒時間おいてから実行しなきゃダメでした。


function getElementsByXPath(xpath, parent)
{
  let results = [];
  let query = document.evaluate(xpath,
      parent || document,
      null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
  for (let i=0, length=query.snapshotLength; i<length; ++i) {
    results.push(query.snapshotItem(i));
  }
  return results;
}




(function(console){

    console.save = function(data, filename){

        if(!data) {
            console.error('Console.save: No data')
            return;
        }

        if(!filename) filename = 'console.json'

        if(typeof data === "object"){
            data = JSON.stringify(data, undefined, 4)
        }

        var blob = new Blob([data], {type: 'text/json'}),
            e    = document.createEvent('MouseEvents'),
            a    = document.createElement('a')

        a.download = filename
        a.href = window.URL.createObjectURL(blob)
        a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':')
        e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
        a.dispatchEvent(e)
    }
})(console)


var absolutePath = function(href) {
    var link = document.createElement("a");
    link.href = href;
    return link.href;
}


var xpath = '//*[@id="content"]/a' ;
var csv ;

for (i = 1; getElementsByXPath(xpath).length; i++) {
    text = getElementsByXPath('//*[@id="content"]/a/div/h3/span')[i].getAttribute("title");

    text = text.replace(/,/g, "、");
    text = '"' + text + '"'
    csv += text
    csv += ','
    // csv += "\n" ;

    text = getElementsByXPath(xpath)[i].getAttribute("href")
    text = absolutePath(text) ;

    text = text.replace(/,/g, "、");
    text = '"' + text + '"'
    csv += text
    // csv += ','
    csv += "\n" ;
}

console.save(csv,'result.csv')

このJavaScriptプログラムは、ウェブページ上の特定のXPathパスに基づいて要素を取得し、その要素からデータを抽出してCSVファイルに保存するものです。以下はプログラムのステップバイステップの説明です。

getElementsByXPath 関数:
- XPath式と親要素を受け取り、指定されたXPathに一致する要素を取得する関数です。
- document.evaluate を使用してXPathを評価し、一致する要素を取得します。
(function(console){...})(console) 部分:
- console.save 関数を拡張するためのコードです。
- console.save 関数は、データをファイルに保存するためのカスタム関数を追加します。
absolutePath 関数:
- 相対URLを絶対URLに変換するための関数です。
- 与えられた相対URLを <a> 要素を使用して絶対URLに変換し、それを返します。
xpath 変数:
- XPath式を指定します。このXPath式は、ページ上の <a> 要素を特定の方法で抽出するためのものです。
csv 変数:
- CSVデータを格納する変数です。
for ループ:
- getElementsByXPath(xpath).length までループを実行します。この部分は、要素の数が0になるまでループするための条件です。
ループ内の処理:
- getElementsByXPath('//*[@id="content"]/a/div/h3/span')[i].getAttribute("title") を使用して、指定されたXPathからタイトルのテキストを取得します。
- 取得したテキストデータはカンマ（,）で区切られたCSVのセルとして csv 変数に追加されます。テキストデータはダブルクォートで囲まれています。
- getElementsByXPath(xpath)[i].getAttribute("href") を使用して、要素の "href" 属性からリンクの相対URLを取得します。
- 相対URLを absolutePath 関数を使用して絶対URLに変換し、ダブルクォートで囲んで csv 変数に追加します。
- カンマでセルを区切り、行の終わりに改行文字（\n）を追加します。
console.save(csv, 'result.csv'):
- console.save 関数を使用して、csv 変数の内容をCSVファイルとしてダウンロードします。ファイル名は 'result.csv' です。この関数はカスタムで定義されたもので、CSVデータをファイルに保存する役割を果たします。

このプログラムは、指定したXPathに一致する要素からタイトルとリンクを取得し、それをCSVファイルに保存します。