手軽に導入できるＡＳＰレンタル本格ネット予約システム『リザーブデスク』

ＪａｖａＳｃｒｉｐｔを有効に変更してください。

リザーブデスク

　お持ちのホームページにタグを貼り付けるだけで、本格ネット予約を導入できます。
ご利用料金も月額換算６,０００円からとお手軽です。

工事メイト

　工事メイトは「Ｐｒｏ」「Ｐｌｕｓ」「Ｌｉｇｈｔ」のラインアップを持つ、工事測量パッケージシステムとして土木工事技術者様のニーズに幅広く対応しています。

PHP,JavaScript,Ajax...

　件数はまだまだ少ないですが、Ｗｅｂアプリ開発時に行き当たった問題点と解決策や、各種ライブラリの紹介などを記載しています。

Prototype & script.aculo.usベースのドラッグ移動・リサイズ可能なポップアップウィンドウクラスのダウンロードと解説

■ 背景

　移動・リサイズ可能なポップアップウィンドウ javascriptライブラリは数多くリリースされており、何を今更とも考えもしたのですが、その多くはjQueryベースなどで構築されており、 Prototypeベースのライブラリとして目新しいものを見つけることが難しい状況です。
　また、prototype.jsベースのライブラリとして Prototype Window Class が有名ですが、オリジナルのままではＩＥ６,７でエラーとなり（この問題の回避方法はこちら）、開発も終了しているようです。
　そこで、ドラッグ移動・リサイズ対応ポップアップウィンドウのオリジナルライブラリを、Prototype & script.acuro.us ベースで作成いたしました。
MIT-style Licenceとしておりますので、よろしければご利用ください。

■ サンプル

　下の「サンプルを見る」をクリックすると、別窓でログイン画面が表示されます。
IDはadmin パスワードも admin でログインいただき、表示された画面の [編集]又は[追加]ボタンをクリックすると、ポップアップウィンドウが表示されます。
デモシステムですので、実際にオペレータ情報が追加・編集されることはありませんが、ポップアップウインドウの動作を確認いただくことができます。

「サンプルを見る」

動作確認ブラウザ:IE6,7,8 Firefox3 GoogleChrome4,5 Safari4 Opera10 Lunascape5,6

■ ダウンロード(free)

　下のダウンロードボタンからダウンロード後、適当な場所に解凍してください。

cycPopup.zip 33.4KB

【解凍後ファイル一覧】

css/popWin/ : ウィンドウをスタイルするイメージファイルが納められています。
css/cycPopWin.css : ウィンドウをスタイルするスタイルシートです。
js/cycPopupWin.js : ライブラリー本体です。
js/cycResizable.js : リサイズヘルパーライブラリです。

【その他必要とするライブラリー】

Prototype : prototype.js ver1.6以上 http://www.prototypejs.org/から
script.aculo.us : ver1.8以上 http://www.script.aculo.us/から(builder.js,effects.js,dragdrop.js)

下の「ライブラリを読み込む」を参考に、それぞれのファイルを配置してください。

■ ライブラリを読み込む

【書式】
<link rel="stylesheet" type="text/css" href="【cssURI】/cycPopWin.css" />
<script src="【URI１】/prototype.js" type="text/javascript"></script>
<script src="【URI２】/builder.js" type="text/javascript"></script>
<script src="【URI２】/effects.js" type="text/javascript"></script>
<script src="【URI２】/dragdrop.js" type="text/javascript"></script>
<script src="【URI３】/cycResizable.js" type="text/javascript"></script>
<script src="【URI４】/cycPopupWin.js" type="text/javascript"></script>

【cssURI】: cycPopWin.cssがあるＵＲＩ、ファイルパス
【URI１】: prototype.jsがあるＵＲＩ、ファイルパス
【URI２】: script.aculo.usライブラリがあるＵＲＩ、ファイルパス
【URI３】: cycResizable.jsがあるＵＲＩ、ファイルパス
【URI４】: cycPopupWin.jsがあるＵＲＩ、ファイルパス

　ライブラリを読み込むには、<link>タグでcycPopWin.cssをリンク、<script>タグでprototype.jsを読み込ませた後、script.aculo.usのbuilder.js,effects.js,dragdrop.jsを読み込み、続いてヘルパーライブラリの cycResizable.jsを、最後に本体のcycPopupWin.jsを読み込ませる必要があります。
【サンプル】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" type="text/css" href="../css/cycPopMenu.css"  />
<script src="../js/lib/prototype.js" type="text/javascript"></script>
<script src="../js/src/builder.js" type="text/javascript"></script>
<script src="../js/src/effects.js" type="text/javascript"></script>
<script src="../js/src/dragdrop.js" type="text/javascript"></script>
<script src="../js/src/cycResizable.js" type="text/javascript"></script>
<script src="../js/cycPopupWin.js" type="text/javascript"></script>
<script src="../js/mySampleLoad.js" type="text/javascript"></script>           //......cycPopupWinオブジェクトを生成、活用するjs
<title>【サンプル】</title>
</head>
<body>
</body>
</html>

