ElectronでToDoアプリを作る

はじめに
----------------------------------
最近知った[Electron](http://electron.atom.io/)でToDoアプリを作ってみました。
基本的なElectronの仕組みはこの[記事](http://qiita.com/Quramy/items/a4be32769366cfe55778)を参考にしました。
コーディングは初心者なのでお察しください。


画面のイメージはこんな感じです。
![todo.png](https://qiita-image-store.s3.amazonaws.com/0/62857/bf3d2abb-e7e3-5839-9104-8b669e8859a4.png)




準備
---------------------------------

Electronに必要な準備は割愛します。
インストール等は下記を参考にしてください。
http://qiita.com/Quramy/items/a4be32769366cfe55778

今回必要なもの
・[jquery-1.11.3.js](http://jquery.com/download/)
・[jquery-ui.js](http://jqueryui.com/download/)
jQuery公式からダウンロードして必要なファイル(上記２ファイルのみ)を用意してください。

ファイル構成

```
todo/ action.js
      main.html     
      main.js
      package.json
      style.css
      jquery-1.11.3.js
      jquery-ui.js
```
todoフォルダの中に使うファイルをすべて配置してるだけです。



コード
---------------------------------


```package.json
{
  "name": "todo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

```
クライアントはjQueryで実装しています。
怪し箇所が何箇所かあったりします、、、、


```js:action.js

var $ = jQuery = require("./jquery-1.11.3");	
var WW = jQuery = require("./jquery-ui");	
var remote = require('remote');
var dialog = remote.require('dialog');
var browserWindow = remote.require('browser-window');


$(function(){

	$('#sortable').sortable();
	$('#sortable').disableSelection();

	var index = 0;
	
	// 追加処理
	$("#registTask").click(function(){

		// タスクが入力されているかのチェック
		if($("#inputTask").val() == ""){
			alert("タスクが未入力です");
			return ;
		}

		var strTask = $("#inputTask").val();

		$("#taskListTable").append($("<tr id='"+ index +"'></tr>")
			.append($("<td></td>").text(strTask))
		);

		// 削除処理呼び出し
		$("#" + index).on("click", index, function(){
			var hoge = this;
				var win = browserWindow.getFocusedWindow();
				dialog.showMessageBox(win, {
				title: '',
				type: 'info',
				buttons: ['OK', 'Cancel'],
				detail: '選択されたタスクは終了しましたか。'
				},
				// メッセージボックスが閉じられた後のコールバック関数
				function (respnse) {
					// OKボタン(ボタン配列の0番目がOK)
					if (respnse == 0) {
						$(hoge).css("text-decoration", "line-through");
						$(hoge).css("background-color","#a9a9a9");
						$(hoge).unbind("mouseover").unbind("mouseout");
					}
				}
			);
		})

		// 色変え処理
		$("#"+ index).on("mouseover", index, function(){
			$(this).css("background-color","#e0ffff");
		});

		// 色変え処理
		$("#"+ index).on("mouseout", index, function(){
			$(this).css("background-color","white");
		});
		index++;
	});
});




```

```js:main.js
'use strict';


var app = require('app');
var BrowserWindow = require('browser-window');

require('crash-reporter').start();

var mainWindow = null;

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


app.on('ready', function(){
	mainWindow = new BrowserWindow({width:520, height: 600});
	mainWindow.loadUrl('file://' + __dirname + '/main.html');

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

```

```html:main.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="action.js"></script>
	<link rel="stylesheet" href="style.css" type="text/css" />
<title>Todo Tasks</title>

</head>
<body>
<p><input type="text" id="inputTask" class="textCss" placeholder="タスク：(例)歯を磨く">
	<input type="button" class="rButton" id="registTask" value="登録" >
</p>
<div id="tasklistArea">
<table id="taskListTable" border="2" width="500">
	<thead>
		<tr bgcolor="#ffa07a">
			<td width="300" align="center">
				ToDo List
			</td>
		</tr>
	</thead>
	<tbody id="sortable">
	</tbody>
</table>
</div>	
</body>
</html>
```

```css:style.css

input.textCss {
	width:400px;
	height:20px;
	border-radius:5px;
}

input.rButton{
	width:50px;
	height:30px;
	background-color : #3cb371;
	color : white;
	border-radius : 5px;
}

```


動かしてみる
-------------------

```
 > electron .

```
ターミナルから実行すると画面が開きます。
一応、完了したタスクは消せたり、各行の順番入れ替えが出来たりします。
![todo1.png](https://qiita-image-store.s3.amazonaws.com/0/62857/ca456a2e-08de-cb3f-8065-1fc090330e91.png)