데스크톱에 항상 표시되는 시계 앱을 Electron으로 만들어 보니 놀랍도록 간단했던 이야기
이런 것을 만들어 보았던 이야기입니다.
최근 새로운 기술을 접하지 않았구나-라고 생각해. 도구를 만들 기회가 늘어날 것 같았기 때문에 Electron을 만져보십시오. 단지 튜토리얼을 하는 것도 지루하기 때문에, 뭔가 만들고 싶다-라고. 그 궤적입니다. 아저씨 러브를 보면서 이것을 쓰고 있습니다.
평상시는 C++ 임베디드계 아저씨로 해, Web같은 이것이 아마추어입니다(예방선)
설정 및 헬로우 월드
일부 기사를 본 느낌으로는 아래 페이지가 알기 쉬웠다.
최신 버전으로 배우기 Electron 입문 - HTML5로 PC 앱을 개발하는 이점과 절차 - ICS MEDIA
npm으로 Electron을 설치하고,npm i -D electron
여기서 글로벌 설치하는 파와 글로벌 환경 더러운 파가 있지만, 뭐 시험이므로 어느 쪽이라도 좋다. 자신의 경험으로 곤란한 일이 일어난 후 생각할까요?
페이지에 설명 된대로 index.js, index.html을 작성하고,
npx electron ./src
에서 앱이 일어나면 헬로 월드 완료.
npx라고 하는 것은 로컬 인스톨한 electron 쪽을 현명하게 참조해 주는 마법인것 같다. 헤-.
외형을 정돈하다
텐션을 높이기 위해서, 먼저 외형을 그렇게 하는 곳으로부터 들어가기로 합시다.
윈도우를 투과하거나 타이틀 바를 지우고 싶네요.
index.js mainWindow = new BrowserWindow({
x: 80,
y: 0,
width: 400,
height: 200,
transparent: true,
frame: false,
resizable: false,
hasShadow: false,
alwaysOnTop: true,
});
그런 다음 앱에 클릭을 빼앗기지 않도록 합시다.
index.js mainWindow.setIgnoreMouseEvents(true);
그리고는 컨텐츠 측도 적당하게 정돈합니다.
index.html<html>
<head>
<meta charset="UTF-8">
<title>desclock</title>
</head>
<body>
<style type="text/css">
body{
margin: 0;
padding: 0;
color: rgb(250, 250, 250);
font-size: 7em;
font-family: "メイリオ";
}
</style>
00:00
</body>
</html>
여기까지 대체로 그것 같은 외형입니다. 되었습니다.
네.
시계로 만들기
시계를 만드는 곳은, 뭐 어떻게 쓰고 닮은 것일까라고 생각했기 때문에 아래의 페이지를 보고 흠흠하고 배차했다.
대접! JavaScript로 간단한 디지털 시계를 만들어 보자 (웹 글꼴 사용 / 크기 자동 조정) - Qiita
index.html <div id="clo"></div>
<script type="text/javascript">
const clock = () => {
const now = new Date();
let h = now.getHours();
let m = now.getMinutes();
if(h<10) { h = "0" + h; }
if(m<10) { m = "0" + m; }
document.getElementById("clo").innerHTML = h + ":" + m;
};
setInterval(clock, 10000);
</script>
완성
htps : // 기주 b. 코 m / 마사야시 /에서 sC CK
github에서 왔습니다.
좋았어요.
후기
만든 후에 N번 달이었다는 것을 깨달았습니다.
글쎄, NHK 같은 표기가 하고 싶었고, 그 편으로 차별화되어 있다고 하는 것으로 용감.
일부 기사를 본 느낌으로는 아래 페이지가 알기 쉬웠다.
최신 버전으로 배우기 Electron 입문 - HTML5로 PC 앱을 개발하는 이점과 절차 - ICS MEDIA
npm으로 Electron을 설치하고,
npm i -D electron여기서 글로벌 설치하는 파와 글로벌 환경 더러운 파가 있지만, 뭐 시험이므로 어느 쪽이라도 좋다. 자신의 경험으로 곤란한 일이 일어난 후 생각할까요?
페이지에 설명 된대로 index.js, index.html을 작성하고,
npx electron ./src에서 앱이 일어나면 헬로 월드 완료.
npx라고 하는 것은 로컬 인스톨한 electron 쪽을 현명하게 참조해 주는 마법인것 같다. 헤-.
외형을 정돈하다
텐션을 높이기 위해서, 먼저 외형을 그렇게 하는 곳으로부터 들어가기로 합시다.
윈도우를 투과하거나 타이틀 바를 지우고 싶네요.
index.js mainWindow = new BrowserWindow({
x: 80,
y: 0,
width: 400,
height: 200,
transparent: true,
frame: false,
resizable: false,
hasShadow: false,
alwaysOnTop: true,
});
그런 다음 앱에 클릭을 빼앗기지 않도록 합시다.
index.js mainWindow.setIgnoreMouseEvents(true);
그리고는 컨텐츠 측도 적당하게 정돈합니다.
index.html<html>
<head>
<meta charset="UTF-8">
<title>desclock</title>
</head>
<body>
<style type="text/css">
body{
margin: 0;
padding: 0;
color: rgb(250, 250, 250);
font-size: 7em;
font-family: "メイリオ";
}
</style>
00:00
</body>
</html>
여기까지 대체로 그것 같은 외형입니다. 되었습니다.
네.
시계로 만들기
시계를 만드는 곳은, 뭐 어떻게 쓰고 닮은 것일까라고 생각했기 때문에 아래의 페이지를 보고 흠흠하고 배차했다.
대접! JavaScript로 간단한 디지털 시계를 만들어 보자 (웹 글꼴 사용 / 크기 자동 조정) - Qiita
index.html <div id="clo"></div>
<script type="text/javascript">
const clock = () => {
const now = new Date();
let h = now.getHours();
let m = now.getMinutes();
if(h<10) { h = "0" + h; }
if(m<10) { m = "0" + m; }
document.getElementById("clo").innerHTML = h + ":" + m;
};
setInterval(clock, 10000);
</script>
완성
htps : // 기주 b. 코 m / 마사야시 /에서 sC CK
github에서 왔습니다.
좋았어요.
후기
만든 후에 N번 달이었다는 것을 깨달았습니다.
글쎄, NHK 같은 표기가 하고 싶었고, 그 편으로 차별화되어 있다고 하는 것으로 용감.
mainWindow = new BrowserWindow({
x: 80,
y: 0,
width: 400,
height: 200,
transparent: true,
frame: false,
resizable: false,
hasShadow: false,
alwaysOnTop: true,
});
mainWindow.setIgnoreMouseEvents(true);
<html>
<head>
<meta charset="UTF-8">
<title>desclock</title>
</head>
<body>
<style type="text/css">
body{
margin: 0;
padding: 0;
color: rgb(250, 250, 250);
font-size: 7em;
font-family: "メイリオ";
}
</style>
00:00
</body>
</html>
시계를 만드는 곳은, 뭐 어떻게 쓰고 닮은 것일까라고 생각했기 때문에 아래의 페이지를 보고 흠흠하고 배차했다.
대접! JavaScript로 간단한 디지털 시계를 만들어 보자 (웹 글꼴 사용 / 크기 자동 조정) - Qiita
index.html
<div id="clo"></div>
<script type="text/javascript">
const clock = () => {
const now = new Date();
let h = now.getHours();
let m = now.getMinutes();
if(h<10) { h = "0" + h; }
if(m<10) { m = "0" + m; }
document.getElementById("clo").innerHTML = h + ":" + m;
};
setInterval(clock, 10000);
</script>
완성
htps : // 기주 b. 코 m / 마사야시 /에서 sC CK
github에서 왔습니다.
좋았어요.
후기
만든 후에 N번 달이었다는 것을 깨달았습니다.
글쎄, NHK 같은 표기가 하고 싶었고, 그 편으로 차별화되어 있다고 하는 것으로 용감.
만든 후에 N번 달이었다는 것을 깨달았습니다.
글쎄, NHK 같은 표기가 하고 싶었고, 그 편으로 차별화되어 있다고 하는 것으로 용감.
Electron에서 데스크톱 위젯을 만들 때까지 - Qiita
Electron으로 간단한 데스크톱 시계 앱 만들기 : 목차 - Qiita
Reference
이 문제에 관하여(데스크톱에 항상 표시되는 시계 앱을 Electron으로 만들어 보니 놀랍도록 간단했던 이야기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/masayashi/items/8a5f55196ed8a58232af텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
