こんにちは。
アメーバ事業本部でピグライフの開発を担当している竹ノ谷です。
アメーバ事業本部でピグライフの開発を担当している竹ノ谷です。
今回はピグライフ内の「シネマ」作成用、Airを使った運用管理ツールをご紹介したいと思います。
シネマとは、ピグライフから新たに加わったゲーム内のキャラクターが話したりアクションしたりするのを物語として見れる機能です。
チュートリアルや毎々のイベントでストーリーを楽しむ事が出来ます。
ハロウィンイベント中のシネマ
シネマの再生情報（登場キャストやアクション、台詞、タイミング等）は、時系列に従ってJSON形式のデータになっています。映画でいう台本の「誰が何をする」が、JSONで１アクションずつ書かれて並んでいるという感じです。
このJSONファイルを読み出し、ピグライフ内でシネマとして再生しています。
シネマジェネレーターとは、上記のJSON形式データ（台本）を作成・保存・読み込み・再生プレビューをする、シネマオーサリングツールです。
シネマジェネレーター
一つ一つのアクションは、用意されているフォーマットの数値やコードを任意にかえ、ストーリーの流れ通りにそれらを並べて行くだけなので、誰にでも作成できます。
シネマジェネレーターを使って実際どのようにシネマが作られているかを簡単にご紹介します。
1.台本作成
チームの数人で集まってストーリーを考え、台詞を決め、絵コンテを作成します。
2.データ作成
一つのイベントで約６のシネマを作成するので、チーム内で分担してシネマデータを作成します。絵コンテ通りにシネマジェネレーターにJSONのフォーマットで台本データを入れて行きます。再生プレピューを繰り返し、完成したらデータを保存します。
3.チェック
シネマジェネレーターは作成されたデータをもう一度取り込む事が出来ます。確認担当が各メンバーが作ったシネマを確認し、動きやセリフに間違いがないかなどをチェックします。
4.配信
チェックが通った所で、データをサーバーにあげ、念のためもう一度再生確認をし、ユーザーに配信されます。
ピグライフではサーバーとのデータ通信にJSONフォーマットを採用しています。JSONは軽量なデータ記述言語で、ActionScriptのObjectとも相性が良いという利点があります。同じようにシネマのストーリーにもJSONフォーマットを使用しました。
Flash内でのデコードには、as3corelibを使用しています。JSONからシネマ再生の流れは以下の様になっています。
このようにシネマジェネレーターを作成した事によって、Flashの知識がある人しか作れなかったようなアニメーションを誰でも簡単に作れるようになりました。実際、現在ピグライフで出しているほとんどのシネマはFlashを業務では扱っていない人たちによって作られています。
アクションをタイムラインで一つ一つ作っていく事も無いので、時間もかなり短縮され、チーム内チェックもサーバーにわざわざあげる必要も無いので、手間もかかりません。
誰でも作れる。
簡単に作れる。
シネマジェネレーターでこれらを実現し、運用効率を上げる事ができました。
[おまけ] シネマジェネレーターⅡ
シネマジェネレーターの進化バージョンです。シネマジェネレーターはFlashのタイムラインが使えなくてもアニメーションが作れるという事を利点にシネマを設計しましたが、JSONを書く必要があるというところが、まだ非エンジニアにはハードルが高い部分でした。慣れるまでは、JSONは人には読みにくい形ですし、{":,など、なじみの無い記号を１つの間違えなく記述しなくてはいけないからです。
そこで、更に簡単に分かりやすくGUIを充実させた「シネマジェネレーターⅡ」を作成しました。これはクリエイティブファイルとしての取り組みです。
シネマジェネレーターⅡ
シネマジェネレーターⅡでは、JSONを書く必要もなくなり、ボタンでストーリーを追加していき、NPCの位置なども画面上で動かし確認しながら感覚的にシネマを作成できます。これで更に簡単に、時間も短くシネマを作成する事が出来ます。
内部運用ツールの作成は、少し時間をかける事にはなってしまいますが、一度作ってしまえば、運用できる人数が増え、運用にかかる時間が短縮され、運用コストはかなり削られてきます。
今後も、運用までを考えて、機能を設計・運用アプリを作成して運用のベースを作って行きたいと思います。
シネマ
シネマとは、ピグライフから新たに加わったゲーム内のキャラクターが話したりアクションしたりするのを物語として見れる機能です。
チュートリアルや毎々のイベントでストーリーを楽しむ事が出来ます。
シネマの再生情報（登場キャストやアクション、台詞、タイミング等）は、時系列に従ってJSON形式のデータになっています。映画でいう台本の「誰が何をする」が、JSONで１アクションずつ書かれて並んでいるという感じです。
このJSONファイルを読み出し、ピグライフ内でシネマとして再生しています。
シネマジェネレーター
シネマジェネレーターとは、上記のJSON形式データ（台本）を作成・保存・読み込み・再生プレビューをする、シネマオーサリングツールです。
一つ一つのアクションは、用意されているフォーマットの数値やコードを任意にかえ、ストーリーの流れ通りにそれらを並べて行くだけなので、誰にでも作成できます。
シネマ作成の流れ
シネマジェネレーターを使って実際どのようにシネマが作られているかを簡単にご紹介します。
1.台本作成
チームの数人で集まってストーリーを考え、台詞を決め、絵コンテを作成します。
2.データ作成
一つのイベントで約６のシネマを作成するので、チーム内で分担してシネマデータを作成します。絵コンテ通りにシネマジェネレーターにJSONのフォーマットで台本データを入れて行きます。再生プレピューを繰り返し、完成したらデータを保存します。
3.チェック
シネマジェネレーターは作成されたデータをもう一度取り込む事が出来ます。確認担当が各メンバーが作ったシネマを確認し、動きやセリフに間違いがないかなどをチェックします。
4.配信
チェックが通った所で、データをサーバーにあげ、念のためもう一度再生確認をし、ユーザーに配信されます。
JSONとActionScript3
ピグライフではサーバーとのデータ通信にJSONフォーマットを採用しています。JSONは軽量なデータ記述言語で、ActionScriptのObjectとも相性が良いという利点があります。同じようにシネマのストーリーにもJSONフォーマットを使用しました。
Flash内でのデコードには、as3corelibを使用しています。JSONからシネマ再生の流れは以下の様になっています。
運用を効率化！
このようにシネマジェネレーターを作成した事によって、Flashの知識がある人しか作れなかったようなアニメーションを誰でも簡単に作れるようになりました。実際、現在ピグライフで出しているほとんどのシネマはFlashを業務では扱っていない人たちによって作られています。
アクションをタイムラインで一つ一つ作っていく事も無いので、時間もかなり短縮され、チーム内チェックもサーバーにわざわざあげる必要も無いので、手間もかかりません。
誰でも作れる。
簡単に作れる。
シネマジェネレーターでこれらを実現し、運用効率を上げる事ができました。
[おまけ] シネマジェネレーターⅡ
シネマジェネレーターの進化バージョンです。シネマジェネレーターはFlashのタイムラインが使えなくてもアニメーションが作れるという事を利点にシネマを設計しましたが、JSONを書く必要があるというところが、まだ非エンジニアにはハードルが高い部分でした。慣れるまでは、JSONは人には読みにくい形ですし、{":,など、なじみの無い記号を１つの間違えなく記述しなくてはいけないからです。
そこで、更に簡単に分かりやすくGUIを充実させた「シネマジェネレーターⅡ」を作成しました。これはクリエイティブファイルとしての取り組みです。
シネマジェネレーターⅡでは、JSONを書く必要もなくなり、ボタンでストーリーを追加していき、NPCの位置なども画面上で動かし確認しながら感覚的にシネマを作成できます。これで更に簡単に、時間も短くシネマを作成する事が出来ます。
内部運用ツールの作成は、少し時間をかける事にはなってしまいますが、一度作ってしまえば、運用できる人数が増え、運用にかかる時間が短縮され、運用コストはかなり削られてきます。
今後も、運用までを考えて、機能を設計・運用アプリを作成して運用のベースを作って行きたいと思います。
ユーザーアンケートの実施
RN前のサイトを使ったユーザビリティテスト
問題→原因→ユーザーの欲求を評価グリッド法で分析
ペーパープロトの作成
モック作成
モックを使ったユーザビリティテスト
デザインブラッシュアップ、fix
実装
本番と同様の環境でのユーザビリティテスト
今回のRNで大幅に変更をしたページの例
