自己紹介
九州の某大学に通う学生です。PCをまともに使い始めたのは大学に入ってから使い始めました。ちょうど入学した年がコロナと被り、色々大変でしたが、オンラインで活動していた Composite Computer Club というデジタル作品を作るサークルに入ったことをきっかけに、Web制作などをはじめました。今はフロント、バック、インフラ、ちょっとしたデザインなど幅広くやっています。
そんな、エンジニア歴2年ちょっとの初心者に毛が生えた程度の人間が図々しくもPMとしてサークルの作品共有サービスを作っていることに関しての記事です。ぜひ最後まで読んでいただけると幸いです。そして、皆さんからアドバイスや指摘を頂ければと思います。
Composite Computer Clubについて
九州工業大学の公認部活として活動しているサークルです。通称は「C3」です。歴史は長く私の年齢よりも年上です。昔のことは詳しくありませんが、少し前まではゲーム制作をメインに活動をしていたようです。今はゲーム制作や3Dモデル制作、イラスト、DTM、Web、そのほかのプログラミング制作（関数アートやインフラ、アルゴリズム、などなど）、のように幅広く活動しています。Webなどのプログラミング系の活動（ゲーム制作は除く）は私が入ったここ３・4年でできた新参の分野です。
https://compositecomputer.club
九州工業大学 飯塚キャンパス & Discord
現在の部員数：だいたい１００人
概要
C3ではさまざまな形式の作品が制作されています。ただ、それを共有する手段が今までありませんでした。するにしても、部内MastodonやDiscordに投稿したり、個人のTwitterやUnity Room、sketchfabなどに投稿していました。このように作品がいろんな場所に散らばり、過去の作品を見たり、見せたりが難しかったり、他の部員の作品を探すのが大変でした。コロナ禍でも対面で展覧会などは定期的に行っていましたが、それでも不十分でした。このような課題を解決する、さまざまな形式に対応した作品投稿・閲覧ができるサービスはありませんでした。それなら「自分たちで作ろう！」ということで制作が始まりました。
そのサービスの名称は「ToyBox」です。
ToyBox
URL：https://toybox.compositecomputer.club/
現在(2022/11)、βリリース中のためUIの崩れやバグ等が存在します。また、スマホ対応を行なっていないため、スマホでの閲覧はUIが崩れます。PCでの閲覧をお願いします。
一般ユーザーは作品の閲覧のみです。ログインは部員のみに限定されています。
コンセプト
Toy（作品）＋ Box（箱） = ToyBox（おもちゃ箱）
部員の作ったToyを入れておくためのBoxがToyBoxです。
部員間での共有や外部に向けての共有・発信、ポートフォリオとしての活用などを期待しています。それによって、制作意欲の向上や技術交流、クリエイターとしてのキャリアが生まれることに繋がればと思っています。また、先輩が過去に作った作品を後輩がいつでも見れることで、制作意欲の向上や後輩が制作を行うための道標になると思っています。
推しポイント
投稿できる作品の対応形式の多さ
| カテゴリー | ファイル形式 |
|---|---|
| 画像 | .png .jpg .jpeg .bmp .gif |
| 動画 | .mp4 .mov |
| 音楽 | .mp3 .wav .m4a |
| モデル | .gltf .fbx |
| 圧縮ファイル | .zip |
＊ 大文字拡張子も含む
上記は現時点（2022/11/29）での対応形式です。今後さらに増やしていきたいと思っています。
マークダウン形式対応
作品説明をマークダウン形式で書ける！
公開範囲を選べる
| 名称 | 閲覧可能ユーザー |
|---|---|
| 公開 | 全ユーザー （ログインしていないユーザーでも閲覧可能） |
| 限定公開 | C3ユーザー （ログインしているユーザーのみ閲覧可能） |
| 下書き | 自分 （投稿者本人のみ閲覧可能） |
作品制作者がどの範囲まで公開できるかを選択できます。
タグの前方一致検索
シンプルで分かりやすいUI
現状
\\ βリリース中 //
基本的な機能の実装が完了し、βリリースで見つかったバグの修正や要望への対応を行っています。また、機能の追加も並行して行っています。
開発体制
使用ツール
コミュニケーション：Discord（Slack無料枠変更に伴いDiscordに一本化）
ドキュメント：Notion
タスク管理：Notion
デザイン：Figma
バージョン管理：GitHub
構成
使用技術
- フロントエンド： Nuxt.js
- 3Dモデル表示： Three.js
- CSS： TailwindCSS
- icon: FontAwesome
- icon: Material Icons
- バックエンド： FastAPI
- DB：PostgreSQL
- オブジェクトストレージ： wasabi
- デプロイ： ConoHaVPS
- 認証：Discord認証
- 分析： Google Analytics
- DNS: Cloudflare
- OGP: Cloudflare Workers
フロントエンドはSSGを採用しています。OGP対応のためにCloudflare Workersを用いています。
苦労したところ
-
仕様の決定
必要な機能やどんな使い方がいいのかなどアプリの仕様部分の決定にものすごい時間と労力を掛けました。いろんな意見や要望をもとに仕様の決定をしたので、とても大変でした。現在進行形で、何が正解かが分からず困っています。 -
デザイン
いろんなデータ形式に対応しつつ、使いやすいUIはとても難しかったです。ここにもたくさん時間が掛かりました。今も模索中です。 -
技術選定
初期メンバーの技術スタックや予算、実装速度、実現性など考慮することが多く非常に難しかったです。色々試行錯誤しながら失敗もしました。技術的負債などもあったりなかったり...
部活の制作物で有用なのか分からない状態では予算がそんなにあるわけがないため、可能な限り無料で使えるものを選んだりもしています。 -
様々なデータ形式への対応
仕様やデザインはもちろん、実装部分でも躓くところが多々ありました。 -
SSGでの動的OGP対応
作品やユーザーページへのリンクのOGP対応に非常に苦戦しました。そもそもOGP対応をするならSSRを採用してしまうのが定番です。それ以外の方法はよしなにOGP生成をしてくれるサービスに課金するか、自分たちで実装するかです。SSRはサーバーの負荷が激しく予算的に厳しい状況です。また、OGP生成をしてくれるサービスに課金するのもできないので、自前で実装することになりました。
課題
- バグ・デザイン崩れが残っている
- スマホ対応ができていない
- OGP対応などのSEO対策
- 作品表示が貧弱
- 機能が不十分
今後の目標
- 課題の解決
- 通知機能の実装
- イベントページの実装
- 対応形式の追加
- マークダウン機能の充実
- 管理画面・機能の実装
- 正式リリースすること
- ユーザー数とアクセス数を増やすこと
- などなど
最後に
技術的な詳細やトラブルシューティングなどのことは今後別の記事として書こうと思います。この記事にそれらのリンクなどをまとめていきたいと思います。