【Vivaldi】リーディングリストをHTMLとして出力・保存する方法

Vivaldi

「Vivaldi」のアイコン

この記事では、「Vivaldi(ヴィヴァルディ)」ブラウザのリーディングリストを、HTMLとして一覧出力する方法を書きます。

開発者ツールに、本記事のJavaScriptを実行することで、保存できます。

【Vivaldi】リーディングリストをHTMLとして出力・保存する方法

2023年1月現在、Vivaldiブラウザには、リーディングリストのHTML出力機能は実装されていません。専用の開発者ツールを起動して、とあるJavaScriptを実行することで出力できます。

HTMLファイルで出力したところで、インポート(別ブラウザへの読み込み)ができるわけではありません。ただ登録したリーディングリスト内のサイトを、一覧で表示するだけです。

バックアップ目的や、URL一括オープンで開く時に使えると思います。

別PCに移行する目的なら、Vivaldiのフォルダー(Default)を丸々移行するほうがいいと思います。リーディングリストも移行されます。

参考:【Vivaldi】保存場所を調べる方法&データのバックアップ方法

【事前準備】コマンドチェインの作成

最初にVivaldiブラウザの外観を調べられる開発者ツールを起動する必要があります。ただの開発者ツールではありません。一番手っ取り早いのが、以下のコマンドチェインを作成することです。

開発者ツールを起動するコマンドチェイン画像
専用の開発者ツールを起動するコマンドチェイン
Command1新しいタブでリンクを開く(vivaldi://experiments/
Command2遅延(50)
Command3開発者ツール
Command4タブを閉じる

リーディングリストを出力する手順

コマンドチェインを発動して、開発者ツールを起動します。僕は、「kai」という名前にしていて、よくクイックコマンドから起動します。

クイックコマンドからコマンドチェインを発動するスクリーンショット

開けたら、「コンソール(Console)」タブを開きます。

リーディングリストを一覧で出力するJavaScriptを実行する手順画像1

以下のコードを貼り付けて、Enterで実行します。

vivaldi.readingListPrivate.getAll(items => {
  let listitems = items.map(item => "<a target='_blank' class='" + (item.read ? "read" : "unread") + "' href='" + item.url + "' data-time='"+item.lastUpdate+"'><img src='https://www.google.com/s2/favicons?domain=" + item.url + "' alt='favicon' width='16' height='16'/>" + item.title + "</a><br>");
  let urls = items.map(item => item.url).join('\n');
  let head = `<!doctype HTML><html><head><title>Vivaldiのリーディングリスト一覧</title><style>body {background-color: #16161c; margin-bottom: 400px; margin-left: 50px;}a {color: #ffffff;}img {margin: 0 10px;}textarea#url-list {min-width: 800px;min-height: 600px;}</style></head><body>`;
  let tail = `<br><textarea id='url-list' readonly>${urls}</textarea></body></html>`;
  let filename = `Vivaldiのリーディングリスト一覧.html`;
  const textfile = new File([[head,listitems.join("\n"),tail].join("\n")], filename, {type: "text/plain"});
  const dl = document.createElement("a");
  dl.download = filename;
  dl.href = window.URL.createObjectURL(textfile);
  dl.click();
});
リーディングリストを一覧で出力するJavaScriptを実行する手順画像2

本コードは、下記のVivaldiフォーラムを参考にさせていただき、僕が「ChatGPT(チャット・ジーピーティー)」に相談しつつ、自分好みに改造しました。

参考:Reading List Export | Vivaldi Forum

実行後、「undefined」と出力されればOKです。通常の開発者ツール(F12)ではエラーが出ると思うので注意です。

Vivaldiブラウザで設定しているダウンロード場所に、HTMLファイルが保存されます。ダブルクリックで起動します。

リーディングリストを一覧で出力するJavaScriptを実行する手順画像3

HTMLを開くように設定しているアプリ(ブラウザ)で、ファイルが開かれます。僕の場合、Vivaldiブラウザで表示されます。

アイコン+記事タイトルになっています。各行はそれぞれリンクになっていて、クリックすると開きます。Vivaldiフォーラムで紹介されていたコードだと、同一タブで開いたため、「target='_blank'」で新しいタブで開くようにしています。

出力したHTMLファイルのスクリーンショット1

またページの下部に、テキストフォームを設置して、全部のURLを一行ずつ出力するようにしました。「URL一括オープン」などのサービスで開く場合、URLが必要なためです。テキストフォーム内にマウスフォーカスして、Ctrl+Aを押すことで、全文範囲選択できます。

出力したHTMLファイルのスクリーンショット2

これでVivaldiだけでなく、Firefoxなどの別ブラウザでも、一括でリーディングリストのURLを開くことができます。初回の場合は、ポップアップのブロックうんたら~が表示されるので、許可してあげる必要があります。

「一括URLオープン」サイトのスクリーンショット

最後に、改造前コードにどんなことを追加したか書いておきます。

  • CSV出力機能の廃止(CSVとして出力したいなら、Vivaldiフォーラムのコードを利用しましょう)
  • タイトルの左側にファビコンを表示
  • bodyタグに背景色を追加して、ダークモード化
  • marginをつけたり、ちょっとだけデザイン修正
  • リストの下部に、入力フォームで全URLを表示

感想

以上、「Vivaldi」ブラウザで、リーディングリストをHTMLファイルとして出力・PC内に保存する方法でした。

同じ要領で、RSSとかもいけるのかなぁ…。分かりません。

Vivaldi