성원 구동 개발 지원 [귀여운 목소리로 태스크 효율 UP (electron 데스크탑 성원 캐릭터)]

9077 단어 Electron자바스크립트개발 지원개발

성원 구동 개발 지원 (electron 데스크탑 성원 캐릭터)



귀여운 목소리에서 성원으로 작업 효율 향상! !

사전 준비


  • pc
  • electron 개발 환경

    • 목적



    사람은 어떻게 하면 태스크 효율 올라?
    사람은 칭찬을 받거나 응원되면 동기 부여군요.
    그래서, 칭찬을 받기 위해서, 응원되기 위해서 태스크를 소화하고, 태스크 완료하면 칭찬받는다.
    칭찬을 받기 위해서 개발을 빨리 끝내려고 합니다. 따라서 작업 효율이 높아집니다.
    성원 구동 개발입니다.
    좋아하는 사람(캐릭터)에게 칭찬받는 것이 제일입니다! !
    여기서 이번은 데스크톱 성원 캐릭터입니다.

    과연 구동 개발 하나 태스크를 끝낼 때마다 칭찬받는다. 칭찬하기 위해 태스크 처리 효율이 높아진다. 그것이 과연 구동 개발 피 c. 라고 r. 코 m/r 우유 1yrFj — fishkiller (@R_BAGGIO1017) 2018년 3월 10일


    쉬운 디렉토리 구성



    voice-drive
|---src
|    |-image - 画像ファイル
|    |-js - index.js
|    |-index.html
|    |-main.js
|---xxx.icon/icons/png(パッケージ化する際のアイコン)


    index.html



    <!DOCTYPE html>
<html lang="ja" >
<head>
  <meta charset="UTF-8">
  <title>声援駆動開発</title>
      <script  src="js/index.js"></script>
</head>
<body>
  <marquee behavior="alternate" direction="up" height="350"><marquee direction="right">
  <input type="image" width="150" height="300" src="images/fran.jpg" value="Check" onclick="praise()">
</marquee>
</marquee>
</body>
</html>


    main.js



    'use strict';

var electron = require('electron');
var app = electron.app;
var BrowserWindow = electron.BrowserWindow;

var mainWindow = null;

app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

app.on('ready', function() {

mainWindow = new BrowserWindow({
 width: 800,
 height: 600,
 transparent: true,
 frame: false});

  mainWindow.loadURL('file://' + __dirname + '/index.html');

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});


    index.js



    //音声ファイルを読み込む
// var voice = new Audio("再生する音声ファイルのURL")
var voice = new Audio("http://fishkiller.han-be.com/voice/thx.mp3");

function praise() {
  voice.play()
};


    패키징



    # Windows
electron-packager . ディレクトリ名 --platform=win32 --electron-version=1.4.5 --icon=./--------.ico
# OSX
electron-packager . ディレクトリ名 --platform=darwin --electron-version=1.4.5 --icon=./--------.icns
# Linux
electron-packager . ディレクトリ名 --platform=linux --electron-version=1.4.5 --icon=./----------.png


    끝



    이번에는 매우 간단하게 클릭하면 음성 파일을 재생할 뿐입니다만, 클릭과 함께 태스크 종료 정보를 post하고 태스크 관리를 실시하기 위해 하면 재미있을지도 모릅니다. 그중 하고 싶습니다.

    이미지는 잘라낸 png 파일로 하면 더 좋은 느낌이 됩니다.

    또, 여기에서는 데스크탑에 표시하고 있습니다만, 메뉴 바 쪽이 좋다고 하는 사람도 있을지도 모릅니다.

    그런 분은 이 Qiita 기사

    여기을 참조하십시오.



    그럼, 여러분도 좋아하는 캐릭터나 그녀의 목소리로, 태스크 효율을 올려 버립시다! !



    twitter의 녀석의 남아와는 여러가지 문제가 있으므로, github에는 다른 캐릭터로 하고 있습니다.

    홋카이도의 현지 마스코트 노래하고 춤을 추는 언데드계 아이돌

    프란체스카 짱입니다.



    Github: htps : // 기주 b. 코 m / 후 sh 키트 r252 / ぉ 이세 - d 리 ょ

    Download: htps : // 기주 b. 코 m / 훗 sh ぇ r252 / ぉ 이세 - d 리 ょ / ぇ 아세 s

    twitter: 🍑🏻‍♀️


    electron-vue 도입
    VSCode용 Electron+TypeScript+Vue+Webpack 개발·디버그 환경의 탁자를 만들었다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage