Flash・HTML5を利用した携帯・スマホ向けアプリ開発(1)

はじめに

はじめまして、用務員の板倉と申します。

HEKKでは、用務員業務の他に、女性向けアプリの開発・運営をおこなっています。

何回かに分けて、はじめようポケット・バーの携帯表示の仕組みやHTML5に対応したときの話を記載したいと思います。

はじめようポケット・バー

はじめようポケット・バー(ポケバー)は、バー経営シュミレーションゲームです。最初にmixiでリリースしたのが2010年10月。その後GREE、モバゲーへと順次リリースをおこないました。mixiのリリースからもうまもなく2年経ちますが、今でも多数のユーザー様に遊んでいただいていますので、とても長く楽しめるアプリとなっています。

リリースした当初は、ポケバーはFlash Lite 1.1以上が動作するいわゆるガラケーのみの対応でしたが、スマホ対応の要望が増えてきた影響もあり、 2011年6月にAndroidに対応。それから8ヶ月後の2012年3月に、iPhone対応をリリースしました。

iPhone対応に向けて

Androidとは異なり、iPhoneではFlashが動作しません。そのためHTML5などの別の技術を使用する必要があります。

またバーの店内に配置することが可能なインテリアの総数は、その当時ですでに1,300個を超えていて、これを新しい技術で動作するように置き換える必要があり、かなりの作業ボリュームが見込まれました。ポケバーの運営を続けながら、この作業をおこなうには当時リソース不足で、外注先にお願いすることになりました。見積り工数はおよそ2ヶ月。2011年の年末にかけて作業をおこなっていただきましたが、なかなか進捗が出ませんでした。

しびれを切らして、何か短期間でiPhone 対応できる方法がないかを検証したところ、Swiffyを利用すれば比較的簡単に対応が可能なことがわかりました。Swiffyとは、Flash(SWFファイル)をHTML5に自動変換してくれるツールで、Googleが無料で提供しています。

以前からSwiffyについては随時調査をしていましたが、ポケバーのFlashが特殊なことを行なっているため、Swiffyで変換したHTML5が正常に動作せずに、利用を断念していました。しかしSwiffyもバージョンが上がって、以前に比べて性能も向上したせいもあり、ポケバーのFlashを一部修正することで、Swiffyで動作させることに成功しました。

この時の対応を元に、簡単に注意点として以下にまとめます。

Swiffyで動作させるためのFlashを作成する際の注意点

インスタンス名と変数名

duplicateMovieClipで作成したインスタンス名と同名の変数名を作ると、movieClipにインスタンス名でアクセスできなくなります。

例えば、以下のようなコードは動作しません。

duplicateMovieClip("l", "l1", depth);
set("l1", 1);
l1:_x = 100; // ×動作せず

フレーム上に直接おいたmovieClipも同名にするとアクセスできなくなることがある(アクセスできる場合もある）ので、インスタンス名と変数名の同名は避けたほうがよいです。

duplicate時のインスタンス名指定

インスタンス名指定に階層を含めると、Swiffyでは動作しません。

duplicateMovieClip("/b/ip/s", "ss",_root.tn + 1); // ×動作せず
tellTarget("/b/ip") { duplicateMovieClip("s", "ss",_root.tn+ 1); //◯ 動作します

条件式

2項目以降の論理和の場合、trueを記述しないとSwiffyでは偽に判定されてしまいます。

a = false;
b = true;

if (a || b) {
 // Swf ではここが呼ばれる
} else {
 // Swiffyではここが呼ばれる
}

以下のように記述すれば、どちらでも動作します。

if (a == true || b == true) {
 // SwfでもSwiffy でもここが呼ばれる
} else {
 // ここは呼ばれない
}

フレーム名

フレーム名に数字(例えば2)をつけた場合、Flashではa=2の場合にgotoAndPlay(a)を呼び出してもそのフレームには移動せずに、付けられたフレーム名には無関係に2番目のフレームに移動しますが、Swiffyだと移動してしまいます。フレーム名にメモ代わりに数字をつけてる場合は注意が必要です。

日本語対応

日本語が含まれているFlashの場合、パブリッシュ設定を携帯で動作させるための以下の設定のままだと、日本語が文字化けしてしまいます。

　　パブリッシュ設定:

　　Player: Flash Lite 1.1

　　スクリプト: ActionScript 1.0(Flash Lite 1.1を選ぶとこれ以外選択不可）

そのため日本語が化けないようにするためには、PlayerをFlash Player6以上にする必要がありますが、これだとFSCommand2 などのアクションスクリプトがエラーになってしまい、携帯とHTML5用とでflaファイルを分けないといけなくなり、ちょっと不便です。

FSCommand2("FullScreen",true); // Flash Lite2だとエラー
FSCommand2("SetQuality","high"); // 同上

そこでおすすめは、以下の設定です。

　　パブリッシュ設定:

　　Player: Flash Lite 2.0

　　スクリプト: ActionScript 1.0

ただし、これだとFSCommand2は使用できる代わりに、空の変数の扱いが異なるので、これを使用している場合は対応が必要になります。例えば、_root.return_url が未定義の場合

if (_root.return_url eq "") {
    gotoAndPlay("load"); // Flash Lite 1.1ではここが動く
} else {
    gotoAndPlay("start"); // Flash Lite 2.0ではここが動く
}

Flash Lite 2.0 では値が入っていない変数は undefined となり、Flash Lite 1.1 が空文字("")となっていたため、両者で結果が異なってしまうことになります。

なので、こういうときは、以下のように書き換えておけば、携帯版とHTML5版とでSWFを分ける必要はでるけど、コード(flaファイル)は共通化がおこなえます。

if (_root.return_url eq _root.dmy) { // _root.dmy はFlash内で使用していない変数を選ぶこと
    gotoAndPlay("load"); // どちらも_root.return_urlが定義されるまでこちらが呼ばれる
} else {
    gotoAndPlay("start");
}

問題点

以上で、ポケバーのFlashをSwiffyで動作させることができるようになりましたので、最初の一歩はクリアといったところですが、ポケバーのインテリアは1,000種類以上あり、これを1つのSWFにして、Swiffyに変換したのではデータ量も多く実用に耐えれるものではありません。

また、そもそもSwiffyで変換可能はSWFファイルのサイズは、1Mバイトが上限になっているのですが、すでに100Mバイトを超えるSWFになっていたため、そのままでは変換すらおこなうことができません。

そのため

1つのSWFではなく、ある程度の細かいファイルサイズに分けること
HTML5を動的に生成して必要なインテリアのみを含めたHTML5にすること

などが必要になります。

それから

Swiffyが書きだしたHTML5をよく見てみると、swfmillが吐き出すxmlと構造が非常によく似ていることに気付きました。

swfmillはSWFファイルをxmlに変換してくれる無料のツールです。ポケバーでは携帯用のSWFファイルの動的生成に利用しています。

もしかしたら、携帯用のSWFファイルの動的生成と同じような方法で、HTML5も動的生成させられるのではないか・・・

早速Swiffyが吐き出すHTML5の解析が始まりました。

　　(次回につづく・・・かもしれません）

一緒に働きたい方、絶賛募集中
京都で女性向けアプリを開発してみたいというエンジニアの皆さん、ご応募お待ちしています！
技術力を伸ばしたい学生さん、アルバイトも可能なのでご応募お待ちしています！
大阪、滋賀、神戸から通勤実績あり

カカリアスタジオブログ

Happy Elementsのゲームブランド「カカリアスタジオ」の公式ブログです。