feature image

2023年12月22日 | ブログ記事

2023冬Hackathon03班 -新感覚タスク管理アプリ「Yaranai」-

この記事はアドベントカレンダー2023、22日目の記事です
他の記事を見たい方は上のリンクをクリックしてね!

背景

ぷぐまです。今回のHackathon[1]ではリーダー(?)を務めました。
冬にもHackathonが開催され、そのチームが自由であることを知った僕は、部内SNSであるtraQでメンバーを軽く募集してみたところ、5人集まってくれたのが始まりだからですね。


  1. HackathonとはHackとmarathonをあわせた造語であり、主にデジタル系の技術者が短期で一つのアプリケーションを開発するイベントのことを指す。
    traPでは例年春と冬の2回開催されている。
    他にも企業が主体となって開催されている場合もある。 ↩︎

想定以上にメンバーが早く集まって調子に乗っている人の図↑

アイデア

さぁ、メンバーが決まれば次は「何を開発するか」を決めます。

僕は「新たな切り口でのタスク管理アプリ」を提案していました。
実はメンバー全員で案出しをしており、他にも面白そうだったので決めるのに難航したんですが…

なんと与えた選択肢から無作為に一つを選ぶbotにおまかせしたところ僕の案になることが決まりました!
(他の案が書かれてある部分に画像処理を施しています)

きっかけ

実は、今回のHackathonのアイデアを思いついたのは今年の春のことでした。
大学に入学してから課題やtraPのプロジェクトなど様々なタスクをこなしていく中で、従来のタスク管理アプリでは管理しきれない状況になってきました。
従来のタスク管理アプリにおいて僕が問題点だと感じたのは

でした。
でも、重いタスクが直近に迫ったときのことを想像してみてください。
「やりたくないなー」と思いながらも遊ぶことにも罪悪感を覚えて結局何もできない、そんな時間を過ごしたことはありませんか?
僕はこのような時間をなるべく減らすことこそがタスクを効率的にこなしていく上で重要であると考えました。

そこで僕が着目したのは タスクのこなしやすさ です!
モチベーションが上がらないときでもこなしやすいタスクから手を付け、時間の空いたときにちょっと先の重めのタスクに手を付ける。このような方針でタスクを管理できるアプリがあれば便利なのではないかと考えました。

仕様

制作が決まれば、次は仕様を決めていきます。
このあたりで「重いタスクを一度『やらない』こととする」というところからアプリケーション名"Yaranai"が決まりました。

もう一つ、決めることがあります。それは今回のHackathonのテーマであった「まる」と「かく」を満たすようにコンセプトをこじつけ決めることです。
そこで編み出された苦肉の策が…

う、う〜ん…
僕が決めておいて何なんですが、ちょっと…ダサいかもしれませんね…

フロントエンド

主な役割分担は以下の通りです

開発環境の整備

ぷぐまです。今回使用したフレームワークなどは(おおまかに)以下の通りです

これ以外にもGitHub Actionsを導入してビルドチェックを自動化したり、PWAアプリケーションに挑戦したりと色々やってみましたが、ややこしいので割愛させていただきます。

デザイン

オイルフです。今回のハッカソンのデザインはFigmaを利用してホームページのレイアウトの草案を組みました。
とは言っても、今回は完全に無から創造したわけじゃなくて、ramdosがある程度のデザインの草案的なものを持ってきてくれたので、その配置や最低限追加するべきボタンなどをチーム内の会議で決めた仕様に従って設計しました。
ホームページのフロントエンドの実装ですが、僕は主に APIとは無関係な表示やボタンの実装などを担当していました。基本的にFigmaのデザインに沿って、またFigmaの値を引っ張ってきてcssの実装をしたり、Vueにて諸々のページ間のつなぎこみなども一部実装しました。
タスクを割り振られた時からぷぐまから「直前期に待ち構えるであろうcss地獄は覚悟しといてね❤️」と言われましたが、実際少しcssの値いじるだけでレイアウトが全体的に想定と反する挙動をとったり、pwaなどの実装によってさらに画面表示がデスクトップとは異なっていたりと、実際過酷だったな〜と思いました。


  1. PWAとはProgressive Web Applicationの略である。iOSにおけるApp Store、AndroidにおけるGoogle Playストアなどからダウンロードする"ネイティブアプリ"とは異なり、Google ChromeやSafariなどで閲覧できるウェブサイトをアプリケーションと同様に扱えるようにしたものである。 ↩︎

  2. PaaS とは Platform as a Serviceの略である。自分で制作したアプリケーションをインターネット上で公開するための基盤となるソフトウェアのことである。 ↩︎

