皆さま、こんにちは

ブレイブソフトのシローです。

仕事としてサーバサイドの保守がメインになりつつ、「あれ?最近、 開発やってなくね?」ということで、
開発力を取り戻すことを目的として、とりあえずTodoアプリを作ることにしました。
その際に、色々試行錯誤したよ、という内容です。

Todoアプリとは?

Todoアプリとは、簡単にいうと「タスク管理を行うツール」です。
例として、Trelloみたいものがあります。

なぜTodoアプリ?

実際のサービスの開発では、「要件定義」や「画面設計」だの開発以外に考えることが多いです。
その点、Todoアプリの開発は機能や画面設計がとてもシンプルです。

Todoアプリの主な機能は

  • タスクを追加する
  • タスクを編集する
  • タスクを削除する
  • タスク一覧を表示する

くらいですし、

画面も基本的に一つで済みます。

なので、サービスの考案などに多くの時間をかけず、開発に注力するには向いていると思います。

また同時にフロントエンド、バックエンド、デザインについて満遍なく触れますので、総合的な開発力が身につくと思っています。

作ったもの

先に、今回作ったものを見せようと思います。
todo-notifier
一応プロジェクトのソースコードはこちらです。

機能はごく普通のTodoアプリ・・・にするのはちょっとシンプルすぎるので、
時間になると、「そろそろ期限切れだよ!!」みたいな通知をしてくれる機能をつけてみました。

要件定義

シンプルです。

  • タスクを追加する
  • タスクを編集する
  • タスクを削除する
  • タスク一覧を表示する
  • 期限切れになる前に通知する時間(30分前とか)を設定する
  • タスクが期限切れになりそうなら通知する
  • タスクの期限が切れると再通知する

画面設計

1ページだからすごく楽です。
draw.ioでも使ってささっと、ドラフトを作りました。
todo-notifier-draft
実際のアプリとは色々と違いますが、大体のイメージさえ出来ていればいいんです。

実装方法

まず、

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

index.html

これらのファイルを同じ階層に置いて”electron .”と実行すると実際にアプリケーションが立ち上がる用になります。

フロントの実装

index.htmlからはbundle.jsを読み込んでいます。
このファイルはsrc以下のファイルをwebpackで圧縮して出力したものです。
フロントの実装はVue.jsで行いましたが、一からデザインを作るのも面倒なので、bootstrapみたいなElement-uiという、
コンポーネントを利用して実装しました。

/src/vue/app.vue

通知の実装

“node-notifier”という、node.jsによる通知機能のモジュールを使いました。(モジュールについて詳しくはここ)
これを使って、期限切れそうになると通知する用にします。

notifier.js

これをタスクが切れそうなタイミングで発火するようにします。
タスクの締め切り時刻を監視して、締め切り前、締め切り後になったらnotifier
/src/vue/js/app.js

通知の様子

期限切れそうになタスク様子
期限切れそうになったタスク
アプリの表示
アプリの表示

最後に

新しい技術を調べて実装経験を積むためにも、Todoアプリの作成はおすすめです。

★部員募集中★

ブレイブソフトは現在エンジニアを募集中です。ご応募お待ちしてます!