Javascript Shortcode Area

■ みせられない完全に私的なメモ

├ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A-Frame Web Page Example</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>

<a-entity geometry="primitive: plane; width: 16; height: 9"
position="0 1 -5"
material="src: url('https://p-bookmark.sakura.ne.jp/mhw/mhw-1742225752.htm');"
scale="1 1 1">
</a-entity>
</a-scene>
</body>
</html>test-vr-site1
├ <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>チェックボックスの反映</title>
<style>
/* レイアウトのスタイル */
#container {
display: flex;
justify-content: space-between;
padding: 20px;
}
#checkbox-container {
width: 30%;
}
#iframe-container {
width: 60%;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<div id="container">

<div id="checkbox-container">
<h3>チェックボックス</h3>
<label>
<input type="checkbox" id="checkbox" onclick="updateIframe()"> チェックを入れる
</label>
</div>


<div id="iframe-container">
<iframe id="iframe" srcdoc="<html><body><h2>ここに反映されます</h2></body></html>" width="100%" height="200px"></iframe>
</div>
</div>

<script>
function updateIframe() {
var iframe = document.getElementById("iframe");
var checkbox = document.getElementById("checkbox");
var message = checkbox.checked ? "チェックボックスが選択されました！" : "チェックボックスが解除されました！";

// iframe内のドキュメントを取得して更新する
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
iframeDocument.body.innerHTML = "<h2>" + message + "</h2>";
}
</script>
</body>
</html>
in-test3
├ <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Text with A-Frame</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
// カスタムコンポーネント：ホバー時に長文を表示
AFRAME.registerComponent('hover-text', {
init: function () {
const el = this.el;
// イベントリスナーの設定
el.addEventListener('mouseenter', function () {
// 長文を表示
document.querySelector('#long-text').setAttribute('visible', true);
});
el.addEventListener('mouseleave', function () {
// 長文を非表示
document.querySelector('#long-text').setAttribute('visible', false);
});
}
});
</script>
</head>
<body style="margin: 0; overflow: hidden;">
<a-scene>

<a-plane color="#ECECEC" width="10" height="10" position="0 0 -5"></a-plane>


<a-camera position="0 1.6 3">

<a-cursor color="#FF0000" position="0 0 -2"></a-cursor>
</a-camera>


<a-text value="Hover over me!" position="0 1 -3" hover-text color="#000"></a-text>


<a-text id="long-text" value="This is a longer piece of text that appears when you hover over the floating text." position="0 -1 -3" visible="false" color="#000"></a-text>
</a-scene>
</body>
</html>
moji
├ <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VR 迷路ゲーム</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe-ar.js"></script>
<style>
body { margin: 0; overflow: hidden; }
</style>
</head>
<body>
<a-scene embedded>

<a-plane position="0 0 -5" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>


<a-box position="0 1 -2" depth="0.1" height="2" width="4" color="#4CC3D9"></a-box>
<a-box position="4 1 -4" depth="0.1" height="2" width="4" color="#4CC3D9"></a-box>
<a-box position="0 1 -6" depth="0.1" height="2" width="4" color="#4CC3D9"></a-box>
<a-box position="2 1 -6" depth="0.1" height="2" width="4" color="#4CC3D9"></a-box>


<a-sphere position="0 0.5 -2" radius="0.3" color="#FF0000" id="start"></a-sphere>


<a-sphere position="2 0.5 -6" radius="0.3" color="#00FF00" id="goal"></a-sphere>


<a-camera position="0 1.6 0" look-controls="pointerLockEnabled: true"></a-camera>
</a-scene>

<script>
// スタートからゴールにカーソルで動く機能
document.querySelector('#start').addEventListener('click', function() {
const camera = document.querySelector('a-camera');
const startPosition = new THREE.Vector3(0, 1.6, 0);
const goalPosition = new THREE.Vector3(2, 1.6, -6);

let moveInterval = setInterval(() => {
const currentPosition = camera.getAttribute('position');
let direction = goalPosition.clone().sub(new THREE.Vector3(currentPosition.x, 0, currentPosition.z)).normalize();

// カメラを目標に向かって動かす
camera.setAttribute('position', {
x: currentPosition.x + direction.x * 0.05,
y: currentPosition.y,
z: currentPosition.z + direction.z * 0.05
});

// ゴールに到達したら止める
if (currentPosition.distanceTo(goalPosition) < 0.5) {
clearInterval(moveInterval);
alert('ゴールに到達しました!');
}
}, 50);
});
</script>
</body>
</html>
test5-meiro-cgpt
├ <!DOCTYPE html>
<html>
<head>
<title>3D Maze in VR (A-Frame)</title>
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-environment-component@1.3.1/dist/aframe-environment-component.min.js"></script>
<script>
// カスタムコンポーネント: キーボード入力での移動
AFRAME.registerComponent('movement-controls', {
schema: {
speed: { type: 'number', default: 0.2 }
},
init: function () {
this.direction = new THREE.Vector3();
this.onKeyDown = this.onKeyDown.bind(this);
this.onKeyUp = this.onKeyUp.bind(this);
window.addEventListener('keydown', this.onKeyDown);
window.addEventListener('keyup', this.onKeyUp);

this.forward = false;
this.backward = false;
this.left = false;
this.right = false;
},
tick: function (time, timeDelta) {
const speed = this.data.speed;
const rotation = this.el.getAttribute('rotation');
const direction = this.direction;

direction.set(0, 0, 0); // 毎回リセット

if (this.forward) direction.z -= 1;
if (this.backward) direction.z += 1;
if (this.left) direction.x -= 1;
if (this.right) direction.x += 1;

direction.normalize(); // ベクトルの長さを1に

if (direction.length() > 0) {
// カメラの向きを考慮して移動
const cameraRotation = this.el.getAttribute('rotation');

// Y軸周りの回転（Yaw）だけを適用するクォータニオンを作成
const yawQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, THREE.MathUtils.degToRad(cameraRotation.y), 0, 'YXZ'));
direction.applyQuaternion(yawQuaternion);

// 移動量を計算
const deltaPosition = direction.multiplyScalar(speed * timeDelta / 1000);

// 現在の位置に加算
const currentPosition = this.el.getAttribute('position');
const newPosition = {
x: currentPosition.x + deltaPosition.x,
y: currentPosition.y, // 高さは変えない
z: currentPosition.z + deltaPosition.z
};
this.el.setAttribute('position', newPosition);
}
},

