【制作裏話】ベガルタファンで話題になった３０周年記念ベストイレブン企画の開発について
はじめに
はじめにのはじめに
みなさん、こんにちは。FootReco代表の熊谷です。
今回はベガルタ仙台のファンの方々の間で話題になった「ベストイレブンメーカー」について開発者の目線からお話ししたいと思います。
なんと述べ2000人以上の方がベストイレブンを作って遊んでくれたみたいです。恐るべし,,,
なぜこれを書くかというと「裏側も知れたら面白いかな〜」と思ったからです。実際、4人で開発しました。そんな小規模で開発したリアルを知ってもらう意味も含め、このサービスの裏側をお伝えします。
まだ使ってないよって方は下記のリンクからどうぞ。
宣伝
そして、いきなりFootRecoとはなんぞやという方にご説明するとFootRecoは「サッカー界における推し活を通してスタジアムを通して友達を作ろう」というテーマのもとに作られたアプリです。ぜひスタジアムに訪れる方は使ってみてください。
▼FootRecoのApp Storeのリンク
▼FootRecoのGoogle Play Store用のリンク
https://play.google.com/store/apps/details?id=com.footreco.flutter_app&pcampaignid=web_share
ベガルタ仙台からの提案
ここからは開発までに至った背景を時系列順にお話していきます。
まずはじめにFootRecoの打ち合わせをしているときにベガルタ仙台のスタッフさんから「クラブ公式のベストイレブン的なアプリを開発したい」と言った要望をいただきました。
当時はクラブ公式でフォーメーションを作るようなアプリは存在しておらず、ユーザーは課金してアプリをインストールし、自分で写真を登録して、選手名を入力してベストイレブンを作る必要がありました。
こんな感じのアプリはあった↓
確かにクラブ公式のベストイレブン作るやつがあった方が安心ということで
「いいですね、やりましょう」
と一瞬で快諾しました。技術的にはそんな難しくなさそうだったし。
せっかくなら「30周年だし、歴代選手全部載せよう」とか「サブとか監督も選べるようにした方が戦術大好きな人はおもろいよね」みたいに話はどんどん膨らんでいきました。
打ち合わせ
双方やると決まったらそこからは打ち合わせ祭りです。初回の打ち合わせは確か3月くらいでした。そこから4ヶ月間の間、大学院の授業、就活の合間を縫ってベガルタ仙台の本社に何度も足を運び、機能やデザインの話を詰めていきました。
ちなみにベガルタ仙台の本社での打ち合わせの時に内線で担当者の方をお呼びするのですが、何度やっても慣れず、ドキドキします。中学校の時に普段行ってないけど、久々に職員室に入る時の感覚です。同じ感覚の人は多いのではないでしょうか。
「こんな機能あったらいいよね」「あんな機能あったら面白そう」みたいな話はもはやクラブスタッフとIT事業者というよりはサッカーファン同士の会話みたいになっていました。
サッカーファンであるが故に相手の言わんとしていることが十二分にわかるので打ち合わせ自体はものすごくスムーズで楽しかった印象です。
もちろんベガルタ仙台のスタッフさんはベガルタ仙台の大ファンなわけで「歴代の選手の写真全部探すの大変だなー」って言いつつも、楽しみそうな雰囲気を漂わせていました。
開発話
しんどかった点
まずはじめにしんどかった点について。これはもちろん、歴代全選手分の登録です。僕らもベガルタ仙台も疲れる作業だったのではないでしょうか。
ベガルタ仙台側からすると歴代の選手の300人くらいの写真を全て、各シーズンにおける名簿の作成・整理が必要な工程です。
そして僕ら側からするとその選手の写真をできるだけデータ量を削減し顔の周りをトリミングして、サーバーにアップロードするという作業があります。ベガルタ仙台から頂いた画像ですが、下の画像見たいなイメージだったので、トリミングは必須でした。
選手の写真1枚あたりで、既存のデータ削減系のwebサイトで画像処理をするのに3分、そして同じくwebサイトを使って顔を中心に400 × 400 pxにトリミングするのに5分、画像のアップロードに3分くらいかかるとすると合計11分。これを300人分ともなると単純計算で3300分です。55時間です。
単純作業でエグすぎたので、自動化することにしました。ここから先はちょっと専門的な内容です、
まずはpythonで画像のコントラストを上げて、輪郭を抽出しやすくします。その上で顔を認識するAI系のパッケージを利用して、顔の中心点を補足。顔の中心点から上下左右200pxずつを範囲として切り取り。その後、コントラストを通常に戻し、webp変換でデータ量を圧縮しました。
この自動化により、以上の工程が2時間くらいで終わりました。
工夫した点
我々のモットーは「ユーザーがいかに使いやすいかを追求する」ことです。ということで面倒なアカウント登録は極力カットする方向に舵を切りました。
「アカウント登録はさせないが、再びユーザーが使う時には前回のデータを引き継いでおきたい..」
こんな矛盾を解決するような技術がネットを探したらありました。世の中のエンジニアたちは優秀です。それがローカルストレージです。キャッシュにユーザーが選択した選手を保存できるようになったので、プライベートモードを使わなければ、webページに再来訪した際に、再度選手を選択する手間が省けます。
他にも工夫したことがあったのですが、疲れてきたので、気が向いたらまた追記します。
最後に
今回開発したベストイレブンメーカーが多くの人に使用してもらえてとても嬉しかったです。実際に遊んでくれた方々、そしてnoteを見てくれた方々、この機会を提供してくださったベガルタ仙台の皆様、本当にありがとうございます。
これからもITサービスを用いてサッカー界を盛り上げていけたらと考えております。これからも我々の作るITサービスにご期待ください。