背景
今回の春ハッカソンのテーマは「あい」と「ゆう」でした。
また、我々の悩みとして部内SNSのtraQのスタンプを簡単に作りたいという思いがありました。そこで、スタンプを簡単に作成できるアプリを作りました。
コンセプトは「あなた(you) のアイディアをスタンプに」。
作品紹介
後述するギャラリー機能などの一部機能を省いたバージョンを公開しました。
このバージョンには不具合が存在しています。(既存の画像が使用できず、新たに画像をアップロードする必要がある・投稿ボタンが表示されている・スマホ版で保存できない)
班員紹介
- @Ras (20B) バックエンド、フロントエンドを担当
- @kyosu (20B) バックエンド、インフラを担当
- @ikura-hamu (22B) バックエンドを担当
- @s9 (22B) フロントエンド、デザインを担当
- @inu_warabi (22B) フロントエンド、デザインを担当
機能紹介
ログイン画面
サイトにアクセスすると、まずログインを求められます。ログインすると、機能が使えるようになります。
スタンプ作成画面
テキスト・背景・エフェクトを選択してスタンプを作れます。作ったスタンプは投稿したり、右クリックで保存したりできます。
ギャラリー
ギャラリーでは、みんなの作ったスタンプを閲覧することができます。
マイページ
マイページでは、自分の作ったスタンプを閲覧できます。
内部実装
フロントエンド:Vue.js、TailWindCSS
バックエンド:Go サーバー部分:AWS
リポジトリ管理にはGitHubを用いました。
製作期の話
役割分担
自己紹介の時点で希望分野がいい感じに分散していており、フロントエンドをRasとs9とinu_warabiが、バックエンドをRasとkyosuとikura-hamuが担当することになりました。
内容決定
内容を練っていました。
「あい」と「ゆう」に関連する話し合いで、以下のような案が出ました。
- 愛と友
- IとYou
- 磁石
- UI
- 藍哀相逢eye虚数単位電流ヨウ素力積 / 夕優幽郵誘憂遊エネルギーウラン
- 愛と勇気だけがともだち
- あい→AI
制作物について、以下のような案が出ました。
- 講義室への経路を表示するアプリ
- traQ(部内SNS)のスタンプを作るアプリ
- 部内クラウドの過去問を見やすく整理するアプリ
- 物理的な教科書をシェアするアプリ
- UにIをはめ込むゲーム
- traPで作ったゲームを共有するアプリ
- AIと会話するアプリ
- AIとの対戦ゲーム
- AIマッチングアプリ
- AIを用いて、自分のなりたい理想の自分(you)の画像を生成するアプリ
ここから現実的な案として、最終的に「traQ(部内SNS)のスタンプを作るアプリ」に決まりました。
その後MEGAMOJIという高性能な絵文字作成ツールを見つけてしまったものの、他の案が出なかったのでこの案を継続させました。
デザイン案
Figmaで製作しました。
受賞
逃しました。
実装が一部追いつかなかったのが原因のひとつかもしれません。
感想
@kyosu(20B)
バックエンドとインフラ(AWS)を担当しました。ハッカソン前半にあまり時間が取れず、最終的にインフラが律速になっていた部分による影響が大きかったので申し訳なかったです。最終日前日と最終日はAWSの公式ドキュメントに非常に苦しめれました。ハッカソン自体は全体を通して色々と学べることがあって参加してよかったと思います。
@Ras(20B)
主にバックエンドとフロントエンドのサポートを担当しました。自分自身バックエンドの経験はそこそこあるもののフロントエンドはほとんど初めてだったため、サポートといいつつもフロントエンド担当のinu_warabiくん、s9くんと苦戦しながらコードを書いていました。後半2日は私用で参加できなかったのですが、メンバーの追い上げがすごく、最終的にはかなり良いものになっていて感動しました。ありがとうございました!!!
@ikura-hamu(22B)
バックエンドの実装の一部を担当しました。最初はほんとに訳分かんなくて、先輩にたくさん質問して時間を取ってしまって申し訳なかったです。でも、最初のマージはめっちゃ嬉しかったし、自分の書いたプログラムでちゃんと動いて感動しました。とても楽しかったです。ありがとうございました!
@inu_warabi(22B)
フロントエンドのデザインを担当しました。Typescriptを触るのが初めてだったので多少苦労しましたが、その分成長できた気がします。フロントの大変な部分をs9くんにやってもらったので本当に感謝してます。他の班のメンバーにも感謝です!ひとりでは絶対得られない経験だったので参加して良かったです!
@s9(22B)
(本記事執筆者)フロントエンドでプログラム部分を書いていました。開発ツールの使い方に苦労して、基本機能の実装が遅れてしまい申し訳なかったですが、かろうじて実装できてよかったです。うまくいかなかった部分は今後勉強したいです。様々な部分を一緒に実装したり、質問に答えてくださりしたチームのみなさん、そしてハッカソンを開催してくださった方々、ありがとうございました。