swiffy x webview 構成のアプリでSE(音声)再生を実現する方法

2013/12/16

SuzukiKoichi

こんにちは、アプリ制作勉強中のサーバーサイドエンジニア鈴木晃一です。

GREE Advent calendar 2013 の 16 日目として参加させていただきます。

LWF/unity/JS系各種ツール等々ポストflash/HTML5時代の演出・アニメーションエンジンがシェアを争っている昨今スマートフォンゲーム業界ではあまり選択されることのないswiffyを用いてプロトタイピングを行う機会に恵まれたので、その時に取り組んだswiffy-webviewを用いたiOS/AndroidアプリでのSE(音源)再生の実現方法についてご紹介します。
ロードが遅いなど他にも問題はありますが、SE(音声)再生出来ないことがswiffy採用を見送る決め手になることも多いと思うのでこれでswiffyの活用機会が広がる…かも？

今回ご紹介する方法は、swfのtraceがswiffy実行時にconsole.logに出力されることを利用してSE(音源)再生を実現します。

FLASHでtrace出力
JSでconsole.logを監視、アプリに通知
アプリ側で通知を受信、SE(音源)を再生

サンプルコードで見ると以下のようになります。

FLASHでtrace出力

trace('se01')

1	trace('se01')

JSでconsole.logを監視、アプリに通知

<div id="swiffycontainer" style="width: 100%; height: 100%"></div>
<script>
    
    var original_console_log = console.log;
    console.log = function (log) {
        var command_uri = 'sound://' + log;
        location.href = command_uri;
    }
    
    var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject); stage.setFlashVars("");
    stage.start();
</script>

var original_console_log = console.log;

console.log = function (log) {

var command_uri = 'sound://' + log;

location.href = command_uri;

}

var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject); stage.setFlashVars("");

stage.start();

</script>

アプリ側で通知を受信、SE(音源)を再生
iOSでの例

<ul>
<li>(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{</li>
</ul>

    NSString * urlStr = [[request URL] absoluteString];
    if([urlStr hasPrefix:@"sound://"]){
        sound_player.currentTime = 0;
        [sound_player play];
        return NO;
    }else{
        return YES;
    } 
}

<ul>

<li>(BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{</li>

</ul>

NSString * urlStr = [[request URL] absoluteString];

if([urlStr hasPrefix:@"sound://"]){

sound_player.currentTime = 0;

[sound_player play];

return NO;

}else{

return YES;

}

なかなか注目されているとは言いがたいswiffyですが、LWFとならんでflash経験者にとっては取っ付き易いツールであることは間違いありません。アップデートのサイクルも短く日々パフォーマンスも向上しているので以前試したことがある方はもう一度触ってみるとまた違う感触を得られるはず、ぜひお試しください！選択肢の一つとして頭の隅においておくと意外と便利かも！

明日は「いわなちゃん」の投稿となります！