シェアする

  • このエントリーをはてなブックマークに追加

[CakePHP2]jQuery Mobile利用時にリダイレクトするとURLが変わらない問題の対処法

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>
  1. 今回はCakePHPのケースですが、data-urlを指定すればどんな場合にも利用できます []

シェアする

  • このエントリーをはてなブックマークに追加

フォローする