こんにちは。オトギアでフロントエンジニアをやってます。atsumoです。
今回は、現在オトギアで使用中のフレームワークAngularJSのお話を少しさせていただければと思います。
※ AngularJSのバージョンに関してはオトギアで使用中のバージョンである、
https://angularjs.org/
Googleとコミュニティによって開発されているオープンソースのMV*系のJavaScriptフレームワークです。
同じような種類のフレームワークとして、Backbone.jsやKnockout.jsなどが挙げられます。
・設計や実装ルールがあるため、それに従うことでコード品質が保たれやすい。
・アニメーションを多量に使用する場合利点を生かせないことがあり苦労する。
実際に基本的な使い方を見ていただき、フレームワーク選択の目安になればと思います。
入力画面に入力すると、入力と同時に
データが変更されると、値の変更に伴い見た目が変更されます。
この機能をライブラリなど使わずに書いた場合、テキストの入力にイベントを設定し値を取得、その入力が変更されたら表示しているテキスト情報から条件に当てはまらないものを非表示にしごにょごにょ・・・
この少し面倒な処理もAngularJSを使うと簡単に書くことが可能です。
この例ではAngularJSにあるfilterを使ってますが、自分で拡張してfilterを作ることも可能です。
上の例は、helloという要素（Element）をtemplateで置き換えるという処理です。
AngularJSの基本機能自体でもいろいろなことができるように、directiveを応用することでいろいろなことができるようになります。
オトギアではユーザーが見れるページだけでなく、データを入力するページ（管理画面）や、データを生成するためのツールなどにもAngularJSを使用しています。
Filter 1: 武具の種類( type: 武器/防具、category: 剣/銃/楽器/鈍器/槍/杖)
Filter 2: 武具の属性( attribute: 火属性/水属性/風属性/土属性/無属性)
Sort 1: 新着順/古い順/装備コスト高い順/装備コスト低い順/HP高い順/HP低い順/攻撃力高い順/攻撃力低い順/防御力高い順/防御力低い順/素早さ高い順/素早さ低い順/レベル高い順/レベル低い順
この面倒なFilterやSortもAngularJSのFilter機能でかなり楽に作ることが出来てます。
例えば、カードのサムネイルのdirectiveです。
カードゲームなので当たり前ですが、カードのサムネイルは様々なところで登場します。
例えばcardThumbという名前のelement型のdirectiveを定義した場合、上記のようなサムネイルを使用したいときには、cardThumbというtagが存在するかのように、
などの形で使えば、表示する際には適切な形に変換して置き換えてくれます。
これをうまく使うことで、html自体が見やすくわかりやすくなるので、かなり便利です。
そのJSON形式のデータをエンジニアだけではなく、プロデューサーやデザイナーがJSONを意識しなくてもある程度作ることができるものをシネマジェネレーターと呼んでいます。
ジェネレーター内でシーンの追加や、セリフの追加、背景の追加、声などの音声再生のタイミングなどを設定することが可能です。
(デザインをしてないためすごく簡素化してます・・・)
設定された項目から、JSONデータを生成しそのJSONデータを使用してプレビューすることができます。
やってる事自体は簡単ですが、AngularJSのデータバインディングを使用しないで作ると結構めんどくさい部分が多く、AngularJSさまさまな機能でした。
この画面内で再生が可能なしくみになっており、機能をモジュール化したことで、再生機能自体はゲーム内で使っているものをそのまま使えるようになってます。
AngularJSを始める際に参考にしたサイトなどをご紹介します。
ビデオチュートリアル
・https://egghead.io/
AngularJSを使ったbootstrapフレームワーク
・http://angular-ui.github.io/bootstrap/
AngularJSをベースにしたモバイル用フレームワーク
・http://ionicframework.com/
foundationのAngularJS版
・http://madmimi.github.io/angular-foundation/
AngularJSを使ったMaterial Design用フレームワーク
・https://github.com/angular/material
AngularJSがまだモバイルに最適化された状態であるとは言いにくい部分もあり、苦労した部分などもありました・・・。(AngularJS 2.0に期待)
AngularJSを使ってるゲーム、オトギアを触っていただければ光栄です。
今回は、現在オトギアで使用中のフレームワークAngularJSのお話を少しさせていただければと思います。
※ AngularJSのバージョンに関してはオトギアで使用中のバージョンである、
1.2.16をベースに書かせていただきます。AngularJSとは
https://angularjs.org/
Googleとコミュニティによって開発されているオープンソースのMV*系のJavaScriptフレームワークです。
同じような種類のフレームワークとして、Backbone.jsやKnockout.jsなどが挙げられます。
AngularJSを使用した際のメリット/デメリット
個人的な意見になってしまう部分もあるかもしれませんが、AngularJSを使用するようになり感じたメリットやデメリットを挙げたいと思います。【メリット】
・楽にWebアプリを作ることができる。特に小規模のものを作る際に簡単に作ることができる。・設計や実装ルールがあるため、それに従うことでコード品質が保たれやすい。
【デメリット】
・独自の概念や多様な機能に慣れるまで戸惑うことがある。特に慣れてきて色々と機能を使い始めた時に戸惑ったことが多かったです。・アニメーションを多量に使用する場合利点を生かせないことがあり苦労する。
実際に基本的な使い方を見ていただき、フレームワーク選択の目安になればと思います。
基本的な使い方
ng-model
入力画面に入力すると、入力と同時に
Hello! 〇〇が更新されているのがわかります。データが変更されると、値の変更に伴い見た目が変更されます。
Filter
filterは、その名の通りフィルタリングしてくれる機能です。この機能をライブラリなど使わずに書いた場合、テキストの入力にイベントを設定し値を取得、その入力が変更されたら表示しているテキスト情報から条件に当てはまらないものを非表示にしごにょごにょ・・・
この少し面倒な処理もAngularJSを使うと簡単に書くことが可能です。
この例ではAngularJSにあるfilterを使ってますが、自分で拡張してfilterを作ることも可能です。
Directive
AngularJSの肝とも言えるdirectiveのサンプルです。AngularJSの機能として提供されているもの自体もdirectiveを使っています。(ng-repeatやng-if,ng-show...など)上の例は、helloという要素（Element）をtemplateで置き換えるという処理です。
AngularJSの基本機能自体でもいろいろなことができるように、directiveを応用することでいろいろなことができるようになります。
オトギアでの使用例
オトギアのどの機能でAngularJSの機能が使われているか簡単に説明したいと思います。オトギアではユーザーが見れるページだけでなく、データを入力するページ（管理画面）や、データを生成するためのツールなどにもAngularJSを使用しています。
フィルタリングとソート
武具のリストに対して2種類のフィルタリングし、更にソートさせる機能の例です。Filter 1: 武具の種類( type: 武器/防具、category: 剣/銃/楽器/鈍器/槍/杖)
Filter 2: 武具の属性( attribute: 火属性/水属性/風属性/土属性/無属性)
Sort 1: 新着順/古い順/装備コスト高い順/装備コスト低い順/HP高い順/HP低い順/攻撃力高い順/攻撃力低い順/防御力高い順/防御力低い順/素早さ高い順/素早さ低い順/レベル高い順/レベル低い順
この面倒なFilterやSortもAngularJSのFilter機能でかなり楽に作ることが出来てます。
Directive
オトギア内で使用しているdirectiveの一部をご紹介します。例えば、カードのサムネイルのdirectiveです。
カードゲームなので当たり前ですが、カードのサムネイルは様々なところで登場します。
例えばcardThumbという名前のelement型のdirectiveを定義した場合、上記のようなサムネイルを使用したいときには、cardThumbというtagが存在するかのように、
<card-thumb card="cardのデータ"></card-thumb>
などの形で使えば、表示する際には適切な形に変換して置き換えてくれます。
これをうまく使うことで、html自体が見やすくわかりやすくなるので、かなり便利です。
シネマジェネレーター（シネマ機能を作るツール）
シネマ
シネマ機能とはオトギア内で流れるキャラクターが話したりするのを物語として見える機能です。ジェネレーター
この機能の再生情報はJSON形式のデータになっています。そのJSON形式のデータをエンジニアだけではなく、プロデューサーやデザイナーがJSONを意識しなくてもある程度作ることができるものをシネマジェネレーターと呼んでいます。
ジェネレーター内でシーンの追加や、セリフの追加、背景の追加、声などの音声再生のタイミングなどを設定することが可能です。
(デザインをしてないためすごく簡素化してます・・・)
設定された項目から、JSONデータを生成しそのJSONデータを使用してプレビューすることができます。
やってる事自体は簡単ですが、AngularJSのデータバインディングを使用しないで作ると結構めんどくさい部分が多く、AngularJSさまさまな機能でした。
この画面内で再生が可能なしくみになっており、機能をモジュール化したことで、再生機能自体はゲーム内で使っているものをそのまま使えるようになってます。
参考
AngularJSを始める際に参考にしたサイトなどをご紹介します。
ビデオチュートリアル
・https://egghead.io/
AngularJSを使ったbootstrapフレームワーク
・http://angular-ui.github.io/bootstrap/
AngularJSをベースにしたモバイル用フレームワーク
・http://ionicframework.com/
foundationのAngularJS版
・http://madmimi.github.io/angular-foundation/
AngularJSを使ったMaterial Design用フレームワーク
・https://github.com/angular/material
さいごに
今回はAngularJSの基本的な機能ベースのお話しか出来ませんでしたが、基本的な機能だけでも便利な機能がたくさんあります。AngularJSがまだモバイルに最適化された状態であるとは言いにくい部分もあり、苦労した部分などもありました・・・。(AngularJS 2.0に期待)
AngularJSを使ってるゲーム、オトギアを触っていただければ光栄です。