Hatena::ブログ(Diary)

konisimple log RSSフィード

はてなブログに移転しました!

2010年07月25日

iUIでerockrのiPhone版を作ってみました

erockr iPhone版

iUIというiPhone用のライブラリでerockrのiPhone版を作ってみました!

PC版Safari/Google ChromeだとよりiPhoneっぽく動きます。是非Safari/Google Chromeでご覧ください。

初めてのiPhoneアプリでしたが、手元に実機があったこと、iUIがよくできていたおかげで簡単に作ることができました!

最初UiUIKitというので書こうと思ったんですがerockrのような動的に生成されるページの多いウェブアプリではiUIのほうが書くコードが少なくて楽です。それに無意識にサイトがAjaxな感じになるのもいいですね!

f:id:konisimple:20100726042234p:image

f:id:konisimple:20100726042629p:image

iUIのiui.jsのフォーム周りのバグを解消する方法(クエリが送られない!POSTはできるのにGETできない!に対応)

iUiはiPhone用のページのUIを書くのにとても便利なライブラリですが、

フォーム周りにいくつかバグがあります。今回これらのバグを解消することに成功したのでその方法をメモしておきます。

エンコードがおかしくてPHPRubyからクエリを取れないバグ

URLエンコードにescape関数を使用してしまっているため、サーバーサイドでクエリを認識できないバグです。

iui.jsの472行目付近の

				args.push(inputs[i].name + "=" + escape(inputs[i].value));

				args.push(inputs[i].name + "=" + encodeURIComponent(inputs[i].value));

とします。

POSTならこの修正のみでちゃんと動くようになります。GETで送りたい場合は以下の修正も必要です。

POSTだとちゃんと動くのにGETだと情報が送られないバグ

iui.jsの97行目付近、

		if (args)
		{
			req.open(method || "GET", href, true);
			req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			req.setRequestHeader("Content-Length", args.length);
			req.send(args.join("&"));
		}

とありますが、ここを

		if (args)
		{
			req.open(method || "GET", href+"?"+args.join("&"), true);
			req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			req.setRequestHeader("Content-Length", args.length);
			req.send(args.join("&"));
		}

と書き換えます。GETだとsendじゃ送られません。このfixだとPOSTでも余計なクエリがついちゃいますが動くのでまあよしとしましょう。

formのmethodがおかしいバグ

462行目付近、submitForm関数がおかしいので以下のようにします。

function submitForm(form)
{
	iui.showPageByHref(form.action , encodeForm(form), form.method || "POST");
}

まあこれは直さなくてもそんなに問題は起こらないですが、一応。


iuix.jsでも同様だと思います。たぶん

参考