業務系Java屋がMixiアプリをリリースするまで

なんかどっかで見たことあるようなタイトルだが(ﾟεﾟ)ｷﾆｼﾅｲ!!

Mixiアプリ パズルゲームColorBlock

長文です。覚悟してください。

前提

まず自分は完全にJava屋であるということ。それも業務系のみ。Java以外の言語でおそらく比較的まともに触れるのはC言語くらいか。他の言語はリハビリが大量に必要だったりすると思う。C言語系のシンタックスがすきということもある。

したがってサーバーサイドの技術、JavaEEとかSQL/RDBあたりとか、AWT/Swing等GUIを利用したJavaアプレットやJavaアプリケーションとか、HTTP/HTMLとかはまぁ仕事で触れており、さほど問題ない。

Mixiアプリとは

OpenSocialというプラットフォームを利用したWebブラウザ上で動くJavaScriptによるクライアントサイドのアプリ。JavaとJavaScriptは名前は似ていてもまったくの別物。Java屋にとって天敵のような存在。

Flashも利用できるが、OpenSocialのAPIはすべてJavaScriptで用意されている。そのためFlashだからJavaScriptの知識はまったく必要ないというものでもない。頻繁にMixiアプリのAPIを利用する場合かなり面倒なことになりやすいはず。

そしてそのOpenSocialの各種APIにMixi独自のAPIがある。Mixiのつぶやきとか。

いわば、Script全開のHTML5の時代！かと思いきや、PC版の推奨環境にはユーザーが多いIEを入れてほしいとの文言がある。そのため、JavaScriptが遅いIEで開発をしようとすると苦しむことになる。特にゲームはきつい。

一言でまとめると、「JavaSciprでHTMLのDOM等を動的に生成していってコンテンツをくみ上げるもの」というものである。

ちなみに個人で開発可能なのはPC版のみである。携帯やスマートフォンは法人登録しないといけないので注意。

JavaScriptをどうするか

さて最大のもんあぢはJavaScript。大して規模が大きくなければまぁがりが理解手もよいが、ロジックが増え、ソース分割するようになると自分がなれてないせいもあって、非常に使い勝手が悪い。

そこでGWT(Google Web Toolkit)です。

GWTとはJavaのソースからJavaScriptを生成するものです。その生成されたソースはソースをコンパクトにし、各ブラウザごとに最適化されています。

JavaソースからJavaScriptへのコンバートには意外と時間がかかります。そこでブラウザにプラグインを入れて開発モードで開発することで、コンバートせずに実行可能になり、デバッグが容易になります。

ただし、そのかわりスループットは遅くなりますのでゲームのようなタイミングがシビアな場合は問題に成る場合もあります。

また、あくまでもブラウザにGWTのプラグインを入れるのが前提です。Mixiアプリ（OpenSocial）はサーバー経由でブラウザへ到達するために、このプラグインは使えません。また、この開発モードは多少バグがあるようで、拡張forが失敗するときがあるようです（ちょっと前のバージョン使ってるので直ってるかも）。このように使い方少しコツがいります。

Javaではなく、C言語使いが利用するのもよいと思います。メソッドはすべてstaticにしておけばC言語とそんなにかわりません。

画面描画をどうするか

もともとColorBlockはCanvasで作成されていました。（Mixiアプリじゃないほうは今でもそうです。チューニングされていないし、音はでないし、エフェクトもないし、ルールもやや違うのでMixiアプリとはかなり別物ですが）

問題はCanvasタグがないIEでした。そこでFlashCanvas PROを利用しました。Canvasエミュレーション系では圧倒的に品質がいいのですが、レンダリングタイミングをコントロールできないことからかなり使い勝手が悪いです。静止画では問題ないのですが。

そこでMixiアプリ版ではFlashでスプライトエンジンから作成しました。必要なのはCanvasではなくて、画面に描画できること。そこでCanvasのような汎用的なものではなく、8bit時代からおなじみのスプライトに特化したものを作成しました。ご存知のとおり、フレームバッファと違い、スプライトは非常に少ないデータ量で大量のキャラクターを表示することが可能です。これで大幅に高速化できます。IEでもちゃんと遊べる速度モデル用になりました。

