伊藤清徳の垂直落下式ムーンサルトプレス

PerlとかPHPとかMySQLとか...がんばっても8割だ。

Category: Javascript (page 1 of 2)

INTER-Mediatorのページネーション機能を少し便利に – 1

最近積極的な利用をしているINTER-Mediatorのお話。
 
seezoo cmsの管理画面に統合して、利用しまくっています。
何かアプリケーションをつくるとき、エンドユーザーが見るフロント側はCMSに任せて、
運営側がつかう管理画面をINTER-Mediatorに任せるというやり方で、
工程数をかなり圧縮することができています。
 
seezoo cmsとINTER-Mediatorに感謝です。
 


 
さて、そんなINTER-Mediatorですが、
まったくもって十分といったら、そうでもなくて、
中でもページネーション機能は、もうちょっとどうにかしたいなぁと思うわけです。
 


 
INTER-Mediatorでは

<div id="IM_NAVIGATOR"></div>

というコードをHTML中にかいておけば、
ページめくり機能を実装してくれます。
 
とても便利です。
 
が、このページめくり機能、
まさに「ページめくり」で、本のページをめくるように1ページずつ移動するか、
あるいは、一番最初、一番最後のページにジャンプする機能しかありません。
考え方が一番近いのは「カード型DB」の感じです。
 


 
何かを管理させる機能をつくるとき、
検索結果のページが10ページくらいになることは、
ざらにあることでしょう。
 
そのページを1ページずつめくっていくのでは、
ちょっと面倒。
できれば、数字を入力して、そのページにジャンプできるようにしたほうが、
便利!!!
と思ったわけです。
つまり、
 


ページヘ


 
▲こんなものをページネーション機能の中に入れたいわけです。
移動のボタンを押すことなくonchangeで書き換えがおこるとなお良いわけです。
 


 
さて、実際にコレをつくっていきましょう。
INTER-Mediatorに同梱されている「INTER-Mediator.js」を編集します。
 
が、このファイルはminifyされているので、
そのままでは非常に編集しづらいです。
 
大事なおともだちまいぺーすたんのブログにminifyを元に戻すサイトが紹介されていますので、
これを参考に、minifyを元に戻して、作業を続けましょう。
 


 

node = document.createElement("SPAN");
navigation.appendChild(node);
node.appendChild(document.createTextNode((navLabel == null || navLabel[3] == null) ? ">>" : navLabel[3]));
node.setAttribute("class", "IM_NAV_button" + (start + pageSize >= allCount ? disableClass : ""));
endPageCount = allCount - pageSize;
INTERMediatorLib.addEvent(node, "click", function () {
INTERMediator.startFrom = (endPageCount > 0) ? endPageCount : 0;
INTERMediator.constructMain(true)
});

 
こんなところがあります。
このへんがページング機能を実装しているところで、
上記のコードの後ろに、
 

node = document.createElement("SPAN");
navigation.appendChild(node);
var c_node = document.createElement("INPUT");
c_node.setAttribute("class", 'IM_PAGE_JUMP');
c_node.setAttribute("type", 'text');
c_node.setAttribute("value", ( INTERMediator.startFrom / pageSize ) + 1 );
node.appendChild(c_node);
node.appendChild( document.createTextNode('ページ目へ') );
INTERMediatorLib.addEvent(
c_node,
"change",
function(){
if( this.value < 1){this.value = 1;}
var max_page = Math.ceil( allCount / pageSize );
if( max_page < this.value ){
this.value = max_page;
}
INTERMediator.startFrom = ( ~~this.value - 1 ) * pageSize;
INTERMediator.constructMain(true);
}
);

 
を追加します。
これで、意図したことができます。
 
再度、minifyして完了!
 


 
ここであることに気がつきます。
 

INTERMediator.startFrom = 0;

 
このプロパティが、DBから取得開始するインデックスを指定するプロパティです。
INTER-Mediatorを利用するページにこのプロパティを追加すれば、
意図したページ番号から表示を開始することができます。
 
