jQuery Mobile逆引きリファレンス
$.mobile.pathオブジェクトでパス／URLの情報を取得／操作するには？
パスやURLを取得／操作するには、$.mobile.path.xxxxxメソッドが利用できる。各メソッドの基本的な使い方を解説する。
jQuery Mobileとは？
jQuery Mobileは、jQueryを拡張するライブラリ（プラグイン）の一種で、名前のとおり、スマホ／タブレットに代表されるモバイル対応アプリを開発するための機能を提供します。jQuery Mobileの導入方法や使い方、jQuery Mobileが提供する主要機能については、「jQuery Mobile逆引きリファレンス： jQuery Mobileを利用するには？」を参照してください。
jQueryでは、パス／URLを取得／操作するためのさまざまなメソッドを$.mobile.path.xxxxxメソッドとして提供しています。本稿では、これらパス関連のメソッドについて用例と共に紹介していきます。
URLから個別の要素を取得する ― parseUrlメソッド
parseUrlメソッドを利用することで、指定されたURLをパースし、ホスト名やファイル名、フラグメントなど、URLを構成する個別の要素をパースできます。
|
console.log($.mobile.path.parseUrl("http://usr00:passwd00@examples.com:81
|
parseUrlメソッドは、戻り値として、以下のようなキーを持つハッシュ（オブジェクト）を返します。戻り値（例）には、「http:
| キー名 | 概要 | 戻り値（例） |
|---|---|---|
| href | オリジナルのURL | http: |
| hrefNoHash | フラグメントを除くURL | http: |
| hrefNoSearch | クエリ情報＆フラグメントを除くURL | http: |
| protocol | プロトコル | http: |
| authority | ユーザー名／パスワード、ホスト名／ポート番号 | usr00:passwd00@examples.com:81 |
| password | パスワード | passwd00 |
| username | ユーザー名 | usr00 |
| domain | ドメイン（protocol＋authority） | http://usr00:passwd00@examples.com:81 |
| host | ホスト名＆ポート番号 | examples.com:81 |
| port | ポート番号 | 81 |
| hostname | ホスト名 | examples.com |
| pathname | パス＆ファイル名 | /jqm/sample.html |
| directory | パス（ファイル名を除く） | /jqm/ |
| filename | ファイル名 | sample.html |
| hash | フラグメント文字列（#～以降の文字列） | #main |
| search | クエリ情報 | ?id=12345 |
parseUrlメソッドの特殊形として、現在のURLを解析するparseLocationメソッドもあります。戻り値（ハッシュ）に含まれるキー情報は、parseUrlメソッドのそれと同じです。
|
console.log($.mobile.path.parseLocation());
|
［Note］現在のURLを文字列として取得する
parseLocationメソッドが現在のURLをハッシュとして返すのに対して、文字列としてURLを返すならば、getLocationメソッドを利用します。ただし、URLにユーザー名／パスワードが含まれている場合、それらはサプレスされますので注意してください。
|
console.log($.mobile.path.getLocation());
// 結果例：http://localhost/jqm/script/url.html?id=12345#hash
|
URL文字列を判定する ― isAbsoluteUrl／isRelativeUrl／isSameDomainメソッド
URL文字列を判定するためのメソッドとして、以下のようなものがあります。
| メソッド | 概要 |
|---|---|
| isAbsoluteUrl | 指定されたURLが絶対URLであるか |
| isRelativeUrl | 指定されたURLが相対URLであるか |
| isSameDomain | 指定された2個のURLが同一のドメインであるか |
それぞれのメソッドの用例と結果を、以下に示します。
|
console.log($.mobile.path.isAbsoluteUrl('http://www.wings.msn.to/')); // true
console.log($.mobile.path.isAbsoluteUrl('/path/hoge.html')); // false
console.log($.mobile.path.isAbsoluteUrl('//www.wings.msn.to/')); // false
console.log($.mobile.path.isRelativeUrl('http://www.wings.msn.to/')); // false
console.log($.mobile.path.isRelativeUrl('/path/hoge.html')); // true
console.log($.mobile.path.isRelativeUrl('//www.wings.msn.to/')); // true
console.log($.mobile.path.isSameDomain(
'http://www.wings.msn.to/',
'http://www.wings.msn.to/index.php/-/A-03/978-4-7741-6410-6/')); // true
console.log($.mobile.path.isSameDomain(
'http://www.wings.msn.to/index.php/-/A-03/978-4-7741-6410-6/',
'http://www.web-deli.com/tutorial_list.aspx')); // false
|
絶対URL／パスを生成する ― makeUrlAbsolute／makePathAbsoluteメソッド
makeUrlAbsolute／makePathAbsoluteメソッドを利用することで、特定のパスを基点として、指定された相対パス（URL）から絶対パス（URL）を生成できます。
［構文］makeUrlAbsolute／makePathAbsoluteメソッド
$.mobile.path.makePathAbsolute(relPath, absPath)
$.mobile.path.makeUrlAbsolute(relUrl, absUrl)
- relPath／relUrl： 絶対パス／URLに変換したい相対パス／URL
- absPath／absUrl： 相対パス／URLの基点となる絶対パス／URL
具体的な例も確認してみます。
|
console.log($.mobile.path.makePathAbsolute(
'piyo/sample.html', '/hoge/foo/test.php')); // 1/hoge/foo/piyo/sample.html
console.log($.mobile.path.makePathAbsolute(
'../../sample.html', '/hoge/foo/test.php')); // 2/sample.html
console.log($.mobile.path.makePathAbsolute(
'/piyo/sample.html', '/hoge/foo/test.php')); // 3/piyo/sample.html
console.log($.mobile.path.makePathAbsolute(
'piyo/sample.html', 'http://www.wings.msn.to/hoge/foo/test.php'));
// 4/http://www.wings.msn.to/hoge/foo/piyo/sample.html
console.log($.mobile.path.makeUrlAbsolute(
'../sample.html', 'http://www.wings.msn.to/hoge/foo/test.html'));
// 5http://www.wings.msn.to/hoge/sample.html
console.log($.mobile.path.makeUrlAbsolute(
'/piyo/sample.html', 'http://www.wings.msn.to/hoge/foo/test.html'));
// 6http://www.wings.msn.to/piyo/sample.html
|
14は最もスタンダードなmakeUrlAbsolute／makePathAbsoluteメソッドの例です。基点パス／URLを基に絶対パスを生成しています。25のように「..」（上位パス）についても正しく解釈できます。
3は、makePathAbsoluteメソッドの引数relPathに対して絶対パスを指定したケースです。その場合、引数absPathは意味がないので、そのままrelPathの内容が返されます。一方、makeUrlAbsoluteメソッドの引数relUrlに対して絶対パスを指定した場合（6）には、引数absUrlのルートを基点にURLを生成します。
そして、4はmakePathAbsoluteメソッドの引数absPathに対して絶対URLを指定したケースです。この場合、結果の先頭には「/」が補われ、正しい結果が得られません。makeUrlAbsoluteメソッドを利用すべきです。
※以下では、本稿の前後を合わせて5回分（第30回～第34回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
32. 【現在、表示中】≫ $.mobile.pathオブジェクトでパス／URLの情報を取得／操作するには？
パスやURLを取得／操作するには、$.mobile.path.xxxxxメソッドが利用できる。各メソッドの基本的な使い方を解説する。
34. JavaScriptからjQuery Mobileページ間の移動を制御するには？
通常のページ遷移ではlocation.hrefプロパティを利用するが、jQuery Mobileのページ遷移ではchangeメソッドやloadメソッドを利用する。その基本的な使い方を説明する。
