挨拶

こんにちは チーム名をつけることを完全に忘れててどの様にブログを導入しようか困っている4班リーダーAlt--erです。

6/15、16の土日で行われた24年度春ハッカソンにおいて、4班は部内用のスライド一元管理サービス"Slide Center"を制作いたしました。

PDF形式のスライドをアップロードし、タイトルや説明文、ジャンルを設定することができます。また、一覧では登録されたジャンルでの絞り込みや検索も可能です。ハッカソンの発表スライドをアップロードしてくれた班もありました!

結果、「使い心地賞」を取ることができました。

動機

traPは部内共有ストレージを所有しており開発用の画像素材や集会スライド等の共有が行われています。ただ、ディレクトリ構造こそ整えてはいるものの一般的なドライブ系アプリの機能に留まっているため、資料が散逸しがちでした。
また、traQ(部内Slackのような内製SNS)上に添付ファイルとして共有される場合も多く、その場合検索性が極端に低いという問題も抱えていました。
そこで、スライドを一元管理しさらにジャンルなどの分類づけをスマートに行えるようなサービスを作る、という目標から誕生したのが"Slide Center"になります。

traP内では主に各種講習会や集会、集会で行う「らんぷろ」というLT会、ハッカソンでの発表などでスライドが作成・共有されるので、それらを全てこのサービスで管理できるようになります。

メンバー

フロントエンド

• mehm8128 (21B)
• Hyde_616 (22B)
• koki_10 (24B)

バックエンド

• Alt--er (23B、リーダー)
• noya2 (22B)

開発記録、用いた技術など

フロントエンド

(ここだけmehm8128が書いてます)

リポジトリ: https://github.com/traP-jp/h24s_04_frontend

使用技術

Webエンジニアになろう講習会という部内のWeb講習会で用いられていた、Vueを使って開発を進めました。
スライドの表示にはVuePDFを、アップロード部分にはvue3-dropzoneを用いました。

通信にはkyを用いていたのですが、以下のようなディレクトリ構成にしておくことで通信部分を分離して開発を進めやすくしました。分離しながらも、がちがちにやりすぎないことでハッカソン開発向けにしています。

└─── features/
    ├── {feature}/
        ├── api.ts    // kyを用いた通信を書く
        └── type.ts   // サーバーから降ってくる型やフロントから送信する型の型定義を書く

開発の進め方など

スライド一覧画面、アップロード画面、スライド閲覧画面の3ページあるので1人1ページ割り当てて、それぞれ実装していきました。
予めmehm8128がFigmaである程度デザインを作ったり、タスクをいくつかに分けたりしていたので、残りの2人のメンバーにはその通りに実装してもらって何か分からないことがあれば聞いてもらうような形にしていました。
コアの部分をライブラリに頼っていることもあり、特に大きな躓きはなくスムーズに進められたと思います。

スライドをアップロードするときに、スライドの1枚目を画像化してサムネイルとして保存していて、この画像化は(開発時間などとの兼ね合いで)フロントで行うことになったのですが、完全にGitHub Copilotくんにお任せしたらいい感じに書いてくれたのでよかったです。このサムネイルは一覧画面だけではなく、スライド閲覧画面でスライドを読み込んでいる間のフォールバックとして表示するようにして体験を向上させるのにも役立っています。
また、このサムネイルを用いてOGPも設定したかったのですがVueのままだとなかなか難しそうで、開発を継続するならfirebaseでいい感じの設定をしたりNuxt.js移行をしたりといった選択肢を考える必要があるのかなと思っています。

バックエンド

リポジトリ: https://github.com/traP-jp/h24s_04_backend

0日目(開催前夜まで)

フロントエンド側のmehm8128さんと話し合いながらDB設計を行っていました。この時にはジャンル以外にもユーザータグやtraQIDとの連携などといったサービス案が上がっていました。DB設計は一応これらの機能追加ができるように設定されています(ただ開発中の都合で一部テーブルのカラム数が増えましたが)。

1日目

初めの1~2時間でDB、バックエンドの基本的な環境構築を行いました。過去に個人制作で作ったBOTや以前のハッカソンのリポジトリなどからセットアップの構成を拝借しています。
ルーティングにはGoのパッケージ"Echo"を用いています。Echoは上記の"なろう講習会"でも扱われているパッケージで、traPでの各種サービスや実務でも用いられている有名パッケージです。

