この記事はアイドルマスター Advent Calendar 2019の8日目の記事です。
こんにちは、.ごっちです。
2019/12/07にアイマスハッカソンというイベントがありました。
イベントページのヘッダー絵がとてもかわいい！
このイベントのスタッフ業をやっていたのですが、せっかくなので開発もしたのでその報告です。
つくったもの
某アイドルマスターミリオンライブ！シアターデイズ！のUIをWebで再現したものをつくりました。(といっても再現度10％くらいですが)
出来上がったものは以下のリンクになります。
想像以上にみりしたっぽくなってとても良かったです。
使用した技術
- フロント: 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にもまとまっているので見てみてください。
