Android スマートフォン本格測量計算 グラフィク操作により控え杭・移設杭復元・検測を強力にサポート

トップロゴ 問い合わせ先
JavaScriptを有効に変更してください。

製品紹介

listMark 工事メイト for Smart
 工事メイト for Smartは、Android スマートフォン用 携帯「総合測量計算アプリ」です。多種多様な測量計算を網羅した「Professional」と、 搭載業務を限定した無料の「Light」のラインアップを持ち、いずれもアンドロイドマーケットからダウンロードしていただけます。
listMark 工事メイト for Win
 工事メイト for Winは「Pro」「Plus」「Light」のラインアップを持つ、Windoesパソコン用工事測量パッケージシステムとして 土木工事技術者様のニーズに幅広く対応しています。

システムノート

 件数はまだまだ少ないですが、Webアプリ開発時に行き当たった問題点と解決策や、各種ライブラリの紹介などを記載しています。
ドラッグ移動・サイズ変更対応ポップアップウィンドウ

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

■ 背景
 移動・リサイズ可能なポップアップウィンドウ javascriptライブラリは数多くリリースされており、何を今更とも考えもしたのですが、 その多くはjQueryベースなどで構築されており、 Prototypeベースのライブラリとして目新しいものを見つけることが難しい状況です。
 また、prototype.jsベースのライブラリとして Prototype Window Class が有名ですが、オリジナルのままではIE6,7 でエラーとなり(この問題の回避方法はこちら)、開発も終了しているようです。
 そこで、ドラッグ移動・リサイズ対応ポップアップウィンドウのオリジナルライブラリを、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 : リサイズヘルパーライブラリです。
【その他必要とするライブラリー】 下の「ライブラリを読み込む」を参考に、それぞれのファイルを配置してください。
■ ライブラリを読み込む
【書式】
<link rel="stylesheet" type="text/css" href="【cssURI】/cycPopWin.css" />
<script src="【URI1】/prototype.js" type="text/javascript"></script>
<script src="【URI2】/builder.js" type="text/javascript"></script>
<script src="【URI2】/effects.js" type="text/javascript"></script>
<script src="【URI2】/dragdrop.js" type="text/javascript"></script>
<script src="【URI3】/cycResizable.js" type="text/javascript"></script>
<script src="【URI4】/cycPopupWin.js" type="text/javascript"></script>
  • 【cssURI】: cycPopWin.cssがあるURI、ファイルパス
  • 【URI1】: prototype.jsがあるURI、ファイルパス
  • 【URI2】: script.aculo.usライブラリがあるURI、ファイルパス
  • 【URI3】: cycResizable.jsがあるURI、ファイルパス
  • 【URI4】: cycPopupWin.jsがあるURI、ファイルパス

 ライブラリを読み込むには、<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】: イメージファイル格納URI、ファイルパス。通常は【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 オーバーレイの不透明度を0から1の範囲で指定します。
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")ボタンクリックでウィンドウが閉じます
});
■ ウィンドウを開く その1
【書式】
【winObj】.showPopWin(【title】)
  • 【title】: タイトルバーに表示する文字列
 showPopWinで、ウィンドウを表示します。 このメソッドを呼び出す前には、newメソッドまたはsetHtmlContentメソッドで 表示するウィンドウの内容としてhtml断片を流し込んでおく必要があります。
■ ウィンドウを開く その2
【書式】
【winObj】.showHtmlContent(【html】,【title】,【width】,【height】)
  • 【html】: ウィンドウに表示する内容(html断片)
  • 【title】: タイトルバーに表示する文字列
  • 【width】: 横幅(px単位)
  • 【height】: 縦幅(px単位)
 表示する内容とサイズを指定して、ウィンドウを開きます。
例えばAjaxのレスポンス内容により、内容を動的に変更する場合などに使用すると便利です。
■ ウィンドウ内に他のページを表示する
【書式】
【winObj】.showUrl(【url】,【title】,【width】,【height】,【scrolling】)
  • 【url】: 表示するページのURL
  • 【title】: タイトルバーに表示する文字列
  • 【width】: 横幅(px単位)
  • 【height】: 縦幅(px単位)
  • 【scrolling】: <iframe>のscrollingを'yes'又は'no'で指定します
 表示するページのURLとサイズを指定して、ウィンドウを開きます。
普通は、一般のHtmlページを表示する場合はscrollingを'yes'で、又PDFページを表示する場合は、 無駄なスクロールバーを非表示とするように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ファイルなどを読み込ませた ウィンドウをドラッグ時にマウスの追従が鈍くなります。
  • ご意見・ご感想やバグのご報告などは、 こちらからお願いします。