この値をcookieか何かに保存しておけば、
一度別のページに移動して、戻ってきた時、
さっき見ていたページ番号を保存するということができます。
 


 
おまけ!
 
INTER-Mediatorでは、処理中INTER-Mediatorのロゴが
ページの左上に表示されます。
これを独自のロゴに変更可能です。
 

showProgress: function () {
}

 
というメソッドがあります。
この中にある

c.setAttribute("src", "data:image/gif;base64,xxxx");

が、画像データです。
ここを書換えてやれば、処理中に表示されるロゴデータを書き換えできます。

Sigma Visual Ajax GUI Builderが楽しい

2年ほど前MOONGIFTさんで紹介された「sigma visual ajax gui builder」が気になっていたものの、
この2年間DLもインストールも行わずじまいでした。

sigma visual ajax gui builderは、簡単に言えば、
HTML+JS(+バックエンドにPHP)のWEBアプリケーションをつくるための、
WEB版VisualBasicのようなもので、構築もWEBブラウザ上で行います。


インストールは簡単。

sigma visual ajax gui builderの公式サイトダウンロードページから「jsLinb 」をダウンロード。

解凍してできた「sigma-visual-builder」フォルダを適当な名前にリネームして、
フォルダごとサーバーへアップロード
VisualJS/projects/
へ書き込み権限を与えます。

これでインストール完了。簡単でしょ?


GUIビルダは、本格的なIDEモードと、シンプルモードがあります。
シンプルーモードは色々なところで簡単なTipsが書かれているので割愛で、
以下、IDEモードの説明をします。


http://サーバー/インストールディレクトリ/VisualJS/
へWEBブラウザからアクセスします。

こんな画面になります。VisualStudio的な画面ですよね?
早速プロジェクトを作ってみましょう。

赤く囲んだ箇所をクリックすると
 

 
こんなダイアログが出てくるので、プロジェクト名に適当な名前を入れて、
OKをクリックします。
 
 
 
すると、このようにファイルが自動生成されます。
これらのファイルは、VisualJS/projects/内に自動でファイル生成されます。
 

 
「App/js/index.js」をクリックすると、IDE上にソースが展開されます。
ここに表示されている、「デザイン」をクリックすると、、、
 

 
こんな感じに、どうだVBだろ!?といわんばかりのRAD画面に。
ここにパーツを置いていって、開発を行うわけです。
 
Hello,worldについては、
公式のリファレンスと何も変わらないので、割愛します。
 
あとは、
 

 
保存して実行すれば、アプリケーションが走り出します。
 


WEB屋をやってると、エンドユーザーに見えるフロント側から考えがちなのですが、
私はフロントよりバックエンド側から考えなければ、動的サイトの意味がないと考えています。
使いくいとか、運営企業のうち担当者独りだけに、運営ノウハウがたまってしまうなど弊害が多いためです。
 
また、フロント側は定期的に手入れするというは当たり前ですが、
バックエンドも日々手入れしなければ、それも動的の意味がないと考えています。
バックエンド側はまさにWEBアプリケーションなのにも関わらず、
アップデートが長い間行われないなどでは、動的にする意味が極端に薄くなると思います。
 
実装のために、
HTMLを起こして、それをPHPやPerlなどと連携したりというのは、
WEB屋としては大変な作業ではないかもしれませんが、
それを定期的(というか毎日でもいいくらい)に手入れしようとおもうと、
HTMLでは大変だと思います。
 
このあたりをクリアできないかと、RADツールを調べているところで、

なども触ってみました。
これら両方ともかなりすばらしいツールで、びっくりしたのですが、
私のこなす仕事に対しては、ちょっと大きなツールかなという印象もあり、
昔MOONGIFTさんで拝見したツールを思い出した次第です。
 
Sigma Visual Ajax GUI Builderが、その答えになっているのか、
正直なところわかりませんし、
動的と考えたとき、CodeIgniterなどのWAFなどと連携ができるのかなど課題も山盛りですが、
もう少し使い込んでみます。

【訂正】Ext.JSのTreeNodeのチェックボックスを動的制御

