[JavaScript] 相対パスとURLから絶対URLを作成する

2023-03-25

ウィキペディアとウィキメディアとMediaWikiの違い

[JavaScript] 応答待機可能なメッセージボックスを作る

パスとベースURLを結合したい
URLクラスを使って結合する
OGPの画像URLが相対パスになっている場合
ひとりごと

パスとベースURLを結合したい

例えば以下のようにウェブサイトのURLと画像へのパスがあり、その二つを結合してひとつの絶対URLを作成したい場合がある。

ウェブサイトのURL	https://tabiji.gallery
画像へのパス	/image/logo.png
作成したいURL	https://tabiji.gallery/image/logo.png

この時、状況によってはウェブサイトのURLの最後にスラッシュがついていたり、画像へのパスの最初のスラッシュがなかったりする。それを単に文字列結合してしまうと不正なURLになってしまう場合がある。

URLクラスを使って結合する

JavaScriptにはこんな時に便利なURLというクラスが用意されている。

このURLオブジェクトを生成する時、コンストラクタ引数にパスとベースURLを渡してやれば、上で書いたようなスラッシュの有無などを判断して適切なURLを作成してくれる。

JavaScript
let baseUrl1 = "https://tabiji.gallery";
let baseUrl2 = "https://tabiji.gallery/";
let filePath1 = "/image/logo.png";
let filePath2 = "image/logo.png";

let url1 = new URL(filePath1, baseUrl1);
let url2 = new URL(filePath1, baseUrl2);
let url3 = new URL(filePath2, baseUrl1);
let url4 = new URL(filePath2, baseUrl2);

console.log("url1: " + url1.toString());
console.log("url2: " + url2.toString());
console.log("url3: " + url3.toString());
console.log("url4: " + url4.toString());

url1: https://tabiji.gallery/image/logo.png url2: https://tabiji.gallery/image/logo.png url3: https://tabiji.gallery/image/logo.png url4: https://tabiji.gallery/image/logo.png

また、URLコンストラクタの第1引数には絶対URLを入れることもでき、その場合は単に第2引数のベースURLが無視される形となる。

JavaScript
let baseUrl = "https://tabiji.gallery";
let filePath1 = "/image/logo.png";
let filePath2 = "https://some.web/image/logo.png";

let url1 = new URL(filePath1, baseUrl);
let url2 = new URL(filePath2, baseUrl);

console.log("url1: " + url1.toString());
console.log("url2: " + url2.toString());

url1: https://tabiji.gallery/image/logo.png url2: https://some.web/image/logo.png

これはウェブサイトのOGPを取得する場合などに便利な仕様だ。これについては後半でもう少し触れたい。

ちなみに第2引数のベースURLはルートURLである必要は無く、特定の階層のURLを指定することもできる。それに対して第1引数で相対パスを指定した場合、適切に階層が処理されたURLが作成される。

JavaScript
let baseUrl = "https://tabiji.gallery/dir1/dir2/dir3/";
let filePath1 = "/logo.png";
let filePath2 = "logo.png";
let filePath3 = "../logo.png";

let url1 = new URL(filePath1, baseUrl);
let url2 = new URL(filePath2, baseUrl);
let url3 = new URL(filePath3, baseUrl);

console.log("url1: " + url1.toString());
console.log("url2: " + url2.toString());
console.log("url3: " + url3.toString());

url1: https://tabiji.gallery/logo.png url2: https://tabiji.gallery/dir1/dir2/dir3/logo.png url3: https://tabiji.gallery/dir1/dir2/logo.png

OGPの画像URLが相対パスになっている場合

今回この情報を調べようと思ったのはOGPの画像URLの扱いで少々困ったことになったからだった。一部のサイトではOGPの画像URLに相対パスを指定している場合がある。以下はとあるサイトのOGPを一部抜粋したものだ。

HTML
<meta property="og:locale" content="ja">
<meta property="og:type" content="website">
<meta property="og:url" content="/">
<meta property="og:image" content="/assets/img/ogp/01_top.jpg">

このサイトではog:urlの項目すら"/"と指定されている。 OGPはそもそもサイトの外部で使用される情報なので、これらは本来は絶対URLを指定するべきだろう。しかし実際には相対パスで指定されているサイトが見られるのも事実だ。

ひとまずog:urlはOGPを取りに行った時点で対象のURLはわかっているのだからそれで代用できる。しかしog:imageが相対パスだった場合は、異なるサイト内でそのまま使用してしまうと正しく画像を表示できない。

様々なパターンがある中で画像URLを正しく作成しようとした時、このURLクラスは非常に便利だった。取り合えず第1引数にog:imageの値を、第2引数に対象のウェブサイトのURLを入れておけば適切に画像URLを作成してくれるからだ。 og:imageが絶対URLだった場合はそのままに、相対パスだった場合は絶対URLにしてくれるわけだ。

ひとりごと

最初はURLを結合する処理を書かないといけないかとも思っていたが、便利なものが用意されていて助かった。意外とこういうものに気付かずに無駄に処理を書いてしまうことがあるので、しっかり下調べをしていかなければなと改めて感じだ。

キーワード

JavaScript

ウィキペディアとウィキメディアとMediaWikiの違い

[JavaScript] 応答待機可能なメッセージボックスを作る

JavaScript

[JavaScript] 厳密等価演算子（===）の注意点

JavaScript TypeScript

[JavaScript] 応答待機可能なメッセージボックスを作る

JavaScript

[JavaScript] Luminous.jsのキャプションにリンクを入れる

JavaScript

[JavaScript] 値が文字列かどうか判定する方法