| | <!DOCTYPE html>
|
| | <html lang="ja">
|
| | <head>
|
| | <meta charset="UTF-8">
|
| | <meta name="viewport" content="width=device-width, initial-scale=1">
|
| | <title>Arduino シリアル通信</title>
|
| | <style>
|
| | :root {
|
| | --primary-color: #1e88e5;
|
| | --primary-hover: #1565c0;
|
| | --background-color: #ffffff;
|
| | --text-color: #212121;
|
| | --border-color: #e0e0e0;
|
| | --placeholder-color: #757575;
|
| | --error-color: #d32f2f;
|
| | --success-color: #388e3c;
|
| | --input-background: #fafafa;
|
| | }
|
| |
|
| | * {
|
| | box-sizing: border-box;
|
| | margin: 0;
|
| | padding: 0;
|
| | }
|
| |
|
| |
|
| | body {
|
| | padding: 16px;
|
| | }
|
| |
|
| | .container {
|
| | padding: 32px;
|
| | }
|
| |
|
| | button {
|
| | padding: 12px;
|
| | }
|
| |
|
| | input[type="text"] {
|
| | padding: 12px 16px;
|
| | }
|
| |
|
| | textarea {
|
| | padding: 16px;
|
| | }
|
| |
|
| | @media (max-width: 600px) {
|
| | .container {
|
| | padding: 24px;
|
| | }
|
| |
|
| | button {
|
| | padding: 12px;
|
| | }
|
| | }
|
| |
|
| |
|
| | body {
|
| | font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
| | background: var(--background-color);
|
| | color: var(--text-color);
|
| | display: flex;
|
| | justify-content: center;
|
| | align-items: flex-start;
|
| | min-height: 100vh;
|
| | line-height: 1.5;
|
| | }
|
| |
|
| | .container {
|
| | background: var(--background-color);
|
| | width: 100%;
|
| | max-width: 900px;
|
| | display: grid;
|
| | grid-template-columns: 1fr 2fr;
|
| | gap: 24px;
|
| | }
|
| |
|
| | .sidebar {
|
| | display: flex;
|
| | flex-direction: column;
|
| | gap: 16px;
|
| | }
|
| |
|
| | .main {
|
| | display: flex;
|
| | flex-direction: column;
|
| | gap: 16px;
|
| | position: relative;
|
| | }
|
| |
|
| | h2 {
|
| | text-align: center;
|
| | font-size: 1.8rem;
|
| | margin-bottom: 24px;
|
| | color: var(--text-color);
|
| | font-weight: 600;
|
| | grid-column: 1 / -1;
|
| | }
|
| |
|
| | .button-group {
|
| | display: flex;
|
| | flex-wrap: wrap;
|
| | gap: 12px;
|
| | }
|
| |
|
| | button {
|
| | background: var(--primary-color);
|
| | color: white;
|
| | border: none;
|
| | border-radius: 8px;
|
| | font-size: 1rem;
|
| | font-weight: 500;
|
| | cursor: pointer;
|
| | transition: background-color 0.2s ease, transform 0.1s ease;
|
| | flex: 1;
|
| | min-width: 100px;
|
| | }
|
| |
|
| | button:hover {
|
| | background: var(--primary-hover);
|
| | transform: translateY(-1px);
|
| | }
|
| |
|
| | button:active {
|
| | transform: translateY(0);
|
| | }
|
| |
|
| | button:disabled {
|
| | background: #b0bec5;
|
| | cursor: not-allowed;
|
| | }
|
| |
|
| | select, input[type="text"] {
|
| | width: 100%;
|
| | font-size: 1rem;
|
| | border: 1px solid var(--border-color);
|
| | border-radius: 8px;
|
| | margin-bottom: 16px;
|
| | background: var(--input-background);
|
| | padding: 12px 16px;
|
| | transition: border-color 0.2s ease;
|
| | }
|
| |
|
| | select:focus, input[type="text"]:focus {
|
| | outline: none;
|
| | border-color: var(--primary-color);
|
| | box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
|
| | }
|
| |
|
| | input[type="text"]::placeholder {
|
| | color: var(--placeholder-color);
|
| | }
|
| |
|
| | textarea {
|
| | width: 100%;
|
| | height: 300px;
|
| | font-size: 0.95rem;
|
| | border: 1px solid var(--border-color);
|
| | border-radius: 8px;
|
| | background: var(--input-background);
|
| | resize: none;
|
| | line-height: 1.5;
|
| | transition: border-color 0.2s ease;
|
| | }
|
| |
|
| | textarea:focus {
|
| | outline: none;
|
| | border-color: var(--primary-color);
|
| | box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
|
| | }
|
| |
|
| | .copy-button {
|
| | position: absolute;
|
| | top: 10px;
|
| | right: 10px;
|
| | cursor: pointer;
|
| | padding: 4px;
|
| | }
|
| |
|
| | .copy-button img {
|
| | width: 16px;
|
| | height: 16px;
|
| |
|
| | }
|
| |
|
| | .status {
|
| | text-align: center;
|
| | margin-bottom: 16px;
|
| | font-size: 0.9rem;
|
| | color: var(--placeholder-color);
|
| | }
|
| |
|
| | .status.connected {
|
| | color: var(--success-color);
|
| | }
|
| |
|
| | .error {
|
| | color: var(--error-color);
|
| | }
|
| |
|
| | .history {
|
| | height: 123px;
|
| | border: 1px solid var(--border-color);
|
| | border-radius: 1px;
|
| | padding: 1px;
|
| | background: var(--input-background);
|
| |
|
| | }
|
| |
|
| | .history-item {
|
| | padding: 8px;
|
| | cursor: pointer;
|
| | border-radius: 4px;
|
| | transition: background-color 0.2s ease;
|
| | }
|
| |
|
| | .history-item:hover {
|
| | background: rgba(0, 0, 0, 0.05);
|
| | }
|
| |
|
| | @media (max-width: 768px) {
|
| | .container {
|
| | grid-template-columns: 1fr;
|
| | }
|
| |
|
| | h2 {
|
| | font-size: 1.5rem;
|
| | }
|
| |
|
| | .button-group {
|
| | flex-direction: column;
|
| | }
|
| | }
|
| | </style>
|
| | </head>
|
| | <body>
|
| | <div class="container">
|
| | <div class="sidebar">
|
| | <div class="status" id="status">未接続</div>
|
| | <select id="baudRate">
|
| | <option value="9600" selected>9600</option>
|
| | <option value="19200">19200</option>
|
| | <option value="38400">38400</option>
|
| | <option value="57600">57600</option>
|
| | <option value="115200">115200</option>
|
| | </select>
|
| | <div class="button-group">
|
| | <button id="connect">接続</button>
|
| | <button id="disconnect" disabled>切断</button>
|
| | <button id="clear">クリア</button>
|
| | <button id="export">エクスポート</button>
|
| | </div>
|
| | <div class="history" id="history">
|
| | <div class="history-item" style="color: var(--placeholder-color);">送信履歴なし</div>
|
| | </div>
|
| | </div>
|
| | <div class="main">
|
| | <input type="text" id="input" placeholder="Enterで送信" disabled aria-label="コマンド入力">
|
| | <div style="position: relative;">
|
| | <textarea id="output" readonly placeholder="受信データが表示されます..." aria-label="受信データ"></textarea>
|
| | <div class="copy-button" id="copyButton" title="受信データをコピー">
|
| | <img src="copy2.png" alt="コピーアイコン">
|
| | </div>
|
| | </div>
|
| | </div>
|
| | </div>
|
| |
|
| | <script>
|
| |
|
| | console.log('スクリプトの読み込み開始');
|
| |
|
| | let port, writer, reader;
|
| | let keepReading = false;
|
| | let isConnected = false;
|
| | let commandHistory = [];
|
| | let receiveBuffer = '';
|
| |
|
| |
|
| | const connectButton = document.getElementById('connect');
|
| | const disconnectButton = document.getElementById('disconnect');
|
| | const clearButton = document.getElementById('clear');
|
| | const exportButton = document.getElementById('export');
|
| | const copyButton = document.getElementById('copyButton');
|
| | const inputField = document.getElementById('input');
|
| | const outputArea = document.getElementById('output');
|
| | const statusDisplay = document.getElementById('status');
|
| | const baudRateSelect = document.getElementById('baudRate');
|
| | const historyContainer = document.getElementById('history');
|
| |
|
| |
|
| | console.log('DOM要素取得:', {
|
| | connectButton, disconnectButton, clearButton, exportButton,
|
| | copyButton, inputField, outputArea, statusDisplay, baudRateSelect, historyContainer
|
| | });
|
| |
|
| |
|
| | updateHistoryUI();
|
| |
|
| | connectButton.addEventListener('click', async () => {
|
| | console.log('接続ボタンクリック');
|
| | try {
|
| | port = await navigator.serial.requestPort();
|
| | await port.open({ baudRate: parseInt(baudRateSelect.value) });
|
| |
|
| | writer = port.writable.getWriter();
|
| | reader = port.readable.getReader();
|
| | keepReading = true;
|
| | isConnected = true;
|
| |
|
| | updateUI(true);
|
| | statusDisplay.textContent = `接続済み (ボーレート: ${baudRateSelect.value})`;
|
| | statusDisplay.classList.add('connected');
|
| | statusDisplay.classList.remove('error');
|
| |
|
| | const decoder = new TextDecoder();
|
| |
|
| | while (keepReading) {
|
| | const { value, done } = await reader.read();
|
| | if (done) break;
|
| | if (value) {
|
| | const text = decoder.decode(value, { stream: true });
|
| | console.log('受信データ（生）:', text);
|
| | displayFilteredOutput(text);
|
| | }
|
| | }
|
| | } catch (err) {
|
| | console.error('接続エラー:', err);
|
| | statusDisplay.textContent = `接続エラー: ${err.message}`;
|
| | statusDisplay.classList.add('error');
|
| | statusDisplay.classList.remove('connected');
|
| | updateUI(false);
|
| | }
|
| | });
|
| |
|
| | disconnectButton.addEventListener('click', async () => {
|
| | console.log('切断ボタンクリック');
|
| | try {
|
| | keepReading = false;
|
| | if (reader) await reader.releaseLock();
|
| | if (writer) await writer.releaseLock();
|
| | if (port) await port.close();
|
| | isConnected = false;
|
| | updateUI(false);
|
| | statusDisplay.textContent = '未接続';
|
| | statusDisplay.classList.remove('connected', 'error');
|
| | receiveBuffer = '';
|
| | } catch (err) {
|
| | console.error('切断エラー:', err);
|
| | statusDisplay.textContent = `切断エラー: ${err.message}`;
|
| | statusDisplay.classList.add('error');
|
| | }
|
| | });
|
| |
|
| | clearButton.addEventListener('click', () => {
|
| | console.log('クリアボタンクリック');
|
| | outputArea.value = '';
|
| | receiveBuffer = '';
|
| | console.log('受信データクリア成功');
|
| | });
|
| |
|
| | exportButton.addEventListener('click', () => {
|
| | console.log('エクスポートボタンクリック');
|
| | try {
|
| | if (outputArea.value.trim().length === 0) {
|
| | statusDisplay.textContent = 'エクスポートするデータがありません';
|
| | statusDisplay.classList.add('error');
|
| | setTimeout(() => {
|
| | if (isConnected) {
|
| | statusDisplay.textContent = `接続済み (ボーレート: ${baudRateSelect.value})`;
|
| | statusDisplay.classList.add('connected');
|
| | statusDisplay.classList.remove('error');
|
| | } else {
|
| | statusDisplay.textContent = '未接続';
|
| | statusDisplay.classList.remove('error');
|
| | }
|
| | }, 2000);
|
| | return;
|
| | }
|
| | const blob = new Blob([outputArea.value], { type: 'text/plain' });
|
| | const url = URL.createObjectURL(blob);
|
| | const a = document.createElement('a');
|
| | a.href = url;
|
| | a.download = `serial_data_${new Date().toISOString()}.txt`;
|
| | a.click();
|
| | URL.revokeObjectURL(url);
|
| | console.log('エクスポート成功');
|
| | } catch (e) {
|
| | console.error('エクスポートエラー:', e);
|
| | statusDisplay.textContent = `エクスポートエラー: ${e.message}`;
|
| | statusDisplay.classList.add('error');
|
| | }
|
| | });
|
| |
|
| | copyButton.addEventListener('click', async () => {
|
| | console.log('コピーボタンクリック');
|
| | try {
|
| | await navigator.clipboard.writeText(outputArea.value);
|
| | statusDisplay.textContent = '受信データをコピーしました';
|
| | statusDisplay.classList.add('connected');
|
| | statusDisplay.classList.remove('error');
|
| | console.log('コピー成功');
|
| | setTimeout(() => {
|
| | if (isConnected) {
|
| | statusDisplay.textContent = `接続済み (ボーレート: ${baudRateSelect.value})`;
|
| | } else {
|
| | statusDisplay.textContent = '未接続';
|
| | statusDisplay.classList.remove('connected');
|
| | }
|
| | }, 2000);
|
| | } catch (err) {
|
| | console.error('コピーエラー:', err);
|
| | statusDisplay.textContent = `コピーエラー: ${err.message}`;
|
| | statusDisplay.classList.add('error');
|
| | }
|
| | });
|
| |
|
| | inputField.addEventListener('keydown', async (e) => {
|
| | if (e.key === 'Enter') {
|
| | console.log('Enterキー押下:', inputField.value);
|
| | e.preventDefault();
|
| | const text = inputField.value.trim();
|
| | if (text && writer) {
|
| | try {
|
| | const encoder = new TextEncoder();
|
| | await writer.write(encoder.encode(text + '\n'));
|
| | updateCommandHistory(text);
|
| | inputField.value = '';
|
| | } catch (e) {
|
| | console.error('送信エラー:', e);
|
| | statusDisplay.textContent = `送信エラー: ${e.message}`;
|
| | statusDisplay.classList.add('error');
|
| | }
|
| | }
|
| | }
|
| | });
|
| |
|
| | historyContainer.addEventListener('click', async (e) => {
|
| | if (e.target.classList.contains('history-item') && isConnected) {
|
| | console.log('履歴アイテムクリック:', e.target.textContent);
|
| | const text = e.target.textContent;
|
| | if (text && writer) {
|
| | try {
|
| | const encoder = new TextEncoder();
|
| | await writer.write(encoder.encode(text + '\n'));
|
| | console.log('履歴から送信成功:', text);
|
| | updateCommandHistory(text);
|
| | } catch (e) {
|
| | console.error('履歴送信エラー:', e);
|
| | statusDisplay.textContent = `送信エラー: ${e.message}`;
|
| | statusDisplay.classList.add('error');
|
| | }
|
| | }
|
| | }
|
| | });
|
| |
|
| | function updateCommandHistory(text) {
|
| | if (!commandHistory.includes(text)) {
|
| | commandHistory.unshift(text);
|
| | } else {
|
| |
|
| | commandHistory = commandHistory.filter(cmd => cmd !== text);
|
| | commandHistory.unshift(text);
|
| | }
|
| |
|
| | if (commandHistory.length > 3) {
|
| | commandHistory = commandHistory.slice(0, 3);
|
| | }
|
| | console.log('履歴更新:', commandHistory);
|
| | updateHistoryUI();
|
| | }
|
| |
|
| | function displayFilteredOutput(rawText) {
|
| |
|
| | receiveBuffer += rawText;
|
| | console.log('バッファ更新:', receiveBuffer);
|
| |
|
| |
|
| | const lines = receiveBuffer.split(/\r?\n/);
|
| |
|
| | if (!rawText.endsWith('\n')) {
|
| | receiveBuffer = lines.pop() || '';
|
| | } else {
|
| | receiveBuffer = '';
|
| | }
|
| |
|
| |
|
| | const filteredLines = lines.filter(line => line.trim().length > 0);
|
| | if (filteredLines.length > 0) {
|
| | if (outputArea.value) {
|
| | outputArea.value += '\n' + filteredLines.join('\n');
|
| | } else {
|
| | outputArea.value += filteredLines.join('\n');
|
| | }
|
| | outputArea.scrollTop = outputArea.scrollHeight;
|
| | }
|
| | console.log('表示データ:', filteredLines);
|
| | }
|
| |
|
| | function updateHistoryUI() {
|
| | console.log('履歴UI更新');
|
| | historyContainer.innerHTML = '';
|
| | if (commandHistory.length === 0) {
|
| | historyContainer.innerHTML = '<div class="history-item" style="color: var(--placeholder-color);">送信履歴なし</div>';
|
| | } else {
|
| | commandHistory.forEach(cmd => {
|
| | const div = document.createElement('div');
|
| | div.className = 'history-item';
|
| | div.textContent = cmd;
|
| | historyContainer.appendChild(div);
|
| | });
|
| | }
|
| | }
|
| |
|
| | function updateUI(connected) {
|
| | console.log('UI更新:', connected);
|
| | connectButton.disabled = connected;
|
| | disconnectButton.disabled = !connected;
|
| |
|
| | inputField.disabled = !connected;
|
| | baudRateSelect.disabled = connected;
|
| |
|
| | }
|
| |
|
| | window.addEventListener('beforeunload', async () => {
|
| | console.log('ページ終了処理');
|
| | keepReading = false;
|
| | if (reader) await reader.releaseLock();
|
| | if (writer) await writer.releaseLock();
|
| | if (port) await port.close();
|
| | receiveBuffer = '';
|
| | });
|
| |
|
| | console.log('スクリプトの読み込み完了');
|
| | </script>
|
| | </body>
|
| | </html> |
