 |
|
|
| |
|
弊社ブログは２０１０年４月２６日からURLを変更いたしました。
ブックマークやRSSで登録されている方は、下記URLへ変更願います。 http://www.conit.co.jp/blog/ 今後とも宜しくお願い申し上げます。 ２０１０年４月２６日 株式会社コニット |
|
|
2010,02,02, Tuesday
Being a newbie at web development for mobile in Japan, I was really surprised at how difficult it can be to make a simple web page render correctly for all Japanese mobile phones. Here are a couple of learnings.
Character encoding by carrier Japanese developers are all too familiar with the pains of encoding, but this problem is especially true in the Japanese mobile realm. Just like IE is different from other browsers in the PC world, mobile devices have differences in how html can be encoded. To know the carrier type, you need to inspect the HTTP_USER_AGENT header. The best way to do this is by using middleware, such as uamobile (http://pypi.python.org/pypi/uamobile/0.2.8). For now, I wrote a very simple Python function that seems to be working thus far: def get_encoding(user_agent): #since different keitai browsers have different encoding, need to account in header if "KDDI" in user_agent: #AU needs SHIFT_JIS encoding return 'SHIFT_JIS' else: #EVERYTHING ELSE IS UTF-8 return 'UTF-8' This function is very crude, and I'm still not convinced it actually works, so if you have a better way to do it let me know. As the function above shows, AU phones require SHIFT_JIS encoding, while all other carriers support UTF_8. This can be very annoying. If you use templates in your app, the template files must also be encoded in the correct format, which means the same template file cannot be used for both AU and non-AU phones. Rather than managing 2 sets of html files, I decided to pull in the contents of the file first, then encode the string appropriately. For example, here's how I use the function above to load the welcome page of my app: template_values = dict({ 'spam': 'eggs', }) path = os.path.join(os.path.dirname(__file__), (get_template_folder(os.environ.get("HTTP_USER_AGENT", "N/A")) + 'welcome.html')) self.response.headers['Content-Type'] = get_page_header(os.environ.get("HTTP_USER_AGENT", "N/A")) self.response.out.write(unicode(template.render(path, template_values), "utf-8").encode(get_encoding(os.environ.get("HTTP_USER_AGENT", "N/A")))) This takes the html template from the path, saves it as a string, then encodes the string to either UTF_8 or SHIFT_JIS. Image Types Another surprise was that DOCOMO phones don't support PNG images, which meant that I had to convert all my pngs to gif. Here's a useful page documenting support by carrier: http://ubiquitous.s17.xrea.com/shiyou.html Sessions and Flash You can't embed the Flash in a page if you want the user to interact with it, which means no passing variables into your Flash. Instead, you have to use loadVariables() inside your Flash to call a function that will return a query string of data. Typically, this is done using a session variable. Before opening the Flash, store the session ID and associate it with the variables you'd like. Then, after calling the Flash swf, pull in the variables by getting the session ID. Simple, right? Only problem is, most mobile phones don't support cookies, which is how most session handlers work. It took me the better part of a day to learn that hard truth. My quest for a good, mobile-friendly session handler continues. Some other hard-learned lessons -Make sure you test your app on as many mobile devices as possible before releasing it. Even with the same carrier, a web page can look very different depending on the device. -Even if it kills you to develop in Actionscript 1.0, Flash 1.1 is the only way to go if you want to make sure that your Flash will work on all devices. -When developing in Flash, test the app in a real device as frequently as possible. The Flash simulator just doesn't portray the dismal reality of a 3-year-old keitai. -Keep detailed logs throughout your app. Google App Engine's log viewer is a great way to catch provider-specific problems that you may have missed. -Take bathroom breaks frequently, and try to go outside at least once a day. -David |
|
コメント
コメントする
|
|
この記事のトラックバックURL
http://www.conit.co.jp/labs/tb.php/291
トラックバック
|
 |