onKeyDown: function (event) {
switch (event.code) {
case 'ArrowUp':
case 'KeyW':
this.forward = true;
break;
case 'ArrowDown':
case 'KeyS':
this.backward = true;
break;
case 'ArrowLeft':
case 'KeyA':
this.left = true;
break;
case 'ArrowRight':
case 'KeyD':
this.right = true;
break;
}
},
onKeyUp: function (event) {
switch (event.code) {
case 'ArrowUp':
case 'KeyW':
this.forward = false;
break;
case 'ArrowDown':
case 'KeyS':
this.backward = false;
break;
case 'ArrowLeft':
case 'KeyA':
this.left = false;
break;
case 'ArrowRight':
case 'KeyD':
this.right = false;
break;
}
},

remove: function () {
window.removeEventListener('keydown', this.onKeyDown);
window.removeEventListener('keyup', this.onKeyUp);
}
});

// 迷路生成 (簡単な例)
AFRAME.registerComponent('maze-generator', {
init: function () {
const mazeData = [
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 0, 1, 1, 1, 0, 1, 1, 0, 1],
[1, 0, 0, 0, 0, 0, 1, 0, 0, 1],
[1, 0, 1, 0, 1, 1, 1, 0, 1, 1],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[1, 1, 0, 1, 1, 0, 1, 1, 0, 1],
[1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
[1, 0, 1, 0, 0, 0, 1, 1, 0, 1],
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];

const wallSize = 2; // 壁のサイズ
const wallHeight = 3; //壁の高さ

for (let row = 0; row < mazeData.length; row++) {
for (let col = 0; col < mazeData[row].length; col++) {
if (mazeData[row][col] === 1) {
const wall = document.createElement('a-box');
wall.setAttribute('width', wallSize);
wall.setAttribute('height', wallHeight); // 高さを設定
wall.setAttribute('depth', wallSize);
wall.setAttribute('position', {
x: col * wallSize,
y: wallHeight / 2, // 高さを半分にして地面に合わせる
z: row * wallSize
});
wall.setAttribute('material', 'color', 'gray'); // 壁の色
this.el.appendChild(wall);
}
}
}

// 天井 (屋根)
const ceiling = document.createElement('a-plane');
ceiling.setAttribute('width', wallSize * mazeData[0].length);
ceiling.setAttribute('height', wallSize * mazeData.length);
ceiling.setAttribute('position', { x: (wallSize * mazeData[0].length) / 2 - wallSize/2, y: wallHeight, z: (wallSize * mazeData.length) / 2 - wallSize/2 }); //中央に
ceiling.setAttribute('rotation', '-90 0 0');
ceiling.setAttribute('material', 'color', '#87CEEB'); // 空のような色
ceiling.setAttribute('side', 'double'); //両面
this.el.appendChild(ceiling);

// 床
const floor = document.createElement('a-plane');
floor.setAttribute('width', wallSize * mazeData[0].length);
floor.setAttribute('height', wallSize * mazeData.length);
floor.setAttribute('position', {x: (wallSize * mazeData[0].length) / 2 - wallSize/2, y: 0, z: (wallSize * mazeData.length) / 2- wallSize/2 });
floor.setAttribute('rotation', '-90 0 0');
floor.setAttribute('material', 'color', '#228B22'); // 草のような色
floor.setAttribute('side', 'double');
this.el.appendChild(floor);

}
});

</script>
</head>
<body>
<a-scene>
<a-entity id="rig" movement-controls>
<a-entity camera look-controls wasd-controls="enabled:false" position="0 1.6 0"></a-entity>
</a-entity>

<a-entity maze-generator></a-entity>

<a-entity environment="preset: forest; groundColor: #445; grid: cross"></a-entity>

</a-scene>
</body>
</html>test4-meiro
├ <!DOCTYPE html>
<html>
<head>
<title>Babylon.js VR Sample</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
#vrButton {
position: absolute;
bottom: 20px;
left: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas"></canvas>
<button id="vrButton">Enter VR</button>
<script>
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);

const createScene = function () {
const scene = new BABYLON.Scene(engine);

const camera = new BABYLON.ArcRotateCamera("camera", 0, Math.PI / 2, 5, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);

const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

const box = BABYLON.MeshBuilder.CreateBox("box", {size: 1}, scene);

return scene;
};

const scene = createScene();

engine.runRenderLoop(function () {
scene.render();
});

window.addEventListener("resize", function () {
engine.resize();
});

// VRボタンの処理
const vrButton = document.getElementById("vrButton");
vrButton.addEventListener("click", function() {
scene.createDefaultVRExperience({createDeviceOrientationCamera:false});
});
</script>
</body>
</html>test3-bab
├ <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frame Click Rotation (JavaScript)</title>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene id="scene">

<a-box position="0 1 -3" color="#4CC3D9" id="myBox"></a-box>

<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="lightgreen"></a-plane>

<a-sky color="#ECECEC"></a-sky>

<a-camera position="0 1.6 0" look-controls></a-camera>
</a-scene>

<script>
// A-Frameシーンと立方体の取得
const scene = document.getElementById('scene');
const box = document.getElementById('myBox');
let isRotating = false;

