流行の技術でタスク管理ツール「TaskClear」を自作した

Taskclear

40日ぶりに自転車に乗ったら坂道で息切れしました。こんにちわ、A-takです。

自転車に乗らずにブログも更新せずに何をやっていたかというと、最近の流行の技術スタックでタスク管理ツールを自作していました。

何回かにわけてその話を書きたいと思います。今回は作り始めのきっかけとか、ざっくりどういう技術使ったかについて書きます。

タスク管理ツールを自作しはじめたきっかけ

私は仕事やプライベートのタスク管理をタスクシュートというタスク管理手法で管理しています。

タスクシュートとGTDとポモドーロと私

私はタスクシュートを実践するためにTaskchute Cloudというツールをサービス開始当初から愛用していたのですが、最近になって問題が起きていました。

それは「動作が重い」という問題です(今は改善されているようです)。サービス開始当初は特に問題が無かったのですが、近頃は割り込み登録したはずのタスクがそうなってなかったり、終了したはずのタスクに終了時間が入ってなかったり、常日頃使うソフトなのにつらい状況になっていました。

結局、今年の9月中頃に解約して、以前も使っていたWindowsで動くTaskchute 2と「たすくま」というiPhoneアプリに出戻りすることに。

しかし、Taskchute2はExcelのマクロを駆使したアプリで、これを起動していると他のExcel作業中に定期的にTaskchute2に画面が切り替わるという煩わしいことも起きていました。

それにExcelのアプリなので外では使えません。なので仕事中はTaskchute2、プライベートは「たすくま」という風に使い分けていましたが、使い分けも面倒になっていました。

初めてのフロントエンド開発へ挑戦

タスクシュートのツールは常に起動していて「記録」を残していくような使い方なので、ここがクイックにできないとストレスになります。それにいろいろと自分好みにタスクシュートを実践したいという思いも出てきました。

こうなると自分で作るしかないということで、いろいろ情報を集めてみました。

WindowsやiPhoneのアプリを作り込むのは面倒なのでWebサービス。使いやすさが大事なのでGMailなどのようにJavascriptを駆使して動くSPA(Single Page Application)で。

調べてみるとSPAを作るフレームワークとしてはAngularやReactがメジャーとのこと。Angularは難しいらしいのでとっつきやすいというReactの勉強をし始めたけど、Reactでも正直難しかった。

c#でローカルアプリ作成はやっていたけど、Reactはなんというか別世界でした。そもそもJavascriptもまともに使った事無いし😅。

そもそもプログラム自体も最近は全然書いていません。下手するとまともにプログラム書いたのは10年ぶりぐらいかもしれません。

めげずにいろいろ情報を集めてみるとVue.jsというフレームワークが後発でよくできているとのことなので、調べてみると確かにこれはまだシンプルそう。

そんなわけでVue.jsで開発する事にしました。

サーバーとの通信はどうするの?

久しぶりに技術書購入しました。Kindleで。

かなり親切に書いてある本であるとは思うけど、フロントエンド開発初心者からするとこれでも難しい。サンプルそのまま打ち込んでるつもりが動かない事も😅

それにクライアントの動きばかりでサーバーと通信するところとかがほとんど書かれていない。実は他の本も同じような感じでサーバー側については触れられてない本が多い(フロントエンド向けというのはわかってるけどさ)。

タスク管理ツールはサーバーへのデータ保存は必須なので、ひたすらローカルでしか動かないソフトを写経のようにプログラムしていくのはだんだんつらくなってきました(あとになって、この本はド初心者を超えてから役に立つとわかった)😀

Vue.jsとFirebaseで作るミニWebサービスがド初心者にはすごく良かった!

どうもこのままではサーバー側でどうするかというところも含めて全体像が見えず、当然ゴールも道しるべも見えず、一向にモチベーションが上がらなかったので、サーバー側に言及した本を探しているとこんな本を発見。

FirebaseというGoogleが作っているモバイル向けのバックエンドサービス(mBaaS)をつかってWebサービス立ち上げようぜ!という本です。

Firebaseについて調べてみると作ったWebアプリの展開(Hosting)からデータベース(Realtime Databse / Firestore)や認証などがセットになっていてクライアントからJavascriptで簡単に操作できるものだとわかりました。node.jsのサーバー立ち上げてAPIを一生懸命作ろうと考えてましたが、これなら簡単そうと言う事で本を買ってお勉強。

