URLを置換するjavascript

Javascript

テンプレートを使っていたり、DBの情報を書き換えたくないけど、
ブラウザ側で対処してくれとかそういう諸事情で
なぜかhtmlファイルを触らせてもらえない場合につかう・・・。
しかもjQueryは使えない場合。

function getElements() { 
	var elements = document.getElementsByTagName("A");
	for(i=0;i<elements.length;i++){
		if(elements[i].href.indexOf("yahoo.co.jp") > 0){
			elements[i].href = elements[i].href.replace("yahoo.co.jp", "impressAAA.co.jp");
		}else if(elements[i].href.indexOf("google.com") > 0){
			elements[i].href = elements[i].href.replace("google.com", "impressBBB.co.jp");
		}
	}
}

window.onload = function(){
		getElements();
}

<a href="http://www.yahoo.co.jp/">a</a>
<a href="http://www.yahoo.co.jp/">b</a>
<a href="http://www.yahoo.co.jp/">c</a>
<a href="http://www.google.com/">d</a>
<a href="http://www.yahoo.co.jp/">e</a>
<a href="http://www.msn.co.jp/">f</a>
<a href="http://www.yahoo.co.jp/">g</a>

コピーライトの年を自動的に変えてく

Javascript

既存の大量のHTMLファイルのコピーライトの年を強引に変える
jQuery必須で。

<div id="footer">
 <p class="copyright">Copyright 2005 XXXXXXX Co. Ltd. All Rights Reserved.</p>
</div>

$(document).ready(function() {
	var now = new Date();
	var year = now.getFullYear()
	$("#footer .copyright").html('Copyright '+year+' XXXXXXX Co. Ltd. All Rights Reserved.');
});

アフィリエイトの変更対応？

Amazon

2011/10/26から変更になったようで、たしかに思い起こせばアマゾンからメールが届いていた気がしなくてもないけど、スルーしていたらしくAPIから情報を取得できなくなって初めて気がつく有様。


パラメータにAssociateTagを足してリクエストしなくてはならなくなったらしい。
AssociateTagとはなんぞや？と思ったが、○○○-22というアレ。

ついでになんとなくversionも2011-08-01にしたけど、いいのだろうか？

イメージマップの境界線を消す方法(改訂版)

Html 
<map name="Map" id="Map">
  <area shape="poly" onFocus="this.blur();"

「onFocus="this.blur()"」を追加する。
ただし、IE6,7では消えるが、IE9,safari,Chrome,Firefoxでは線が出てしまう。


なので、下記のサイトを参考に、CSSとonFocusを追加する。
http://blogs.yahoo.co.jp/k3_labs/2756417.html


CSS

.nonborder {
  border:none;
  outline:none;
}

HTML

<map name="Map" id="Map">
  <area shape="poly" onFocus="this.blur();" class="nonborder"

のように記述してやると、IE6,7,8,9,safari,Chromeでは消えるが、Firefoxでは線が出てしまう。
原因としては、「onFocus="this.blur();"」があるためなので、


javascript

function nonborder(){
	var ua = navigator.userAgent;
	var chkFF = ua.indexOf("Firefox",0);
	if(chkFF<0){
		this.blur();//もしくはthis.focus()
	}
}

HTML

<map name="Map" id="Map">
  <area shape="poly" onFocus="nonborder()" class="nonborder"

というようにFirefox以外の場合にblur()を効かせるように記述すると、
今度はIE9で効かなくなる。


ということで苦肉の策だが、最終的に下記のように。
Firefoxの場合のみ、javascriptでonFocusを空にする用にさせた。


CSS

.nonborder {
  border:none;
  outline:none;
}

HTML

<map name="Map" id="Map">
  <area shape="poly" onFocus="this.blur();" class="nonborder"

javascript(jQuery)

var ua = navigator.userAgent;
var chkFF = ua.indexOf("Firefox",0);
if(chkFF>0){
  if($("#Map area").length){
    $("#Map area").attr("onFocus","");
  }
}

これで良いのだろうか？？

PageButeを絶対パスじゃないようにする

Movable Type

スカイアークシステム社の静的ページ用ページ分割プラグイン「PageBute」は
php化することなくページ分割を実現可能なため愛用しているのですが、
書き出されるファイルへのパスが絶対パスなのです。
http://www.skyarc.co.jp/engineerblog/entry/2642.html


通常の運用では問題ないものの、
MTで確認サーバでファイルを書き出す→「本番環境」へうp（うぴぃー）
という運用の場合に問題発生です。
手書きで書き換えるのも漢ですが、CMSを使う意義にかけますので、
困った際に改変したところの覚書です。


sub _make_base_path内の

my $base_url = $site_url . $relative_path . $file_name;

このへんで最終的なURLを生成しているっぽいので、

#my $base_url = $site_url . $relative_path . $file_name;
my $base_url = $file_name;

という感じで$file_nameのみにしました。
ページ分割でファイルのディレクトリが変わることはないので$file_nameのみでいいのかな？と。

jQueryでクロスフェードを簡単に？

Javascript

とりあえずライブラリとか使わずにクロスフェードさせてみた。

  1. 同じタイミングで下の画像をフェードイン、上のレイヤーの画像をフェードアウトさせる。
  2. 上のレイヤーの画像がフェードアウト完了後に、フェードインさせた画像と同じものを上のレイヤーに表示。

idがph03なら下の画像に既存のph03.jpgが入って、フェードインされるイメージ。

$('.btn').mouseover( //マウスオーバーでボタンにセットされてるidを取得して画像を差し替えるってことで
	function() {
		var id = $(this).attr('id');  //ボタンのidを取得
		var ph = "images/"+id+".jpg";　//取得したidからファイル名を生成
		$(".photo img.base").hide().fadeIn('slow').attr("src",ph); //下に画像をセットしてフェードイン
		$(".photo p.over-photo img.over").fadeOut('slow', //まず上のレイヤーの画像をフェードアウト
			function(){
				$(".photo p.over-photo img.over").show().attr("src",ph); //フェードアウト完了後に上のレイヤーに新しい画像(フェードインさせた画像と同じ)をセット
			}
		);
	}
);

<div class="photo">
  <img src="images/ph01.jpg" class="base" />
  <p class="over-photo"><img src="images/ph02.jpg" class="over" /></p>
</div>

<p class="btn" id="ph03">ボタン</p>

.photo {
	position:relative;
}
.over-photo {
	position:absolute;
	top:0;
	left:0;
	z-index:10;
}

これであってるのかな？