バックエンド

こまです。私はバックエンドのタスク推薦周りを実装しました。ので、ここでは推薦の仕組みについて少し詳しい話を書こうと思います。まず各タスクにユーザーの作業環境に関する状態を持たせ、とあるタスクについてタスク完了時点でユーザーはそのタスクの保持する作業環境の状態を満たすと仮定しました。そして1週間の各時間帯を類似度をもとにクラスタリングして、現在時刻が属するクラスターの時間帯にユーザーが各状態を満たすかのファジー値を求め、その情報とタスクそれぞれの締切などを利用しタスクの優先順位をつけるという実装をしました。また、クラスターの数が定まっていないほうが良いだろうということで、クラスタリングにはDBSCANを用いました。

Alt--erです。ぴなくんと同様にバックエンドの各種エンドポイントの実装を担当し,具体的に自分は'タスクを行う状況'というパラメタを扱うために必要な設定を行いました。また、これらのエンドポイントの実装が終わったハッカソン後半からは'yaranai'の各種操作をtraQ(サークル内SNS)上で行うことができるBOTの製作をこちらもぴなくんと同様に行いました。'yaranai'では設計の段階からtraQとの連携を行うことを想定しており、設計段階の仕様では各個人のクリップされた投稿にアクセス(Twitterのブックマークみたいな機能,他者からは見えない機密性の高い情報として扱われる)してタスクを自動収集することが挙がりましたが、認証周りの設定難易度が高かったことからコマンド打ち込み型の一般的なBOTと同様な方針で実装を行いました。

感想

最後に、各メンバーの感想でこの記事を締めとさせていただきます。

ぷぐま

今回のHackathonでの目標は、ズバリ「集団開発にあまり関わったことがない人に集団開発の楽しさを知ってもらうこと」でした。僕自身、プログラミングをがっつりし始めたのは大学に入学したときで、まだまだ集団開発の経験は乏しいです。しかし、今年度春HackathonやSysAd班、さらには前期プロジェクトで集団開発の経験を積むなかで、他の人と一緒になって開発することの楽しさに気づきました。
上記目標を達成するために、「快適な開発環境」を整えることを念頭に置いて活動しました。メンバーに競技プログラミングはしているが集団開発の経験があまりない人もいたので、Gitなど集団開発の要となる慣れない部分で壁を感じてしまわないように細心の注意を払いました。初めに完成品をデプロイ(手元のPCではなくサーバー上で動かす)設定を終わらせていたので、制作完了後のデプロイでのトラブルが起きなくてよかったです。
開発終了後には、「bot制作に興味持った」「開発楽しいわ」「SysAdの開発に参加してみようかな」などかなり好感触を得られたので今回の目標は達成できたみたいでかなり嬉しかったです。
次は来年度の新入生も交えた春Hackathon!それまでにもっと強くなるぞー うおおおおおおぉぉぉぉぉぉ

ぴな

競技プログラミングはしているが集団開発の経験があまりない人

僕はその1人です。(最近は競プロもできてないけど)
ぷぐま君とramdos君に助けられっぱなしでしたが、今回の冬Hackathonで学んだことがとても多く、バックエンド制作の貴重な経験になりました。

こま

競技プログラミングはしているが集団開発の経験があまりない人(2)