続いて、mySampleLoad.jsでポップアップWindowクラスであるControl.CycPopupWinオブジェクトを生成します。

■ Control.CycPopupWinオブジェクトを生成する

【書式】
【winObj】= new Control.CycPopupWin(【id】, 【imageURI】 ,【options】)

【id】: 生成する【winObj】を認識するためのid
【imageURI】: イメージファイル格納ＵＲＩ、ファイルパス。通常は【cssURI】/popWin/
【options】: 各種オプション(省略化)

　ここで指定したid名に続く文字列が以下の物を、ソース(呼出しhtmlやphp）のエレメントidとして使用することはできません。
（例:idとしてpopWinを指定した場合、popWinTitleBarはidとして使えません)
TitleBar, Title, minBtn, maxBtn, CloseBtn, Body, contentWrap, Content, ContentOverlay, LastBer, ResizeLeft, ResizeHandle, BottomBar
　生成した【winObj】はそのままでは表示されず、【winObj】.showPopWin(【title】)などのオープン用メソッドを呼び出す必要があります。
　オープンされている【winObj】を閉じるには、そのWindowのクローズボタンをクリックするか【winObj】.closePopWin()メソッドを呼び出します。
【options】で指定できる表示オプション

名前	初期値	内容
width	400	横幅初期値
height	0	縦幅初期値(px単位) heightを省略し、次行のhtmlContentを指定した場合、現在の横幅で縦スクロールの必要がないウィンドウ縦幅初期値が自動設定されます。
htmlContent	""	ウィンドウ内に表示するhtml断片
zindex	100	ウィンドウが表示された時のz-index (設定可能最小値:4)
firstEle	null	ウィンドウがオープンされた時に、フォーカスされるウィンドウ内のエレメントid
nextEle	null	ウィンドウが閉じられた後に、フォーカスされるエレメントのid
isModal	true	trueを指定すると、ウィンドウの下層を全面カバーするオーバーレイを表示し、開かれたウィンドウ内エレメント以外へのフォーカスやイベント発生を防ぎます。
overlayOpacity	0.5	オーバーレイの不透明度を０から１の範囲で指定します。
overlayColor	#AAA	オーバーレイの色を、#RGB又は#RRGGBB形式で指定します。
minWidth	132	マウスドラッグでウィンドウを縮小した際の最小幅をpx単位で指定します。(最小値:132)
minHeight	142	マウスドラッグでウィンドウを縮小した際の最小高をpx単位で指定します。(最小値:142)
duration	0.5	ウィンドウをオープン・クローズする際の、エフェクト時間を秒単位で指定します。
closeCallback	null	ウィンドウをクローズした直後に実行する関数があれば、その名前を指定します。

【サンプル】

//mySampleLoad.js
var win01;  //Control.CycPopupWinオブジェクトの一つ目
var win02;  //Control.CycPopupWinオブジェクトの二つ目
Event.observe(window, "load", function(){
    var popHtml = makePopformHtml();
    //win01生成時に流し込むhtml断片を生成します
    win01 = new Control.CycPopupWin('win01Pop', "../css/popWin/",
                       {width:600, htmlContent:popHtml,
                        firstEle:'name', nextEle:'append',
                        zindex:1000, isModal:true,
                        overlayOpacity:0.3,overlayColor:"#CAC",
                        minWidth:150, minHeight:150,
                        duration:0.5});
    //height以外のオプションをフルセットしたオブジェクトを生成しました。

    //必要があればこの後、win01に流し込んだエレメントにイベントを定義します。
    //$("abc")や$("win01Cancel")ボタンエレメントが流し込まれていた場合
    Event.observe($("abc"), 'click', function(event){
        foo();
    });
    Event.observe($("win01Cancel"), 'click', function(event){
       win01.closePopWin(); //win01ウィンドウを閉じます。
    });

    Event.observe($("openWin01"), 'click', function(event){
       win01.showPopWin('オペレータの追加');
    });
    //$("openWin01")ボタンをクリックすると、
    //タイトルバーに オペレータの追加 と
    //表示されたウィンドウを表示するよう設定しました。

    win02 = new Control.CycPopupWin('win02Pop', "../css/popWin/");
    //何もオプションを指定しないオブジェクトを生成しました。
});
//以降必要なファンクション等を適宜追加

