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」文字列を追加しているのが見て取れます。

上記を参考にすれば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);
  });
});

アンカータグの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によるaタグリンクアドレスへのディレクトリ挿入処理」への1件のフィードバック

コメントは受け付けていません。