この本がすごくわかりやすくてよかった。

説明は非常に簡潔で、章を進めていく度に機能を追加していくんだけどサンプルが毎回ソースがほぼ全行掲載されているんですね。この手の本ってページの関係でしょうが変更箇所部分だけが記載されていて、初心者はその変更箇所がどこかわからなかったりする事になるんですよね。で、うまく動かなくて挫折するというね。

この本についてはほとんどひっかかることもなく、サンプルのマークダウンエディタを作り上げる事ができました。やはり一つ何かを作り上げるのが一番勉強になりますね。

#Webサービスで作る本のハッシュタグで検索すると、この本で勉強している人のつぶやきがみれますし、著者の方からもコメントいただけたりして励みになりますよ😁

フィージビリティスタディーでプロトタイプを作成

フロントエンド開発は初なのでフィージビリティー(実現可能性)もよくわからない。なので、まずはとりあえずいろいろ試して模索しながら作ってみる事にしました。

githubにプロジェクト作って記録のこしてみました。

a-tak/vue-training

Contribute to a-tak/vue-training development by creating an account on GitHub.

GithubにProjectというTrelloのような「かんばん」方式の画面があるので開発中に気づいたタスクやぶつかった問題はここにがんがん登録して、追加したい機能ややりたいこともここに登録した。

ならんだ課題の一覧から今一番やりたいことを決めて、解決したらカードを移動するという事をやってみた。開発にテンポが出てきてこれはいい。

この頃になってくると最初に買った「基礎から学ぶ Vue.js」や独習Javascriptをリファレンス的に参照して開発を進められるようになりました。

Javascript独特ですね。c#の感覚で触ってるといろんな罠にはまりまくる。

結局、メインのタスクリストの部分は3回ぐらい実装を変えて、DB構造は一回全面変更した。

Firestoreはマインドチェンジが必要

NoSQLって初めて使ったんですけど、RDBのような感覚だと設計間違えますね。

どっちかというとDBというよりファイルシステムに近い。コレクションがフォルダで、ドキュメントがファイル。

今回のツールではユーザー → タスクという階層にしてログインしたユーザー毎に閲覧できる範囲がきっちり切り分けされるようにしています。

タスクのデータは一日が1ファイルみたいなイメージでファイルの中にその日のタスクが配列でつまっているような構成にして、一日分をまるごと読み書きするような設計にしていて画面表示は配列ループして表示するだけになっていて最初はこれが楽だったんですが、これはちょっとやりすぎました😀

こうすると配列の中のオブジェクトのリピートIDが同じタスクを一括検索するとかができなくて、結局1ドキュメントを1タスクという無難な作りにして、タスクコレクションの中にフラットにデータを突っ込みました。だからすごい数のドキュメントが一つのコレクション中に入ってるんですが、これでいいと思っています。

そうそうINNER JOINもできないので、ビュー用のデータも必要に応じて用意して、データ書き込み時にビュー用のデータも更新する感じになると思います。マテリアライズドビューを自分で作る感じです。

Typescriptも導入

しばらく素のJavascriptでいろいろ試していましたが、あまりにもJavascriptが柔軟すぎて誤った型のデータを変数に突っ込んだり、想定外の値が入っていてうんともすんとも言わないみたいな事にハマる事が多くなったのでTypescriptも導入しました。

Typescriptは素のJavascriptを拡張するAltJSといわれているものの一つで、こいつを入れるとコンパイル時点で高度な型チェックをやってくれるようになります(そして素のJavascriptにコンパイルされる)。

感動したのがオブジェクトがundefinedやNullになりそうなところでチェックもせずにオブジェクトを操作しようとするとエラーにしてくれるところで、if文入れてNullチェックを入れるとコンパイル通るようになります。

特に感動したのがこれ↓。1–4行目のコードはundefinedのチェックをして大丈夫そうですが、このコードはエラーになります。

具体的には2行目でdoc.data 関数の結果がundefinedでないかをチェックしていますが、3行目のコードでdoc.data().idでundefinedになるかもしれないということでTypeScriptがエラーにします。