その後はアップロード/ダウンロード周り以外の部分について(ファイルの登録やジャンル機能など)noya2さんと共同で作業を進めました。プログラミングには互いに慣れていたこともありスムーズに作業を進められたかと思います。1日目の時点でアップロード周り以外については概ね作業を完了させることができました。

1.5日目(1日目深夜)~2日目

主にアップロード周りについての知見を入手する期間となりました。今回のサービスでは"Firebase Storage"を用いてそこにPDFの保存を行うようにしました。(mehm8128さんからの提案です。知見共有ありがとうございます!!)

今回のサービスにおいてファイルのアップロード/ダウンロードはサーバサイドで行いました。一度アップロードを行い、クラウドストレージ上のファイルパスとDL用URLを一度フロントエンドに返却。その後、そのデータとスライドに紐付けたタイトル、説明文などの情報をサーバサイドに送る、という流れとなっています。

Firebase関連のサービスの多くでGo言語で書かれたサーバアプリケーションがサポートされており、Storageもその一つです。アップロードについては特にこの記事の内容をもとに実装を進めました。また、ダウンロードについてもこちらのサンプルコードを参考に実装を行いました。

他にも、ファイルがアップロードされたことをtraQ上で通知するBOTの制作をnoya2さん中心に進めてもらいました。自分がStorage関連で模索している間に作業してもらったためなかなかサポートできませんでしたが、無事に通知を出すことができており、この後に行ったアップロードの確認等の作業でも役立てることができました。

メンバーから

@Alt--er

ハッカソンでのWeb開発は3回目、特に今回は初めてチームリーダーとして参加しました。スケジュールの調整やプロジェクトの設計等、ハッカソン前から動き出すべきことも多く、開発開始後もプロジェクトの舵取りを行う点で何かを決める場面が多かったりと今までの開発とは違った側面での経験を多く積めました。最後の方は自分がアップロード関連の作業を進めていたり等で駆動している中、BOT制作を請け負ってくれたnoya2さんに感謝!様ありがとうございます。

技術的な面についても、特にmehm8128さんがフロントエンドのみならずバックエンドについても多くの助言をくださったことで、自らの成長につながりつつ2日間で実装可能な分量に収めることができたと思います。気がついたらフロントエンドができている、というような状態だったのでフロントエンドチームの皆さんにも感謝しかありません。こんなリーダーでしたが1週間ありがとうございました!

@mehm8128

無事サービスとして動くところまで持っていけてよかったです。今までのハッカソンでは完成が間に合わなかったことが結構あったのですが、最低限必要な機能に絞って開発できたのと、全員上手く役割分担して作業できていたのがよかったのかなと思いました。
賞も取れたということで今後もtraP内で使われ続けることのできる便利なサービスだと思っているので、さらに使い勝手をよくしていけたらなと思います。

@noya2

私としては初めてのWeb分野の開発で、不安も大きかったのですが、チームのみんなに支えられて開発を進められました。サービスの作り方、チーム開発の進め方など、勉強になることがたくさんあって、大きく成長できる機会になりました。何より、サービスとして動くところを見ることができたのが本当に嬉しかったし、チーム全体としても盛り上がったと思います。リーダーの alt--er くんが、バックエンド経験者として、同じバックエンド担当である自分に的確に仕事を振り分けてくれたことで、2日間がとても有意義なものになったと思います。ありがとうございました！

@Hyde_616

私はこれまでWeb開発の経験がなく、3年にして完全初心者でこのハッカソンに臨むことになりましたが、先輩のサポートのおかげで何とか役に立てることがあってよかったなと思います。
スライド閲覧ページの製作以外何も携われなかったので、いつの間にかサービスが動くようになっていて驚きました。すごい。私ももっと勉強して、もっと役に立てるようになれたらいいなと思いました。2日間ありがとうございました！

@koki_10

私は完全初心者でtraPに入り初の開発がこのハッカソンで正直なところ不安が強かったですが、諸先輩方に支えていただき自分の仕事をこなすことができたと思います。また開発の実践をすることで勉強になることはもちろんのこと、自身のモチベーションの向上や、これからのtraP生活の展望を得ることができ、私にとって大きな転機になると思います。
今回のハッカソンでは諸先輩方に頼りきりであったので今後もっと勉強をしたり、アイデアを考えたりして次に関わる開発では主体的に動けるようになりたいです。