Help us understand the problem. What is going on with this article?

Electronのwebviewからレンダラープロセスに複数情報を渡す方法

More than 1 year has passed since last update.

背景

ある音楽サイトをスクレイピングしてプレイヤーを作ろうと思い、cheerioやjsdomを試したところ、元のサイトのcharsetがshift-jis設定だったためか文字化けなどを起こした。
Electronのwebview経由で情報を抜き出したところ、文字化けを起こさず(謎)欲しい情報が正確に抜け出せた。
サイトのページネーションと、曲の情報を別々にレンダラープロセス渡すのにはどうすればいいんだろうと悩んだので備忘録的にQiitaに記します。

環境

  • Electron v3.0.8

結論

if文を利用し、channel別に分ける。
以下サンプルコード

renderer.js
/* レンダラープロセス側 */
// webviewでpreloadしているjsに呼びかけ
webview.addEventListener("did-finish-load", () => {
    webview.send("pleasePlaylists"); // 曲の情報
    webview.send("pleaseUrls"); // ページネーションのURL情報
});
preload.js
const { ipcRenderer } = require("electron");
window.addEventListener("load", () => {
    // playlists 作成
    let data = {};
    let rows = document.querySelector("hogehoge").rows;
    for (let i = 0; i < rows.length; i++) {
        data[i] = {
            title: rows[i].cells[2].innerText,
            artist: rows[i].cells[1].innerText,
            url: rows[i].cells[7].getElementsByTagName("a").item(0).href
        };
    }
    // まとめた曲の情報をレンダラープロセスへ投げる
    ipcRenderer.on("pleasePlaylists", () => {
        ipcRenderer.sendToHost("pleasePlaylists", data);
    });
    // ページネーションのURL取得
    let links = document.querySelector("fugafuga").lastElementChild.querySelectorAll("a");
    let link = [];
    for (let i = 0; i < links.length; i++) {
        link[i] = links.item(i).href;
    }
    // まとめたURLの情報をレンダラープロセスへ投げる
    ipcRenderer.on("pleaseUrls", () => {
        ipcRenderer.sendToHost("pleaseUrls", link);
    });
});
renderer.js
/* ipc-messageでpreload.jsから送られた情報を受け取る */
webview.addEventListener("ipc-message", (e) => {
  // 曲の情報
  if (e.channel === "pleasePlaylists") {
    playlists = e.args[0]; // jsonぽく扱いたいため、今回こうした。
  }
  // ページネーションのURL
  if (e.channel === "pleaseUrls") {
    links = e.args;
  }
});

以上

別の方法ご存知の方いらっしゃればぜひコメントにお願いします…。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away