カテゴリー: JavaScript

現在（2012年12月18日）新しいスキンに変更中なのですが、すべてのページの上部に「お知らせ」欄を設けて、「作業中につき、ご迷惑をお掛けします」という内容のお断りを書いています。

今回はこの「お知らせ」欄を変更する際に1個の原稿でいっぺんに済ませる方法です。

というのも、記事の上に項目を追加するには、通常はスキン（テンプレート）に直接変更を書き込むからです。ただし、ブログのサービスによっては、元々の設定で「お知らせ」欄を一元管理できます。

上記ブログは、それですべてのページの「お知らせ」を一元管理できます。

それ以外のブログでも同じように一元管理をしたければ、次のようにします。

1. まず、サイドバーに「お知らせ」の原稿を書いたパーツを設置する。
2. その「お知らせ」原稿をスタイルシートで非表示にする。
3. JavaScriptで非表示の文章を表示したい場所にコピーしてから、表示する。

お気づきだと思いますが、サイドバーに表示するものはすべて一元管理が出来るので、サイドバーに表示できればいいのなら、一つ目の作業だけで完了です。

これから説明するのは、サイドバーではなく、ブログの記事の上にお知らせを表示する方法です。

「お知らせ」原稿を一元管理せず、ページごとに変える場合は、前回このブログがスキンを変更した時の記事「ブログ記事の前にお知らせ欄を作る」にやり方を書いてあります。

表示領域の設定

上で作業内容として３つの項目を列挙しました。しかし、実際にはその前にひとつ、下準備が必要です。これは、このブログを書いているファンブログを例に説明します。

「ブログ記事の前にお知らせ欄を作る」と同じ要領で実際に表示する場所をスキンに作ります。

ファンブログのスキンには下の箇所があります。

<div id="content">
<div id="entries">
<BlogEntries>

この<div id=”content”>と<div id=”entries”>の間に「<div id=”message” style=”display:none;”><h2>お知らせ</h2></div>」と追加します。

<div id="content">
<div id="message" style="display:none;"><h2>お知らせ</h2></div>
<div id="entries">
<BlogEntries>

<h2>お知らせ</h2>は「お知らせ」欄のタイトルです。不要なら削除してください。

style=”display:none;”と書くことで、その部分は非表示になります。普段「お知らせ」がない場合はそこにタイトルも何も表示しません。

下準備は以上です。ファンブログ以外でもテンプレートを見ながら表示場所を確かめて、追加します。

サイドバーに設置するパーツの内容

サイドバーに次のとおり書いた項目を追加します。これで先ほど３つ列挙した作業をまとめて行ないます。

<div id="message_hidden" style="display:none;">ここにメッセージ本文</div>

<script type="text/javascript">
<!--
var message_area=document.getElementById('message');
var text_area=document.getElementById('message_hidden');

if(message_area&&text_area){
  message_area.innerHTML+=text_area.innerHTML.replace(/\r?\n/g,'<br />');
  message_area.style.display='block';
}
// -->
</script>

