「テガキモンスター」―サーバーサイドの裏側（アプリ連携編）
はじめましてこんにちは。
株式会社ユードーで主にサーバーサイドのプログラムを担当しているpullと申します。
去る11/18にリリースされました「テガキモンスター」、もうプレイされたでしょうか？
その「テガキモンスター」の技術面について自分でもちょっとずつ思い出しながらつらつらと解説（？）していきたいと思います。
今回は、サーバーサイド（ブラウザ表示）とクライアントアプリの連携に的を絞って解説します。
「ハイブリッド型」アプリ
このテガキモンスターはご存じの通りAppStoreにて「iPhoneアプリ」として公開されてはいますが、実際のほとんどの画面表示はアプリ内部のUIWebKit*1で行われており、従来のブラウザ型ソーシャルゲームと同じようにほとんどがブラウザ表示によって完結するように作られています。
なので、実はクライアントアプリ本体の機能を使う場面は以下の機能だけです。
- テガキ画面（モンスターをテガキするパート）
- 演出画面（バトル勝利・敗北やシール合成成功・失敗をアニメーションで表示するパート）
- In-App Purchase画面（アプリ内課金により仮想通貨を購入するパート）*2
- BGM再生（アプリ本体に楽曲データを内蔵しループ再生）
つまり、アプリ本体の更新を（頻繁には）必要としないため、審査に掛かる期間を減らせます。コンシューマー型のゲームに比べ圧倒的に期間は短いとはいえ、AppStoreの審査は最低でも5営業日くらいは掛かります*3。この手法であれば、（アプリ内部の機能を使用しない限りは）サーバー側の改修だけですむため、すぐに追加機能を反映することが出来ます。
このような手法を採用しているアプリは実際の所そんなに少なくなかったりします*4が、このアプリで特筆すべき点は上にある機能以外全ての画面表示をWebKitブラウザによって賄っている点*5と、他のアプリでは一部の画面表示部分とアプリ内課金部分のみをアプリ内部の機能として使用している（というようなのが多い印象）ようですが、テガキモンスターではあくまでも「いかにも」iPhoneアプリ（というよりスマートフォンアプリ）っぽい機能や滑らかなアニメーションを実現するためにアプリ連携をしています。
どうやって連携してるの？
UIWebKitとクライアントアプリ本体の機能を連携させたものを作ったことがある方は既にご存じかとおもいますが、「単なるブラウザからアプリの機能を呼び出すなんてどうやるの？」と疑問をお持ちの方もいらっしゃるでしょう。
ちなみに、AndroidのSDKの場合はアプリ内のブラウザから特定のJavaScriptを呼び出すことで比較的容易にアプリ内連携することができる仕組みが公式で用意されていますが、iOSのSDKにはそのような仕組みは（今のところ）公式では用意されていません。
いくつか方法はありますが、今回採用したのは「本来は絶対に存在しないようなリンクをaタグやリダイレクトで呼び出し、アプリがその情報を受け取るようにする」というやや強引（？）な方法です。・・・と言われてもイマイチ意味が分からないと思いますので、実例を示します。
以下はこのアプリでテガキ画面を呼び出す際に実際に使用しているリンク*6です。
// aタグを使用してテガキ画面を呼び出す
<a href='.{"action":"tegaki","time":120,"return_url":"http://xxxx.com/xxxx","send_url":"http://xxxx.com/xxxx","name":"モンスター"}'>テガキ画面へ</a>
// JSを使用してテガキ画面を呼び出す
window.location = '.{"action":"tegaki","time":120,"return_url":"http://xxxx.com/xxxx","send_url":"http://xxxx.com/xxxx","name":"モンスター"}';つまり、ピリオドから始まるリンクがUIWebKitで呼び出されたとき、アプリはその後ろにある部分*7を読み取り、適切なアプリ内部の機能を呼び出す、というわけです。
この方法により、WebKitブラウザだけでは実現不可能・困難な機能をクライアントアプリ側にぶん投げることが出来ます。当然、クライアントアプリはObjective-Cで書かれたiOSネイティブなアプリで、ブラウザのみでHTML5やJavaScriptを使って実装する場合よりも高速に動作するため、今回のような画面タッチを使ったテガキ画面やアニメーション演出を派手なモノにすることが出来ます。
と、今回はこのへんで。
次回はがっつりサーバーサイドに関する解説をいたします。
