写真 コラム 開発室
HOME開発室[JavaScript] 相対パスとURLから絶対URLを作成する
キーワード
JavaScript

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

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

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

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

ウェブサイトのURLhttps://tabiji.gallery
画像へのパス/image/logo.png
作成したいURLhttps://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
シェアする
サイトマップ SITEMAP 写真データ販売中! STOCKPHOTO 写真のデータ販売について 広告 写真 PHOTO
虹雲舞う
黄金雲
曙光
お山の初詣
元旦
雪の夜明かし峠
冬の大峰山脈
朝の冬富士
未明の富士
写真の一覧へ
エリア
ネパール 北海道 東北 屋久島 沖縄 北アルプス 石鎚山系 剣山地 鳥取大山 くじゅう連山 丹沢・大山 富士山
被写体
河川・湖沼 森林 湿原・草原 雲・霧 石・岩 雪・氷 生物 植物 街・集落 鉄道 神社 寺院 人物 生活
季節
時間
夕方 マジックアワー
オレンジ・黄 ピンク・紫 茶色 虹色
キーワード
石鎚神社
販売
Aflo PIXTA imagemart
タグ
トップ画像 傑作選
JOURNEY
2020年 冬の屋久島歩き旅
旅立ち
01. 龍神杉と縄文杉
02. 雪の宮之浦岳
他7ページ
2019年 厳冬期北海道徒歩横断
旅立ち
01. 北海道の首
02. 豪雪地帯を歩く
他6ページ
旅の一覧へ
コラム PHOTO BLOG
よもやま話
登山とパニック発作
写真撮影
逆光で撮る
コラムの一覧へ
カテゴリ
写真撮影 被写体 撮影機材 旅の道具 よもやま話
開発室 DEVELOPMENT BLOG
開発室の一覧へ
カテゴリ
ASP.NET Core C# WordPress PHP TypeScript JavaScript Web
広告
サイトマップ SITEMAP
スタジオ旅路
https://tabiji.gallery
渡邊 佑
tabiji.gallery (c) 2020 Yu Watanabe サイトマップ SITEMAP 写真データ販売中! STOCKPHOTO 写真のデータ販売について 写真 PHOTO
虹雲舞う
黄金雲
曙光
お山の初詣
元旦
雪の夜明かし峠
冬の大峰山脈
朝の冬富士
未明の富士
写真の一覧へ
エリア
ネパール 北海道 東北 屋久島 沖縄 北アルプス 石鎚山系 剣山地 鳥取大山 くじゅう連山 丹沢・大山 富士山
被写体
河川・湖沼 森林 湿原・草原 雲・霧 石・岩 雪・氷 生物 植物 街・集落 鉄道 神社 寺院 人物 生活
季節
時間
夕方 マジックアワー
オレンジ・黄 ピンク・紫 茶色 虹色
キーワード
石鎚神社
販売
Aflo PIXTA imagemart
タグ
トップ画像 傑作選
JOURNEY
2020年 冬の屋久島歩き旅
旅立ち
01. 龍神杉と縄文杉
02. 雪の宮之浦岳
他7ページ
2019年 厳冬期北海道徒歩横断
旅立ち
01. 北海道の首
02. 豪雪地帯を歩く
他6ページ
旅の一覧へ
コラム PHOTO BLOG
よもやま話
登山とパニック発作
写真撮影
逆光で撮る
コラムの一覧へ
カテゴリ
写真撮影 被写体 撮影機材 旅の道具 よもやま話
開発室 DEVELOPMENT BLOG
開発室の一覧へ
カテゴリ
ASP.NET Core C# WordPress PHP TypeScript JavaScript Web