logo
Published on

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

Authors

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

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

Watch Later - YouTube

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

使い方: 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ファイルに保存するものです。以下はプログラムのステップバイステップの説明です。

  1. getElementsByXPath 関数:

    • XPath式と親要素を受け取り、指定されたXPathに一致する要素を取得する関数です。
    • document.evaluate を使用してXPathを評価し、一致する要素を取得します。
  2. (function(console){...})(console) 部分:

    • console.save 関数を拡張するためのコードです。
    • console.save 関数は、データをファイルに保存するためのカスタム関数を追加します。
  3. absolutePath 関数:

    • 相対URLを絶対URLに変換するための関数です。
    • 与えられた相対URLを <a> 要素を使用して絶対URLに変換し、それを返します。
  4. xpath 変数:

    • XPath式を指定します。このXPath式は、ページ上の <a> 要素を特定の方法で抽出するためのものです。
  5. csv 変数:

    • CSVデータを格納する変数です。
  6. for ループ:

    • getElementsByXPath(xpath).length までループを実行します。この部分は、要素の数が0になるまでループするための条件です。
  7. ループ内の処理:

    • 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)を追加します。
  8. console.save(csv, 'result.csv'):

    • console.save 関数を使用して、csv 変数の内容をCSVファイルとしてダウンロードします。ファイル名は 'result.csv' です。この関数はカスタムで定義されたもので、CSVデータをファイルに保存する役割を果たします。

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

各ツール価格:1万円~

サポート:6千円/1時間

見積もり:無料


▶ 詳細📧 ご連絡

ご覧頂きありがとうございます。
商品やサービスが本サイト限定で無料や割引になる、広告の一覧をご活用頂くことで、本サイトの運営をご支援いただけます。