Blog

【一般の人には】ルートパスで記述されているものの頭にURLをくっつけてパスを通すよー(jQueryつかうよ)【需要ない…と思う】

Penseur

2015.06.05

web制作にかかわってる人

さて、どうしましょう。

去年の10月から5つほど記事をあげておりますweb制作にかかわってる人です。
お久しぶりですこんにちは。
…こんばんはかもしれない…。
まあいいや。ギョーカイはいつでも「おはようございます!」らしいし。

そんなこんなで。
話題に困っております。

なんだろう。
こう、あまり華々しいものってないのが私のかかわってる分野でして。

うーんニッチな、普通の人は一体どこで使うんやこれ…。というのくらいしか持ちネタがないのがなんともいえない…。

まずルートパスって何さ?

えーと、「ルートパス」というのはルートディレクトリを起点としたパスの指定方法で、「絶対パス」「相対パス」と同じようにファイルの場所を指定する書き方の一つです。

相対パスが自分自身を起点としたパスの指定方法だとしたらルートパスは一番上の階層を起点とした指定方法です。

まぁ、場所を聞かれたときに
「私の隣」と答えるのが相対パスで
「学校から見て左」と「学校を起点として」答えるのがルートパス…うーん。
これ余計わかりにくかったかもしれない。


どんなことにもメリットとデメリットがあるのですが、ルートパスを使用するとき

メリット……ファイルが膨大なサイトだと一番上が起点になるので位置の想像がしやすい。記述も短くすむ。

デメリット…残念ながらローカル環境ではほぼ確認不可能。なぜなら一番上っていうのはそのwebスペースの一番上だから。


………………もう。わかりにくいね。うん。
ここから本題。

まあローカル環境で普通は確認できないよってことだけ覚えててください。

さて、どこにいてもしっかり場所を特定できる指定方法があります。
それは「絶対パス」!って仰々しく書いてみましたが、つまるところこれ住所全部を答えるようなものでして

「http://~~~」からのURLを含む全てを書く方法です。
ルートパスっていうのは「http://~~~.jp/」ここまでを省略する書き方…

しまったこの書き方が一番わかりやすかった。


てことで、本題(ようやく!)

ルートパスで指定されてる画像やリンクの頭にURLの頭を付けて絶対パスにして参照できるようにしてしまうjavascript~~~(jQuery使用~~~)


$('img[src^="/"]').each(function() {
pathswap($(this), 'src', 'http://~~.jpやら.comやら');
});

function pathswap(element, propaty, addpath){
//addpathは先頭に追加したいパス
var fullpath = element.attr(propaty);
fullpath = addpath+fullpath;
element.attr(propaty,fullpath);
return false;
}

解説すると、img要素の/で始まってるパスの頭に指定するパスをくっつけるよ
って意味です。

単純ですね!

これ使うとわざわざ探して頭にパスを書いたりサーバーを構築しなくてもいいので結構楽です。難点は書き換えるファイルが多いと表示できるまで時間がかかること…

それでも割と手軽なので使う事が多いです。
(当然納品時には削除をお忘れなく!)

それではみなさんさよーならー