2014年12月11日木曜日

『管理ページチラ見せナイト#2』に登壇してまいりました。

管理画面AdventCalender11日目は、フジテレビでソーシャルゲーム『ゲゲゲの鬼太郎 妖怪横丁』の開発を行なっている忠相が担当いたします。



少し前の10月21日に、管理ページチラ見せ♡ナイト#2に登壇してまいりました。


色々とまとめ記事はあるのですが、geechs magazineさんの記事が読みやすくてオススメです。

↑↑の写真も、こちらからお借りしちゃいました。

登壇させて頂くことになったのは、第一回のチラ見せナイトにお話を聞く側で参加したのがきっかけでした。

「面白いイベントだなー。こういうのを企画する人とお近づきになれたら嬉しいなー」と思いまして、主催者の西小倉さんにFacebookでメッセージを送ってみたところ、すぐに返信が。

で、色々とお話させて頂いた結果、第二回のチラ見せナイトで、ワタクシがフジテレビで作ったゲームの管理ページについて話をさせて頂くことに。

いやー、社内プレゼンとかは何度も経験があるのだけど、外部の方の前で、しかもすぐに満席になるような人気イベントでの登壇なんて生まれて初めてだったので、予想以上に緊張しちゃいました。

ま、結果としては、1、2度は笑いがとれたので、ぼちぼち成功だったのではないかと。

以下が、スライド資料と発表を文字起こししたものです。

少々長いので、お暇な方はどうぞ。。。




加藤:
皆さん、こんばんは。フジテレビから来ました、加藤忠相(ただすけ)と申します。皆さんどうぞよろしくお願いします。

今日はフジテレビで開発、運営している『ゲゲゲの鬼太郎妖怪横丁』というゲームの管理ページと、あとはサーバーの負荷や売上をモニタリングするページの紹介をさせて頂きます。

今日のアジェンダはこんな感じです。

ちょっとチラ見せまでが長いんですが、チラ見せではキャプチャーではなくて実際の管理ページと実際のモニタリングページをを見て頂こうと思っていますので、少しの間我慢して下さい。

トイレとか行きたい人は今のうちにどうぞ。

まずとっても大切な前置きがあります。

「本日の発表内容は全て加藤忠相個人の見解であり、株式会社フジテレビジョンの立場や意見を代弁するものではありません。」

よくあるヤツですね。

こう言っておかないと「フジテレビがまた変なことを言っているぞ!!」とか言われてデモ行進とかされると困っちゃうので・・・

今日話すのは僕個人の見解なんで、そこだけは忘れないようにお願いします。

早速ですが、フジテレビがゲーム開発しているというのを知らない方が多いんですよね。

私が所属しているのは「フジテレビ コンテンツ事業局 コンテンツ映像センター ゲーム&インキュベーション事業部 フジテレビゲームスタジオ」という長い名前の部署なんですが、ここで主に、「ネットでガチャガチャ もやしもん」、「ネットでガチャガチャ テルマエ・ロマエ」、「マングローブと不思議なクマたち」、それと今日お話させて頂く「ゲゲゲの鬼太郎 妖怪横丁」と4つのゲームの開発、運用を行なっております。

実際の職場の写真はこんな感じです。



このフロアでゲームの企画会議をやって、デザイナーさんが絵を描いて、プログラマーがコードを書いて、みんなでテストやってリリースということをやっています。

場所は、以前はフジテレビ本社屋の24階などを使っていたのですが、少々手狭になってきたので、今はダイバーシティ東京のオフィスタワーの20階を使っています。



さて、今日お話する「ゲゲゲの鬼太郎 妖怪横丁」なのですが、こんな感じのゲームです。

http://yahoo-mbga.jp/game/12015799/detail

プラットフォームはYahoo!モバゲーで、PCのブラウザゲームです。

ちょっと自慢させて頂くと、Yahoo!モバゲー内で人気のあるゲームを決めるYahoo!モバゲーアワードというものがあるのですが、そこで2013年はルーキー賞、今年2014年はベストタイトル賞を獲得させて頂きました。

ただ、Yahoo!モバゲーというプラットフォーム自体が、ちょっとマイナーだったりするんですよね。

ちなみにこの中に、このゲームをやったことある方っていらっしゃいますか?

いないですよね。

ああ、いなくてよかったです。いると話しにくい話もあるんで。

どんな感じのゲームなのか、ちょっとだけデモプレイさせて下さい。

いわゆる、箱庭系のゲームですね。

こんな感じで横丁というものがあって、お店があって、このお店にエサを置くと妖怪が集まってくるという流れです。

では、実際に何人くらいでこのゲームを作っているかというと、とても少ないです。

主要メンバーは7名です。

先日、一人修行中の者が入ったんで8人になったんですが、その8人で企画を考えたり、絵を書いたり、プログラムを書いたり、テストをしたりしています。

一部、外部の会社さんに絵を書いてもらったり、問い合わせの一次回答をしてもらったりはしていますが、基本的にはこの8人が全てです。

ほぼベンチャーですね。

ですので、管理ページのコンテンツはとても少ないです。

基本的な機能はデータの参照系ですね。