その後単純なスプライトエンジンだけではなく、音も管理するようにしました。

開発手法は

開発環境はJavaSE/EEを中心にcss/html/JavaScript等も必要となるとNetBeans一択ですね。GWTプラグイン入れて。

まぁ、普段使い慣れてるやつでOK。

描画は前項のスプライトエンジンでおこなうため、ロジックのテスト等はその部分を丸ごとさしかえることによってJavaSEで行うことが可能です。Swing＋Java2Dで構築したいわばエミュレータで動作させるというわけです。同様にCanvasでライブラリを用意してスマートフォンで対応もすぐに可能です（ただし、Mixiアプリで個人では対応不可能なこと、スマートフォンはマシンパワーがPCと比べて死ぬほど低いことなどがあってかなり調整は必要だと思いますが）。

まず、上記JavaSE用のスプライトエンジンを使い、JavaSEスタンドアロンで開発。ここでゲーム本体の基本部分を完成させます。一番何度も再実行が必要なため、ソース修正から実行までが1秒以内に終わる環境はこの流れではここしかありません。

その後、GWTでWebブラウザ上で動作確認します。ここでは主に動作速度やブラウザの違い、GWT対応可能なAPIなどの対応、調整をします。Javaのメソッドを利用するのではなく、すべてラッパを用意してそれを経由することによって対応具合等を気にせず扱えるようにするとよいでしょう。

最後にMixiアプリ化。ここで最終的に調整をします。実際にMixiのサーバー経由でアクセスしてみないとわからないところはありますのでここもじっくり時間をかけます。GWTにOpenSocialモジュールがありますのでそれを利用します。ただ、怪しいAPIとかAPIのバージョンとかいろいろとありますので基本用意されているAPIは使わないことをお勧めします。

ロジックはすべてJavaですみますが、MixiのAPI（OpenSocial）を利用する際にはJavascriptの知識が必要となります。JSNI（既存のJavascriptとのやり取りをするためのインターフェース）でラップするのでガリガリ書くことはほとんどないですが、そのへんのライブラリ整備中はかなり流れを意識する必要があります。基本非同期で動きますので。

というわけでJavaをコアの技術としてサーバーサイドのみならずクライアントサイドもJavaでソフトが書けるようにしています。

作業時間の捻出

仕事もそうですけど、土日に一気に時間をかけて作業というのは自分は向かないです。8時間作業したとしても集中できる時間はせいぜい1時間です。

そこで、毎日10分〜1時間程度を作業時間として割り当てました。短時間で集中して、今日はどのように実装するかを夕飯作りながら食べながら考えて食べ終わったら短時間集中します。今日どこまでやるべきか、というのは前日までに決めておきます。平均しても1日あたりの作業時間は20分程度だと思います。基本的に作業量は15分以内で終わるものしか割り当てないようにしています。

開発中のときから追っかけてきた人はわかると思いますが、一通り動くようになってからもほとんど毎日のようにバージョンアップしていました。もともと1機能付け加えたら終わりという短時間でくるくる回す方式で開発していたので、苦ではなかったです。バグや改善点を7こ見つけたら、一気に7つ直すのではなく、1日1個ずつつぶして1週間かける、といった感じでした。

これをこつこつほぼ毎日やるだけです。実作業時間としては

• Mixiアプリの前のColorBlock作成で20時間（Cnavas等の勉強時間とかいろんなテスト、お絵かき含めて）
• Mixiアプリ移植で4時間
• スプライトエンジン作成で8時間
• Mixiアプリ用に機能追加等カスタマイズ8時間

といった感じでしょうか。合計すると40時間。もし週5日、8時間作業していたら1週間で出来そうに見えますけど、実際は無理ですね。1日間を空けることによって整理される情報ってのは無視できないです。また、そういう妄想してるときってのは楽しいですしね。

カテゴリの不透明さ

