キャバウォーズで学んだスマートフォン初心者Tips
はじめまして、gumiのジョンです。
８月に一ヶ月頂いてgumiのキャバウォーズアプリをMixi Touchスマートフォンに移植させて頂きました。対応の半分以上は単純にFlashからHTML5への書き直しでしたが、今考えたらいくつかの点は誰かが先に知らしてくれたらよかったと思います。このTipsリストはそのスマートフォン対応を始めようとする過去ジョンのためです。つまり、この投稿のもう一つのタイトルは「Mixi Touch対応を始めるジョンへ 〜愛情を込めて〜」。
早速Tipsですが、
1) hrefは次のページのトップにリンクすべきです。
<a href="http://gu3.co.jp/index.html">Next Page</a>
じゃなくて
<a href="http://gu3.co.jp/index.html#">Next Page</a>
iFrameの中でページのリンクをクリックしても自動的に次のページの上に移しません。JavascriptのscrollTo()もiFrame内で効きません。「#」へのリンクは簡単で一番いい解決です。
2) 認証はセッションIDでやります。（Djangoの例は下記です）
OpenSocialの認証ができたら、ユーザーのcookieにセッションIDを埋め込みます。次のページビューからそのセッションIDを確認するだけです。
そこまでは常識です。ただ、気をつけて！
iPhoneなら、iFrameは一ページ目からcookieを設定できません。一ページ目のみ、セッションIDをURLパラメータにしなければなりません。
例のDjango認証は下記です。
まず、REQUESTからもcookieからもセッションIDを取得しようとします。
# セッションIDはCOOKIESからもREQUESTからも取得しようとする。Safariの制限で初ページはCOOKIESを使えない
session_id = request.REQUEST.get("session_id", None)
if(session_id is None):
session_id = request.COOKIES.get("session_id", None)
セッションIDがあれば、それで認証を行うとします。
# 有効セッションIDの場合、view_funcを呼び出して終わる
if session_id is not None:
session_data = tt_operator.getobj(session_id);
if session_data is not None:request_userid = request.REQUEST.get("opensocial_viewer_id", None)
if session_data['expire_time'] < time.time():
# セッションIDで認証できない
tt_operator.out(session_id)
elif request_userid and str(request_userid) != session_data['opensocial_userid']:
# セッションIDで認証できない（同じiPhoneから別アカウント）
tt_operator.out(session_id)
else:# 認証成功！certificateチェックが要らない！
session_data['expire_time'] = time.time() + 60*30; #60秒 * 30分
tt_operator.setobj(session_id, session_data)
request.opensocial_userid = session_data['opensocial_userid']
request.session_id = session_id
response = view_func(request, *args, **kw)
response.set_cookie("session_id", session_id)
return response
セッションIDが無い場合、フル認証を行おうとします。
# certificateチェックが必要です。
session_id = str(uuid.uuid4())
response, success =
_check_certificate(request, session_id, *args, **kw)
二回目の認証のためのセッションIDをcookieに置きます。
# certificateチェック成功！今後はチェックしたくないからセッションデータを保存する
if success:
session_data = { 'opensocial_userid' :
request.REQUEST['opensocial_viewer_id'],
'expire_time' : time.time() + 60*30 }
tt_operator.setobj(session_id, session_data)
response.set_cookie("session_id", session_id)
return response
トップページでセッションIDをURLに置くことが大事ですので気をつけて。キャバのローンチ日の午後にトップページを変えてしまいましたが、その影響で新ユーザーの認証ができなくなりました。夜23時に気づきました。走って会社に戻りました。夜23時の新宿の道を走るのはつらいです。
3) HTML5を使ったら下記のブラウザバグに気をつけて：
http://code.google.com/p/android/issues/detail?id=5141
リンクに解決の話がありますが、基本的にdrawImage()のオーバーライド関数を作ることになります。オーバーライドの実装でdrawImageのパラメータを画面サイズでスケールします。
- 古いiPhone = iFrame内タッチイベントが正しくない：
http://fun.kyco.de/2010/08/16/ipad-safari-bug-touching-iframes/
iFrameのY座標がページの下にすればするほど、中のHTML5キャンバスのタッチイベントが効かなくなります。詳細は上記のリンクにあります。このバグの影響がよく分かります；伊豆半島で彼女と休んでいた間にMixi Touchのアドプログラムが始まってキャバのiFrame位置がバナーによって微妙に下がりました。彼女にプロポーズしたら３０分後に「キャバのバトルが効いていないけど」と電話が来ました。
4) あたり前ですが、携帯と違ってハッカーさんがソースを簡単に読めます。Obfuscatorを使っても。
- HTML5/Javascriptのミニゲームなら大事な計算はサーバー側で行うべきです。
- ユーザーに見せたくない数字も出さない必要があります。
５）携帯からの移植だとしても、できればiPhone専用のインタフェイスを作ってね。
この投稿を書いているジョンを真似しないで。
jQTouch、jQuery Mobileを使ったら頑張らなくてもきれいなメニュー構造は作れます。非常に簡単です。キャバの携帯版メニューをそのままスマートフォンに移植したのは間違いだったと思います。
jQTouch:
http://jqtouch.com/
jQuery Mobile:
http://jquerymobile.com/
