シャイニーカラーズをコードリーディングする

事前登録ガチャ

シャイニーカラーズの事前登録サイトで事前ガチャが始まりました。
事前ガチャなんて新しすぎて面白いw
早速ガチャって来ました!

【SSR】八宮 めぐる:誰とでもすぐに仲良くなれる元気系アイドル。 思いやりに溢れているため、友達から好かれている。アイドルも友達も大事にしたいから、今日もパワー全開!

か、かわいい!

事前ガチャとか、やっても別にな~と思ってたけどスマホゲームで鍛えられた脳がガチャをするたびに快楽を覚えて、しかも全員揃えたら手に入る特典もあってですっかり暇さえあればガチャページを開いちゃっています。 さすがアイマス、プロモーション方法がうまい。 これだけでもすでにシャニマスにハマっている人いるんじゃないかなって思いました。

Webサイトを読む

僕はプロディーサー業に勤しむ傍らでエンジニアでご飯を食べているわけなのですが、エンジニアの特性として、新しく面白そうなWebサービスが開始された場合に中身を見るというものがあります。

まだ事前登録サイトですが、先のニュースでバンナムが手がけるHTML5ゲーム戦略の一端ということで今回もその例に漏れず、中身(実装)を読んでみました。

採用技術 / ライブラリ等

サーバー構成までは流石に追えないので手軽にわかる範囲でフロントエンドまわりとかどんな実装なのか見てみます。

とまあこんな感じで、事前登録サイトということもあってあまりフロントエンド周りはすなおに使えるものを揃えている感じですね。

jQueryのUI周りのオープンソースアニメーション資産を使いつつHTML5っぽさをthree.jsのcanvasに渡している感じでした。フロントエンドも比較的低コストで作れるように古き良き名前空間でコード分割してる感じでした(一部だけ)。

で、ここで面白いなと思ったのが Vue.js を使っていることなんですね。 ぶっちゃけテンプレート周りやデータバインディングみたいな処理はこの規模のサイトならjQueryでも十分なところに最近かなり流行ってるVue.jsがいきなり入ってきています。外注した制作会社がたまたま使っていただけとは思いますが、じゃあ本リリース時のフロントエンド技術選定はどうなっているのか、ちょっと勝手な妄想が捗ってしまいました。

個人的な印象として、バンナムさんはWebフロントエンド技術に関しては特に目立っていたわけではありませんでした。でも、 これからブラウザゲームに改めて踏み込んでいくところを見聞きして、旧来のPHPベースのソシャゲではなく、もっと現代のWeb技術を駆使した新しいブラウザゲーム開発のチャレンジをするのかな、しないのかなと期待の眼差しでシャニマスをまた違った目線から見ています。そしてゲーム業界からWebフロントエンドコミュニティを牽引してくれたりとかしないかなとか妄想しています。

と言った感じで、アイドルマスターシャイニーカラーズの本リリースをコンテンツとエンジニアリングの2つの側面で楽しみにしています。開発チームの方々応援しています!

idolmaster-shinycolors.bxd.co.jp


余談ですが、普段 ES6 公文である関数のデフォルトパラメータが指定されていて、当然IEはサポートされていない構文なので「(LPの)対象ブラウザIE切ったかー強気だなー」と思いつつ、こういった大手がIE撲滅運動してくれるのは嬉しい限りですと個人的にありがとうと言いたい気分です。

※追記 PaymentRequestAPIで決済とかもちろんやりますよね?と煽っておく

アクセシビリティ的な観点でアイマス画像の代替テキストを考える

この記事はアイドルマスター Advent Calendar 16日目の記事になります。 adventar.org

去年のアドベントカレンダーのためにブログを開いてはや一年、一年ぶりの記事の更新になるのでまずは今年の振り返りを

2017年を振り返る

2017年、思い返してみればシンデレラの5thライブで全国各所を回りました。毎週のように長距離移動をして死にそうだった。。。特に最初の宮城公演から高速バスで東京に戻ってそのまま渡米したときの過酷さは未だに忘れられません笑。