アプリは掲載時にカテゴリがつけられます。このカテゴリはMixi側が設定するのですが、この振り分け基準がまったくわかりません。ゲームはエンターテインメントに割り振られることが多いのですが、実はかなりの量が「その他」に割り当てられています。

この「その他」というカテゴリは、ズバリ「大はずれ！」でして、こっちにきてしまうとユーザーのアクセス数は「桁単位」で大きく減ってしまいます。カテゴリごとの一覧に乗らなくなるためです。個人ならともかく、企業だとこれによって収入そのものが1,2桁変わってしまいますので死活問題です。

残念ながらColorBlockもその他のカテゴリです。原因はわかりません。マイミク内のみでのハイスコアランキングで競うというスタイルなのですが、同様の仕組みのみでエンターテインメントになっているソフトもあり、基準がまったくわかりません。

ただし、例外もあります。マイミク外とのユーザーとのやり取りが発生するソフトは必ずその他に分類されるのですが、こういったソフトは別途掲載されることもあって積極的にその他を狙ってよいという特殊なものです。上記のようにカテゴリ掲載の不透明さがありますので、マイミク内でつながるアプリよりマイミクを無視したアプリのほうがおそらくMixiアプリで開発する上では重要かもしれません。Mixiのドキュメントでは友達を大事にするような方向が望ましいと良く書かれていますが、現状ではまったくの逆なようです。

Mixiアプリでゲームを探す場合、エンターテインメントのカテゴリで探すのではなく、その他も含めて探すとよいでしょう。その他のみで検索ができないこともかなりきついですが、地道に。

複数のアプリを提供しているところは自分が作った他のアプリへのリンクがあることも多いですね。Mixiアプリはなんとアプリの検索ができないという仕組みですので、こういたものを用意して埋もれないようにがんばっているのだと思われます。

Mixiアプリではゲームが多いですが、検索が一切できないし、ゲームの種類の検索ができない（というかゲームの検索そのものができない）ことからそういったデータベースを作ると意外と需要はあったりするかもしれません。

ちなみに

ちなみに、Mixiアプリの開発者は性別や年齢の割合等ユーザーのデータが見れます。1日前だけですが。もちろん、個人を特定するデータはありませんので安心してください。そもそも自己申告制なのでこれは当てになりませんが、多少の参考にはなるでしょう。

自分が公開した直後は自分が男性、マイミクもほぼ男性ということもあってユーザーのほとんどは男性でした。それがどんどん女性の割合が増えて今では女性のほうが多いようです。

女性のほうがパズルゲームは好きな傾向あるかもしれませんね。テトリスとかパネルでポンとかぷよぷよとか好む女性はかなり多いですし。

ユーザーの趣向を把握した上で調整できるタイプのゲームは徹底的に調整、そうでないなら次回作につなげるというのはありでしょう。

サーバー

[このエントリ追記]

VPSを利用しています。ColorBlockの運用では今のところ静的なファイル、Apacheのみですが（ハイスコアは最終的にMixiのサーバーにのみ保存するようにしました）、GlassFishを利用しているためです。

GlassFishは以前書いたように、JKコネクタを標準で持っていますので、何もせずにApache2.2と連携することが可能です。チェックボックスを入れるだけでJKコネクタが有効になります。

いれたのはJavaEEフルのプロファイルではなく、Webプロファイルのほうです。Webプロファイルはwarアーカイブしかデプロイできませんが、その分軽くなっており、Tomcatに管理ツールをつけてより高い性能、機能をだせるようになった製品と思って結構です。

まとめ

• Java言語が得意な人は無理にJavaScriptを使わずGWTを使え。最適化もしてくれる
• IE8以下が死滅するまではクロスブラウザのためにFlashで作成したスプライトエンジンを作ること
• ゲーム作成＝＞Webアプリ化＝＞Mixiアプリ化というステップを踏む
• 毎日少しずつ10分でいいのでコツコツと。少しでも進んでいればいつかは完成する。歩みを止めるのが危険
• カテゴリは基準がまったく不透明でわからない。友達のつながりを排除したものの方がよい場合は多い

Javaで書いてるってことはAndroidの移植も1日もあればさくっとおわるでしょうしね。