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時間*

見積もり:無料


*一律・1時間未満切上

👉 詳細はこちらから。📧 お問い合わせ

ご覧いただき、ありがとうございます。本サイトの運営コストは広告をご覧いただくことで賄われています。様々な有名サービスが本サイト経由限定・期間限定で無料・割引・キャッシュバックになる、お得なプロモーションをご利用いただくことで、本サイトの運営をご支援いただけます。