写真 ブログ 開発室
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 広告 写真 PHOTO
年度
2024 2023 2022 2021 2020 2019 2018 2017 ~2016
アルバム
傑作選 北海道 石鎚山系 ネパール 屋久島 北アルプス 中央アルプス 丹沢 離島 巨樹
写真の一覧へ
ストックフォトで作品を探す
JOURNEY
2020年 冬の屋久島歩き旅
2019年 厳冬期北海道徒歩横断
旅の一覧へ
ブログ BLOG
カテゴリ
写真 よもやま話
タグ
スポット 道具 心得
ブログの一覧へ
開発室 DEVELOPMENT
カテゴリ
ASP.NET Core C# WordPress PHP TypeScript JavaScript Web
開発室の一覧へ
広告
サイトマップ SITEMAP
スタジオ旅路
https://tabiji.gallery
渡邊 佑
tabiji.gallery (c) 2020 Yu Watanabe サイトマップ SITEMAP 写真 PHOTO
年度
2024 2023 2022 2021 2020 2019 2018 2017 ~2016
アルバム
傑作選 北海道 石鎚山系 ネパール 屋久島 北アルプス 中央アルプス 丹沢 離島 巨樹
写真の一覧へ
ストックフォトで作品を探す
JOURNEY
2020年 冬の屋久島歩き旅
2019年 厳冬期北海道徒歩横断
旅の一覧へ
ブログ BLOG
カテゴリ
写真 よもやま話
タグ
スポット 道具 心得
ブログの一覧へ
開発室 DEVELOPMENT
カテゴリ
ASP.NET Core C# WordPress PHP TypeScript JavaScript Web
開発室の一覧へ