Amazon

2011年8月14日日曜日

mixiモバイルアプリ開発(1)

mixiモバイルアプリ開発 - 一般論 -
いつものごとくGoogle App Engine (Python)で実装しているのだけど、
mixiのモバイル(携帯電話)アプリの場合、Firebugが使えないためデバッグ環境が乏しい。
FirefoxのextensionのFireMobileSimulatorを入れて、
携帯の機種(User-Agent)を切り替えて行う必要がある。

バグと戯れる(1)
さて、簡単にモバイルアプリつくってみたのだけど
モバイルアプリ内でのページの遷移方法はmixi developer centerでは以下のように書いてある

○GETの場合 

<a href="?url=http%3A%2F%2Fexample.com%2Ffoo%2Fbar%3Fa%3D1%26b%3D2">次のページ</a>

○POSTの場合

<form action="?guid=ON&url=http%3A%2F%2Fexample.com%2Ffoo%2F" method="post">
  <input name="field1" type="text" value="value1" />
  <input type="submit" value="送信" />
</form>

要はリンク先はhrefにしろactionにしろ"?url=[エスケープ済みURL]"で記述しろとのこと。
そんなわけで早速エスケープ済みURLでGETリクエストを記述してみた
<a href="?url=http%3A%2F%2mytest.appspot.com%2Fhoge">次のページ</a>
ところが、
"只今ｱﾌﾟﾘｹｰｼｮﾝｻｰﾊﾞｰでｴﾗｰが発生しています。しばらくしてから再度ｱｸｾｽしてください。"
というエラーに遭遇。

デバッグしようにもmixi側ではこのメッセージのみで他は何も表示されないし、
Google App Engine側のログを見る当たりリクエストすら飛んで行ってない。
現象としてエラーが表示されている画面のURLに見慣れない"s=xxx"のクエリ文字列(93桁)がついている。
"http://ma.test.mixi.net/xxxx/?url=http%3A%2F%252mytest.appspot.com%2Fhoge&s=ZWJkZTEyMDNlNzY2MDZhN2Q5NmVmNWY2MDk....以下省略"

mixi側で勝手に変な文字列でもつけるのか？と思っていたのだけど、
どうも正しくないURLへアクセスした際に付いてくるデバックコードみたいなものっぽい。

上記のURLと自分で記述したaタグの中身をよーく見てみると一部書き変わっていることに気づく。

href="?url=http%3A%2F%2mytest.appspot.com%2Fhoge"
http://ma.test.mixi.net/xxxx/?url=http%3A%2F%252mytest.appspot.com%2Fhoge

ん？"52"ってなんだ？
あ。。。
hrefの記述の際に"/"のエスケープ文字列は"%2"ではなく"%2F"なのを書き間違えたためにエラーが発生。
おいおい、気づけよ自分(--;


バグと戯れる(2)
またまたエラー発生。
今度のエラーは
"只今ｱﾌﾟﾘｹｰｼｮﾝｻｰﾊﾞｰでｴﾗｰが発生しています。しばらくしてから再度ｱｸｾｽしてください。(body)"


(1)と似たエラーだが、今度は"(body)"がついてきた。

結論から言うと
Python(サーバーサイド)からHTMLのbodyタグの内容が変な場合に起こる。



*main.py*
class TestHandler(webapp.RequestHandler):  
def get(self):
        self.response.headers['Content-Type'] = 'application/xhtml+xml; charset=Shift_JIS'
        self.response.out.write('hoge')

application = webapp.WSGIApplication([
        ('/hello',TestHandler)], debug=True)

def main():
    run_wsgi_app(application)

if __name__ == '__main__':
    main()

3行目が原因なんだけど、乱暴な結果の返し方をすると怒られる。
通常はテンプレート(ここではtmpl/hello.html)を使って
*main.py*
class TestHandler(webapp.RequestHandler): 

def get(self):
        self.response.headers['Content-Type'] = 'application/xhtml+xml; charset=Shift_JIS'
        template_values = {
            'user_info': 'hoge',
            'page_num':page,
        }
        path = os.path.join(os.path.dirname(__file__), './tmpl/hello.html')
        self.response.out.write(template.render(path, template_values))
application = webapp.WSGIApplication([
        ('/hello',TestHandler)], debug=True)

def main():
    run_wsgi_app(application)

if __name__ == '__main__':
    main()

*tmpl/hello.html*
<?xml version="1.0" encoding="Shift_JIS"?>
 <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" dir="ltr">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
        <title>Test</title>
    </head>
    <body>
        <div style="text-align:center">
            {% if user_info %}
            User Info: {{ user_info }} 
            {% else %}
            No user info.
            {% endif %}
            page_num:{{ page_num}}  
        </div>
    </body>
</html>

みたいに書く。


とりあえず困ったらまずはmixiのモバイル開発用コミュニティRemixLabsで確認
1）RemixLabsのコミュニティにアクセス
パートナーアカウント、またはパートナーテストアカウントでmixiにログインし、「RemixLabs」コミュニティにアクセスします。

2）RemixLabsコミュニティに参加
コミュニティTOPページにある「このコミュニティに参加」ボタンをクリックし、コミュニティに参加します。
投稿者 時刻:
ラベル: ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)

Amazon3