| 1. はじめに |
Google Mapのおかげで Ajaxが大流行。いろいろな本が出版されています。流行もの好きの私ですから、やらずにはいられない。JavaScriptは今まで、亜流な感じがして手を出さないできましたが、どうも勘違いだったようです。どこかの人がWeb2.0についてのコメントで、数年前から大きくは変わっていない、変わったといえば、JavaScriptを使っても怒られなくなった、というものです。私が知っているJavaScriptは、ホームページを目立たせるためのものという認識でしたが、今やエンタープライズ向けシステムにも取り入れるところまできていると思っています。このページでは、主にAjax的なサンプルプログラムを紹介し、JavaScriptについても合わせて勉強していこうというのが趣旨になります。
2. 準備
3.
4.
| 2. 準備 ↑top |
| 3. 子画面の制御など ↑top |
子画面を起動し、子画面の情報を親画面から取得する例題を作ってみました。
| ４. REST形式をテーブル表示 ↑top |
REST形式で取得したデータをテーブル表示する例題。
| ５. SVGとの共演 ↑top |
SVGファイルをJavascpritで動的に操作することで、ドラッグ、ズームを実現する例題。
【SVGファイル】 kaisen_drag.svg
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="base" onmousedown = "onMouseDown(evt)"
onmouseup = "onMouseUp(evt)"
onmousemove = "onMouseMove(evt)">
<rect x="0" y="0" width="5000" height="5000" fill="white" stroke="black" stroke-width="1" />
<rect id="rect1" onclick="onClick(evt)" x="200" y="100" width="300" height="200" fill="none" stroke="black" stroke-width="4" rx="40" ry="40" />
<rect id="rect1" onclick="onClick(evt)" x="600" y="100" width="300" height="200" fill="none" stroke="black" stroke-width="4" rx="40" ry="40" />
<line id="line1" onclick="onClick(evt)" x1="100" y1="200" x2="200" y2="200" stroke="black" stroke-width="4" />
<line id="line2" onclick="onClick(evt)" x1="500" y1="200" x2="600" y2="200" stroke="red" stroke-width="4" />
<line id="line3" onclick="onClick(evt)" x1="900" y1="200" x2="1000" y2="200" stroke="black" stroke-width="4" />
<image id="image1" onclick="onClick(evt)" x="188" y="180" width="25px" height="40px" xlink:href="images/souti.gif" />
<image id="image2" onclick="onClick(evt)" x="488" y="180" width="25px" height="40px" xlink:href="images/souti.gif" />
<image id="image3" onclick="onClick(evt)" x="588" y="180" width="25px" height="40px" xlink:href="images/souti.gif" />
<image id="image4" onclick="onClick(evt)" x="888" y="180" width="25px" height="40px" xlink:href="images/souti.gif" />
<image id="image5" onclick="onClick(evt)" x="240" y="80" width="25px" height="40px" xlink:href="images/souti.gif" />
<image id="image6" onclick="onClick(evt)" x="338" y="80" width="25px" height="40px" xlink:href="images/souti.gif" />
<image id="image7" onclick="onClick(evt)" x="240" y="280" width="25px" height="40px" xlink:href="images/souti.gif" />
<image id="image8" onclick="onClick(evt)" x="338" y="280" width="25px" height="40px" xlink:href="images/repeater.gif" />
<image id="image9" onclick="onClick(evt)" x="438" y="280" width="25px" height="40px" xlink:href="images/souti.gif" />
</g>
</svg>
【javascript】
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Pragma" content="no-cache">
<META http-equiv="Cache-Control" content="no-cache">
<META http-equiv="Expires" content="Thu, 01 Dec 1994 16:00:00 GMT">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.1.0 for Windows">
<title>回線構成図表示</title>
<script> type="text/javascript">
<!--
function init() {
scale=1;
flg=0;
oldX=0;
oldY=0;
oldTransX=0;
oldTransY=0;
// SVGファイルの<g>タグのID名でオブジェクトを取得する。
base = document.kaisenSVG.getSVGDocument().getElementById("base");
// イベント定義
// onmousedownなどは検出できないためSVGの中で定義。
// 逆にonmousewheelはSVG内で検出できない。
document.kaisenSVG.onmousewheel = onMouseWheel;
if (window.addEventListener) { // FireFox用 ●動作未確認
window.addEventListener('DOMMouseScroll',onMouseWheel,false);
}
}
// マウスホイールによる拡大縮小
function onMouseWheel(event) {
var eventX,eventY; // FireFoxバグ対応
// IE用
if (!event) event = window.event;
// IE/Opera/Safari用
if (event.wheelDelta) {
zm = event.wheelDelta/120;
eventX = event.clientX;
eventY = event.clientY;
// FireFox用
} else if (event.detail) {
zm = - event.detail / 3;
eventX = event.screenX; // FireFoxバグ対応
eventY = event.screenY; // FireFoxバグ対応
}
// 拡大のとき
if (zm > 0) {
scale *= 1.5; // 1.5倍する
// 拡大後のレイヤーの位置を計算
oldTransX = (400 - eventX) / (2 * scale) + oldTransX;
oldTransY = (200 - eventY) / (2 * scale) + oldTransY;
// 縮小のとき
} else {
scale /= 1.5; // 1.5分の1にする
// 拡大後のレイヤーの位置を計算
oldTransX = (eventX - 400) / (3 * scale) + oldTransX;
oldTransY = (eventY - 200) / (3 * scale) + oldTransY;
}
//
base.setAttribute("transform",
"scale(" + scale + ") translate(" + oldTransX + "," + oldTransY + ")" );
}
// 以下の３関数でドラッグを実現
function onMouseDown(event) { // マウスクリックしたとき
// IE用
if (!event) event = window.event;
flg = 1;
oldX = event.clientX;
oldY = event.clientY;
}
function onMouseUp(event) { // マウスを離したとき
if(flg == 1) {
flg = 0;
}
}
function onMouseMove(event) { // マウスを移動したとき
if(flg == 1){ // マウスクリック状態のとき
// IE用
if (!event) event = window.event;
// マウスの移動距離だけ、画像を移動させる。
// SVGではスケールに合わせて座標も拡大縮小されるので補正する。
var transX = oldTransX + (event.clientX - oldX) / scale;
var transY = oldTransY + (event.clientY - oldY) / scale;
oldX = event.clientX; // 次の移動に備えてマウス位置を記録
oldY = event.clientY;
oldTransX = transX; // 画像位置を記録
oldTransY = transY;
base.setAttribute("transform",
"scale(" + scale + ") translate(" + transX + "," + transY + ")");
}
}
function onClick(event) {
var id;
if (!event) event = window.event; // IEのとき
document.getElementById("div3").innerHTML = event.target.id;
// alert(event.target.id); // IEもtargetでいいようだ
}
// -->
</script>
</head>
<body onLoad="init()">
<div id="div1" style="position:absolute; left:400px; top:200px;
width:600px; height:400px; padding: 0px; border:1px #000000 solid">
<embed src="kaisen_drag.svg" width="600" height="400" name="kaisenSVG">
</div>
<div id="div2" style="position:absolute; left:30px; top:200px;
width:200px; height:50px; padding: 0px; border:0px #000000 solid">
クリックされたオブジェクト：</div>
<div id="div3" style="position:absolute; left:220px; top:200px;
width:200px; height:50px; padding: 0px; border:0px #000000 solid">
</div>
</body>
</html>
このページにご意見のある方は、egami@ee.em-net.ne.jp までお願い致します。