■ 開かれているウィンドウを閉じる

【書式】
【winObj】.closePopWin()
　開かれているウィンドウオブジェクトを閉じます。
【サンプル】

//mySampleLoad.js
var win01;  //Control.CycPopupWinオブジェクト格納オブジェクト
Event.observe(window, "load", function(){
    var popHtml = makePopformHtml();
    //win01生成時に流し込むhtml断片を生成します
    win01 = new Control.CycPopupWin('win01Pop', "../css/popWin/",
                        {width:600, htmlContent:popHtml});
    //ウィンドウオブジェクトを生成

    Event.observe($("openBtn"), 'click', function(){
        win01.showPopWin('Sample');
    });
    //$("openBtn")ボタンクリックでウィンドウが開きます

    Event.observe($("cancelBtn"), 'click', function(){
        win01.closePopWin();
    })
    //$("cancelBtn")ボタンクリックでウィンドウが閉じます
});

■ ウィンドウを開く　その１

【書式】
【winObj】.showPopWin(【title】)

【title】: タイトルバーに表示する文字列

　showPopWinで、ウィンドウを表示します。このメソッドを呼び出す前には、newメソッドまたはsetHtmlContentメソッドで表示するウィンドウの内容としてhtml断片を流し込んでおく必要があります。

■ ウィンドウを開く　その２

【書式】
【winObj】.showHtmlContent(【html】,【title】,【width】,【height】)

【html】: ウィンドウに表示する内容(html断片)
【title】: タイトルバーに表示する文字列
【width】: 横幅(px単位)
【height】: 縦幅(px単位)

　表示する内容とサイズを指定して、ウィンドウを開きます。
例えばAjaxのレスポンス内容により、内容を動的に変更する場合などに使用すると便利です。

■ ウィンドウ内に他のページを表示する

【書式】
【winObj】.showUrl(【url】,【title】,【width】,【height】,【scrolling】)

【url】: 表示するページのＵＲＬ
【title】: タイトルバーに表示する文字列
【width】: 横幅(px単位)
【height】: 縦幅(px単位)
【scrolling】: <iframe>のscrollingを'yes'又は'no'で指定します

　表示するページのＵＲＬとサイズを指定して、ウィンドウを開きます。
普通は、一般のＨｔｍｌページを表示する場合はscrollingを'yes'で、又ＰＤＦページを表示する場合は、無駄なスクロールバーを非表示とするようにscrollingを'no'で指定します。
【サンプル】

//mySampleLoad.js
var pdfWin;  //Control.CycPopupWinオブジェクト
Event.observe(window, "load", function(){

    pdfWin = new Control.CycPopupWin('pdfOutPop', "../css/popWin/");
    //CycPopupWinオブジェクトを生成

    Event.observe($("pdfOutBtn"), 'click', function(){
       showPdf();
    });
    //$("pdfOutBtn")ボタンクリックでshowPdfを呼び出します
});

function showPdf(){
    pdfWin.showUrl("../pdfMake/sumplePdfOut.php?ymd=2010/02/24&from=540&to=1020", 'sample', 400, 300, 'no');
}
// sumplePdfOut.phpはpdfファイルを動的に生成表示するphpスクリプトとします

■ ウィンドウに表示する内容とサイズを指定する

【書式】
【winObj】.setHtmlContent(【html】,【width】,【height】)

【html】: ウィンドウに表示する内容(html断片)
【width】: 横幅(px単位)
【height】: 縦幅(px単位)

　ウィンドウの内容とサイズを、予め設定します。
例えば、流し込んだhtml断片にあるエレメントに対しイベントを安全に設定したい場合、このメソッドを読んだ後に、Event.observeでエレメントにイベントを設定します。

■ ウィンドウのサイズを指定する

【書式】
【winObj】.setSize(【width】,【height】)

【width】: 横幅(px単位)
【height】: 縦幅(px単位)

　ウィンドウの横幅と縦幅を指定します。

■ その他

アイコン表示時の不具合解消と、ウィンドウクローズ時コールバック関数指定を追加したver1.1.2をアップロードしました。(2010/07/23)
IE6などJavascriptの実行スピードが遅いブラウザで、Pdfファイルなどを読み込ませたウィンドウをドラッグ時にマウスの追従が鈍くなります。
ご意見・ご感想やバグのご報告などは、こちらからお願いします。

手軽に導入できるＡＳＰレンタル本格ネット予約システム『リザーブデスク』

Prototype & script.aculo.usベースのドラッグ移動・リサイズ可能なポップアップウィンドウクラスのダウンロードと解説

より使いやすく・よりセキュアで・よりリアルタイムに