【訂正】
罫線から下の内容間違っていました。
チェックボックスを動的制御するメソッド、見つけました。
 
TreeNodeUIオブジェクト内に「toggleCheck()」というメソッドがあって、これを利用することで、状態変更できます。
 

//ノードの取得
var node = tree.getNodeById('ノードのID');
//ノードUIの取得
var ui = node.getUI();
//チェックする
ui.toggleCheck( true );

toggleCheck()に渡す値をfalseにすればチェックが外れます。
 
TreeNodeUIのリファレンスまでちゃんと読んでいなかった僕のミスでした。。。
すみません。


 
 
Ext.JSのTreePanelにはチェックボックスを付けることができる。(チェックツリーというらしい)

Ext.JS本家のサンプルはこんな感じ→http://www.sencha.com/deploy/dev/examples/tree/check-tree.html
 
で、諸事情から、ここについているチェックボックスのチェックをJSで動的に着け外ししたい。
 
チェックが付いているノード(各要素)を取得できるメソッドは用意されているのに、
チェックを付けるメソッドが標準でない(T_T)
 
仕方ないので、Ext.JSを解析。(これが約1時間の作業。泣)
ノードはtreeNodeオブジェクトとtreeNodeUIオブジェクトから成立していることが分かった。
 
treePanelからtreeNodeを取得するには、getNodeById()を使えば良い。
そしてtreeNodeからtreeNodeUIを取得するには、getUI()を使う。
チェックボックスはtreeNodeUIのcheckboxというメンバで保存されている。
こいつのcheckedプロパティをtrueにしてやれば、できた。
ところが、当たり前だけど、checkboxのプロパティを変更するだけでは、
treeNodeUIのcheckedプロパティは変更されないので、
こちらも合わせて動的変更する必要がある。
 
というわけで、次のように書いた。
 

//ノードの取得
var node = tree.getNodeById('ノードのID');
//ノードUIの取得
var ui = node.getUI();
//チェックボックスにチェックをつける
ui.checkbox.checked = true;
//ノードのcheckedプロパティを変更
node.checked = true;

 
大体こんな感じ。
 
回りくどい。
出来る人はExt.JS自体を改変した方がいいですよー。
(多分PGなら、ここまで分かれば、あとはどこを改変すればいいかわかると思うので割愛)

IEでsubmit()

IEでJSからsubmit()できないことがある件。


<a href="javascript:;" onclick="doSubmit();">送信!</a>

<form action="test.php" method="POST" id="testForm" name="testForm">

<input name="testVal" type="hidden" value="テストだよ">

</form>

上記のようなHTMLがあるとして、

function doSubmit(){

	document.getElementById('testForm').submit();

}

上記のようなJS関数を実行してフォームを送信しようとすると、

Firefoxでは問題なく送信できるが、IEでは送信できない(>_<)


まず、HTMLを

<a href="javascript:void(0);" onclick="return doSubmit();">送信!</a>

<form action="test.php" method="POST" id="testForm" name="testForm">

<input name="testVal" type="hidden" value="テストだよ">

</form>

と修正して、

function doSubmit(){

	document.getElementById('testForm').submit();

	return false;

}

JSはこのように変更。

何をしたかというと、<a>のhrefをvoid(0)で無効化して、さらに、onclickはfalseを返すようにする。IEではどうやら、JS関数の中のsubmit()より、<a>の働きが優先されるようで、これらをすべて無効化する必要があるよう。

これで半日悩んだ。
ある意味正しいような、でも、なんか納得いかない(>_<)

