ブックマークレット・コンソールを使って Webページ内の複数の指定要素のテキストをファイルに保存

タイトルの通りの内容を、自分用のメモとして。

頻度は多くないものの、とある Webサイト上に登録された情報をまとめる作業があり、CSV出力する機能がありはするのですが、より手軽に情報をまとめられないかと思ってやってみた内容です。

開発者ツールのコンソールで処理を実行

とりあえず、以下を実行する処理について調べたり試してみたりしました。

• ページ内の指定要素を取得する処理
• 取得したテキストをファイルとして保存する処理

ページ内の指定要素のテキストを取得してまとめる

処理対象として、Qiita のトップページを使ってみます。
適当に決めた内容ですが、「トップページでトレンドとして表示されている記事のタイトルをまとめて取得する」ということをやってみます。

開発者ツールで該当する部分の構成を見てみます。

article の子要素の h2 が記事のタイトルのようです。試しに、ページ内のこれらを取得する処理を、コンソールで実行してみます。

const el = document.querySelectorAll("article h2");

コンソール上で取得した中身の情報を見てみると、うまく取得できていそうです。

上記の el は NodeList になっているようで、取得した内容をひとまとめにするには配列にしておくのが良さそうです。さらに、テキストの部分を取り出すようにしてみます。

const array = Array.from(el).map(val => val.textContent);

この処理で配列に変換しつつ、テキストの部分のみを取り出せました。

そして、ひとまとまりの内容にするために、配列の各要素を改行文字をはさみつつ、連結させてみます。

const text = array.join('\n');

出力した内容は、こんな感じになりました。

スプレッド構文を使ったやり方

ちなみに、Array.from() を使った部分はスプレッド構文を使う形でも大丈夫です。具体的には、以下となります。

const text = [...el].map(val => val.textContent).join('\n');

テキストをファイルに保存する

テキストの内容を何らか出力してコピペする方法も考えたのですが、調べてみるとファイルで保存する方法があるようでした。以下の処理を実行すると、「【保存するテキスト】」というテキストが書かれたファイルが生成され、さらにそのファイルのダウンロードが自動的に始まります。

const blob = new Blob(["【保存するテキスト】"],{type:"text/plan"});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = '出力するテキストのファイル名.txt';
link.click();

2つの処理をまとめる

上記の 2つの処理をまとめたものが以下となります。

const el = document.querySelectorAll("article h2");
const array = Array.from(el).map(val => val.textContent);
const text = array.join('\n');

const blob = new Blob([text],{type:"text/plan"});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = '出力するテキストのファイル名.txt';
link.click();

Qiita のトップページを開き、開発ツールのコンソールで上記を実行すると、テキストファイルが保存されます。そのテキストファイルの中には、トップページに表示されていた記事のタイトルが 1行に 1つずつ書かれています。

ブックマークレット用に変換する

ブックマークレットについて調べていると、以下のページの情報を見かけました。

●Bookmarkletを作ろう(準備編） - Qiita
　https://qiita.com/kanaxx/items/63debe502aacd73c3cb8

Googleさんの Closure Compiler を使うのが良いらしいです。また、上記の内容を見て、javascript: (function () { 【処理の内容】 })(); という形になるようにしました。

javascript: (function () {
  const el = document.querySelectorAll("article h2");
  const array = Array.from(el).map((val) => val.textContent);
  const text = array.join("\n");

  const blob = new Blob([text], { type: "text/plan" });
  const link = document.createElement("a");
  link.href = URL.createObjectURL(blob);
  link.download = "出力するテキストのファイル名.txt";
  link.click();
})();

そして、Closure Compiler で上記を処理した結果は、以下のようになりました。

(function(){var a=document.querySelectorAll("article h2");a=Array.from(a).map(function(c){return c.textContent}).join("\n");a=new Blob([a],{type:"text/plan"});var b=document.createElement("a");b.href=URL.createObjectURL(a);b.download="\u4f5c\u3063\u305f\u30d5\u30a1\u30a4\u30eb.txt";b.click()})();

この先頭に再度 javascript:をつけた以下の内容にして、ブックマークの URL欄に設定してやることで、ブックマークから処理を実行できるようになりました。

javascript:(function(){var a=document.querySelectorAll("article h2");a=Array.from(a).map(function(c){return c.textContent}).join("\n");a=new Blob([a],{type:"text/plan"});var b=document.createElement("a");b.href=URL.createObjectURL(a);b.download="\u4f5c\u3063\u305f\u30d5\u30a1\u30a4\u30eb.txt";b.click()})();

今回の内容は以上になります。

参照したサイト

●[JavaScript] nodeListから配列に変更する方法 - Qiita
　https://qiita.com/kibinag0/items/faaf684fbd366ec3cc66

●JavaScriptのarrayのmap関数でアロー関数を使う - Qiita
　https://qiita.com/kanta13jp1/items/e79eb64c27db2d7d9620

●スプレッド構文 - JavaScript | MDN
　https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

●【JavaScript】スプレッド構文の便利な使い方まとめ - Qiita
　https://qiita.com/Nossa/items/e6f503cbb95c8e6967f8