jQuery Mobileとはスマホ向けのフレームワークのことで、これを使うとスマートフォンやタブレットに（まるでネイティブアプリのように）最適化されたデザインやUIを簡単に実現することができます。
さらに、PCはもちろんiOSやAndroid、Windows Mobileなどのモバイルプラットフォームにも対応していて、どの端末でも変わらないUIを実現してくれます。
現在開発している業務系のWEBシステムでは、PCの他にスマホやタブレットでの利用を想定しているためjQuery Mobileを使ってみました。
まだ使い始めたばかりでよくわからないのですが、「CakePHP + jQuery Mobileでの注意点 – すたら日記」や「the405nm ? cakePHP と jQueryMobile でハマった」などを読むと、問題もあるようです。
そんな時は決まって「ajaxEnabled = false」でajaxを切ってしまうというのがお決まりのパターンらしいのですが、ajaxを切るとjQuery Mobileならではの利点も失ってしまうようなので、ここはあえてajaxを生かしたまま行けるところまで行ってみたいと思います。
参考：そろそろjQuery Mobileでajaxを無効にしてるやつに一言いっておくか – へっぽこプログラマーの日記
リダイレクトしたときにURLが変わらない
jQuery Mobileで最初にぶつかった問題が、リダイレクトした時にページは変遷するのですがURLが変わらないことでした。
そこまで大した問題でもありませんが、indexからeditページに飛んで編集後にindexにリダイレクトした時にURLがeditのままってのも気持ちが悪いものです。
それに、今回のプロジェクトからiPhoneやiPadでの表示確認にAdobe Shadowを使っているのですが、PCでは編集後にindexにリダイレクトするのに同期している端末ではeditページのままになってしまいます。
これはちょっと不便ですよね。
前置きが長くなりましたが、今回はjQuery Mobile利用時にリダイレクトすると、ページ変遷後のURLが変遷前のままになってしまう問題の対処法です。*1
リダイレクト先のpageコンテナにdata-urlを指定する
Jquery Mobile利用時のHTMLの構造はだいたいこんな感じになります。
<!DOCTYPE html> <html> <head>略 (jQueryやjQuery Mobile関連のjsやcssの読込)</head> <body> <div data-role="page"> <div data-role="header">ヘッダー</div> <div data-role="content"> コンテンツ </div> <div data-role="footer">フッター</div> </div> </body> </html>
このソースのdata-role=”page”を指定したdivをページコンテナと言いますが、ここにdata-urlという属性を指定するとブラウザのURLを書き換えることができます。
<div data-role="page" data-url="[このページのURL]"> 略 </div>
参考：ページ間リンク | jQuery Mobile 1.1.0 日本語リファレンス
CakePHPでdata-urlを指定する便利な方法
CakePHPの場合$this->Html->url()でページのURLを取得できるため、layoutファイルで下記のようにdata-urlを指定すると、リダイレクトしても常に正しいURLをブラウザに認識させることができます。
<div data-role="page" data-url="<?PHP echo $this->Html->url(); ?>"> 略 </div>
- 今回はCakePHPのケースですが、data-urlを指定すればどんな場合にも利用できます [↩]