IEはツンデレだ・・・いやツンツンしてるだけか(爆


ちなみに、

<a href="javascript:void(0);" onclick="return doSubmit();">送信!</a>

<form action="test.php" method="POST" id="testForm" name="testForm">

<input name="testVal" type="hidden" value="テストだよ">
<input type="submit" name="submit" id="submit" value="送信" />

</form>

こんな風に<form>タグの中に「submit」という名前の要素が入ると、submit()ができなくなる。これも注意。

JSは何でもかんでもオブジェクトなので、同じ名前のものがあれば、当然そちらで上書きされる。

迂闊な名前をつけるのはやめよう。

functionなお話

今日は前回に引き続きお友達のWEBデザイナーさんからの依頼で、プログラミングにおける「関数」とは何ぞやという話をしてくれということで書いてみます。

高卒以上のレベルの人でプログラム言語に慣れ親しんでない人が「関数」と聞くと、数学で習った「二次関数」とかの「関数」を思い出すと思います。
※「高卒レベルの人」でと誤解される書き方をしていました。申し訳ありません。正しくは上記の通り「高卒以上のレベルの人」です。

数学で習った「関数」は、ちょっと意味は似ているところがありますが、この際きれいさっぱり忘れたほうがいいです。ということで数学の関数は忘れて話をすすめます。

で、関数っていうのはプログラミング言語やプログラマーによって結構考え方や概念が異なりますので、BASIC(VBではない)やPerlで育ってきた僕の個人的な考えで書いていきます。

お友達デザイナーがActionScriptを勉強していて躓いたらしいですので、僕はASが書けないってことでJSで書いていきます。



まず、簡単なお話から。

Javascriptの入門向け命令辞典を読んでいて、たとえば、「特定の文字列をURLエンコードしたい」というときは以下のような命令を書けと書いてあることがあります。

var str = '文字列';
str = encodeURIComponent(str);
document.write( str );

これを実行すると、「%E6%96%87%E5%AD%97%E5%88%97」と表示されると思います。

encodeURIComponent()という命令を使うことで、「文字列」という文字列を簡単にURLエンコードできます。

実はこの「encodeURIComponent()」が「関数」です。



関数とは、ざっくりと簡単に言えば、決まった手順を一まとめにしておいて、再利用できるようにしたものです。

Javascriptの入門書などで「関数」と言えば、上記のような説明をした上で、

function 関数名( 引数1, 引数2... ){
    手順;
    return 返り値;
}

と書け。みたいなことが書いてあります。

まったくもって、間違いじゃないんですけど、その前に、自分で作らなくても、

Javascriptには最初から前述「encodeURIComponent()」のような便利な関数はたくさん用意されているんです。

たとえば他に
document.write()
alert()
confirm()
window.close()
などなどあります。

こうやって書いてみると、どうでしょうか?プログラミングの初心者でも、これまで書いたプログラムのコードの何割かは関数を使っている部分で埋められているのではないでしょうか?関数は現在の発展したプログラミングにおいては、とても有用なもので、プログラミング言語によって最初からたくさんの関数が用意されています。

前述の「function」を使った「自分で作る関数」は、最初から用意されている関数のほかに、決まった命令をまとめておいたり、それを再利用したりしたい時に作る関数で、一般的に「ユーザー定義関数」などと呼ばれます。言語が最初から用意している関数に対して、自分で作る関数だから「ユーザー定義関数」。分かりやすいネーミングです。はい。

※完全な低級言語やC言語のような低級に近い言語は関数は少なくなるかも。
※window.close()などはオブジェクトのメソッドなので厳密には「最初から用意された関数」ではない。
↑ここの※部分はお友達デザイナは無視したほうがいいですwwww


まず、関数の使いどころです。ここからは入門書を片手に読んでください。

前述の通り、関数は決まった手順をまとめておくもの、そしてそれを再利用できるようにしたものです。

料理で言うと、ダシとかスープみたいなものかな。前もって「一番ダシ」とか用意しておくことがあると思います。関数は、それに近いかな。

「引数」は、そこに醤油や塩などの追加調味料や、メインとなる食材など、目的とする料理に合わせて何かを追加してひとつの料理として完成させたり、また違うひとつの材料にしていったりして行くわけですね。材料を入れたりして加工したものが「返り値」に近いですかね。

では実例。まず関数を使わない例です。

例1

var str_1 = 250;
str_1 = Math.floor( str_1 * 1.05 );
alert( str_1 + '円です。' );

var str_2 = 500;
str_2 = Math.floor( str_2 * 1.05 );
alert( str_2 + '円です。' );

端数切捨てで消費税額を計算して、その結果をalert()するという内容ですね。

上記例の場合、2つの額に対して消費税計算をしていて、同じような処理を繰り返しています。
この場合同じパターンが2つですから、まだマシですけど、3つ4つ・・・となっていくとなんだかなぁとなります。

こういった決まったパターンがあるときに使うのが関数というわけですね。



では、実際に関数を使って書き直してみましょう。

関数を使うといっても、プログラム全体の設計によっていくつかの関数の実装が考えられます。
例1においてもそうです。



関数実装例パターン1

例1のプログラムを見て重複している部分は、
・変数に1.05をかける。
・1.05をかけた変数を小数点以下切り捨てる。
・この変数のあとに「円です」をつけてalert
という流れです。

ここを関数にします。

例2

//↓ここで関数定義!
function taxAndAlert( str ){
str = Math.floor( str * 1.05 );
alert( str + '円です。' );
}


//↓ここから実行文
var str_1 = 250;
taxAndAlert( str_1 );

var str_2 = 500;
taxAndAlert( str_2 );

こんな感じです。 例1と比べるとMath.floorなどの何回もあった面倒な手続き一式がまとめられています。ここが関数。実行文のところでは作った関数「taxAndAlert」を実行しているだけで、Math.floorを何度も書いたりなど面倒が少しラクになります。



関数には、手続きをまとめてラクにするだけではなくて、後々修正がラクになるという効果もあります。例1・2では消費税計算をしているわけですが、2009年8月現在では、そう遠くない未来に消費税率アップがされることが目に見えています。仮に消費税率が8%になったとすると、例1では「1.05」を「1.08」へ書き換える箇所が複数ありますが、例2ではそれが関数の中1箇所だけで済みます。これは大きなプログラムにとってはメンテ性の向上につながります。


関数実装例パターン2

さて、話は少し戻り、関数の実装パターンはいくつか考えられるということを書きました。次のパターンを考えてみましょう。

例3

//↓ここで関数定義!
function taxAndReturn( str ){
str = Math.floor( str * 1.05 );
return str;
}

//↓ここから実行文
var str_1 = 250;
alert( taxAndReturn( str_1 ) );

var str_2 = 500;
alert( taxAndReturn( str_2 ) );

↑ 例2と比べてみると、関数の中でalertを実行していないことが分かります。

ぱっと見、「あれ?繰り返しやっていることをなぜ関数にしないのだ」と思うかもしれません。確かに例1を関数で書き換えるのであれば、例2が最もいい例なのかもしれません。しかし、消費税計算というのは非常によく使う計算ではありますが、alertを使って表示するということはそれほど多くありません。

関数には返り値(かえりち)というものが用意されていて、返り値を使うことで、関数の中で計算させた結果を、元のプログラムに戻してやることができます。元のプログラムはその返り値を使って、好きなことができるわけですね。たとえば、返り値を積算していけば、合計値を計算することができたりします。返り値をうまくつかうことで、関数の機能をシンプルにして、関数の再利用性をあげることもできるのです。

このように関数は、すべてをひとつにまとめるのではなく、本当に繰り返しが多く、まとめるべき手続きをまとめるのも、関数の利用価値を高めるポイントです。


関数実装パターン3

でも、やっぱりこの際、alertも関数でやっちゃいたいよ!と思うこともありますよね。
次の例はどうでしょうか。

例4

//↓ここで関数定義!
function taxAndReturn( str ){
str = Math.floor( str * 1.05 );
return str;
}
function taxAndAlert( str ){
alert( taxAndReturn( str ) );
}

//↓ここから実行文
var str_1 = 250;
taxAndAlert( str_1 );

var str_2 = 500;
taxAndAlert( str_2 );

例4では、関数を二つ作りました。関数の中から関数を呼び出しています。そう、消費税計算をする関数と、その関数を呼び出してalertする関数の二つを作ったわけです。こうすれば、消費税計算に限定することで利用価値をあげた関数の価値をそのままに、alertを呼び出すという手続きも再利用できるようになったわけです。



かなーりざっくりした話でしたが、以上が、関数の使いどころです。

・繰り返しを関数にすることで、プログラムの可読性があがる。何度も同じことを書かなくていい。
・繰り返しを関数にすることで、プログラムを後日改修するときにラクになる。

というところがポイントで、

・関数はプログラム全体を見渡して、関数の内容はシンプルに。
・関数をいくつかつくり、関数と関数を関連させていくことでさらに便利に。

ここが関数の運用・設計において重要な点です。

個人的には、関数は、プログラミングを嫌いにならないためのひとつの道具でもあると思います。何度も同じことして「うがぁっ!!!」みたいなストレスが一番人間にとってよくないと思うからです。関数。頑張って覚えましょう。

switchな話

お友達のWEBデザイナーが switch文の使いどころが??みたいな話をしてました。

私は、職業プログラミングをPerlからはじめたのですが、Perlにはswitchがない。その影響からか他の言語を書くときもめったにswitchは使いません。要するに使わなくても困りません!これ結論。(笑

まぁそれじゃだめなので、色々例示してみましょう。

意味としてはelse ifの構文とほとんど一緒ではあるのですが。。。。以下JSで書きます。


まず、基本。

例1:

var i = 1;
if( i == 0 ){
document.write( '0だよ!' );
}
else if( i == 1 ){
document.write( '1だよ!' );
}
else if( i == 2 ){
document.write( '2だよ!' );
}
else{
document.write( '0から2以外だよ!' );
}

例2:

var i = 1;
switch( i ){

case 0 :
document.write( '0だよ!' );
break;

case 1 :
document.write( '1だよ!' );
break;

case 2 :
document.write( '2だよ!' );
break;

default :
document.write( '0から2以外だよ!' );

}

例2は例1をswitch文で書き換えたものです。

結果はどちらも「1だよ!」と表示されます。

switchは基本的には、判定する変数がひとつの複数条件分岐に使います。


switch文につき物の「break;」。

「break」はブロックを抜けろという意味の命令文。ブロックとはものすごくざっくり言うと「{」と「}」に囲まれた部分。switch構文の中に書けば、switch構文のところを抜けろという意味になります。

これを踏まえて、以下を。

例3:

var i = 1;
switch( i ){

case 0 :
document.write( '0だよ!' );

case 1 :
document.write( '1だよ!' );

case 2 :
document.write( '2だよ!' );

default :
document.write( '0から2以外だよ!' );

}

例3は例2から「break;」を取り払った内容です。

これを実行すると結果出力は「1だよ2だよ0から2以外だよ!」になるはずです。

ここがswitch文の特徴のひとつです。
else if構文では、条件にあったところだけを実行して、その後のブロックは無視されます。
switch構文では、条件にあったところ以降(breakが出てくるまで)すべてのステートメントを実行してしまいます。


例3を踏まえて、以下を。

例4:

var i = 1;
switch( i ){

case 0 :
case 1 :
document.write( '0か1だよ!' );
break;

case 2 :
document.write( '2だよ!' );
break;

default :
document.write( '0から2以外だよ!' );

}

この場合、結果は「0か1だよ!」になるはず。まぁ当たり前。で「var i = 1;」を「var i = 0;」にしても結果は同じく「0か1だよ!」になります。
switch構文は、条件に合致したところ以下、break;が出てくるまで実行し続けます。
上記の例なら、「iが0だったとき」にbreakが用意されていないので、その下の「iが1だったとき」のステートメントが実行され、その中にbreakがあるので、そこでswitch文を抜けます。

つまり意味としては
「iが0だったとき」または「iが1だったとき」
という意味になるんですね。

例5

var i = 0;
if( (i == 0) || (i == 1) ){
document.write( '0か1だよ!' );
}
else if( i == 2 ){
document.write( '2だよ!' );
}
else{
document.write( '0から2以外だよ!' );
}

例4をif/else if構文で書き換えるとこんな感じ。「または」の意味を「||」でつないでいるのが分かります。例5の場合、「または」の条件が2つなのでまだマシですけど、これが3つ4つになると鬱陶しいですよね?

要するに可読性が上がるというわけですな。(案外これ重要)
どこのサイトか忘れましたけど、JSでswitch使ったときと、else ifを使ったときでどっちが早いかということを実験してたところがありました。switch構文を使ったほうが早いということだったのは覚えています。



ちなみに!逆転の発想でこんなこともできたり・・・。

var array = new Array();
array[0] = false;
array[1] = false;
array[2] = true;
array[3] = false;
array[4] = false;

switch( true ){

case array[0]:
document.write( '0がTRUE!' );
break;

case array[1]:
document.write( '1がTRUE!' );
break;

case array[2]:
document.write( '2がTRUE!' );
break;

case array[3]:
document.write( '3がTRUE!' );
break;

case array[4]:
document.write( '4がTRUE!' );
break;

default:
document.write( 'どれもTRUEじゃなかった(T_T)' );
}

条件にtrueを渡しておいて、caseに出てくる変数のどれがtrueかを判定する。
上記例の場合は、true|falseですが、数値とか文字列もいけるはず。

多少パフォーマンスを犠牲にしてますが、可読性はあがるのでは。と。。。



まとめ!

あまり使いどころの説明にはならなかったなこの記事・・・。反省。

KIYOVBSの動作条件追加

クライアントさんから先日リリースしたKIYOVBSが動作しないとご指摘頂きました。
多謝です。

環境によりVC++2008ランタイムが必要です。

インストールしてみて動作しないということであれば、
ランタイムをインストールしてみてください。

ランタイムはマイクロソフトサイトより
http://www.microsoft.com/downloads/details.aspx?familyid=A5C84275-3B97-4AB7-A40D-3802B2AF5FC2&displaylang=ja
こちらからダウンロードしてください。

SSLでLightboxを使うとIEで警告

何かと便利なLightbox。

だが、Lighbox2をSSL通信領域で使うと、

ブラウザ界を代表する困ったちゃんIEでセキュリティ警告が出る。


SSL通信になってない項目がページの中にあるよ。っていう警告なんだけど、

いくら調べてもそんなのページの中にない(>_<)
何が原因なのかさっぱりで、丸二日悩んだ・・・。Lightboxが悪いのか、IEが悪いのか。


で、最終的に、Lightboxディレクトリ中「/css/lightbox.css」に原因があることが判明。
13行目の記述。

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

「background-image: url(data:image/gif;base64,AAAA);」
↑どうやらこれが問題らしい。。。見慣れない記述だ。
おそらく、BASE64エンコードしたときに値が「AAAA」となる、Content-typeが「image/gif」のデータを背景として読み込んでいる様子。

だったら、こういうファイルを実際につくればいいのでは。
ってことで、そのファイルをまずPerlで作る。

#!/usr/bin/perl -w

use strict;
use MIME::Base64;

my $fh;
open( $fh,'> hover.gif') || die("だめだった...orz\\n");
print $fh decode_base64('AAAA');
close( $fh );

print "できた!\\n";

まあこんな感じ。適当で申し訳ない(^-^;

それで、このスクリプトで作った「hover.gif」を、
lighbox内のディレクトリ「images」へアップロードし、
「/css/lightbox.css」の13行目を

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(../images/hover.gif); /* Trick IE into showing hover */ display: block; }

に変更したら、警告は出なくなった。


今回は、一応CSSに記述されている内容にしたがって改造したけど、
そもそもBASE64にしたとき「AAAA」なGIF画像なんて意味があるわけがないので、
もしかしたら、そんな画像をわざわざ作らなくても、何か適当なGIFを背景に指定してやればよかったのかも。

script.aculo.usでフロート要素

script.aculo.usが何かと便利だ。

とか書いていると、

「prototype.jsマンセーな人か?}
という突っ込みを受けそうですが、
否定はしません。
jQueryよりprototype.jsが好きです。
HTML制作をする上で、使いやすいのは多分圧倒的にjQueryなんだと思いますが、
いかにもjavascriptを拡張したっぽいprototype.jsのが親しみを感じるのです。個人的に。

閑話休題・・・いや、、、本題へ。



script.aculo.usには便利な機能が満載。フロートできる要素の設定も簡単だったので紹介。


まずは、例のごとくHTMLにライブラリをロードしなければお話になりません。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>

うえの二つは、script.aculo.usのベースライブラリ。
最後のひとつは、フロートできる要素を作ったり、ドロップできる要素をつくったりしたいときに呼び出すライブラリです。

script.aculo.usのダウンロードはこちらから。


次に、フロートしたいブロック要素をつくります。

<div id="float">これをフロート</div>

当たり前ですが、IDはページ内でユニークなものを設定しましょう。



最後にjavascriptでフロートを作成です。

<script type="text/javascript">
	new Draggable('float');
</script>


↑これだけです。引数には、フロートしたい要素のIDを指定します。

まぁ、普通は、onloadで呼び出す関数などに入れておいて、
ページ読み込み完了時 にこの命令が有効になるようにしたほうがいいので、
実際は、

<script type="text/javascript">
	function loadFunction(){
		new Draggable('float');
	}
</script>


↑JSソースにはこのように書いておき、

<body onload="loadFunction();">

↑<body>
タグにこのようにonload属性をつけて、関数を呼び出すのが筋でしょうか。

onload属性を使うのがかっちょわりぃなぁという人もいると思いますが、
ソース書くのが面倒なので、自分で考えて書いてください。



あとは、フロートしたDIVにスタイルシートで飾りをつけてやれば、そこそこWindowっぽいものが出来上がります。

色々ゴニョゴニョしてやれば、擬似ウィンドウもできますから、自分専用の擬似ウインドウライブラリを作っておくと何かと便利だと思ったり。



上記例では、関数「Draggable」にはひとつしか引数を渡していませんが、
第二引数でオプションを設定可能です。

<script type="text/javascript">
new Draggable(
	'float',
    	{
        		ghosting : true,//ゴーストを表示させるか? true|false
                revert : true,//移動後元の位置に戻すか? true|false
                starteffect: function() {//ドラッグ開始時によばれる関数
                },
                endeffect: function() {//ドラッグ終了時に呼ばれる関数
                }
         }
);
</script>

だいたいこんな感じです。

ほかにも沢山オプションがありますし、
フロート指定した要素に「onDrag」(ドラッグ開始のとき)などの、
イベントハンドラが追加されます。
詳しくは公式ページをご覧下さい。

handleというオプションを使うとD&Dできるようになるらしいですが、
未確認のため、今回は記事には書きません。



javascriptで広告とかをフロートさせるライブラリが何万円で売ってることがありますが、
これなら安上がり?
script.aculo.usはMITライセンスだから、自分でつくって売ってもウマー(←あんまり感心しませんがね)

JavascriptにPHPの関数を実装

PHPは何かと叩かれやすい言語。

私もPHP使う人間だが、
PHPだけを利用するのはあまりよくないと思っている。
個人的には、PHPはプログラミング言語というよりは、
ほかの言語での勉強や経験を、
実践の場で簡単にフィードバックできる「ツール」くらいの感覚で利用している。
その辺の議論は、ググるといっぱいでてくるので、ここまで。

「ツール」という言葉を出したとおり、
PHPは、良くも悪くもWEBで利用するには
とても便利な便利な関数がそろえられている。

この関数をJavascriptへユーザー定義関数として実装してしまおう!
というのが「PHP.js」です。

http://kevin.vanzonneveld.net/techblog/article/phpjs_licensing/

関数別に説明ページとソースがある。

すべての関数をまとめたJSファイルをダウンロードもできるようだが、
ほかのJSライブラリと重複する機能も多々あるので、
関数別にソースを拝借して、利用したほうがよさそうだ。

個人的にmd5()、file_get_contents(),basename(),dirname()あたりを良く使いそうな予感。

Older posts