Skip to content

Instantly share code, notes, and snippets.

@Shinichi-Ohki

Shinichi-Ohki/fullwidth_test_page.html

Last active July 23, 2025 07:46
Show Gist options
  • Save Shinichi-Ohki/adea3b119c1908f910e27191a79be84e to your computer and use it in GitHub Desktop.
Save Shinichi-Ohki/adea3b119c1908f910e27191a79be84e to your computer and use it in GitHub Desktop.
Download ZIP
ページ内の全角英数字・記号を半角に自動変換
Raw
fullwidth_test_page.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全角英数字テストページ</title>
<style>
body {
font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.newspaper-article {
background: white;
padding: 30px;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.headline {
font-size: 24px;
font-weight: bold;
margin-bottom: 15px;
color: #333;
border-bottom: 3px solid #007acc;
padding-bottom: 10px;
}
.dateline {
color: #666;
font-size: 14px;
margin-bottom: 20px;
}
.test-section {
margin: 25px 0;
padding: 20px;
background: #f9f9f9;
border-left: 4px solid #007acc;
}
.test-section h3 {
color: #007acc;
margin-top: 0;
}
input, textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.url-sample {
background: #e8f4f8;
padding: 15px;
border-radius: 4px;
font-family: monospace;
word-break: break-all;
}
.dynamic-content {
background: #fff3cd;
padding: 15px;
border-radius: 4px;
margin: 10px 0;
}
.add-content-btn {
background: #007acc;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.add-content-btn:hover {
background: #005fa3;
}
</style>
</head>
<body>
<h1>📰 全角英数字テストページ</h1>
<p>このページは、全角→半角変換スクリプトの動作確認用です〜♪</p>
<div class="newspaper-article">
<div class="headline">
ＡＩ技術の進歩が止まらない！２０２５年の最新動向
</div>
<div class="dateline">
２０２５年７月２３日　午後３時３０分
</div>
<p>
人工知能（ＡＩ）の発展が目覚ましい勢いで進んでいる。特にＧＰＴ－４やＣｌａｕｄｅなどの大規模言語モデルは、
従来のＩＴ業界の常識を覆している。
</p>
<p>
調査によると、２０２４年から２０２５年にかけて、ＡＩ関連の投資額は約３０％増加。
特にスタートアップ企業への投資が活発で、シリーズＡラウンドでの調達額は平均５００万ドルに達している。
</p>
</div>
<div class="test-section">
<h3>🔗 ＵＲＬテスト</h3>
<div class="url-sample">
ｈｔｔｐｓ：／／ｗｗｗ．ｅｘａｍｐｌｅ．ｃｏｍ／ａｒｔｉｃｌｅ／２０２５／０７／２３／ａｉ－ｎｅｗｓ．ｈｔｍｌ
</div>
<div class="url-sample">
ｈｔｔｐ：／／ｌｏｃａｌｈｏｓｔ：８０８０／ａｐｉ／ｖ１／ｄａｔａ？ｉｄ＝１２３＆ｔｙｐｅ＝ｊｓｏｎ
</div>
</div>
<div class="test-section">
<h3>💻 コードサンプル</h3>
<pre><code>ｆｕｎｃｔｉｏｎ　ｃｏｎｖｅｒｔＴｅｘｔ（ｓｔｒ）　｛
ｒｅｔｕｒｎ　ｓｔｒ．ｒｅｐｌａｃｅ（／［Ａ－Ｚａ－ｚ０－９］／ｇ，　ｆｕｎｃｔｉｏｎ（ｃ）　｛
ｒｅｔｕｒｎ　Ｓｔｒｉｎｇ．ｆｒｏｍＣｈａｒＣｏｄｅ（ｃ．ｃｈａｒＣｏｄｅＡｔ（０）　－　０ｘＦＥＥ０）；
｝ｙ；
｝</code></pre>
</div>
<div class="test-section">
<h3>📊 数値・記号テスト</h3>
<p>
売上高：￥１，２３４，５６７，８９０円（前年比＋１５．３％）<br>
ユーザー数：１０，０００，０００人（＃１シェア）<br>
評価：★★★★☆（４．２／５．０）<br>
メール：ｉｎｆｏ＠ｅｘａｍｐｌｅ．ｃｏｍ
</p>
</div>
<div class="test-section">
<h3>✍️ 入力フィールドテスト</h3>
<p>以下のフィールドに全角英数字を入力してリアルタイム変換をテスト！</p>
<input type="text" placeholder="ここに全角英数字を入力してね（例：ＨＥＬＬＯ１２３）">
<textarea rows="3" placeholder="長い文章のテスト用
ｈｔｔｐｓ：／／ｅｘａｍｐｌｅ．ｃｏｍなどのＵＲＬも試してみて！"></textarea>
</div>
<div class="test-section">
<h3>🔄 動的コンテンツテスト</h3>
<button class="add-content-btn" onclick="addDynamicContent()">全角コンテンツを追加</button>
<div id="dynamic-area"></div>
</div>
<script>
let counter = 1;
function addDynamicContent() {
const area = document.getElementById('dynamic-area');
const newContent = document.createElement('div');
newContent.className = 'dynamic-content';
newContent.innerHTML = `
<strong>動的追加コンテンツ　＃${counter}</strong><br>
追加時刻：２０２５年０７月２３日　１５：３０：${String(counter).padStart(2, '0')}<br>
ＵＲＬ：ｈｔｔｐｓ：／／ｅｘａｍｐｌｅ．ｃｏｍ／ｄｙｎａｍｉｃ－${counter}
`;
area.appendChild(newContent);
counter++;
}
// ページ読み込み完了後のメッセージ
window.addEventListener('load', function() {
console.log('🚀 テストページ読み込み完了！スクリプトの動作を確認してね〜');
});
</script>
</body>
</html>
Raw
gistfile1.txt
// ==UserScript==
// @name 全角英数字→半角変換
// @namespace http://tampermonkey.net/
// @version 2.01
// @description ページ内の全角英数字・記号を半角に自動変換
// @author You
// @match *://*/*
// @grant none
// @run-at document-end
// ==/UserScript==
(function() {
'use strict';
// 全角→半角変換関数
function convertFullwidthToHalfwidth(text) {
return text
// 全角英数字（安全な範囲のみ）
.replace(/[Ａ-Ｚａ-ｚ０-９]/g, char =>
String.fromCharCode(char.charCodeAt(0) - 0xFEE0))
// 全角記号（個別に安全に変換）
.replace(/！/g, '!')
.replace(/？/g, '?')
.replace(/．/g, '.')
.replace(/，/g, ',')
.replace(/：/g, ':')
.replace(/；/g, ';')
.replace(/＂/g, '"')
.replace(/｛/g, '{')
.replace(/｝/g, '}')
.replace(/［/g, '[')
.replace(/］/g, ']')
.replace(/（/g, '(')
.replace(/）/g, ')')
.replace(/％/g, '%')
.replace(/＆/g, '&')
.replace(/＠/g, '@')
.replace(/＃/g, '#')
.replace(/＄/g, '$')
// テキストノードを処理
function processTextNodes(node) {
if (node.nodeType === Node.TEXT_NODE) {
const original = node.textContent;
const converted = convertFullwidthToHalfwidth(original);
if (original !== converted) {
node.textContent = converted;
}
} else if (node.nodeType === Node.ELEMENT_NODE) {
// スクリプト・スタイル・入力欄は除外
if (!['SCRIPT', 'STYLE', 'INPUT', 'TEXTAREA'].includes(node.tagName)) {
Array.from(node.childNodes).forEach(processTextNodes);
}
}
}
// 入力フィールドのリアルタイム変換
function setupInputConversion() {
document.querySelectorAll('input[type="text"], input[type="search"], textarea')
.forEach(input => {
input.addEventListener('input', function() {
const pos = this.selectionStart;
const original = this.value;
const converted = convertFullwidthToHalfwidth(original);
if (original !== converted) {
this.value = converted;
this.setSelectionRange(pos, pos);
}
});
});
}
// 初期実行
processTextNodes(document.body);
setupInputConversion();
// 動的コンテンツ監視
new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE) {
processTextNodes(node);
}
});
});
}).observe(document.body, { childList: true, subtree: true });
// 新しい入力フィールド監視
new MutationObserver(() => setupInputConversion())
.observe(document.body, { childList: true, subtree: true });
// デバッグ用
window.convertFullwidth = () => {
processTextNodes(document.body);
console.log('🔄 手動変換完了');
};
})();)
.replace(/＋/g, '+')
.replace(/－/g, '-')
.replace(/＝/g, '=')
.replace(/＜/g, '<')
.replace(/＞/g, '>')
.replace(/／/g, '/')
.replace(/＼/g, '\\')
.replace(/｜/g, '|')
.replace(/～/g, '~')
.replace(/＾/g, '^')
.replace(/｀/g, '`')
// 全角スペース
.replace(/　/g, ' ');
}
// テキストノードを処理
function processTextNodes(node) {
if (node.nodeType === Node.TEXT_NODE) {
const original = node.textContent;
const converted = convertFullwidthToHalfwidth(original);
if (original !== converted) {
node.textContent = converted;
}
} else if (node.nodeType === Node.ELEMENT_NODE) {
// スクリプト・スタイル・入力欄は除外
if (!['SCRIPT', 'STYLE', 'INPUT', 'TEXTAREA'].includes(node.tagName)) {
Array.from(node.childNodes).forEach(processTextNodes);
}
}
}
// 入力フィールドのリアルタイム変換
function setupInputConversion() {
document.querySelectorAll('input[type="text"], input[type="search"], textarea')
.forEach(input => {
input.addEventListener('input', function() {
const pos = this.selectionStart;
const original = this.value;
const converted = convertFullwidthToHalfwidth(original);
if (original !== converted) {
this.value = converted;
this.setSelectionRange(pos, pos);
}
});
});
}
// 初期実行
processTextNodes(document.body);
setupInputConversion();
// 動的コンテンツ監視
new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE) {
processTextNodes(node);
}
});
});
}).observe(document.body, { childList: true, subtree: true });
// 新しい入力フィールド監視
new MutationObserver(() => setupInputConversion())
.observe(document.body, { childList: true, subtree: true });
// デバッグ用
window.convertFullwidth = () => {
processTextNodes(document.body);
console.log('🔄 手動変換完了');
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment