自己紹介
初めまして、SymXでエンジニアをしているsktnです。
普段はFirebaseを使ったWebアプリ開発やNestJSでのバックエンド開発をメインで行っており、
時折VueやVuetifyを使ったフロント開発をしています。
今回、初めて自社開発でのサービスをリリースしたので、
告知と技術的な部分をメインにした記事を書きました。
チームで進めていったので、ほかのメンバーの視点からの記事も出せたらと考えています。
初投稿なので至らぬ点もあるかと思いますが、最後まで読んでいただけると嬉しいです。
Todorip とは？
「トドリップ」と読みます。トドみたいでかわいいですね(笑)🦭
Todorip は他のタスク管理サービスとは異なり、画面上にカードを自由に配置することができるサービスです。
特徴
-
ドラッグアンドドロップでカードを自由に配置、新感覚のレイアウト
- カンバン形式でもリスト形式でもない、新しいレイアウトです
- 縦横きれいに並べることも、関連ごとに固まりを作ることも、とにかく埋めるように適当に置くこともできます！
-
キーボードからの入力に特化
- タスクを作るときはタイトル入力欄ですべての情報を入れられます
-
@230730などのように入力することで日付を設定できます
※マウスを使っての日付選択も可能なように実装を進めています！ - タグを設定するには
#tag1 #tag2などのように入力することで設定ができます
-
- さらに
ctrl + enterでタスクを追加し、新たなタスクを追加していくことができます
- タスクを作るときはタイトル入力欄ですべての情報を入れられます
なぜ作った？
プロジェクト・タスク管理ツールはこれまでも使っていましたが、
自分自身が、複数プロジェクトにまたがるタスク管理に課題を感じていたからです。
色々な開発タスクを持つようになり、
- プロジェクトごとにタスクを入れる場所が違う
- それらを平行にこなしていこうとすると、「自分がやるべきこと」の単位で一覧できない
- そのうち埋もれていくタスクたちが出てくることもある
- カンバン形式やリスト形式だとタスク同士の関連性がいまいちよく見えない
- 次に何をする？同時にやらないといけないタスクは何？が漏れてしまう
- 一時期はフィルターや階層構造を作って頑張ってみたが、今度はタスク追加のハードルが上がってしまって本末転倒になってしまった
というように
- タスクの量が増えてきてどこに入れたタスクか 「忘れる」
- 次に何に着手するかが見えづらくて 「迷う」
- 管理の方法を工夫していくと、手数が増えて面倒になり 「続かない」
が課題となっていました。
そんな課題を解決するために
- 一画面でやるべきことがすべて見えるので 「忘れない」
- 関連性ごとにまとまりを作れるので 「迷わない」
- 作法が多くなく、自分流のやりかたで管理できるので 「続く」
にスポットを当てたものを作ってみようと思ったのがきっかけです。
サービス名の Todorip は「コーヒーを作るときのように、頭の中からやることをカードにして落としていく」というところで "Todo"と "drip" をかけ合わせて作りました。
こんな人におすすめ
- マルチタスクを抱える事が多い人
- プロジェクトごと、カテゴリーごとにまとめることで 1 画面内にタスクを集約できます
- タグを付けておくこともできるので、カテゴリーに関する情報などを入れられます
- 情報をまとめるのが苦手な人
- タスクの置き場は 1 画面だけなので「どこにどのようにまとめるか」で迷うことはありません
- 「レイアウト」からアプローチすることで自分のやり方に合った管理方法を見つけることができます
- 機能を覚えていくのが大変だと感じる人
- タイトル(と日付)を入れてあとはカードを動かすだけの機能のため、覚える量が多くありません
使用技術と開発について
ここからは Todorip を構成する技術要素や開発全般についてお話しします。
使ったもの
- Vue v3.3.2
- pug使用
- Vuetify v3.3.2
- Pinia
- Firebase
- authentication (Google 認証)
- firestore (データ保管)
- hosting (ページ公開)
開発メンバー
3名で取り組みました。
- 実装メイン：2名
- つよつよな先輩と自分
- マーケティング・素材作成メイン：1名
メインの領域はある程度決めていましたが、3名でミーティングをしつつ進めていくことを主体としていました。
やるべきことを書き出していき、できる人ができることを進めていきました。
開発期間
- 6月末にデザイン決定、実装開始
- 7月13日にプロトタイプリリース
- その後微調整と機能調整を行い、7月26日にβ版リリース
こだわったところ
タスクカードのドラッグアンドドロップ
マウスのドラッグアンドドロップでカードを移動できる、一番の特徴の部分です。
利用する上でかなりの頻度で触る部分になるので、心地よさに気を配りました。
具体的には、カード移動の動作が自然に見えるよう、影やアニメーションをつけています。
実装時にカード要素に対してD&Dをしたことで、たまに追従が外れます。
次バージョンに向けて要改修部分です。
新しい学びやチャレンジがあるのもサービス開発の魅力ですね。
タイトルのパース
Todoripのタスク作成は1行のタイトル入力で完結します。
- 通常の文字入力：タスク名
-
@YYMMDD：日付 -
#xxx：タグ
のように入力欄に指定のprefixをつけることで日付とタグを設定可能です。
メニュー
できるだけカードを置く領域を広く確保したいこともあり、画面上の表示は必要最低限に絞りました。
ログインやフィードバックなどのメニューは、タスク追加ボタン兼メニューアイコンにカーソルをホバーすることで表示されます。
コーヒーを送るカード
開発者メンバーがコーヒー好きということもあり、所々にコーヒーの要素が入っています。
「自分たちが作ったものがどのくらい応援してもらえるか」を見るために、コーヒー送信カードを設置しました。
これは、お金の送信ではなく「いいね！」的なニュアンスでリアクションを送信できる仕組みです。
杯数を指定して送れるような仕組みを想定していたのですが、そのままカウンターで指定するのも面白くないと思い、Vuetifyのv-ratingを使ってコーヒーを淹れている感じを表してみました。
v-rating(length='5', hover, empty-icon='mdi-coffee-outline', full-icon='mdi-coffee-maker')
v-ratingのデフォルトアイコンは星マークですが、empty-icon と full-icon をそれぞれ指定することでアイコンの差し替えが可能です。
加えて、hover 属性を指定することで、アイコンに動きをつけています。
皆さまからのコーヒーを心からお待ちしております！
終わりに
Todoripは初の自社開発サービスです。
利用者さまからのご意見も踏まえつつ より良いものにしていきたいと思っています。
ぜひ使っていただいたご感想などをアプリ内のフィードバックやアンケートからお送りいただけますと幸いです！
Discussion