Electron : ver12의 contextBridge와 ipcRenderer.invoke
게다가 구체예에 SlackAPI에 의한 메세지의 송신을 사용하는 것으로, 함께 사용법을 기억해 버리는 혼담입니다!
(주의)
비프로그래머의 독학&첫 투고가 되기 때문에 아무쪼록 손 부드럽게.
여기 고치면 좋다! 라는 조언을 받으면 다행입니다!
목차
1. 만드는 기능
"버튼을 클릭하면 Slack에 미리 정해진 메시지 (카메하메 파)를 날린다"만의 매우 간단한 기능을 작성합니다.
라는 건전의 아래, 디버그의 방법을 모르기 때문에, 대신에 API로 메세지를 던집니다(웃음)
electron에 대해서는 이쪽
2. 보안에 모듈을 사용하려면
electron에서는 이전부터 XSS의 위험이 지적되었습니다.
버전 업데이트마다 기본 설정이 변경되는 등,
나를 포함한 초보자에게는 까다로운 상황인가.
우선 공식 문서를 살펴 보겠습니다. 또한 함께 일본어로 검색합니다.
각각 공통 키워드를 선택합니다.
electron에서는 이전부터 XSS의 위험이 지적되었습니다.
버전 업데이트마다 기본 설정이 변경되는 등,
나를 포함한 초보자에게는 까다로운 상황인가.
우선 공식 문서를 살펴 보겠습니다. 또한 함께 일본어로 검색합니다.
각각 공통 키워드를 선택합니다.
이것들을 조합하는 것으로, 종래보다 지적되고 있던 XSS의 위험성을 회피하면서, 모듈을 사용할 수 있는 것 같네요.
전체 이미지는 이런 느낌입니까?
3. 실제로 해보자
먼저, 화면이 될 HTML을 준비합니다.
test.html<html lang="ja">
<head>
<meta charset="UTF-8">
<meta content="width=device-width" name="viewport">
<title>テスト</title>
</head>
<body>
<p><input type="button" value="かめはめ波" id=Button></p>
<script src="./renderer.js"></script>
</body>
</html>
renderer 프로세스측에서 「window.임의의 API키.임의의 API명(인수)」라고 하는 형태로 preload.js의 처리를 호출합니다.
renderer.jsconst button = document.getElementById("Button");
button.addEventListener('click',async () => {
const result = await window.electron.sendToMain("かめはめ波");
console.log(result);
})
다음에 preload.js에서는, 「contextBridge.exposeInMainWorld('임의의 API 키', {임의의 API명:처리 내용})」라고 하는 형태로 창구를 준비합니다.
이 때, 처리 내용에는 「ipcRenderer.invoke('임의의 이름', 인수)」를 기술해, main 프로세스의 처리를 불러 갑니다.
preload.jsconst {contextBridge,ipcRenderer} = require("electron");
contextBridge.exposeInMainWorld(
'electron', {
sendToMain: async (skill) => {
const result = await ipcRenderer.invoke('invoke-test', skill) ;
return result;
}
})
마지막으로 main 프로세스에서는 preload.js에 대응하는 「ipcMain.handle('임의의 이름',async(event,data) => { 처리내용...}」이라고 기술해, 호출의 수신과 처리의 실행 합니다.
main.jsipcMain.handle('invoke-test', async(event,data) => {
const Result = await sendMessageSlack();
return Result
});
const sendMessageSlack = async() => {
//処理
}
SlackAPI로 메시지 보내기
Slack의 Api 사용에 관해서는 이쪽
위의 Main 프로세스에서 호출되는 함수를 다음과 같이 기술합니다. Token이나 Channel명은 태도 밖에 내놓지 않아도 좋을지도 모릅니다만, 나중에 봐 알기 쉬울까라고 생각해 const하고 있습니다.
main.jsconst { WebClient, LogLevel } = require("@slack/web-api");
const apiToken = "Slackの設定で取得したApiToken";
const chatGroup = "任意のチャンネル名";
const client = new WebClient(apiToken, {logLevel: LogLevel.DEBUG});
const sendMessageSlack = async(text) => {
try {
const result = await client.chat.postMessage({
token: apiToken,
channel: chatGroup,
text: text
});
console.log(result);
}
catch (error) {
console.error(err);
}
}
요약
기타 참고 기사
소감
초보자에게는, async/await가 중첩되어 있는 것에, 그 밖에서는 사용하지 않는 개념의 이해나 Method의 사용이 요구되어, 꽤 힘들었습니다.
벌써 같은 내용을 쓰고 있는 기사도 보았습니다만, 잘 움직이지 않거나,
가려운 곳에 닿지 않고, 스스로 시행 착오하고 어떻게든 도착했습니다.
만약 같은 처지가 이것을 타타키로 하고 하고 싶었을 수 있다고 👍
Reference
이 문제에 관하여(Electron : ver12의 contextBridge와 ipcRenderer.invoke), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/shunxper/items/8a2781c454cc2c54d6c9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta content="width=device-width" name="viewport">
<title>テスト</title>
</head>
<body>
<p><input type="button" value="かめはめ波" id=Button></p>
<script src="./renderer.js"></script>
</body>
</html>
const button = document.getElementById("Button");
button.addEventListener('click',async () => {
const result = await window.electron.sendToMain("かめはめ波");
console.log(result);
})
const {contextBridge,ipcRenderer} = require("electron");
contextBridge.exposeInMainWorld(
'electron', {
sendToMain: async (skill) => {
const result = await ipcRenderer.invoke('invoke-test', skill) ;
return result;
}
})
ipcMain.handle('invoke-test', async(event,data) => {
const Result = await sendMessageSlack();
return Result
});
const sendMessageSlack = async() => {
//処理
}
Slack의 Api 사용에 관해서는 이쪽
위의 Main 프로세스에서 호출되는 함수를 다음과 같이 기술합니다. Token이나 Channel명은 태도 밖에 내놓지 않아도 좋을지도 모릅니다만, 나중에 봐 알기 쉬울까라고 생각해 const하고 있습니다.
main.js
const { WebClient, LogLevel } = require("@slack/web-api");
const apiToken = "Slackの設定で取得したApiToken";
const chatGroup = "任意のチャンネル名";
const client = new WebClient(apiToken, {logLevel: LogLevel.DEBUG});
const sendMessageSlack = async(text) => {
try {
const result = await client.chat.postMessage({
token: apiToken,
channel: chatGroup,
text: text
});
console.log(result);
}
catch (error) {
console.error(err);
}
}
요약
기타 참고 기사
소감
초보자에게는, async/await가 중첩되어 있는 것에, 그 밖에서는 사용하지 않는 개념의 이해나 Method의 사용이 요구되어, 꽤 힘들었습니다.
벌써 같은 내용을 쓰고 있는 기사도 보았습니다만, 잘 움직이지 않거나,
가려운 곳에 닿지 않고, 스스로 시행 착오하고 어떻게든 도착했습니다.
만약 같은 처지가 이것을 타타키로 하고 하고 싶었을 수 있다고 👍
Reference
이 문제에 관하여(Electron : ver12의 contextBridge와 ipcRenderer.invoke), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/shunxper/items/8a2781c454cc2c54d6c9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Electron : ver12의 contextBridge와 ipcRenderer.invoke), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shunxper/items/8a2781c454cc2c54d6c9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
