Blog

ハッカソン合宿制作記③|らくらくアイコンメーカー「アイコンマスター」

はじめに

先日、エンジニア育成の一環として2泊3日の開発合宿に参加してきました!
2泊3日の短い期間でチームで1つWebサービスを作ってみようというものです。
詳しくはこちらの記事を御覧ください。
今回は、その開発合宿で私たちのチームが作ったサービス「アイコンマスター」をご紹介しようと思います!

チーム紹介

  • 秋山
    フロント周り全般を担当
    情報セキュリティの崖落下中
  • 岩崎
    AWS周り、JSONや一部の処理を担当
    VTuberの沼に落ちた
  • 佐々木
    スケジューリング、git管理、JSON変換のロジック部分、などを担当
    入社し始めてから、アニメ沼にハマりました
  • 高畑
    画像処理、などを担当
    バイクの中型免許を取りました

作ったサービス

SNS用アイコンをWeb上でらくらく作成!!

アイコンマスターのページにアクセス後、撮影ボタンを押して自分の顔写真を撮影するだけでオリジナルアイコンができあがります!
アイコンは、季節や顔の表情によってエフェクトが変化します。ハッピーな時、どんよりな時、その時の気持ちをステキに表現しちゃいましょう!

使い方

ページにアクセスして「アイコンを作る」ボタンを押します。

顔がカメラの中心に来るように調整し撮影ボタンを押すと……

あっという間にアイコン完成!

 

仕組み

まずは顔写真を撮影します。撮影する写真のサイズはTwitter推奨の400×400ピクセルです。

撮影した写真はAmazon RekognitionのAPIに送り、感情のデータ(ANGRY,HAPPY,SUPRISEDなど8種類)を取得します。そのデータを元に怒りの感情なら怒りマーク、驚いているなら「!」マークなどのエフェクトを付けていきます。

Amazon Rekognition とは?

画像やビデオから人、モノ、テキスト、シーンなどを識別できるサービスです。APIもあるので簡単にアプリなどに組み込むこともできます。
アイコンマスターでは撮影した写真を分析にかけ、どのような表情をしているかを取得しています。

次に、現在の日付からアイコンに付けるフレーム(四季+ハロウィン、クリスマスの6種類)を決めます。もし12月1日であれば冬のフレーム、10月31日であればハロウィンのフレームといった感じです。

最後に、撮影した顔写真、感情のエフェクト、季節のフレームを1枚の画像にし、画面に出力します。

がんばったところ・工夫したところ

とにかく簡単にアイコンを作れるようにしたところです!

「その時の気持ちをステキに表現」と言ったとおりに、何回アイコンを作っても面倒くさくならないように画面上の操作は極力減らしシンプルになるようにしました!

そのため画面数もTOP、撮影、出力の3画面に抑えています。

また、私たちのチーム開発ではお互いの技術スキルに差があったり、当初のスケジュール通りに進まないなど、苦戦することが多かったのですが、お互いの状況を把握し合い、役割の変更や遅れている人へのフォローなど、よいプロダクトを作り出せるよう、短い期間ながらも最後まで諦めずに楽しく開発ができたと思います!

学んだこと

事前の仕様がふわふわしていたな、というのは終わってみて感じました。それぞれの担当部分でどのような入力がいるのか、どのような出力を返すのか、そういったところが決められていなかったため、開発中に食い違いが生じたりもしました。

これでは良くないと感じ、一度それぞれの担当を整理して話し合い、仕様を固める作業をしました。その作業のおかげでお互いの作業の把握がしやすくなり、以降の開発をスムーズに行うことができました!

もちろん、あらかじめきっちりと決めておくことができていれば、余裕を持った開発や新機能の追加に手を出したりもできたのでは、という点はありますが……
そこは反省点を見つけられたということで前向きに捉えていきたいと思います!

おわりに

反省点も多く出た開発合宿でしたが、それでも少ない時間の中で動くものとしてアイコンマスターを完成させたことにはしっかりと胸を張り、この開発合宿での学びや反省は、今後の業務に活かせるよう取り組んでいきたいです。

読んでいただきありがとうございました!