アイマスハッカソンでミリシタのUIを作ったお話

2019年12月08日

この記事はアイドルマスター Advent Calendar 2019 の 8 日目の記事です。

こんにちは、.ごっちです。

2019/12/07 にアイマスハッカソンというイベントがありました。 アイマスハッカソン 2019 in 関東 (2019/12/07 10:00〜) *今年もアイマスハッカソンやります。今回のアイマスハッカソンは東京と大阪で。東西で共通していることはアイマスエンジニアで、アイドルが好きなこと。ハッカソンでモノづくりをしあい、LT で盛り上がって、2019 年を締めくくれる。…*imas.connpass.com アイマスハッカソン 2019 in 関西 (2019/12/07 10:00〜) *アイマスエンジニアの皆さん。今回のアイマスハッカソン 2019 in 関西の主催をしているきりだるまです。さて、ハッカソン当日まで 2 週間を切りましたが、現在当日に向けて最後の調整を行っているところです。…*imas.connpass.com

イベントページのヘッダー絵がとてもかわいい！

このイベントのスタッフ業をやっていたのですが、せっかくなので開発もしたのでその報告です。

つくったもの

某アイドルマスターミリオンライブ！シアターデイズ！の UI を Web で再現したものをつくりました。(といっても再現度 10％くらいですが) アイドルマスターミリオンライブ！シアターデイズ | バンダイナムコエンターテインメント公式サイト スマートフォンゲームアプリ「アイドルマスターミリオンライブ！シアターデイズ(ミリシタ)」公式サイトmillionlive.idolmaster.jp

出来上がったものは以下のリンクになります。 spa_ml_theater Edit descriptionspamltheater.yougoto510.now.sh

想像以上にみりしたっぽくなってとても良かったです。

使用した技術

フロント: Vue.js
インフラ: https://zeit.co/

Vuejs は今までしっかりと触ったことがなかったので選んでみました。Reactjs と比べてテンプレート部分、JS 部分、スタイル部分とはっきりと分けられているのでとても書きやすかったです。 zeit co はめちゃくちゃシンプルな PaaS で、無料でとてもかんたんにデプロイできるというすばらしいサービスです。ちょっと設定するだけでコマンドラインからでも GitHub からでもかんたんにデプロイすることができます。

苦労した点

そもそも画面数多い

ざっと数えるだけでも 100 はありそうなので、それを 1 日足らずで作り上げるのは物理的に無理な話です。

細かい部分が Web で表現しにくい

例えばユニット編成をする画面に注目すると、ユニットを切り替えるタブの部分がボックスの途中で終わっていて、余っている部分に <>のアイコンがあるというかんたんには表現できないようになっています。

フッターメニューに関しては、それぞれのページがアクティブになっているときの色が地味に異なっています。アクティブになっている部分の背景色もグラデーションが掛かっているので結構たいへんです。

アイドル、コミュ、お仕事のメニューをタップするとサブメニューが開いたりと結構やれることが多かったりします。サブメニューが開けられるものに関しては線が 2 重になってたりと細かい施しがなされています。

画面をタップするとタップした箇所から星が出ると行った表現もあります。

進捗

起動時の注意文言、タイトルページ、劇場ページの一部とユニット編成ページの一部までできあがっています。背景画像がスクショだったりするので、ユニット編成ページなどの背景は CSS で表現できればいいなぁと思っているしだいです。

LT 大会での反応

想像していたよりも参加者 P たちの反応がよく(お酒で酔っていた影響もあるかもですが)、やってよかった感はんぱないです(語彙力) LT の様子は YouTube Live にも上がっているので見てみてください。

聞いてくださっていた P のみなさんはガシャを引こうとしていたのですが未実装だったので、リンクをタップすると真っ白になって残念がっていました。先に作るべきでした()。

ちょっとしたお話

本当はミリシタではなくデレステの UI トレースをしようと思っていました。がしかし、

フッタメニューの表現がミリシタよりも明らかに複雑で諦めました。アイコンがカラーでリッチだったり、アクティブなときはそのアイコンが動くのでかなりきついです。Gif アニメで妥協したくはないので。。。。。めっちゃ時間があったら手を出したいです。

今後

先述したとおりウケがよかったので、作り込もうと思っています。

ライブ画面がないので楽曲選択できないので作る！
ガシャ画面がないのでガシャがひけないので作る！
タップしたときの地味なアニメーションがないので作る！
ヘッダーの残りミリオンジュエル表示などもないので結局ガシャできないので作る
画面転換のローディング画面がないので作る！(SPA とは..)
ブラウザの URL などを表示する部分がじゃまなので、隠せられるなら隠す

画面数や細かい表現が多いので完璧に真似るまでかなり時間がかかりますね。

—

アイマスハッカソン当日の様子は Togetter にもまとまっているので見てみてください。 #imas_hack アイマスハッカソン 2019 ツイートまとめ *アイマスハッカソン 2019 in 関西 (2019/12/07 10:00〜) ## 11/26 追記アイマスエンジニアの皆さん。今回のアイマスハッカソン 2019 in 関西の主催をしているきりだるまです。…*togetter.com