YouTubeの高く評価した動画のデータをCSVにする

YouTubeの高く評価した動画(Liked videos)のデータをCSVにするJavaScriptスクリプトを書きましたので少し紹介します。

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

不具合：途中の動画からURLが取れなくなる。これはyoutubeの仕様みたいなのでどうしようもない。順番がバラバラ。

使い方：高く評価した動画のページに行って、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="video-title"]' ;
var csv ;

for (i = 1; getElementsByXPath(xpath).length; i++) {
    text = getElementsByXPath(xpath)[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> 要素で id 属性が "video-title" であるものを抽出するためのものです。
csv 変数:
- CSVデータを格納する変数です。
for ループ:
- getElementsByXPath(xpath) を使用してXPathに一致する要素を取得し、その数だけループします。
ループ内の処理:
- getElementsByXPath(xpath)[i].getAttribute("title") を使用して、要素の "title" 属性からテキストデータを取得します。
- 取得したテキストデータはカンマ（,）で区切られた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ファイルに保存します。

おまけ：Liked videosをクリックするスクリプト(書いたけど使わなかった)


for (i=0; i < document.querySelectorAll("#endpoint").length ; i++ ){
    // console.log(i) ;
        // console.log(document.querySelectorAll("#endpoint")[i].getAttribute('title')) ;
        if (document.querySelectorAll("#endpoint")[i].getAttribute('title').match(/Liked videos/) == null){
        } else {
        // console.log(i) ;
            document.querySelectorAll("#endpoint")[i].click()
        }
}

このJavaScriptコードは、Webページ上の要素を検索し、条件に一致する場合にクリックアクションを実行するものです。具体的には、#endpointというIDを持つ要素を検索し、その中から"Liked videos"というタイトルを持つ要素をクリックします。以下はコードのステップバイステップの説明です：

for ループ:
- ループの初期化で i 変数を0に設定し、document.querySelectorAll("#endpoint").length までループを実行します。
- document.querySelectorAll("#endpoint") は、ページ上のすべての #endpoint IDを持つ要素を取得するコードです。
条件チェック:
- if 文を使用して、取得した要素の中からタイトルが "Liked videos" でない場合には何もしません。それ以外の要素については何も行いません。
条件一致時の処理:
- "Liked videos" というタイトルを持つ要素が見つかった場合、document.querySelectorAll("#endpoint")[i].click() を実行します。
- これにより、その要素がクリックされます。

このコードは、ページ上の"Liked videos"というタイトルを持つ要素をクリックするために使用されるもので、その他の要素には干渉しません。ループ内で要素のタイトルをチェックし、タイトルが一致する場合にクリックアクションをトリガーします。