��∝�醇��篋榊�������� KAYAC BM11

1. 名前空間の重複に気をつけよう

JavaScript は、ブラウザの1ウィンドウあたり共通の名前空間を有する事になります。

そこで、"name" や "id" などの一般的な変数名を使用してしまうと、他の JavaScript との名前の重複がおこってしまい、ブログパーツが動かなくなってしまったり、ブログそのものの表示がおかしくなってしまうことが起こりえます。

一番良いのは、グローバル空間を汚さないことです。しかし、どうしてもグローバル空間に変数や関数を定義しなくてはならないという場合には、Java や ActionScript で使われているようなパッケージ空間を意識した変数の定義をすると良いでしょう。

たとえばパオロでは、BlogDeco.Paolo という名前空間の下に変数や関数を定義することで、名前空間のバッティングを極力さけるようにしています。
if (!(BlogDeco)) var BlogDeco = {};
BlogDeco.Paolo= {};
// ここから変数、関数の定義
BlogDeco.Paolo.status = true;
…


2. ブログパーツの二重貼付けに対処しよう

ブログパーツは必ずしも一つのページに一つしか貼られないわけではありません。ユーザーが気に入って同じブログパーツを複数貼ることもありますし、ブログの個別エントリに紹介の為に貼付け、全ページにももう一つ貼付ける、なんてことはよくあると思います。

そこで気をつけるのは、ブログパーツが複数貼られても問題ないようにスクリプトを書くということです。

たとえばスクリプトが複数実行されないように、以下のように実行を制限したり
// 既に BlogDeco.Paolo が定義されていたら、これ以下のスクリプトは実行しない
if ( (!!(BlogDeco) && !!(BlogDeco.Paolo)) )
throw("paolo.js is already required.");
// throw は try 文の中で使用するもので、JavaScript エラーとなりますが、
// わかり易さの為わざと使用しています


DOM 要素の ID など重複してはならないものがある場合には、乱数を使用して ID をユニークにしましょう。
var div = document.createElement("div");
div.id = "foo_blogparts_" + new Date().getTime();
...


3. 貼付けタグのスクリプトにパラメータを渡すには？

ユーザID などの情報を Flash に渡したい場合、貼付けタグのファイル名の後ろにパラメータをつけて渡したいということがあると思います。

そしてそのパラメータを取得する方法ですが、IT戦記 とてもシンプルに自分自身が属する script 要素を取得 にあるとおり、ブログパーツの JavaScript 評価時の、一番最後にある script タグが自身の script タグとなります。

そこで、以下のようにすればスクリプトの URL を取得でき、URL を解析することでパラメータを取得できます。
var script = document.getElementsByTagName("script");
// src にブログパーツの URL (http://www.example.com/js/tag.js?userid=1 など）が入る
var src = script[ script.length - 1 ].src;


4. DOM 操作をしたいなら、window.onload のイベント発動時におこなおう

ブログパーツの Flash を表示するだけの簡単な JavaScript であれば構いませんが、innerHTML や append/removeChild などを使った DOM の編集をともなう処理がおこないたい場合は、window.onload のイベント時に実施するようイベントを定義しましょう。

window.onload のイベント前にこのような処理を実行すると、ブラウザの仕様によりブラウザが強制終了してしまう場合があります。

なお、window.onload に直接代入すると、以前に定義されていた（かもしれない）関数が削除されてしまうので、addEventListener / attachEvent を使ってイベントを定義しましょう。

var onloadfunc = function(){
// オンロード時に実行したい処理
};
if (window.addEventListener) {
window.addEventListener('load' onloadfunc);
} else {
window.attachEvent('onload', onloadfunc);
}


5. 単純な貼付けなら (function () { ... })(); を使おう

1 でも説明しましたが、ブログパーツを作る上で一番大切なことは、ブログパーツを貼付けたブログ自体の表示を壊さないということです。グローバル領域を汚染せずに、Flash などのブログパーツを表示する為の、もっとも簡単な方法は、以下のように書くことです。

(function () {
// ここから処理を書く
var id = "foobar";
...
document.write("object タグなどの Flash 表示タグ");
} )();


JavaScript の変数のスコープは、function の中に限られるので、上記のようにスクリプト全体を function の中で定義することで、他の変数への影響を押さえることができます。
ただし、この方法で定義した変数・関数にはどこからもアクセスすることはできない為、externalInterface を使ったブログパーツなど、外部から変数・関数の参照が必要な場合には使用できません。

長々と書いてしまいました。ブログパーツを作成してみたいと思ったとき、参考にしていただければ幸いです。