でも毎公演、終わるたびにステージ上からたくさんの元気をもらって次の日の副業を頑張る活力になっていて、移動は辛らったけどツアーの期間は幸せだったなって思います。


a11y

話は変わって、皆さん画像にalt属性は入れていますか?

Web Accessibility Advent Calendar 2017 5日目の「入門者向けalt属性の書き方アドバイス」がとてもわかりやすい記事(スライド)で参考になると思ったので、早速実践ということで今年のアドベントカレンダーネタにしようと思います。

docs.google.com

実践

altには画像がなくても画像で伝えたい|伝えるべきことを代替テキストとして伝えるという役目があります。上で紹介したスライドでは地図を例にうまく代替テキストを書けていてなるほどなと感じたのですがでは、次のような画像にaltを付ける場合はどのようなテキストを入れればいいでしょうか。

アイコン画像:[月夜見エスパー]堀裕子+。いつものサイキック美少女アイドルではなく、サイキックうさぎ陰陽師・ユッコとしてうさ耳をつけた陰陽師をモチーフとした衣装を纏っている。非常に可愛い。

まずはシンプルなaltテキストを入れてみます。

<img src="yuko-hori.png" alt="画像:堀裕子" />

これだと堀裕子の画像であることはわかるが具体的な絵が想像できないので情報としてはまだ不足しています。

また画像というラベルのままでは普通のカード画像として連想されそうなので修正。

<img src="yuko-hori.png" alt="アイコン画像:[月夜見エスパー]堀裕子+" />

[月夜見エスパ−]堀裕子+の画像でかつアイコン画像だということが伝達できています。

しかしながらこのままではこの画像で伝えなければならない大事な情報が欠けています。ということで更に加筆。

<img src="yuko-hori.png" alt="アイコン画像:[月夜見エスパー]堀裕子+。いつものサイキック美少女ではなく、サイキックうさぎ陰陽師・ユッコとしてうさ耳をつけた陰陽師をモチーフとした衣装を纏っている。" />

イコン画像:[月夜見エスパー]堀裕子+。いつものサイキック美少女ではなく、サイキックうさぎ陰陽師・ユッコとしてうさ耳をつけた陰陽師をモチーフとした衣装を纏っている。

ここまで記述すれば、この画像で伝えたい情報、つまりアイドルの魅力が代替テキストで十分に表現できたのではないかと思います。

代替テキストの画像:(アイコン画像:[月夜見エスパー]堀裕子+。いつものサイキック美少女ではなく、サイキックうさぎ陰陽師・ユッコとしてうさ耳をつけた陰陽師をモチーフとした衣装を纏っている。)
こんな感じで代替テキストが表示される。

アクセシブルなコンテンツはWebのかなめ。 アクセシブルなマークアップをすることでアイマスの輪も広がってくれると信じてこれからも開発していきましょう。

といったところで、ここまで読んでいただいてありがとうございます! アイドルマスター Advent Calendar 2017 17日目はtwoterabytesさんの安部菜々にすくわれたかもしれない話です。

社会人だからプロデューサー予定表を毎朝Slackに通知させる

こんにちは!この記事はアイドルマスター Advent Calendar 2016 - Adventarの21日目の記事です。
初参加になりますがよろしくお願いします。

はじめに

こんにちは、堀裕子担当プロディーサーをしています @kahun_mask です。
「早くVRでユッコの実装してくれないかな...(でもクリスマスはVRで唯ちゃんと一緒にSnow Wings生活だ!)」など最近は考えて生きています。

突然ですがプロデューサーなら今日のスケジュールくらい毎朝チェックしなきゃだめですよね。

私は副業でエンジニアをしています。
正直毎朝プロデューサー予定表を見たり、予定表を見てカレンダーを都度更新するのもしんどいです。
更に言うと通知してくれるツールとかは一つにまとめたい。

ということで、今イケてる開発現場で使われてるコミュニケーションツールのSlackに集約することにしました。

※何番煎じかわからないですがプロデューサー予定表ネタです

続きを読む