DBとgit周りでかなり助けてもらったので感謝しかないです。次の機会までにGitHub actionsあたりを勉強しようと思います。

o_ER4

オイルフと読むらしいです。(Null Reference)
春に入部してから半年程幽霊部員していたので今回が初のハッカソンでした。主にFigmaを用いたwebのデザインの草案を担当したり、ぷぐま君の手足となってフロントエンドの機能の一部の実装、配置の設定を行いました。

集団開発の経験があまりない人

の一人で、webアプリ開発もチームでの共同開発も初めてで、今までよりも不慣れな立ち回りとなって濃密な一週間になったかなと思います。誘ってくれたぷぐま君やメンバーの方々には感謝です。
実は本来自分はサウンド班に属しているので、今後のハッカソンはサウンド周りでも活躍していけるようになればいいな~と思います。

ramdos

バックエンドの環境構築・レビューや仕様の取りまとめを中心に担当したほか、フロントエンド/バックエンド双方の実装もちょっとだけ手を出してみました。
環境構築ではぷぐま君にならって最適なデベロッパーエクスペリエンスを提供できるように努めました。
慣れない立ち回りをしたこともあって迷惑をかけてしまった場面もありましたが、貴重な経験を積むことが出来ました。

Alt--er

滑り込みで開発チームに参加したハッカソンの時だけWeb系をやってる人

実はこのチーム、ぷぐまくんのtraQでの発言に反応したアクティブtraQ民によって結成されたチームだったりします(決してtraQ廃チームではない)。所属している班もバラバラだったり技術レベルもばらつきが大きい中チームとしてまとまりを保ち開発を進めていけたのは紛れもなくチームメンバー皆さんの尽力とリーダーの判断力のおかげです。自分もかなり介護してもらった方と自負している一方で、チームの一員としての役割も果たせたかなと思うところもしっかりあってなんかいい感じです(語彙力の消失)。

技術面についてはtraQBOTの開発に触れることができたのが大きかったかなと思っています。BOTの開発には以前から興味がありましたがなかなか情報を仕入れてみる機会がなかったため、これを機に仕組みをより理解しみんなのおもちゃ便利で楽しいBOTを作ってみたいなと思っています。目標は全23BtraQアクティブパーソン化です。

明日はYHz/イキリ虻さんの「traPlanning」、ぷぐまオイルフはやとろいどさんの「TOEICで875点を取って単位認定をしよう! 2023」kegraさんの「組織の柔軟性を活用する」の三本立てです!お楽しみに!!!

Pugma icon
この記事を書いた人
Pugma

23B / 普段はWebアプリケーション全般を幅広く / 競技プログラミングもたまにつまみ食い

Pina641 icon
この記事を書いた人
Pina641

23B アルゴリズム班とゲーム班に所属 ゲーム、謎解き、VTuber が好きです

comavius icon
この記事を書いた人
comavius

algoとheurとLinux

o_ER4 icon
この記事を書いた人
o_ER4

23B サウンド/グラフィック(blender)/SysAd(フロント) らしい

ramdos icon
この記事を書いた人
ramdos

23B。CTFをしている場合とそうでない場合があります。

Alt--er icon
この記事を書いた人
Alt--er

23B_ゲーム,Sysad,サウンド,アルゴに興味あり。 なんか色々頑張りたい

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2023年12月11日
DIGI-CON HACKATHON 2023『Mikage』
toshi00 icon toshi00
2023年12月13日
HgameOPについて語る
noc7t icon noc7t
2024年1月16日
2023年冬ハッカソン参加記 チーム2 20%電電 "Orbit"
onkyi icon onkyi
2023年12月25日
オレオレRustプロジェクトテンプレート
H1rono_K icon H1rono_K
2023年12月18日
GPU側でレイヤーブレンドする絵描きソフトの同期方法
tq icon tq
2023年12月16日
MacからWindowsを弄る方法?~RDP環境を作ろう~
Alt--er icon Alt--er
記事一覧 タグ一覧 Google アナリティクスについて 特定商取引法に基づく表記