Zenn
💨

Zenn始めました+韓国の大学生達とのチーム開発備忘録

2024/06/04に公開
idea
tech

あいさつ

韓国の大学に在籍する大学3年生です。ハッカソンに参加したことをきっかけに、技術的な挑戦をしながら何かプロダクトを作って世の中に価値を提供する楽しさを感じるようになり最近開発が楽しくってきました。どうせなら今取り組んでいるチーム開発の議事録？的なのを技術的なアウトプットも兼ねて備忘録として記録してみようかなと思いZennを始めることにしました。それと友人がZennはGithubの練習にもなるから一石二鳥と言っていたのもあります。

Zennユーザーのみなさんの助けになるような記事を書けたら最高ですが、エンジニアとしてはまだ未熟なので、今後投稿を続けていくことによってレベル感の変化や成長の軌跡を残し、そこそこつよつよエンジニアになれた時の一つのロールモデルとして参考になれたらなと思います。

開発の経緯

チーム開発に関しては授業で行っているものです。元々このプロジェクトのチーム編成時は今とは違うチームで編成していましたが、このチーム開発が課されたのが丁度ハッカソンを終えて開発が楽しくなってきていた時で、どうせなら面白いものを作りたいと思い、思い切ってクラス内で一番つよつよそうな人が集まっているチームに加入の申し出をしたら快く受け入れてくれました（韓国の人たち基本やさしい）。

作っているもの

家の棚とかの写真をアップロードしたら、棚にあるものを物体検出して適切な位置に整理してくれるWebアプリ。
まだ未完成ですが、ソースコードはこちらのGithubリポジトリで公開しています。

チームプロジェクトフロー

プロジェクト目標（開発物）決め→スケジュール決め→意思疎通ツール決め→チーム名決め→ソフトウェア設計→開発→テスト→PPT作成→発表
プロジェクト目標決めでは、みんなで抱えている課題やアイデアを共有しあって決めました。チーム名決めまでは初日の会議で行ったのですが、まさかのこれに一番時間をかけていました。自分はフロントエンドを担当することになりました。

自分の担当

デザイン（UI、UX向上）、フロントエンド全般、フロントエンド側のAPI設計。

使用技術

フロントエンド

  • Javascript、React、Chakra UI、react-image-crop

バックエンド

  • Python、Flask、YOLOv8、open cv

やったこと（やった順で記載）

  1. デザインする前にUX向上のためにこのWebアプリのアイデアの部分の分析をした
  2. UIデザイン
  3. Chakra UI使って画面遷移機能追加
  4. 各画面のUI構築
  5. 画像アップロード機能追加
  6. react-image-cropライブラリ使って画像の規格データ取得する機能（ここが一番大変だった）追加
  7. 選択中エリアと除外中エリアに分けて選択中エリア内にある画像をクリックすると除外中エリアに画像が移動する機能（逆も同じ）追加
  8. ユーザーがアップロードした画像とバックエンドが生成した整理された棚の画像を表示して、その画面をスクショしてダウンロードできる機能
  9. フロントエンド側のAPI設計
  10. 各エンドポイントでバックエンドからレスポンスされる複数のデータをにコンポーネント間でやり取りし画面遷移するように変更
  11. PPT作成用にフロントエンドの構造や機能を図式化

意識したこと

  • 積極的に意見や分担の希望、進捗報告を行うなどのコミュケーションを心がけた。

反省点

開発の順序が良くなかった

「やったこと」の”PPT作成用にフロントエンドの構造や機能を図式化”に関しては、設計段階では構造や機能は文字のみで決めていたのですが、最初にやっても良かったなと思いました。

UI, UXにあまりこだわれなかった

ここにこだわるためにこのWebアプリのアイデアの部分をちゃんと分析したのですが、開発期間が割と迫っていてコア機能の実装を優先するために、必要最低限のUIのデザインと実装をした結果、提出期限までにUIの整備ができませんでした。

細かい部分のバグを修正せずに終わらせた

  • react-image-cropライブラリで画像をトリミングしてトリミング範囲の規格を取得する画面で最初はプレビュー画面を作っていたのですが、そのプレビュー画面がトリミングした範囲とズレていたり、拡大されるバグがあり、ユーザー視点ではプレビュー機能は無くても良い機能だった事と開発期間も迫っていたという事もあり省くことになりました。
  • バックエンド側で使用されているNNPACKという推論を高速化するライブラリが自分の使っているPC（MacBook Pro M1 pro）だと使えなくて、バックエンドへのHTTPリクエストはできたものの、Webアプリの完成した様子はDiscordのチームメンバーのライブ画面越しでしか見られなかったのが心残りです（NNPACKはコンパイラオプションを変えたらMacBookでも動作するらしいのであとで試す予定）。

日本語でCommitメッセージ書いてもうた

序盤のWebページの基盤を作るときはまだ形つくってるだけだし自分にわかりやすいように日本語でいいやって思って日本語でCommitメッセージ書いてましたが普通に韓国語で書けばよかったです（猛省）。

今後の展望

フロントエンド

  • 細かなバグ修正
  • UI最適化
  • トリミングした画像のプレビュー機能完成
  • Webアプリ使用方法の説明文などの充実
  • その他おまけのUX向上しそうな機能の追加

バックエンド

  • 現時点では2次元的に画像の棚にある物体を検出して2次元的に整理しているが、これを3次元化する。
  • 冷蔵庫のような複雑な家具にも適用が可能に改良

感想

  • React, Chakra UIに関してはUdemyで勉強したりはありましたが、初めてまともに開発で学びながら使ってとても良い経験になりました。
  • バックエンドとフロントエンドをWeb APIで繋げて感動しました（めちゃくちゃ壮大なことしないといけないイメージだった）。これができるようになり作れるWebアプリの幅が広がった気がしてめっちゃ興奮しました。
  • チーム開発は終わりましたが、時間ある時にこのWebアプリのバグ直したりUI整理したり機能追加したりして完成させたいです。
  • これまで個人開発は中途半端に終わることが多かったので、今後は沢山個人開発していきたいです。

さいごに

具体的な作りやソースコードの解説は完成したら別途記事を作ろうかなと思います。

Discussion