// クリックイベントの追加
scene.addEventListener('click', function (event) {
// マウスの座標を正規化
const mouse = new THREE.Vector2();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

// レイキャスターの作成
const raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, scene.camera);

// クリックした位置に立方体があるか確認
const intersects = raycaster.intersectObjects([box.object3D]);

// 立方体がクリックされたら回転アニメーションをトグル
if (intersects.length > 0) {
isRotating = !isRotating;
if (isRotating) {
// 回転アニメーションを追加
box.setAttribute('animation', {
property: 'rotation',
to: '0 360 0',
loop: true,
dur: 1000,
easing: 'linear'
});
} else {
// アニメーションを停止
box.removeAttribute('animation');
}
}
});
</script>
</body>
</html>
test2
├ <html>
<head>
<title></title>
<style type="text/css">
a:link { text-decoration: none; }
b:hover { background-color: #aaaaaa; }
b { text-decoration: none; position: absolute; }
</style>
</head>
<body>
<script type="text/javascript">
var di = 0.8, a = 0, b = 0, aa = 0, bb = 0, aaa = 0, bbb = 0, aaa2 = 0, bbb2 = 0, c = 0, e = 0.05;
var isMouseDown = false; // マウスが押されているかどうかを管理するフラグ
var isTouching = false; // タッチがされているかどうかを管理するフラグ

for (i = 0; i < 13; i++) {
document.write('<a href="http://www.google.co.jp"><b id="l' + i + '">' + i + '</b></a>');
}

document.write('<a href="http://www.google.co.jp"><b id="l13"></b></a>');

for (i = 14; i < 27; i++) {
document.write('<a href="http://www.google.co.jp"><b id="l' + i + '">' + i + '</b></a>');
}

function f() {
i = 0;
for (x = -di; x <= di; x += di) {
for (y = -di; y <= di; y += di) {
for (z = -di; z <= di; z += di) {
u = x;
v = y;
w = z;

v2 = v * Math.cos(b) - w * Math.sin(b);
w = v * Math.sin(b) + w * Math.cos(b);
v = v2;
u2 = w * Math.cos(a) - u * Math.sin(a);
w = w * Math.sin(a) + u * Math.cos(a);
u = u2;
c = Math.round((w + 2) * 70);
if (c < 0) { c = 0; }
if (c > 255) { c = 255; }
s = document.getElementById('l' + i).style;
s.left = 300 + u * (w + 2) * 50;
s.top = 250 + v * (w + 2) * 50;
s.color = 'rgb(' + (255 - c) + ', ' + (255 - c) + ',' + (255 - c) + ')';
s.fontSize = (w + 2) * 10 + 'px';
s.zIndex = Math.round((w + 2) * 10);
i++;
}
}
}
}
setInterval('f()', 30);

// マウスがクリックされた状態で動くように
document.body.addEventListener('mousedown', function(event) {
isMouseDown = true; // マウスボタンが押された状態
});

// マウスのクリックが離された状態にする
document.body.addEventListener('mouseup', function(event) {
isMouseDown = false; // マウスボタンが離された状態
});

// タッチ開始
document.body.addEventListener('touchstart', function(event) {
isTouching = true; // タッチが開始された状態
});

// タッチ終了
document.body.addEventListener('touchend', function(event) {
isTouching = false; // タッチが終了した状態
});

// マウスイベント (クリック中のみ動かす)
document.body.addEventListener('mousemove', function(event) {
if (isMouseDown) { // マウスボタンが押されている時だけ動かす
aaa = event.clientX / 999;
a = a + ((aaa - aaa2) < 0) * e - ((aaa2 - aaa) < 0) * e;
aaa2 = aaa;

bbb = event.clientY / 999;
b = b + ((bbb - bbb2) < 0) * e - ((bbb2 - bbb) < 0) * e;
bbb2 = bbb;
}
});

// タッチイベント (タッチ中のみ動かす)
document.body.addEventListener('touchmove', function(event) {
if (isTouching) { // タッチがされている時だけ動かす
event.preventDefault(); // デフォルトの動作を無効にして、スクロールを防ぐ

var touch = event.touches[0];
var touchX = touch.clientX;
var touchY = touch.clientY;

// タッチでの動きに基づいてaとbを更新
aaa = touchX / 999;
a = a + ((aaa - aaa2) < 0) * e - ((aaa2 - aaa) < 0) * e;
aaa2 = aaa;

bbb = touchY / 999;
b = b + ((bbb - bbb2) < 0) * e - ((bbb2 - bbb) < 0) * e;
bbb2 = bbb;
}
});
</script>

</body>
</html>
3dhtmlーーマウスダウンとタッチに対応
├ <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表示・非表示ボタンsample</title>
<style>
.section {margin: 20px 0;padding: 10px;border: 0px solid #ccc;display: none;}
</style>
</head>
<body>
<button onclick="showAllSections()">表示</button><button onclick="hideAllSections()">非表示</button>

<div class="section">
ここはセクション 1 です。内容が表示されているときはこのセクションを確認できます。
</div>

<div class="section">
ここはセクション 2 です。内容が表示されているときはこのセクションを確認できます。
</div>

<div class="section">
ここはセクション 3 です。内容が表示されているときはこのセクションを確認できます。
</div>

<div class="section">
ここはセクション 4 です。内容が表示されているときはこのセクションを確認できます。
</div>

<script>
// すべてのセクションを表示
function showAllSections() {
var sections = document.querySelectorAll('.section'); // .sectionクラスのすべての要素を取得
sections.forEach(function(section) {section.style.display = "block";});
}

// すべてのセクションを非表示
function hideAllSections() {
var sections = document.querySelectorAll('.section'); // .sectionクラスのすべての要素を取得
sections.forEach(function(section) {section.style.display = "none";});
}
</script>

</body>
</html>
表示非表示
├ <body>
#MRCパラメータのセット140905 161031積層順位を追加、設定値1μマイナス、層間断線追加
#
#参考：SETMRC.tcl mrcctl.tcl MRCSET.tcl
#

###############################################################データを読んでidataリストへ登録し、 $dataaにヒットしたときの値を返す部品(修正)
proc idata { dataa } {
set idataall "";set fid [open iraisyo-data.txt];while { [gets $fid line] >= 0} {lappend idataall $line;};close $fid ;
foreach dddd $idataall {set idatas [split $dddd ":"];
if {[lindex $idatas 0] == $dataa} {set idatano [lindex $idatas 1];return $idatano;};
};};
###############################################################
####以下の部分はファイルがあれば！の部分
set bbb1 [query pfdfile];set bbb2 "";set bbb4 "";set bbb3 "/";set flag 0;set pall [split $bbb1 "\\"];
foreach ddd $pall {if {$flag == 0} {set bbb2 "$bbb2$ddd$bbb3";};if {[string first "PC-" $ddd ] > -1} {set flag 1;};};#PC-直下のフォルダを抽出
for { set i 1 } { $i <= [expr [llength $pall] -1] } { incr i } {set ddd [lindex $pall [expr $i -1]];set bbb4 "$bbb4$ddd$bbb3";};#開いてるファイルのあるフォルダを抽出
set iraira "iraisyo-data.txt";
if {[file exists "$bbb2$iraira"] == 0} {magbox "iraisyo-data.txt が見つからない";return;};
cd $bbb2;set ia1 [idata "補正Eg"]; cd $bbb4;

if {$ia1 == "有り"} {
####################################################################ファイルの有無で前処理をやったか確認
set bbb1 [query pfdfile];echo $bbb1;
set bbb2 "";set pall [split $bbb1 "\\"];set ffn "";
foreach ddd $pall {if {[string first ".pfd" $ddd ] > -1} {set ffn $ddd;}; };
set ffn [string range $ffn 0 [expr [string length $ffn] - 5 ] ];
set ffs "--グリッド・クリーンアップ前";
set ffn "$ffn$ffs";
set aaa [glob -nocomplain "*.pfd"];
if {[string first $ffn $aaa] == -1} {msgbox "グリッド・クリーンアップ前のpfdファイルが有りません。処理を中止します。";
echo "グリッド・クリーンアップ前のバックアップが無いので、未実行と判断";return;} else {
echo "グリッド・クリーンアップ前のバックアップファイルを確認。";
};
####################################################################
};

###入力２．５ ##2021.03.10仕様変更
combobox caption {IVHドリル－外形クリアランス値};
combobox items {{板厚1.6t以下：0.5} {1.6t超：1.0}};
combobox active {板厚1.6t以下：0.5};
set enmen2 [combobox open];
if {$enmen2 == "板厚1.6t以下：0.5"} {set enmen 0.5;};
if {$enmen2 == "1.6t超：1.0"} {set enmen 1.0;};
if { $enmen2 == "--canceled" } {msgbox "何も入力されませんでした。終了します。";return;};

set nnflag 0;
#積層順位の設定
#レイヤー構成を上から調べながら、構築する命令を変数GOOに文字列として溜め、最後にevalで実行する方法を取っています。
set nco "";set lao "";
if {[query editst] !="CAM" || [query topst] !="CAM"} {msgbox "編集ストラクチャとTOPストラクチャがCAMではありません。終了します。";return;}
set GOO "deflay untype -pwb;";
set gaisuu2 "(";set lmax 0;set pmax 0;
foreach gaisuu [query layernames] {
if {[string range $gaisuu 0 1] != "LA" && [string range $gaisuu 0 0] == "L" && [string first $gaisuu2 $gaisuu ] == -1} {
if {[query existlay $gaisuu:1] == 1} {
if {[query uselaystruct $gaisuu:1] != "WAKU" } {
set pmax [expr $pmax + 1];set GOO "$GOO deflay type $gaisuu pattern $pmax;";lappend pto $gaisuu;
#set lll [string range $gaisuu 1 3];if { $lll > $lmax && [query uselaystruct $gaisuu:1] == "CAM"} { set lmax $lll;}
continue;
};};};
if {$gaisuu == "Mark"} {continue;};

#################外形を追加 2021.03.10
if {$gaisuu == "MRC-G"} {set GOO "$GOO deflay type MRC-G outline;";continue;};
if {$gaisuu == "GGG"} {
if {[query existlay MRC-G:1] != "1"} {set GOO "$GOO deflay type GGG outline;";continue;} else {set GOO "$GOO deflay untype GGG;";continue;};
};
if {$gaisuu == "GG"} {
if {[query existlay MRC-G:1] != "1" && [query existlay GGG:1] != "1"} {set GOO "$GOO deflay type GG outline;";continue;} else {set GOO "$GOO deflay untype GG;";continue;};
};
if {$gaisuu == "G"} {
if {[query existlay MRC-G:1] != "1" && [query existlay GG:1] != "1" && [query existlay GGG:1] != "1"} {set GOO "$GOO deflay type G outline;";continue;} else {set GOO "$GOO deflay untype G;";continue;};
};
#################

#if { [string range $gaisuu 0 1] == "NC" && [regexp {[0-9]+} [string range $gaisuu 2 2] ] == 1} {lappend nco $gaisuu;continue;}
if { [string range $gaisuu 0 1] == "LA" && [regexp {[0-9]+} [string range $gaisuu 2 2] ] == 1} {lappend lao $gaisuu;continue;}
set GOO "$GOO deflay untype $gaisuu;";
echo $gaisuu;
};
set LL "L";set NN "N";set PP "P";
if {$nco != ""} {
foreach ncp $nco {set ncppp [split $ncp "_"];set ncp2 [lindex $ncppp 0];
switch -- [string length $ncp2] {
4 {set nc1 [string range $ncp 2 2];set nc2 [string range $ncp 3 3];}
5 {set nc1 [string range $ncp 2 2];set nc2 [string range $ncp 3 4];}
6 {set nc1 [string range $ncp 2 3];set nc2 [string range $ncp 4 5];}
default {
eval "laystack pattern $pmax;laystack drill 6;laystack sresist on;laystack silk on;laystack outline on;";
eval $GOO;echo "積層順位を設定しました。NCレイヤーの数値が判別不能であるため、NCは未設定です。";
return;}
}
set p1p [lsearch $pto $LL$nc1$PP];set p1n [lsearch $pto $LL$nc1$NN];set p1 [lsearch $pto $LL$nc1];
if { $p1 != -1 && $p1n != -1 && $p1n < $p1 } {set p1 $p1n;};#無印とNがあった場合、小さい方をP1に設定
if { $p1 != -1 && $p1p != -1 && $p1p < $p1 } {set p1 $p1p;};#無印とPがあった場合、小さい方をP1に設定
if { $p1 == -1 && $p1n != -1} {set p1 $p1n;};#無印がなくてNがあった場合、P1に設定
if { $p1 == -1 && $p1p != -1} {set p1 $p1p;};#無印がなくてPがあった場合、P1に設定
set p2p [lsearch $pto $LL$nc2$PP];set p2n [lsearch $pto $LL$nc2$NN];set p2 [lsearch $pto $LL$nc2];
if { $p2 != -1 && $p2n != -1 && $p2n > $p2 } {set p2 $p2n;};#無印とNがあった場合、大きい方をP2に設定
if { $p2 != -1 && $p2p != -1 && $p2p > $p2 } {set p2 $p2p;};#無印とPがあった場合、大きい方をP2に設定
if { $p2 == -1 && $p2n != -1} {set p2 $p2n;};#無印がなくてNがあった場合、P2に設定
if { $p2 == -1 && $p2p != -1} {set p2 $p2p;};#無印がなくてPがあった場合、P2に設定
set p1 [expr $p1 + 1];set p2 [expr $p2 + 1];
set GOO "$GOO deflay type $ncp ivh drill $p1 $p2;";
};
} else {msgbox "nc数値レイヤーが見つかりませんでした。中止します。";return;};
if {$lao != ""} {
foreach lap $lao {
switch -- [string length $lap] {
4 {set la1 [string range $lap 2 2];set la2 [string range $lap 3 3];}
5 {set la1 [string range $lap 2 2];set la2 [string range $lap 3 4];}
6 {set la1 [string range $lap 2 3];set la2 [string range $lap 4 5];}
default {
eval "laystack pattern $pmax;laystack drill 6;laystack sresist on;laystack silk on;laystack outline on;";
eval $GOO;echo "積層順位を設定しました。LAレイヤーの数値が判別不能であるため、LAは未設定です。";
return;}
}
set p1p [lsearch $pto $LL$la1$PP];set p1n [lsearch $pto $LL$la1$NN];set p1 [lsearch $pto $LL$la1];
if { $p1 != -1 && $p1n != -1 && $p1n < $p1 } {set p1 $p1n;};
if { $p1 != -1 && $p1p != -1 && $p1p < $p1 } {set p1 $p1p;};
if { $p1 == -1 && $p1n != -1} {set p1 $p1n;};
if { $p1 == -1 && $p1p != -1} {set p1 $p1p;};
set p2p [lsearch $pto $LL$la2$PP];set p2n [lsearch $pto $LL$la2$NN];set p2 [lsearch $pto $LL$la2];
if { $p2 != -1 && $p2n != -1 && $p2n > $p2 } {set p2 $p2n;};
if { $p2 != -1 && $p2p != -1 && $p2p > $p2 } {set p2 $p2p;};
if { $p2 == -1 && $p2n != -1} {set p2 $p2n;};
if { $p2 == -1 && $p2p != -1} {set p2 $p2p;};
set p1 [expr $p1 + 1];set p2 [expr $p2 + 1];
set GOO "$GOO deflay type $lap ivh laser $p1 $p2;";
};
};
eval "laystack pattern $pmax;laystack drill [expr 4 + [llength $nco]];laystack sresist on;laystack silk on;laystack outline on;";
eval $GOO;echo "IVH用の積層順位を設定しました。";eval $GOO;eval $GOO;

#-----------------------------------------------------------------------------
# 説明
# MRC のパラメータ設定/実行を実施する。
#
# 使用方法
# mrc exec MRC を実行
# mrc enable 項目 ... 項目をチェックする
# mrc disable 項目 ... 項目をチェックしない
# mrc pat パラメータパターンチェック用のパラメータを設定
# mrc drill パラメータドリルチェック用のパラメータを設定
# mrc vccgnd パラメータ電源/グランドチェック用のパラメータを設定
# mrc sresist パラメータソルダレジストチェック用のパラメータを設定
# mrc silk パラメータシルクチェック用のパラメータを設定
#
#-----------------------------------------------------------------------------

#MRC全体のチェックをドリルのみにする

mrc disable pat
mrc enable drill
mrc disable vccgnd
mrc disable sresist
mrc disable silk

#ドリルの重複、通過するパッドの存在、外形とのチェック、ドローのアニュラリングのみにする

#単層クリアランス
mrc drill disable ccheck
#ドリルの重複
mrc drill enable drldup
#層間断線
mrc drill enable bdown
#通過するパッドの存在
mrc drill enable padcmp
#アニュラリング
mrc drill disable annu
#ドリルの過不足
mrc drill disable unmatch
#外形とのチェック
mrc drill enable ocheck
#ドローのアニュラリング
mrc drill enable annudraw

#-----------------------------------------------------------------------------
# 説明
# ドリルチェック用のパラメータ設定を実施する(内部コマンド)
#
# 使用方法
# MrcDrill コマンドパラメータ
#
# 指示
# enable 項目 ... 項目のチェックする
# disable 項目 ... 項目のチェックしない
# ccheck コマンド単層クリアランスチェックのパラメータ設定
# drldup コマンドドリル重複チェックのパラメータ設定
# bdown コマンド層間断線チェックのパラメータ設定
# padcmp コマンド通過するパッドの存在チェックのパラメータ設定
# annu コマンドアニュアリングチェックのパラメータ設定
# unmatch コマンドドリル過不足チェックのパラメータ設定
# ocheck コマンド外形とのクリアランスチェックのパラメータ設定
# // ANNUAL-RING
# annudrawコマンドドローデータとのアニュアリングチェックのパラメータ設定
#
#-----------------------------------------------------------------------------

# drldup コマンドドリル重複チェックのパラメータ設定

mrc drill drldup range 0.2; #MRCSETによる影響を受ける
mrc drill drldup chrone off;
mrc drill drldup omitap { };
mrc drill drldup chktype 0;

#▽▽▽▽▽▽▽▽
#▽　層間断線　▽
#▽▽▽▽▽▽▽▽
#
#ドリル種別によるクリアランス値
#対ライン（貫通非貫通 IVHドリル IVHレーザー）
mrc drill bdown d2l 0.001 0.001 0.224 0.001
#対パット（貫通非貫通 IVHドリル IVHレーザー）
mrc drill bdown d2p 0.001 0.001 0.224 0.001
#対レジスト（貫通非貫通 IVHドリル IVHレーザー）
mrc drill bdown d2r 0.001 0.001 0.001 0.001
#対シルク（貫通非貫通 IVHドリル IVHレーザー）
mrc drill bdown d2s 0.001 0.001 0.001 0.001
#条件設定
#NTHの接続は全てエラーとする
mrc drill bdown nthru on
#パットのない接続は全てエラーとする
mrc drill bdown onpad on

# padcmp コマンド通過するパッドの存在チェックのパラメータ設定

mrc drill padcmp range 0.2; #MRCSETによる影響を受ける
mrc drill padcmp detail off; #MRCSETによる影響を受ける
mrc drill padcmp mode off; #MRCSETによる影響を受ける

mrc drill padcmp sufpad on; #MRCSETによる影響を受ける
mrc drill padcmp sufdrl off; #MRCSETによる影響を受ける

mrc drill padcmp inpad on; #MRCSETによる影響を受ける
mrc drill padcmp indrl off; #MRCSETによる影響を受ける

mrc drill padcmp vgpad on; #MRCSETによる影響を受ける
mrc drill padcmp vgdrl on; #MRCSETによる影響を受ける

mrc drill padcmp omitap { };

#########ドリル　外形とのチェック ##2021.03.10仕様変更

mrc drill enable ocheck;

#検査項目

#ライン対ライン
mrc drill ocheck l2l on;
#ライン対パッド
mrc drill ocheck p2l on;
#パッド対パッド
mrc drill ocheck p2p on;

#検査タイプ

#交差も接続とみなす
mrc drill ocheck cross on;
#外形線幅をゼロとみなす
mrc drill ocheck zero on;

#クリアランス値
mrc drill ocheck size $enmen $enmen $enmen;

# annudrawコマンドドローデータとのアニュアリングチェックのパラメータ設定

mrc drill annudraw border 0 0.0 0.0 0.0; #MRCSETによる影響を受ける
mrc drill annudraw sfpattern 0.139 0.1 0.139 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1; #MRCSETによる影響を受ける
mrc drill annudraw inpattern 0.139 0.1 0.139 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1; #MRCSETによる影響を受ける
mrc drill annudraw vgthermal 0.139 0.1 0.139 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1; #MRCSETによる影響を受ける
mrc drill annudraw vgclearance 0.279 0.1 0.279 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1; #MRCSETによる影響を受ける
mrc drill annudraw resist 0.099 0.1 0.099 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1;

mrc drill annudraw width 25.0; #MRCSETによる影響を受ける
mrc drill annudraw height 25.0; #MRCSETによる影響を受ける
mrc drill annudraw therm {in }; #MRCSETによる影響を受ける
mrc drill annudraw noobject off;
mrc drill annudraw mini_via 0.0;

#-----------------------------------------------------------------------------

##########################################################################################################################################################

#バックアップをその場で作製する。名前は「MRC前--IVH--作製時間.pfd」　となる。
set FFname "MRC前--IVH--";
set bname "$FFname[clock format [clock seconds] -format --%H%M%S]";
set bbb1 [query pfdfile];
saveas $bbb1;
file copy $bbb1 $bname.pfd;
echo "バックアップ作成　$bname.pfd";

######################################################################################################################################################
test1
├ ｃｃ
├ link
├ <canvas style=width:99% id=c onclick=setInterval('for(c.width=w=99,++t,i=6e3;i--;c.getContext`2d`.fillRect(i%w,i/w|0,1-d*Z/w+s,1))for(a=i%w/50-1,s=b=1-i/4e3,X=t,Y=Z=d=1;++Z<w&(Y<6-(32<Z&27<X%w&&X/9^Z/8)*8%46||d|(s=(X&Y&Z)%3/Z,a=b=1,d=Z/w));Y-=b)X+=a',t=9)>mathi-
├ <body id ="gg" bgcolor=black text=white onKeyDown="K=event.keyCode-37"><tt id=F><script>
function R(H){while(D.all["F"+(S=40+Math.ceil(ccc(i)*319))].innerHTML!=C);I(S,H)}
function I(T,H){D.all["F"+T].innerHTML=H}
function ccc(cc){j=j+1;a=Math.sin((cc+0.1+j/100)/24);a=""+a;b=a.slice(-8,-2);a=eval(b)/1000000;return a}
function HT(event) {sX=tX;tX =event.touches[0].clientX;K=0;if(tX>sX){K=2;};I(420,E);}

function Y(){if(K+1){M=[-1,0,1,0][K];}Z=P;P=P+M;
X=D.all["F"+P].innerHTML;P2=P+20;XX=D.all["F"+P2].innerHTML;
if(XX==C && M==0){P=P+20;}
if(X==O || XX==O){alert("GAME OVER SCORE: "+SC*10);return}
if(X==T || XX==T){KY=1;Q="<font color=\"Purple\">●</font>";P=P+20;}
if(X==U || XX==U){if(KY==1){SC++;YY();}else{P=P-20;}}
if(X==W){P=P-M;}
if(X==N || XX==N){P=P-(20*6);while(P<0){P=P+20;}
while(C!=D.all["F"+P].innerHTML){P=P-20;} }
I(Z,C);I(P,Q);K=-1;M=0;ID=setTimeout(Y,100); }

function YY(){D=document;M=0;P=370;S="";K=-1;P2=0;C="　";
U="<font color=\"Lime\">門</font>";Q="<font color=\"blue\">●</font>";
W="<font color=\"Maroon\">■</font>";N="<font color=\"aqua\">＝</font>";
O="<font color=\"white\">＊</font>";T="<font color=\"yellow\">ー</font>";
E="<INPUT TYPE=\"button\" VALUE=\"☆\" ONCLICK=\"clearTimeout(ID);YYY()\">";
for(i=0;i<421;i++)
S+=(i%20?"":"<br>")+"<span id=F"+i+">"+((i+1)%20>1&&i<379?C:W)+"</span>";I("",S);
for(i=0;i<51;i++)I(20+Math.ceil(ccc(i)*339),W);for(i=0;i<11;i++)R(N);I(419,E);
for(i=0;i<(2+SC);i++)R(O);for(i=0;i<2;i++)I(Math.ceil(360+ccc(i)*18),N);R(U);R(T);KY=0;
gg.addEventListener("touchmove", HT); }

function YYY(){j=0;SC=0;YY();Y();}
YYY();</script>asdfータッチtest2
├ <body id ="gg" bgcolor=black text=white onKeyDown="K=event.keyCode-37"><tt id=F><script>
function R(H){while(D.all["F"+(S=40+Math.ceil(ccc(i)*319))].innerHTML!=C);I(S,H)}
function I(T,H){D.all["F"+T].innerHTML=H}
function ccc(cc){j=j+1;a=Math.sin((cc+0.1+j/100)/24);a=""+a;b=a.slice(-8,-2);a=eval(b)/1000000;return a}
function HT(event) {tX =event.touches[0].clientX;K=0;if(tX>180){K=2;}}

function Y(){if(K+1){M=[-1,0,1,0][K];}Z=P;P=P+M;
X=D.all["F"+P].innerHTML;P2=P+20;XX=D.all["F"+P2].innerHTML;
if(XX==C && M==0){P=P+20;}
if(X==O || XX==O){alert("GAME OVER SCORE: "+SC*10);return}
if(X==T || XX==T){KY=1;Q="<font color=\"Purple\">●</font>";P=P+20;}
if(X==U || XX==U){if(KY==1){SC++;YY();}else{P=P-20;}}
if(X==W){P=P-M;}
if(X==N || XX==N){P=P-(20*6);while(P<0){P=P+20;}
while(C!=D.all["F"+P].innerHTML){P=P-20;} }
I(Z,C);I(P,Q);K=-1;M=0;ID=setTimeout(Y,100); }

function YY(){D=document;M=0;P=370;S="";K=-1;P2=0;C="　";
U="<font color=\"Lime\">門</font>";Q="<font color=\"blue\">●</font>";
W="<font color=\"Maroon\">■</font>";N="<font color=\"aqua\">＝</font>";
O="<font color=\"white\">＊</font>";T="<font color=\"yellow\">ー</font>";
E="<INPUT TYPE=\"button\" VALUE=\"☆\" ONCLICK=\"clearTimeout(ID);YYY()\">";
for(i=0;i<400;i++)
S+=(i%20?"":"<br>")+"<span id=F"+i+">"+((i+1)%20>1&&i<379?C:W)+"</span>";I("",S);
for(i=0;i<51;i++)I(20+Math.ceil(ccc(i)*339),W);for(i=0;i<11;i++)R(N);I(399,E);
for(i=0;i<(2+SC);i++)R(O);for(i=0;i<2;i++)I(Math.ceil(360+ccc(i)*18),N);R(U);R(T);KY=0;
gg.addEventListener("touchmove", HT); }

function YYY(){j=0;SC=0;YY();Y();}
YYY();</script>asdfータッチtest1
├ <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D Ball</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>

<script>
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

const vertexShaderSource = `
attribute vec3 a_position;
void main() {
gl_Position = vec4(a_position, 1.0);
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
0.0, 0.5, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>
ｄｄｄｄ
├ <!DOCTYPE html>
<html>
<head>
<title>Beautiful Lines</title>
<style>
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="200"></canvas>

<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

const lineCount = 10; //
const lineWidth = 4; // ラインの幅
const lineSpacing = 20; // ライン間のスペース

const canvasWidth = canvas.width;
const canvasHeight = canvas.height;

// ラインの描画
function drawLines() {
context.clearRect(0, 0, canvasWidth, canvasHeight);
context.strokeStyle = "blue";
context.lineWidth = lineWidth;

for (let i = 0; i < lineCount; i++) {
const y = (i * lineSpacing) + (lineSpacing / 2);
context.beginPath();
context.moveTo(0, y);
context.lineTo(canvasWidth, y);
context.stroke();
}
}

// ページ読み込み時にラインを描画
drawLines();
</script>
</body>
</html>

t-test3
├ <!DOCTYPE html><html><head><title>t-test2</title>
<style>canvas {border: 1px solid black;}</style></head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div><p id="dis1"></p><p id="dis2"></p></div>
<script>

// 要素取得
const canvas = document.getElementById("gameCanvas");
const context = canvas.getContext("2d");

// 初期位置と移動速度
let snakeX = 1;let snakeY = 1;let snakeSpeedX = 1;let snakeSpeedY = 0;

// ゲームループ
function gameLoop() {
snakeX += snakeSpeedX;snakeY += snakeSpeedY;
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "green";context.fillRect(snakeX, snakeY, 10, 10);
document.getElementById("dis1").textContent = `X: ${snakeX} Y: ${snakeY}`;
requestAnimationFrame(gameLoop);// ゲームループを再帰的に呼び出し
}

function handleTouch(event) {// タッチ位置を取得
const touchX = event.touches[0].clientX - canvas.offsetLeft;
const touchY = event.touches[0].clientY - canvas.offsetTop;
xx = touchX - snakeX;yy = touchY - snakeY;
document.getElementById("dis2").textContent = `X: ${touchX} Y: ${touchY} X: ${xx} Y: ${yy}`;

// タッチ位置とヘビの位置を比較して、移動方向を設定
if (xx < 0 && Math.abs(xx) > Math.abs(yy)) {snakeSpeedX = -1;snakeSpeedY = 0;
} else if (xx > 0 && Math.abs(xx) > Math.abs(yy)) {snakeSpeedX = 1;snakeSpeedY = 0;
} else if (yy < 0 && Math.abs(xx) < Math.abs(yy)) {snakeSpeedX = 0;snakeSpeedY = -1;
} else if (yy > 0 && Math.abs(xx) < Math.abs(yy)) {snakeSpeedX = 0;snakeSpeedY = 1;
}
}

// タッチイベントを監視
canvas.addEventListener("touchstart", handleTouch);

// ゲームループを開始
gameLoop();

</script>
</body></html>t_test2
├ <div id="container1">
<p>touch area</p>

<div id="touch-area1">
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆

</div>
<p>display area</p>

<div id="display-area1">
pppppppppppppppppppppppppppppppppppppppp

</div>
</div>
<script>
const displayArea1 = document.getElementById("display-area1")
const touchArea1 = document.getElementById("touch-area1")

// touchstartイベント
touchArea1.addEventListener("touchstart", () => {
displayArea1.innerHTML = getTimeStamp() + " touchstart"
})

// touchendイベント
touchArea1.addEventListener("touchend", () => {
displayArea1.innerHTML = getTimeStamp() + " touchend"
})

// touchmoveイベント
touchArea1.addEventListener("touchmove", () => {
event.preventDefault(); // 画面スクロールを防止
displayArea1.innerHTML = getTimeStamp() + " touchmove"
})

// touchcancelイベント
touchArea1.addEventListener("touchcancel", () => {
displayArea1.innerHTML = getTimeStamp() + " touchcacel"
})

// タイムスタンプ取得
function getTimeStamp(){
const date = new Date()
return ('0' + date.getHours()).slice(-2)
+ ':' + ('0' + date.getMinutes()).slice(-2)
+ ':' + ('0' + date.getSeconds()).slice(-2)
+ ':' + ('0' + date.getMilliseconds()).slice(-3)
}
</script>touch-test1
├ Javascript
├ キー入力のテストkey-test
│├ <body onKeyDown="K=event.keyCode-37">
<style type="text/css"></style><tt id=F>
<script>

var key=new Object();
var keyConst=new Array();
keyConst[38]="up";
keyConst[40]="down";
keyConst[37]="left";
keyConst[39]="right";
keyConst[32]="space";
keyConst[17]="ctrl";
keyConst[16]="shift";
keyConst[18]="alt";

function Keyboard_Init()
{
var i;
for(i in keyConst)
{
key[i]=false;
}
document.onkeydown=function(event){Keyboard_KeyDown(event);return false;};
document.onkeyup=function(event){Keyboard_KeyUp(event);return false;}
}

function Keyboard_KeyDown(event)
{
var i;
var kc=Keyboard_KeyCode(event);
if (kc in keyConst)
{
i=keyConst[kc];
key[i]=true;
}
}

function Keyboard_KeyUp(event)
{
var i;
var kc=Keyboard_KeyCode(event);
if (kc in keyConst)
{
i=keyConst[kc];
key[i]=false;
}
}

function Keyboard_KeyCode(e)
{
if(document.all)
return e.keyCode;
else if(document.getElementById)
return (e.keyCode)? e.keyCode: e.charCode;
else if(document.layers)
return e.which;
}

Keyboard_Init();
K=0;
function Y(){
document.body.innerHTML=key.up;
setTimeout(Y,100)
}
Y();

</script>
key-test1
│├ <body onKeyDown="K=event.keyCode-37">
<style type="text/css"></style><tt id=F>
<script>

var key=new Object();
var keyConst=new Array();
keyConst[38]="up";
keyConst[40]="down";
keyConst[37]="left";
keyConst[39]="right";
keyConst[32]="space";
keyConst[17]="ctrl";
keyConst[16]="shift";
keyConst[18]="alt";

function Keyboard_Init(){var i;for(i in keyConst){key[i]=false;}

document.onkeydown=function(event){
var i;var kc=KK(event);if (kc in keyConst){i=keyConst[kc];key[i]=true;}
return false;};
document.onkeyup=function(event){
var i;var kc=KK(event);if (kc in keyConst){i=keyConst[kc];key[i]=false;}
return false;}
}

function KK(e){if(document.all) return e.keyCode; else if(document.getElementById) return (e.keyCode)? e.keyCode: e.charCode; else if(document.layers) return e.which;}

Keyboard_Init();
K=0;
function Y(){
document.body.innerHTML=key.up;
setTimeout(Y,100)
}
Y();

</script> key-test2
│├ <body>
<style type="text/css"></style><tt id=F>
<script>

var key=new Object();var CC=new Array();
CC[38]="up";CC[40]="down";CC[37]="left";CC[39]="right";CC[32]="space";CC[17]="ctrl";CC[16]="shift";CC[18]="alt";

function Kinit(){var i;for(i in CC){key[i]=false;}
document.onkeydown=function(event){var i;var kc=KK(event);if (kc in CC){i=CC[kc];key[i]=true;}return false;};
document.onkeyup=function(event){var i;var kc=KK(event);if (kc in CC){i=CC[kc];key[i]=false;}return false;}}

function KK(e){if(document.all) return e.keyCode; else if(document.getElementById) return (e.keyCode)? e.keyCode: e.charCode;
else if(document.layers) return e.which;}

Kinit();
function Y(){
document.body.innerHTML=key.up;
setTimeout(Y,80)
}
Y();

</script> key-test3
│├ <body>
<style type="text/css"></style><tt id=F>
<script>

var key=new Object();var CC=new Array();
CC[38]="u";CC[40]="d";CC[37]="l";CC[39]="r";CC[32]="sp";CC[17]="c";CC[16]="sh";CC[18]="alt";

function Kinit(){var i;for(i in CC){key[i]=0;}
document.onkeydown=function(e){var kc=KE(e);if (kc in CC){key[CC[kc]]=1;}return 0;};
document.onkeyup=function(e){var kc=KE(e);if (kc in CC){key[CC[kc]]=0;}return 0;}}

function KE(e){if(document.all) return e.keyCode; else if(document.getElementById) return (e.keyCode)? e.keyCode: e.charCode;
else if(document.layers) return e.which;}

Kinit();
function Y(){
document.body.innerHTML=key.u;
setTimeout(Y,80)
}
Y();

</script> key-test4
│├ <body>
<style type="text/css"></style><tt id=F>
<script>

var key=new Object();var CC=new Array();
CC[38]="u";CC[40]="d";CC[37]="l";CC[39]="r";CC[32]="sp";CC[17]="c";CC[16]="sh";CC[18]="alt";

function Kinit(){var i;for(i in CC){key[i]=0;}
document.onkeydown=function(e){var kc=KE(e);if (kc in CC){key[CC[kc]]=1;}};
document.onkeyup=function(e){var kc=KE(e);if (kc in CC){key[CC[kc]]=0;}}}

function KE(e){if(document.all) return e.keyCode; else if(document.getElementById) return (e.keyCode)? e.keyCode: e.charCode;
else if(document.layers) return e.which;}

Kinit();
function Y(){
document.body.innerHTML=key.u;
setTimeout(Y,80)
}
Y();

</script> key-test5
│└ <body>
<style type="text/css"></style><tt id=F>
<script>

var key=new Object();var CC=new Array();CC[38]="u";CC[40]="d";CC[37]="l";CC[39]="r";CC[32]="sp";CC[17]="c";CC[16]="sh";CC[18]="alt";
var i;for(i in CC){key[i]=0;};document.onkeydown=function(e){var kc=KE(e);if (kc in CC){key[CC[kc]]=1;}};document.onkeyup=function(e){var kc=KE(e);if (kc in CC){key[CC[kc]]=0;}};
function KE(e){if(document.all) return e.keyCode; else if(document.getElementById) return (e.keyCode)? e.keyCode: e.charCode;}

function Y(){
document.body.innerHTML="<br>UP :"+key.u+"<br>DOWN :"+key.d+"<br>LEFT :"+key.l+"<br>RIGHT:"+key.r+"<br>SPACE:"+key.sp+"<br>CTRL:"+key.c+"<br>SHIFT:"+key.sh+"<br>ALT:"+key.alt;
setTimeout(Y,80)
}
Y();

</script>

// SHIFTは連続で入力した時にWindowsの固定キー機能が働いてしまう。連続での仕様は不向き。
// ALTは一回押すごとにブラウザでのキー入力に移行してしまう。使用自体が不向き。key-test6
├ <html>
<head>
<meta charset="UTF-8" />
<title>Web Speech API</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition();
recognition.lang = 'ja';

// 録音終了時トリガー
recognition.addEventListener('result', function(event){
var text = event.results.item(0).item(0).transcript;
$("#result_text").val(text);
}, false);

// 録音開始
function record()
{
recognition.start();
}
</script>
</head>

<body>

<textarea id="result_text" cols="100" rows="10">
</textarea>
<br />
<input type="button" onClick="record()" value="録音開始" />
</body>
</html>oto
├
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function calc()
{
with(document.form01)
txt02.value = eval(txt01.value);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form01">
計算式：<INPUT TYPE="TEXT" NAME="txt01" SIZE="30">
<INPUT TYPE="button" VALUE="計算" onClick="calc()"><BR>
計算結果：<INPUT TYPE="TEXT" NAME="txt02" SIZE="10">
</FORM>
</BODY>
</HTML>電卓
├ 解析したくても困難な物。解析困難
├ postnote
└ Junkerposts

・その場で編集、実行、デバッグＯＫ
・ツリー管理
・変数管理
・括弧の色分け（オマケ程度）

・完全オリジナルの環境です。
・このCGIのお問い合わせは
・momonga-v4.live.jp まで。

ｄｄｄｄ

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D Ball</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>

<script>
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');

const vertexShaderSource = `
attribute vec3 a_position;
void main() {
gl_Position = vec4(a_position, 1.0);
}
`;

const fragmentShaderSource = `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0,
0.0, 0.5, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>
</body>
</html>

使用変数

agmentShaderSource
canvas
charset
fragmentShader
gl
gl_FragColor
gl_Position
id
nAttributeLocation
positionBuffer
positions
program
vertexShader
vertexShaderSource

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>3D Ball</title>
    <style>
      body { margin: 0; overflow: hidden; }
      canvas { display: block; }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>

const vertexShaderSource = `
        attribute vec3 a_position;
        void main() {
          gl_Position = vec4(a_position, 1.0);
        }
      `;

const fragmentShaderSource = `
        precision mediump float;
        void main() {
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
      `;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vertexShader, vertexShaderSource);
      gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(fragmentShader, fragmentShaderSource);
      gl.compileShader(fragmentShader);

const program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);
      gl.useProgram(program);

const positionBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
      const positions = [
        -0.5, -0.5, 0.0,
        0.5, -0.5, 0.0,
        0.0, 0.5, 0.0
      ];
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
      gl.enableVertexAttribArray(positionAttributeLocation);
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
      gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLES, 0, 3);
    </script>
  </body>
</html>