jQueryによるaタグリンクアドレスへのディレクトリ挿入処理

スマートフォン閲覧用のWebサイト制作にあたって、「/sp/」などと命名したディレクトリを立て、ルート「/」のPC版と一対一で対応させた上でスマートフォンからのアクセスの場合にはスマートフォン専用ページを表示させるのは以前は一般的な手法でした。現在ではレスポンシブWebデザインが主流となり余り見られなくなった手法ではありますが、当該手法を採用したWebサイトのメンテナンスに於いては PC版との整合性を取る必要に迫られる事案もあります。

スマートフォンによるアクセスへの配慮

例えばブログシステムに於いて一般の利用者が記事投稿する際に内部リンクを記載すればPC版にリンク先を求めるのは当然でしょう。すると然るべきリダイレクトが施されていない場合にはスマートフォンで当該サイトを訪れた閲覧者はPC版リンクを踏みますから折角用意したスマートフォンページは表示されはせず、一般的に横幅の広い、従って小さな文字のページの閲覧を強いられる格好になってしまいます。

其処で問題のあるリンクに於いてはスマホ版での巡回に支障をきたさない様に配慮し、 PC版のリンクアドレスをリンク時に改変して「/sp/」を先頭に挿入したい要請があります。本記事では此の実現にjQueryを用いて解決を図りたく思います。

任意文字列のリンクアドレスへの追加

先ずはリンクアドレスの改変の為にサイト Magicalog 内の2013年4月23日に配信されている以下のページの情報を参考にしました。

jQueryでURLに特定の文字（#contentなどの文字）を足す

リンクアドレスの最後尾にシャープと文字列を追加し、リンク先のページ内リンクへの誘導を実現しています。 JavaScriptコードを以下に引用します。

jQuery(function(){
	jQuery(".page-link a").each(function() {
		var obj = jQuery(this);
		var link = obj.attr("href");
		obj.attr("href",link+"#content")
	});
});

jQueryのattrを用いてpage-linkなるクラス内のアンカータグ全ての href要素のlink属性の最後尾に「#content」文字列を追加しているのが見て取れます。

徹底マスター JavaScriptの教科書　プログラミングの教養から、言語仕様、開発技法までが正しく身につく（Kindle版）

リンクアドレス文字列の変更

上記を参考にすればlink属性の最前列に「/sp」文字列を追加すれば実現可能でしょうが、今回はもう一つの要請を実現したく思います。其れはリンク先の先頭に「/sp」文字列を追加するのは特定のディレクトリ以下のリンク先に限りたいと言うものです。リダイレクトの施されていないなど、問題を抱えるリンク先のディレクトリは限られている場合が多いからです。その為にブログ いろいろ備忘録 - ウェブ業界人の技術ブログ に2014年7月18日に配信されている以下のページの情報も参考にしました。

aタグのリンク先(href)をjQueryで変更する

此方では同じくjQueryのattrを用いた上で replace を用いてリンク先アドレスの文字列を変更しています。すると単純にリンク先アドレスの文字列に別文字列を追加するだけでなく、リンク先アドレスに於ける特定文字列の変更が可能になります。 JavaScriptコードを以下に引用します。

$(document).ready(function() {
	$("a").each(function() {
		var replace = null;
		var replace = $(this).attr('href').replace(/.com/g,'.jp');
		$(this).attr('href',replace);
    });
});

jQuery実装コード最終形

アンカータグのhref属性の文字列の内、「.com」文字列を「.jp」文字列に全て置き換えているのが見て取れます。此れを応用すればディレクトリに該当する文字列を変換し其の前に「/sp」を挿入してやれば宜しい勘定になります。此の考え方を以て本記事の冒頭の要請を実現したコードが以下になります。

jQuery(function(){
	jQuery(".myclass a").each(function() {
		var obj = jQuery(this);
		var link = obj.attr("href").replace(/mydir/g, 'sp/mydir');
		obj.attr("href", link);
	});
});

上記コードを以て首尾良く目論見は達成されました。

スマートフォンによるアクセスへの配慮

任意文字列のリンクアドレスへの追加

リンクアドレス文字列の変更

jQuery実装コード最終形

1件のコメント