皆さま、こんにちは
ブレイブソフトのシローです。
仕事としてサーバサイドの保守がメインになりつつ、「あれ？最近、 開発やってなくね？」ということで、
開発力を取り戻すことを目的として、とりあえずTodoアプリを作ることにしました。
その際に、色々試行錯誤したよ、という内容です。
Todoアプリとは？
Todoアプリとは、簡単にいうと「タスク管理を行うツール」です。
例として、Trelloみたいものがあります。
なぜTodoアプリ？
実際のサービスの開発では、「要件定義」や「画面設計」だの開発以外に考えることが多いです。
その点、Todoアプリの開発は機能や画面設計がとてもシンプルです。
Todoアプリの主な機能は
- タスクを追加する
- タスクを編集する
- タスクを削除する
- タスク一覧を表示する
くらいですし、
画面も基本的に一つで済みます。
なので、サービスの考案などに多くの時間をかけず、開発に注力するには向いていると思います。
また同時にフロントエンド、バックエンド、デザインについて満遍なく触れますので、総合的な開発力が身につくと思っています。
作ったもの
先に、今回作ったものを見せようと思います。
一応プロジェクトのソースコードはこちらです。
機能はごく普通のTodoアプリ・・・にするのはちょっとシンプルすぎるので、
時間になると、「そろそろ期限切れだよ!!」みたいな通知をしてくれる機能をつけてみました。
要件定義
シンプルです。
- タスクを追加する
- タスクを編集する
- タスクを削除する
- タスク一覧を表示する
- 期限切れになる前に通知する時間(３０分前とか)を設定する
- タスクが期限切れになりそうなら通知する
- タスクの期限が切れると再通知する
画面設計
1ページだからすごく楽です。
draw.ioでも使ってささっと、ドラフトを作りました。
実際のアプリとは色々と違いますが、大体のイメージさえ出来ていればいいんです。
実装方法
まず、
Web系にするか、ネイティブ系にするか
Webで作成すると誰からもアクセスされちゃうので、認証機能が必要になる。そして、セキュアにするほど認証は面倒・・・
また、オンラインでなくても動作したいという考えのもと、ネイティブ系になりました。
次
デスクトップにするか、スマホアプリにするか
僕は使える言語がWeb系に特化しているので、スマホアプリならCordova、
デスクトップアプリならElectron
になるんですが、「スマホでタスクチェックはやらないかな」という結論のもと、Electronでデスクトップアプリを作成することにしました。
Vue.jsも使ってみた
今までフロントはjQueryばかり使ってきたのですが、
フレームワークを利用した開発を積んで置けば、
可能性広がりそうだなと思い、Vue.jsを利用してみようと思いました。
また、jsでの開発を快適に行うために、babelやwebpackも利用しました。
データベースをどうするか
アプリケーションから外部のデータベースにアクセスするよりも、
アプリ内部に組み込めるような形式でデータベースを利用したい。
また、複雑な機能を持たないため、RDBにするよりも、json形式でデータを更新できるNoSQLが良いと思い。
NeDBを使うことにしました。（使い方はここ見ると良いカモです。)
以上をまとめると、
- ネイティブのデスクトップアプリ
- ソフトウェアフレームワークでElectronを使用
- フロントサイドのフレームワークでVue.jsを使用
- データベースはNeDBを使用
となりました。
プロジェクト構成
結果としてこうなっています。
|--data.db #NeDB用ファイル
|--database.js #NeDBのコントローラ
|--index.html #アプリケーション表示用HTML
|--js
| |--bundle.js #アプリケーションが利用するwebpack圧縮後のjsファイル
|--main.js #Electron起動ファイル
|--node_modules #モジュール群
|--notifier.js #通知用コントローラ
|--package.json #npm 設定
|--parametor.json #アプリ内変数
|--setting.js #アプリ内変数のコントローラ
|--src #フロント用の開発ソースファイル群(webpackで圧縮されてbundle.jsになる)
| |--app.js
| |--vue
| | |--app.vue
| | |--css
| | | |--header.css
| | | |--style.css
| | | |--task.css
| | |--js
| | | |--app.js
|--webpack.config.js #webpack設定ファイル
実装
アプリケーションの実装でコアとなった部分についてです。
Electronの起動
何はともあれ、Electron実行しないと始まりません、起動用スクリプト: main.js,レンダー用ファイル: index.htmlに以下を記述します。
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const electron = require('electron') const path = require('path') const app = electron.app const BrowserWindow = electron.BrowserWindow let mainWindow = null app.on('ready', () => { mainWindow = new BrowserWindow( { width: 1200, height: 800 } ) mainWindow.loadURL(path.join('file://', __dirname, 'index.html')) mainWindow.isMinimized() }) app.on('window-all-closed', () => { app.quit() }) |
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!doctype html> <html> <head> <meta charset ="utf-8" /> <title>TODO Notifire</title> <link rel="stylesheet" href="./css/style.css" /> </head> <body> <div id="app"> </div> <script src="./js/bundle.js"></script> </body> </html> |
これらのファイルを同じ階層に置いて”electron .”と実行すると実際にアプリケーションが立ち上がる用になります。
フロントの実装
index.htmlからはbundle.jsを読み込んでいます。
このファイルはsrc以下のファイルをwebpackで圧縮して出力したものです。
フロントの実装はVue.jsで行いましたが、一からデザインを作るのも面倒なので、bootstrapみたいなElement-uiという、
コンポーネントを利用して実装しました。
/src/vue/app.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<template> <div> <section id="header" style="background: 'gray'"> <h1>TODO Notifire</h1> <el-button id="add-new-task" v-on:click="addNewTask()">New</el-button> <span>Notify Time: </span> <el-time-select v-model="notifyInterval" v-bind:picker-options="{ start: '00:00', step: '00:15', end: '23:45' }" v-on:change="changeNotifyInterval()" placeholder="Select notify time"> </el-time-select> </section> <section id="content"> <ul id="task-list"> <li v-for="(task, index) in taskList"> <span v-bind:style="{ color: task.statusColor}">{{ task.statusText }}</span> <el-input class="task-name" type="text" v-model="task.name" v-on:change="changeTaskName(index)"/> <el-date-picker v-model="task.limitDateTime" v-on:change="changeLimitDateTime(index)" type="datetime" placeholder="Select limit datetime"> </el-date-picker> <el-button type="primary" icon="el-icon-delete" class="remove-task" v-on:click="removeTask(index)"></el-button> </li> </ul> </section> </div> </template> <script src="./js/app.js"></script> |
通知の実装
“node-notifier”という、node.jsによる通知機能のモジュールを使いました。(モジュールについて詳しくはここ)
これを使って、期限切れそうになると通知する用にします。
notifier.js
|
1 2 3 4 5 6 7 8 9 10 |
const NN = require('node-notifier') module.exports = { notification: (title = 'Todo Notifier', message = 'Sample Notification') => { NN.notify({ title, message, wait: true }) } } |
これをタスクが切れそうなタイミングで発火するようにします。
タスクの締め切り時刻を監視して、締め切り前、締め切り後になったらnotifier
/src/vue/js/app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 |
import { remote } from 'electron' const notify = remote.require('./notifier') const notification = (title, message) => { notify.notification(title, message) } const database = remote.require('./database') const setting = remote.require('./setting') const taskStatus = { todo: { text: 'Todo', color: '#39ff64' }, notified: { text: 'Notified', color: '#ffec2a' }, expired: { text: 'Expired', color: '#ff2a2a' } } export default { mounted: function () { // 締め切り直前と締め切り後のタスクを通知する setInterval(() => { let notifyInterval = (() => { let strs = this.notifyInterval.split(':') let hours = parseInt(strs[0], 10) * 60 * 60 * 1000 let minutes = parseInt(strs[1], 10) * 60 * 1000 return hours + minutes })() for (let task of this.taskList) { if (!task.name || !task.limitDateTime) continue let now = Date.parse((new Date())) let limitDateTime = Date.parse(task.limitDateTime) let diff = limitDateTime - now if (diff < notifyInterval && diff > 0) { if (task.notified) continue let title = 'そろそろタスクの締め切り前です!' let message = task.name let doc = { expired: true, statusText: taskStatus.notified.text, statusColor: taskStatus.notified.color } database.updateData(doc, { _id: task._id }, false, (res) => { if (!res) { console.log('Failed to change mode') } else { task.notified = true task.statusText = taskStatus.notified.text task.statusColor = taskStatus.notified.color notification(title, message) } }) } else if (diff < 0) { if (task.expired) continue let title = '締め切りです!' let message = task.name let doc = { expired: true, statusText: taskStatus.expired.text, statusColor: taskStatus.expired.color } database.updateData(doc, { _id: task._id }, false, (res) => { if (!res) { console.log('Failed to change mode') } else { task.expired = true task.statusText = taskStatus.expired.text task.statusColor = taskStatus.expired.color notification(title, message) } }) } else { let doc = { notified: false, expired: false, statusText: taskStatus.todo.text, statusColor: taskStatus.todo.color } database.updateData(doc, { _id: task._id }, false, (res) => { if (!res) { console.log('Failed to change mode') } else { task.expired = false task.notified = false task.statusText = taskStatus.todo.text task.statusColor = taskStatus.todo.color } }) } } }, this.taskCheckInterval) . . . |
通知の様子
期限切れそうになタスク様子
アプリの表示
最後に
新しい技術を調べて実装経験を積むためにも、Todoアプリの作成はおすすめです。
Follow me!
投稿者プロフィール
- eventosの開発をやっているエンジニアです。