.replace(/\r?\n/g,'<br />’)とあるのは自動で改行を<br />に変換するオプションです。不要なら削除してください。この意味が分からなければ削除しないでください。

「お知らせ」の内容を「ここにメッセージ本文」と書いた部分に記入します。先ほど説明したstyle=”display:none;”があるので、サイドバーに文章は表示されません。

今後、変更がある時は「メッセージ本文」だけを変更します。表示するお知らせがないときはサイドバーのパーツを取り外せばOKです。

このブログはファンブログというサービスに書いているので
ファンブログのテンプレート（スキン）を例に説明します。

ファンブログだとトップページを表示するのが「メイン」テンプレート
カテゴリー別や月別などの表示が「アーカイブ」テンプレートです。

この２つのテンプレート中の <BlogEntries> から </BlogEntries> までがメインループです。

２つのテンプレート中には下の箇所があります。

<BlogEntries>
<div class="entry">

...中略...

</div><!-- entry -->
</BlogEntries>

<div class=”entry”> から </div><!– entry –> までが記事のループですが
…中略…と書かれた部分は、実際には長いです。

最後の </div><!– entry –> と </BlogEntries> の間にソースを加えます。

ファンブログの場合、PHPなどのサーバーサイドで動くスクリプトは使えませんので
ソースをJavaScriptで書きますが、WordPressなどの場合はサーバーサイド処理が
出来る環境だと思うのでPHPなどに書き直すといいと思います。

ソースコードは下のとおりです。

</div><!-- entry -->
<script type="text/javascript">
<!--
if(typeof affiliate_flag==='undefined'){
	var affiliate_flag=true;
	document.write('広告タグ');
}
// -->
</script>
</BlogEntries>

affiliate_flagという名前は何でもいいですがユニークなものをつけます。

affiliate_flagが未定義なら、括弧内を実行します。実行するのは２つの処理になります。

• 広告タグをdocument.writeで書き出す。
• affiliate_flagを定義する。

affiliate_flagを定義したことで、２つ目以降の記事下には広告は表示されません。

最初のひとつでなく３つまで広告を出す

Google AdSenseは1ページに3個までしか広告を出せません。
3個以上ソースを書いても、4個目からは表示されません。

Google AdSenseなら、放っておいても表示されないのですが、
そうではなく自分で設定したい場合のソースです。

<script type="text/javascript">
<!--
if(typeof affiliate_flag==='undefined'){
	var affiliate_flag=0;
}

if(affiliate_flag<3){
	document.write('広告タグ');
	affiliate_flag++;
}
// -->
</script>

下のように、affiliate_flagが未定義なら、affiliate_flagをゼロで定義します。

if(typeof affiliate_flag==='undefined'){
	var affiliate_flag=0;
}

affiliate_flagが３未満なら、括弧内を実行します。

if(affiliate_flag<3){
	document.write('広告タグ');
	affiliate_flag++;
}

実行するのは２つの処理になります。

• 広告タグをdocument.writeで書き出す。
• affiliate_flagをインクリメント。

これで最初の3個まで広告が表示されます。
affiliate_flag<3の3を書き換えれば表示個数を変更できます。

ソースコードにアフィリエイトの文字列を記入するときの注意点

別の記事「ランダム表示」に書いていますが、再掲します。

まず、文字列をシングルクォートまたはダブルクォートで括るときは、改行を入れてはいけません。

確かJavaScriptにヒアドキュメントはないと思うんですが、
どうしても改行を入れる必要がある時は\nを使います。

HTMLの中にダブルクォートがたくさん出てくるのでシングルクォートで囲った方が
いいですが、一部のアフィリエイト中にシングルクォートが含まれる物があります。
その場合もエスケープを忘れないようにしないとスクリプトは動きません。

HTMLのソースの中にスラッシュが2個続くURLが含まれています。
http://www.example.com/

コメントアウトと間違われないように、エスケープして\/\/と書いた方が無難です。

内容に関するご指摘、ソースに関する質問は受け付けますが、
ご自分のアフィリエイトが表示されないというトラブルは自分で解決してください。
アフィリエイト（ご自分の収益が目的）のトラブルに関する質問は無視します。

前回の「ランダム表示」はとにかくランダムに表示することだけを考えたソースです。

このページの右上の広告のように、ひとつだけ選んで表示する時は、あれで問題ありません。
ただ、そのままだと、この記事下の楽天のように複数表示させたいときには重複する可能性が
あります。

その重複を避けたランダム表示の方法です。

“重複のないランダム表示” の続きを読む

このブログのサイドバーの広告は、毎回ランダムに表示が変わります。
自分で作ったんでGoogle AdSenseみたいに内容にマッチするわけじゃないですけど。

理屈としては、

みたいな文字列の配列を作り、添字をランダムに生成してdocument.writeで表示させています。

JavaScriptで添字をランダムに発生させるにはMath.random()で出来るようですが、
ググるとクセがありそうなので、自作しました。

つまりソースはこうなります。

var affiliates=['affiliate1','affiliate2','affiliate3'];
document.write(affiliates[(new Date).getTime()%affiliates.length]);

“ランダム表示” の続きを読む

JavaScriptで右クリックからペーストを選択した時に、それをトリガーにして何かを実行したいとする。たとえば、textareaに文字列を入力すると、入力結果をプレビュー欄に表示させる、というような場合。

ctrl+Vならonkeyupでいい。だけどマウスの右クリックでペーストすると、それではダメだ。キーボードは叩いていないんだからイベントが発生しない。

onmouseupでいけるだろうと思ったが、うまくいかない。少なくともFirefoxでは反応しなかった。

どのボタンでクリックされたか判別する【JavaScript】 – Programming Magicという記事を拝見したところ、Firefoxではマウスの右クリックは拾えないようだ。

ならば、ということでonpasteというイベントを使ってみた。実はこのイベントを使ったのは初めてなんだけど、ペーストした追加部分がプレビューに含まれていない。

調べてみたら、onpasteはペーストする直前のタイミングで処理を行なうらしい。
うーん。としばらく考えたけど、setTimeout関数を使って実現できた。

<textarea name="ta" id="ta" onclick="clear_value(this);" onkeyup="preview();" onpaste="setTimeout(preview,10);">
ここにご記入ください。
</textarea>

<div id="pv"></div>

<script type="text/javascript">
<!--
var flag={"ta":0};
var ta=document.getElementById('ta');
var pv=document.getElementById('pv');

var clear_value=function(elem){
	if(!flag[elem.name]){
		elem.value='';
		flag[elem.name]++;
	}
}

var preview=function(){
	pv.innerHTML=ta.value;
}
// -->
</script>

setTimeoutなし （続けて2回右クリックでペーストするとわかる）

<br /> ここにご記入ください。<br />

setTimeoutあり （狙いどおりの動作）

<br /> ここにご記入ください。<br />