こんにちは、ぷぐまです
この記事は、私たち16班が先日 6/15(土) - 6/16(日) に開催された 2024年度春ハッカソン sponsord by Engineer Guildに参加したことについてのものです
制作物紹介
今回私たちが制作したのは、この記事のタイトルにもある「tasQ」というWebアプリケーションです。部内で利用されているチャットツール traQ (読み: とらっく) と同じように、こちらも「タスク」と読みます。その名の通りタスク管理アプリで、部内のタスクをグループごとに管理できます
後述の通り、部内サービスとの連携を前提としています。そのため、一般の方が利用できるものではありませんが、リポジトリ自体は一般公開されています。ご興味のある方はご覧ください！
https://github.com/traP-jp/h24s_16
traP-jp「tasQ」の特徴
目玉となる機能は、ずばり「部内チャットツールtraQ との連携」です
このアプリは部内チャットツールtraQ内でbotとして常駐もしています
この画像のようにメッセージを紐づけた投稿とともにbotをメンションすると…
このように曜日を選択できるようになり…
これを選択すると…
こんなふうにリマインドの時間も設定できるようになるという感じです
このようにしたのは、部内で外部ツールを用いたタスク管理がうまくいっていないという問題があったからです。タスク管理ツールを導入しても、それにタスクを転記して管理すること自体が手間で、タスクが登録されても担当者や期日が空ということも頻繁にありました。このような現状を打破するために、traQから簡単にタスクを登録できるツールとしての開発を行いました
使用技術
- フロントエンド
- Vue3 + Vite v5 + TypeScript
- バックエンド
- Python + Fast API
- データベース
- Maria DB
フロントエンドはtraP内でよく使われるものですが、バックエンドが今回はPythonで書かれていました。Pythonライブラリ特有の問題にもそこそこ引っかかっていて、フロントエンドを主に担当していたぷぐま視点だと、結構大変そうでした…
制作の流れ
顔合わせ・初回集会
ハッカソン運営よりチームが公表されたのが 6/8(土) で、その翌日の 6/9(日) に行いました。「顔合わせ」とか書いてますがDiscordでやったので、実際に顔を合わせたわけではないです()
このときは、開発の方向性や役割分担、準備期間に何を行うかの確認を行いました
準備期間
制作物の方針が決まれば、それに合わせてどのようなものを作るかの詳細を詰めていきます
要件定義 (担当: ぷぐま)
簡単にタスク管理できるアプリケーションということで、使い心地はかなりこだわりました。特にtraQから追加する場面では、スタンプを選択するだけで簡単にタスクの概要を入力できるようにしました
フロントエンドデザイン (担当: ayana)
@Pugmaさんに伺ったデザインの際に気をつけること・ポイントや、既存のwebアプリUIを参考にしながら、Figmaを使ってデザインしました。最初にアクセントカラー（深めの水色）を決め、その雰囲気に合うように他の色やパーツを何パターンか作り、後からしぼっていくというやり方で進めました。
バックエンド・データベース設計 (担当: ゑむたくさん)
データベースはとにかく設計した要件定義を再現できることを確認しながら設計し、@trastaさんや@Pugmaさんにレビューしてもらいながら仕上げていきました。
バックエンドは大まかにAPI仕様を作った後、フロントエンドとバックエンドの双方で実装が複雑にならないように適宜修正を入れていきました。
ハッカソン当日
ここまで準備してきたものを一気に作り上げていきます。そして本当の意味での「顔合わせ」もこのタイミングでした()
開発時間はおよそ30時間でかなり短かったですが、なんとか最終発表時に実演できるくらいにはなりました。主に経験者のぷぐま・ゑむたくさん・trastaさんの3人はフロントエンドとバックエンドのレビューや、空いた時間で細かい部分の実装を、今回が初めてのWeb開発のayanaさんとAsterくん、ekiくんには大まかな機能の実装を主に担当してもらいました。
チーム最年長のとらすたさんは2日連続で遅刻したため、それぞれ弁明をissueにてしていただきました()
https://github.com/traP-jp/h24s_16/issues/15
https://github.com/traP-jp/h24s_16/issues/64
traP-jptraP-jp各メンバーのコメント
最後に、今回の参加メンバーのコメントでこの記事の締めとします
ここまでお読みくださってありがとうございました！！！
@Pugma
今回のハッカソンでリーダーを務めました。ぷぐまと申します
この記事のここまでの部分をだいたい書きました
あとは、今回のbotのために新しく AM / PM のスタンプの作成もしました
全体を通しての感想ですが、新入生つえーって感じです。僕も去年の春ハッカソンが初めてのWebアプリケーション開発でしたが、そのときの自分よりも結構色んな実装をやっている印象でした。特にデザインは、ちょっと自分が考えていることを伝えるだけでこんなにモダンなものを作れるのか！とびっくりするくらいでした
初めて後輩と一緒に開発をしたわけですが、自分もマネジメントの勉強になりました。来年もこんな感じで新入生がWebアプリケーション開発に親しむ手助けをできればと思います
@ayana
デザインとフロントエンドを担当しました。ハッカソンもweb開発も初めてだったので、想定していなかったところで時間がかかってしまったりと、すんなりとはいかない部分もありつつでしたが、それも含めて楽しかったです。今回のハッカソンで、自分が思い描いているように実装できないもどかしさを強く感じたので、今後開発を通して少しずつ技術力をつけ、実装の幅を広げていきたいです。個人開発では体験できない貴重な経験ができたので本当に参加してよかったです。ありがとうございました。
@eki
初めての「実際に使えるものを作ろう」という経験です。これまでプロジェクトの開発はそんな感じですーというのもわからなかったが、先輩たちと一緒にコードを書いたりドキュメントを読んだりして何とか終わらせました。私のコードは汚いと思いますけど先輩たちも優しく助けてくれました。うまく動くものを作るには大変だと感じて、今でもよくわからないことたくさんありますけど大変勉強になりました。とても楽しかったんで、これからのtraPでの活動やイベントを期待しています。
@trasta
今回はTAじゃなかったのでbot作りました。後輩にだいたいこういう感じで開発すすめるんだよ～ってのが伝われば嬉しいなと思って毎回参加しているので、うちの班のメンバーも含めてみんな楽しんでもらえてればいいな～って感じです。
@mtaku3
今回が初めてのハッカソンで、バックエンドを担当しました。普段はTypescriptを書いているんですが、今回のハッカソンではPythonを使ったので、いつもとなく新鮮な気持ちでコーディングできて楽しかったです。ハッカソンの雰囲気も味わえてまた参加したいと思いました。ただ、Pythonはもうお腹いっぱいかもしれません（笑）
@Aster
今回が初めてのハッカソンで、フロントエンドを担当しました。自分は初心者で0→1講習会の内容も消化しきれてないほどでしたが、なんとかページのデザインだけは実装することができました。このハッカソンで開発の雰囲気を感じられて、参加してよかったなと思っています。先輩方も調べながらやるんだな、というのと2日間コード書きっぱなしという感じで大変そうだなというのが感想です。ぷぐまさんには色々迷惑をかけてしまい申し訳なかったですが優しく対応してくださいました。ありがとうございました。