doc.dataは関数なので必ずしも同じ値が返ってくるとは限りません。だから、いくら直前で関数の戻り値がundefinedじゃないと確認したところで次の行でもundefinedにならないとは限りません。だからTypeScriptはエラーにしてしまうのです。

これは6行目以降のコードのようにすればエラーは出なくなります。

doc.data関数の戻り値を一旦変数に入れてますね。これで値は固定化されるのでundefinedにならないことが確定します。

いやーすごい。これ、他の言語だとうっかりやっちゃいそうな間違いだよな。

TypeScriptについては以下の本で学んだ。一日で余裕で読める分量で程良いし、これで十分。

見た目はVuetify

Taskclear2
Vuetifyは手軽に見た目をよく出来るので便利

デザインはVuetifyというVue.jsでGoogleのマテリアルデザインを実現するライブラリを使いました。

Vue.js Material Component Framework - Vuetify.js

Vuetify.js is a reusable semantic component framework for Vue.js. It aims to provide clean, semantic and reusable components.

コレ使うだけで見た目はかなりよくなりましたし、操作性もよくなりました。しかも簡単に。

アイコンはオシャレなものが多数最初から用意されているし、ボタン押したときに波紋が広がったりして操作に対するフィードバックわかりやすくて、すごくいい。

Taskadd
フローティングするボタンも一発

そんなこんなで自作のタスク管理ツール完成

スマホにも対応
スマホにも対応

一旦、普段づかいできるぐらいにできあがりました。全然まだ機能足りないですけどね。

だいたい今の段階で100時間程度かかったかなと思います。まったくフロントエンド開発が分からない状態からはじめているので慣れている方ならば、もっと早く作れるのではないでしょうか。

Githubのリポジトリはこちらです。

a-tak/taskclear

Contribute to a-tak/taskclear development by creating an account on GitHub.

サンプルサイトはこちらです。あくまでサンプルなのでこちらの都合とか間違いでデータ消したりする事もあり得るので、自分で使いたい方はFirebaseアカウント作って自分で設置してください。無料枠でたぶん十分使えるはず。ちなみに全然ベータ版です。

Taskclear

null

今の所の機能

リピート機能にも対応
リピートタスク機能にも対応。日付進めると裏で先のタスクが作られていきます。マインクラフト方式😀
  • Googleアカウントでログイン
  • 一日のタスクを一覧で表示する機能
  • タスクの開始・終了を記録する機能
  • 未来一週間の見積時間を表示する機能
  • リピートタスク機能(今の所曜日指定のみ)
  • 割り込みタスク機能(何のタスクを実行中に他のタスクを実行すると実行中タスクを中断して消化してない時間が見積時間にセットされた新しいタスクが追加されます)
  • タスクの日付変更(先送り)機能
  • 各種ショートカット(T=トップへ, D=次実行予定のタスクへ, A=タスク追加, ESC=入力のキャンセル)
  • PC・スマホ対応

今後開発したい機能

  • 本日の帰宅可能時間の表示
  • セクション機能(今だと睡眠時間も見積に入って帰宅時間がわからないので、このセクションまでのタスクが終わるまでの時間を出したい。リピートタスクの並びもランダムで大変だし)
  • タスクの実行予定時間登録
  • プロジェクト機能(GTDの計画モードのような見え方が欲しい。タスクシュートだけだと案件毎のステップが分からなくなるので)
  • ポモドーロ機能(せっかく開始ボタン押すし)
  • アンドゥ機能(スマホだと間違ってよくタスク消しちゃう)
  • ドラッグ&ドロップでのタスク並び替え
  • サイトのアイコン(今はVue.jsの標準のまま😅)
  • タスクおよびプロジェクトのメモ機能
  • ユニットテスト

まだまだ開発していくぞー

ゆくゆくはタスクシュート + GTD + ポモドーロ + かんばんが融合したようなタスク管理ツールにしたい。

一人でいろいろやらないいけない事が多いので、先々の予定がどれだけ埋まってるか確認したり、冷静にみれるようにしたいのよね。

今回、フロントエンド開発を試してみていろいろ引っかかった事とか気づいた事もあるので、また別のエントリーで続きを書いてみます。

関連記事はCMの下をご覧ください

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください