0

以下のようなURLのサービスを作っているとします。
https://example.com/hoge-service/ ←ここがトップ画面
https://example.com/hoge-service/favorite
https://example.com/hoge-service/user/123456 ユーザーページ
https://example.com/hoge-service/js/common.js
https://example.com/hoge-service/image/banner.png

https://example.com/hoge-service/ がトップページで、そこより上へアクセスする事はありません
https://example.com/hoge-service-help ←これは無い

この時、どのページを表示していても任意のURL、例えば /hoge-service/js/common.jsへの相対パスを作る方法を教えてください。

例えばトップページを基準に考えれば<script src="./js/common.js">で良いですが
ユーザーページでは<script src="./../js/common.js">と記載する必要があります。
scriptタグだけならテンプレートエンジンを書く時に注意する事も出来ますが、
実際にはjsの中からfetchでapiをコールする時とか、
スタイルシートの中でurl(./image/banner.png) にアクセスする時とか、
htmlの中でimgタグを書く時とか、
パスを書く場所は無数にあるので、そこを全てサーバー側で動的に作るのは骨が折れます。

hoge-serviceの部分は環境変数で動的に変更されるとします。
サーバー側はnode+express+ejsである程度の自由は効きますが、
html css jsの中の全てのパスをレスポンス時動的に差し替える というのは避けたいです。

3 件の回答 3

0

ものすごくマイナーですが、HTMLには1.0からずっと<base>: 文書の基底 URL 要素があります。
質問の例では、<head>の前の方(他に相対パスが出現するより前)に

<base href="/hoge-service/">

と書いておけば、html css js上の全ての相対パスは /hoge-service/ を起点に処理されます。

ただし、MDNでも指摘されているように、ページ内アンカーまでもが文書の基底 URLに従ってしまい別ページへのリンクと解釈されるため注意が必要です。

1
  • 機能的には問題無さそう(jsのfetchもこのパス基準になったし)ですが、マイナーというのが気になります。この質問の様に「パスを後から変更出来るように1つの変数にする」事は正直それなりに需要があると思っていたのですが、その解決策のタグがマイナーという事は、じゃあマイナーじゃない多くの人がやってる解決策が知りたい…と思いました。
    – Fushihara
    Commented 2023年1月9日 6:56
0

私自身は試した事がなく、今回少し調べた程度なのですが、「絶対パス」「相対パス」の他に
ルート相対パス という記述方法があるようです。

ドメイン名をルートとして、/ 始まりでパスを記述します。
対象ファイルの絶対パスが https:/example.com/hoge-service/js/common.js であるなら、ルート相対パスは /hoge-service/js/common.js になります。

参考:
絶対パス、相対パス、ルート相対パスをわかりやすく解説!まずはイメージをつかもう!

3
  • すいません、hoge-serviceの部分は環境変数で動的に設定したいです。この方法ですと、別の環境でkage-srvになった場合、html css js全ての外部リソースを読み込んでいる部分を書き直す必要があるけどそれを避けたい。
    – Fushihara
    Commented 2023年1月8日 19:24
  • 「hoge-serviceの部分は環境変数で動的に設定したい」という理由が不明ですが、もし IIS で言うような Web アプリのエイリアスが変わるための対応というような話であれば、質問者さんのアプリのフレームワークに対応のための組み込みの機能がないか探してみてはいかがですか? パスの問題で悩む人は多々いるはずなのでそういう機能はあってもよさそうな気がします。例えば ASP.NET ですと remember-the-time.xyz/2010/12/aspnet.html に書かれているようなことができます。
    – WebSurfer
    Commented 2023年1月9日 1:35
  • 環境変数で設定するのは、環境が変わった時に全html js cssファイルを書き直す手間を省く為です。「html css jsの中の全てのパスをレスポンス時動的に差し替える というのは避けたい」のですが、それしか無いのかな・・・。
    – Fushihara
    Commented 2023年1月9日 6:27
0

フロントエンドは専門外ですが、こちらは使えますか?

未経験からのExpress.js入門|静的ファイル - wiblok

node.js - EJS include file relative to project root - Stack Overflow

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。