Subscribed unsubscribe Subscribe Subscribe

iPhone用のWebApplication開発あれこれ

iPhone 開発 Web

最近は勤めてる会社の運営しているポータルサイトをiPhone用WebApplication化しようとあれこれやっています。
ショップ検索サイトなのでショップ検索WebApplicationを開発しているわけです。
もう、粗方できているのですが、せっかくなのでiPhone独自のものをもう少し仕込めないかといろいろ考えています。


今回、iPhone用のWebAppを作るに当って使用したのが、前にも紹介したjQTouchです。
jQTouchはiPhone独特なUIやエフェクトが簡単に実装できる、jQueryのプラグインです。
jQueryではAJAXも簡単にできますがjQTouchではGET,POSTどちらにも対応したAJAX接続画面遷移エフェクトが予め実装されており、普通にリンクタグ(同ドメインサイト)を記述した場合はAJAXでGET送信してページ遷移エフェクトをします。
今回のはiPhoneのホーム画面に登録しWebAppとして使うことを考えているため、ファイルの違う画面遷移はほとんどAJAXで行っているが、まぁ簡単に作れるわけです。
詳しくは説明しませんが、要はUI表現が非常に楽に作れてしまうというものです。
(しかし、個人的にはもう少し表示を早く&もっとカスタマイズできるようにして欲しいなぁ…。遷移ができない間、リンクを押し放題なのでアニメーションタスクが溜まっていくし、その間の操作ができるようにしようと思ったけどなかなかカスタマイズが大変だし…)

また、jQTouchはiPhone独自のmeta/link設定も$.jQTouch({});で簡単に設定できます。
(例えば下記のような設定)

<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-startup-image" href="/startup.png" />
<meta name = "viewport" content = "user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

jQTouchにはスキンテーマとしてjQTouchのオリジナルとiPhoneライクなものの2つがありますが、CSSとイメージでできているものなので、知識があればスキンのカスタマイズも簡単です。
また、jQueryの知識があればオリジナルのAJAXエフェクトもできるのでとっても便利です。


機能として実装したものにはGPSを使った検索を実装しましたがiPhoneSafariのGPS取得は簡単にできます。

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
function successCallback(e) {
alert("Lat:" + e.coords.latitude + " Long:" + e.coords.longitude);
}
function errorCallback(error) {
alert( "errcode:" + error.code);
}

という感じ。
緯度経度の他に精度・高さ・方位なども取得できるようですが、方位は3GSのみ、高さは3Gでいまのところ上手く取得できていません(屋外でないとダメかな?)。

それと動作スピードを速くするためにApplicationCacheをやってみましたが、ここでひとつ問題が…
ApplicationCacheは予め指定したファイルをキャッシュさせておきロードするファイルを少なくするもの。
問題というのはメインのファイルであるindexファイルを指定していないのにキャッシュしてしまう。
これはキャッシュするのが当然なのかもしれません。
しかし、キャッシュデータのアップデートにことごとく失敗する。というか一度もできた試しがない!
通常ApplicationCacheにはCSSやJS、イメージファイルなどを登録しておきますが、
「アップデートができない & indexファイルがキャッシュされる」という状況によって、WebApp自体のバージョンアップができない…orz
なぜアップデートができないのかは分かっていませんが、コレが解決しないとApplicationCacheもちょっと使えないなぁ…


あと、iPhoneSafariではタッチイベントの取得やらローカルDBもできそうなので、その辺も使えたらと思います。
個人的に加速度センサーをJavascriptから取得できたらと思ったのですが、そういうのはないみたいですね…

Big5.appというアプリケーションを使うとJavascriptからiPhoneの各種DeviceAPIにアクセスできるみたいですが、
1,200円だし、コレをダウンロードしないとみんな使えないし…
http://www.big5apps.com/


そんなこんなでだいたいできたので、そのうち公開しようと思います。
ちなみに、WebAppを作るに当って最も参考になるのはAppleの提供しているiPhone OS Reference Libraryです。