メモ(自分用)
svg
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes moveRight {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
.ball-group {
animation: moveRight 10s linear infinite;
}
</style>
<title>SVG アニメーション</title>
</head>
<body>
<svg width="100%" height="100">
<g class="ball-group">
<circle cx="50" cy="50" r="30" fill="orange" />
<line x1="50" y1="20" x2="50" y2="80" stroke="black" stroke-width="2">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="10s" repeatCount="indefinite" />
</line>
<line x1="20" y1="50" x2="80" y2="50" stroke="black" stroke-width="2">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" dur="10s" repeatCount="indefinite" />
</line>
</g>
</svg>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes moveRight {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
.ball-group {
animation: moveRight 10s linear infinite;
}
</style>
<title>SVG アニメーション</title>
</head>
<body>
<svg width="100%" height="100">
<g class="ball-group">
<image href="your-ball-image.png" x="20" y="20" height="60" width="60"/>
</g>
</svg>
</body>
</html>
margin-top
<header style="height: 60px;">
<!-- ヘッダのコンテンツ -->
</header>
.element-id {
scroll-margin-top: 60px;
}
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth',
block: 'start',
});
window.scrollBy(0, -60); // 60はヘッダの高さに相当する値です
});
});
</script>
ベジェ
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
let points = [];
let curves = [];
canvas.addEventListener('click', function(event) {
let rect = canvas.getBoundingClientRect();
let x = event.clientX - rect.left;
let y = event.clientY - rect.top;
points.push({x: x, y: y});
if (points.length === 4) {
curves.push([...points]);
drawBezierCurve(points);
points = [];
}
}, false);
function drawBezierCurve(points) {
context.lineWidth = 5;
context.beginPath();
context.moveTo(points[0].x, points[0].y);
context.bezierCurveTo(points[1].x, points[1].y, points[2].x, points[2].y, points[3].x, points[3].y);
context.stroke();
}
function redrawAllCurves() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (let curvePoints of curves) {
drawBezierCurve(curvePoints);
}
}
function undoLastCurve() {
if (curves.length > 0) {
curves.pop();
redrawAllCurves();
}
}
function saveAsSVG() {
let svgContent = '<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">';
for (let curvePoints of curves) {
svgContent += generateSVGPath(curvePoints);
}
svgContent += '</svg>';
// Save as file
let blob = new Blob([svgContent], {type: "image/svg+xml;charset=utf-8"});
let url = URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = 'bezier_curves.svg';
a.click();
}
function generateSVGPath(points) {
return `
<path d="M${points[0].x},${points[0].y}
C${points[1].x},${points[1].y}
${points[2].x},${points[2].y}
${points[3].x},${points[3].y}"
stroke="black"
stroke-width="5"
fill="none" />
`;
}
function openFile(event) {
let input = event.target;
let reader = new FileReader();
reader.onload = function(){
let dataURL = reader.result;
let output = document.getElementById('backgroundImage');
output.src = dataURL;
};
reader.readAsDataURL(input.files[0]);
}
document.getElementById('undoButton').addEventListener('click', undoLastCurve);
document.getElementById('saveButton').addEventListener('click', saveAsSVG);
document.getElementById('openFileButton').addEventListener('click', function() {
document.getElementById('fileInput').click();
});
document.getElementById('fileInput').addEventListener('change', openFile);
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ベジェ曲線の描画</title>
<style>
#myCanvas {
border: 1px solid #000;
position: absolute;
top: 0;
left: 0;
}
#imageContainer {
position: relative;
width: 500px;
height: 500px;
background-color: #f0f0f0;
}
#backgroundImage {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 500px;
opacity: 0.5; /* You can adjust the opacity as needed */
}
</style>
</head>
<body>
<div id="imageContainer">
<img id="backgroundImage" alt="Background Image" />
<canvas id="myCanvas" width="500" height="500"></canvas>
</div>
<input type="file" id="fileInput" style="display: none;" />
<button id="openFileButton">ファイルを開く</button>
<button id="undoButton">取り消し</button>
<button id="saveButton">SVGとして保存</button>
<script src="script.js"></script>
</body>
</html>
aクラスリンク
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Link Color Reset</title>
</head>
<body>
<a href="#" class="myLink">Click me</a>
<a href="#" class="myLink">Or me</a>
<script src="script.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', (event) => {
const links = document.querySelectorAll('.myLink');
links.forEach(link => {
link.addEventListener('click', () => {
link.classList.add('visited');
// 5秒後に元の色に戻す
setTimeout(() => {
link.classList.remove('visited');
}, 5000);
});
});
});
svg縮小
<svg width="650" height="150" viewBox="0 0 1300 300" ...>
<!-- ここにあなたのpathや他の形状を描く -->
<path d="あなたのpathデータ" ... />
</svg>
gasとhtml
function createDraft() {
var forName = "Recipient Name";
var to = "recipient@example.com";
var subject = "Test Subject";
var body = "Test Body";
GmailApp.createDraft(forName, to, subject, body);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<button onclick="createDraft()">Create Draft</button>
<script>
function createDraft() {
google.script.run.createDraft();
}
</script>
</body>
</html>
function createEvent(title, startTime, endTime) {
var calendar = CalendarApp.getDefaultCalendar();
var start = new Date(startTime);
var end = new Date(endTime);
calendar.createEvent(title, start, end);
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<input type="text" id="title" placeholder="Event Title">
<input type="text" id="startTime" placeholder="Start Time (e.g., 'September 12, 2023 10:00')">
<input type="text" id="endTime" placeholder="End Time (e.g., 'September 12, 2023 12:00')">
<button onclick="createEvent()">Create Event</button>
<script>
function createEvent() {
var title = document.getElementById('title').value;
var startTime = document.getElementById('startTime').value;
var endTime = document.getElementById('endTime').value;
google.script.run.createEvent(title, startTime, endTime);
}
</script>
</body>
</html>