DBのマスターデータの更新などはphpMyAdminを使って行いますし、設定ファイルの更新はSSHでサーバにログインして、viでやったりしています。

基本的に鬼太郎開発チームはディレクターさんもデザイナーさんもプログラマーもすぐ近くの席なので、例えばディレクターさんが管理ページの仕様を忘れちゃったとしても、振り返ってすぐに実際に管理ページを作ったプログラマーに聞ける状況なんです。

それと、グラフなどのデータの可視化については、csv出力をして、エクセルなどで行なってもらう方針になっています。

ですので、基本的な管理ページの設計思想としては、「使いやすさよりも機能重視」「見た目のデザインよりも実装スピード重視」です。

さて、残り時間があと5分になってきたので、そろそろ実際の管理ページを見て頂きましょう。

個人的にはいろいろお見せたいものがあったんですがあまり時間もないので、いくつか絞って説明いたします。

クリックしたらマズいボタンがいっぱいあるので緊張しますね。

例えばこれは、「魂」というゲーム内通貨が、ゲーム内にどれくらい出回っているのかを見る機能です。

以前は魂の総数だけ表示していたのですが、現在はヘビーユーザ、ライトユーザというような感じでユーザをセグメント分けして、それぞれどのようなユーザがどれくらい保持しているのかまで、管理ページで見られるようにしています。

後はですね、これはディレクターから依頼もされていないのに自分で勝手に作ったのですが、APIがリクエストを受け付けてからレスポンスを返すまでにかかった時間の平均値を、一時間ごとに集計したページです。

例えば、今日の20時から21時までで見てみると、APIへの総アクセス数が200万くらいで、平均的に0.06秒でレスポンスを返せているというのが、この表から知ることができます。

イベントリリース直後などにサーバの負荷が上がってゲーム全体がもっさりしてしまった時など、この情報をもとに原因となっているAPIを見つけ出して、対応を行うというようなことをしています。

時間もないんで、最後に各ユーザごとの情報が見れるページですね。

ここで、各ユーザのレベルなどのゲームの状況が見られるようになっているのですが、ユーザに対する補填も出来るようになっています。

基本的にそのようなことはないのが一番なのですが、何か不具合が発生し、ユーザにご迷惑をおかけしてしまった場合、ここの機能を使って、アイテムをユーザに配布し、さらにお詫びのメッセージもゲーム内に表示させることができます。

続きまして、モニタリングページですね。

最後にこれを見て頂いて、終わりにしようかと思います。

売上とかDAUとかはダミーのデータなんですが、サーバのロードアベレージやアクセス数などの情報は今現在の本当の本番サーバの状況です。

このAPIのレスポンス秒数もガチです。

ここでは、今月の予算と売上を表示しています。

これはサーバのロードアベレージ、メモリ使用率、ディスク使用率ですね。

最後は水木しげる先生に出演頂いた、鬼太郎のコマーシャル動画です。

この動画をここで流す意味はあまりないのですが、なんとなくスタッフのモチベーションが上がる気がしたので、これも私が勝手に作りました。

実際にはこんな風に大きなモニターに表示させて、仕事中のスタッフが常に意識できるようにしています。



では、時間もなくなってきたので、以上となります。

最後に、フジテレビでは、一緒に楽しく、楽しく、楽しく仕事をしてくれる人を探しています。
Wantedlyなどのアカウントはないので、興味がある方はワタクシのFacebookまで連絡を下さい。
「加藤忠相」で検索すればすぐに見つかるかと思います。

ご静聴、ありがとうございました。

司会2:質問ある方いらっしゃいますか。
Q1:
貴重なお話ありがとうございました。

私も似たり寄ったりの仕事をしているんですが、管理画面がまともにあるところって、たまたまかもしれませんがあまり見たことがないんです。

ゲーム本体の方の開発にかかるコストと管理ページ開発のためのコストって、どれくらいの比率になっていますか?

加藤:
基本となる売上とかのKPIが見れる機能は丸一日くらいかけて作って、後は、ディレクターさんから「こういうデータが欲しい」っていう依頼がちょくちょくきて、面倒になったから管理ページに組み込んだとかそういう感じですね。

きちんと工数とかを計算してから設計、実装っていうわけではないんです。

Q1:
じゃあ最初は簡単な機能のみを作って、あとは必要なところから追加してっていう感じですか?

加藤:
そうですね。

ただ、ユーザからの問い合わせ回答に必要な機能は、優先して最初に作るようにしています。

そうしないと、問い合わせの調査依頼がプログラマーのところまで来るようになってしまって、その対応が忙しくて管理ページに機能追加できないっていう、負のスパイラルが発生してしまうので。

Q1:
なるほど。負のスパイラルに正にはまっている状態なので。今の話はとても参考になりました。

ありがとうございます。

加藤:ありがとうございました。

Q2:
貴重なお話ありがとうございました。

管理画面で使ってるグラフなどを表示する処理って、自分で作ろうと思うとかなり大変だと思うんですけど、どのように作っていますか?

加藤:
jqPlotを使っています。

Q2:ありがとうございました。

加藤:
では、これで終わりにしますが、自分はこんな格好でまだ後ろの方をうろうろしていると思うので、何かあったら聞いてください。

ありがとうございました。