声援駆動開発支援(electronデスクトップ声援キャラ)

可愛い声からの声援でタスク効率アップ！！

事前準備

pc
electronの開発環境

目的

人はどうやったらタスク効率あがるの？
人は褒められたり、応援されるとやる気でますよね。
そこで、褒められるために、応援されるためにタスクを消化し、タスク完了すると褒められる。
褒められるために開発を早く終わらそうとします。よって、タスク効率があがる。
声援駆動開発です。
好きな人(キャラクター)に褒められるのが一番です！！
ここで、今回はデスクトップ声援キャラクターです。

さすおに駆動開発
一つタスクを終わるごとに褒められる。
褒められるためにタスク処理効率があがる。
それがさすおに駆動開発 pic.twitter.com/rwiYu1yrFj
— 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:https://github.com/fishkiller252/voice-drive
Download:https://github.com/fishkiller252/voice-drive/releases
twitter:@R_BAGGIO1017

声援駆動開発支援[可愛い声でタスク効率UP(electronデスクトップ声援キャラ)]