PHPのテクメモ

この前、JavaScriptで配列をシャッフルする方法について書いた。その際はprototypeプロパティを使い、配列にメソッドを追加（JavaScriptでこういう言い回しが正しいのかどうか分からないけれど）する方法を採用した。しかし別のプログラムとの兼ね合いで、どうしてもprototypeプロパティから追加してはいけない、ということになった（諸般の事情で・・・）。

で、調べたら、同じアルゴリズムで書かれた関数があった。

prototype型

Array.prototype.shuffle = function() {
var i = this.length;
while(i){
var j = Math.floor(Math.random()*i);
var t = this[–i];
this[i] = this[j];
this[j] = t;
}
return this;
}

関数型

function shuffle(a){
var i = a.length;
while(i){
var j = Math.floor(Math.random()*i);
var t = a[–i];
a[i] = a[j];
a[j] = t;
}
return a;
}

JavaScriptで配列をシャッフルする方法を調べてみた。JavaScriptはPHPと比べると元々組み込まれている関数（っていうのかなんていうのか）が少ない。それでも、なんとかなっちゃってるところがすごい。

いろいろな記事が見つかったけど、一番素晴らしい（と自分が思った）のはこちらの記事。

http://la.ma.la/blog/diary_200608300350.htm

早速使わせていただきました。時間があればレビューすることにする。

最近使い始めたtinyMCE。JavaScriptベースのwysiwygエディタの老舗だけに機能的には申し分ない。今日はちょこっとしたことをメモ。

tinyMCEで画像を挿入すると、デフォルトの状態では自動的に相対パスに変換してしまうようだ。それ自身は特に問題ないのだが、例えばCMSでtinyMCEを使用する場合、tinyMCEを使っている管理画面のある階層と、画像の階層、閲覧のためのプログラムのある階層について、各階層構造が同じになっていないと（もしくはmod_rewrite等で揃えておかないと）、階層がずれてしまって画像が表示されなくなってしまう。ということで、画像を絶対パスで挿入する方法を探した。

tinyMCE.init({・・・・・・・・ , relative_urls : false , ・・・・・・・・・})

初期化時に渡すオプション（オブジェクト）に、上記のように追加すればOK。

既にメンテナンスをしていないjQueryプラグインのThickboxであるが、便利だし見栄えがいいし未だに他のプラグインに乗り換えられずにいる。Thickboxのバグ（というと失礼なのかもしれないが）の一つに、パラメータ（$_GET変数）つきのページはパラメータを削除したURLで表示してしまうという問題がある。毎回Thickboxに修正を加えているのだが、毎回「どこを修正するんだったっけ」という状態になる。で、修正箇所をメモしておく。

tb_parseQuery関数の一行目に以下の行を追加しておく。

query = (query.indexOf(‘?’) != -1) ? query.split(‘?’)[1] : query;

出典はこちら。スペシャルサンクス。

画面上でマウスカーソルをあわせると、小さなポップアップで簡単な説明を表示させるようなインターフェイスは結構受けがいい。こういうインターフェイスは「tooltip」というらしい。jQueryではこれを実現するためのプラグインが多数存在する。今回案件でイメージマップを作成し、その中のリンク要素に対してポップアップで見出しをつけることを提案した。しかしこれ、意外に難しくて、普通のプラグインでは対応できなかった。なぜなら表示される要素（<img>）とリンクを記述する要素（<map>）がそもそも別の場所に記述されているからだ。リンクが記述されている<map>内の<area>タグでtooltipを表示するよう記述してみたけど、思った場所に表示されなかった。自前で実装するしかない。

ここでjQueryでマウス位置を取得する必要がある。リンクエリアの入った瞬間のHTMLの左上隅からの座標を取得することさえ出来れば、そこに絶対位置指定でポップアップを表示させればいいからだ。しかしこれも単純にはいかなかったので、少し変化球で勝負してみた。

1. マウス位置は常に取得して特定の変数に格納し続ける（マウスが動いている間は絶えず）。
2. 特定のエリアに入ったときに、上記で格納している変数の値を読み取る。

特定のエリアに入ったときにマウスカーソルの位置を直接取得するのではなく、マウスカーソルの位置座標は常に変数に格納しておき、特定のエリアに入った時だけ変数を呼び出すような手法をとった（間接的）。これでうまく位置座標が取得できた。jQueryで記述するとこんな感じ。

var X,Y;
$(document).ready(function(){
$(‘html’).mouseover(function(ev){
X=ev.pageX;
Y=ev.pageY;
});
});

これで常にXとYにマウス位置が格納されているので、イベントに応じてそれらの変数値を読み取ればいい。