Myu: javascript

ラベル javascript の投稿を表示しています。すべての投稿を表示

2026年5月13日水曜日

畑管理GASについて

畑資材の支出入をGASで管理していたものに、機能を少し追加した。これまで畑管理は、ノートに書き込んでいたが、さすがに中身が増えてくると、整理がつきにくくなったので、これもGASで管理してみることにした。

　オープンデータのＡＰＩから天気、気温、降水量、風力など、自動で入力されるようにしました。畑日記のようなものです。

code.gs*******************
  const SPREADSHEET_ID = '***************';
const SHEET_NAME = 'Records2026'; // 年度毎変更可
const SHEET_NAME_EX='Expense2026'
const SHEET_YEAR='2026';
const GOOGLE_DRIVE = '***************';　//畑画像保存用

// 野菜マスタ（名前と単価）
const vegetablePrices = {
  "トマト": 100,
  "ナス": 40,
  "キュウリ": 40,
  "ピーマン": 20,
  "ゴーヤ": 60,
  "インゲン": 5,
  "スイカ": 1000,
  "末成りスイカ":200,
  "ミニトマト": 10,
  "サツマイモ": 130,
  "サトイモ": 40,
  "シソ": 5,
  "エダマメ": 10,
  "人参":40,
  "大根":100,
  "カブ":80
};

const CultivationRecordsPerspectives = {
  "栽培":0,  "技術":1,  "その他":2
};

function weatherText(code) {
  const map = {
    0: "晴",
    1: "晴れ時々曇",
    2: "曇",
    3: "曇",
    45: "霧",
    61: "弱雨",
    63: "雨",
    65: "強雨",
    71: "雪"
  };

return map[code] || "不明";
}

function doGet(e) {

const page = e.parameter.page || "index";

return HtmlService
    .createTemplateFromFile(page)
    .evaluate();
}

// HTML読み込み用
function include(filename) {
  return HtmlService
    .createHtmlOutputFromFile(filename)
    .getContent();
}

// 検索
function searchRecords(keywordText) {

const keywords = keywordText
    .trim()
    .toLowerCase()
    .split(/\s+/);

// 現在年
  let targetYear =
    String(new Date().getFullYear());

// yyyy取得
  const yearKeyword =
    keywords.find(k =>
      /^\d{4}$/.test(k)
    );

// 指定年あれば切替
  if(yearKeyword){

targetYear = yearKeyword;
  }

// スプレッドシート
  const ss =
    SpreadsheetApp.openById(
      SPREADSHEET_ID
    );

// 年シート
  const sheet =
    ss.getSheetByName(targetYear);

if(!sheet){

throw new Error(
      'シートなし: ' + targetYear
    );
  }

const values =
    sheet.getDataRange()
      .getValues();

// 年キーワード除外
  const searchKeywords =
    keywords.filter(k =>
      !/^\d{4}$/.test(k)
    );

const results = [];

for(let i = 1; i < values.length; i++){

const row = values[i];

const comment =
      String(row[7] || "")
        .toLowerCase();

const matched =
      searchKeywords.every(k =>
        comment.includes(k)
      );

if(!matched) continue;

results.push({

date:
        Utilities.formatDate(
          row[0],
          Session.getScriptTimeZone(),
          'yyyy-MM-dd'
        ),

weather:
        String(row[1] || ""),

comment:
        String(row[7] || ""),

image:
        String(row[8] || "")

});
  }

return results;
}

function getVegetables() {
  return vegetablePrices;
}

function getCultivationRecordsPerspectives() {
  return CultivationRecordsPerspectives;
}

function getWeatherOptions() {
  const options = [];

for (let i = 0; i <= 100; i++) {
    const text = weatherText(i);

if (text !== "不明" && !options.includes(text)) {
      options.push(text);
    }
  }

return options;
}

function getWeatherData(dateStr) {
  const latitude = **.**;//畑の　緯度　と　経度　を設定
  const longitude = ***.**;

const url =
    "https://api.open-meteo.com/v1/forecast" +
    "?latitude=" + latitude +
    "&longitude=" + longitude +
    "&hourly=temperature_2m,precipitation,wind_speed_10m,weathercode" +
    "&start_date=" + dateStr +
    "&end_date=" + dateStr +
    "&timezone=Asia%2FTokyo";

const response = UrlFetchApp.fetch(url);
  const data = JSON.parse(response.getContentText());

const temps = data.hourly.temperature_2m;
  const precs = data.hourly.precipitation;
  const winds = data.hourly.wind_speed_10m;
  const codes = data.hourly.weathercode;

const tempMax = Math.max(...temps);
  const tempMin = Math.min(...temps);
  const precipitation = precs.reduce((a, b) => a + b, 0);
  const windMax = Math.max(...winds);

// 最頻出天気コード
  const weatherCode = mode(codes);

return {
    weather: weatherText(weatherCode),
    tempMax: tempMax,
    tempMin: tempMin,
    precipitation: precipitation,
    windMax: windMax
  };
}

function mode(arr) {
  const count = {};
  let max = 0;
  let result = arr[0];

arr.forEach(v => {
    count[v] = (count[v] || 0) + 1;
    if (count[v] > max) {
      max = count[v];
      result = v;
    }
  });

return result;
}

function uploadImageToDrive(base64Data, fileName) { 
  const folder = DriveApp.getFolderById(GOOGLE_DRIVE);
  const contentType =
    base64Data.match(/^data:(.*);base64,/)[1];

const bytes =
    Utilities.base64Decode(
      base64Data.split(',')[1]
    );

const blob = Utilities.newBlob(
    bytes,
    contentType,
    fileName
  );

const file = folder.createFile(blob);

return file.getUrl();
}

function init(){
  const obj= getTotalSum();  // 合計金額取得 
  return JSON.stringify({
    totalSum: obj.sum 
    ,lastDay: obj.last
    ,totalSumEx: obj.sumex 
    ,lastDayEx: obj.lastex
    ,balance:obj.balance
      });
}

function addRecord(data) {
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  // const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName(SHEET_NAME);
  
  if (!sheet) {
    Logger.log('シート名「' + SHEET_NAME + '」は存在しません');
  } else {
    Logger.log('シート名「' + SHEET_NAME + '」が見つかりました');
  }
  
  const name = data.name;
  const count = Number(data.count);
  const unitPrice = vegetablePrices[name] || 0;
  const total = unitPrice * count;
  const date = new Date();
  const memo = data.memo;
  
  sheet.appendRow([date, name, count, unitPrice, total, memo]);
  const obj = getTotalSum();  // 合計金額取得
  sum=obj.sum;

return JSON.stringify({
    record: { 
      dateEx: "", 
      hinmei: "", 
      kingaku: 0,
      memoEx: "",
      date: date, 
      name: name, 
      count: count, 
      unitPrice: unitPrice, 
      total: total,
      memo: memo
    },
    totalSum: sum ,
    totalSumEx:0,
    balance: obj.balance
  });
}

function addRecordEx(data) {
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheet = ss.getSheetByName(SHEET_NAME_EX);
  
  if (!sheet) {
    Logger.log('シート名「' + SHEET_NAME_EX + '」は存在しません');
  } else {
    Logger.log('シート名「' + SHEET_NAME_EX + '」が見つかりました');
  }
  
  const hinmei = data.hinmei;
  const kingaku = data.kingaku;
  const dateEx = new Date();
  const memoEx = data.memoEx;
  
  sheet.appendRow([dateEx, hinmei, kingaku, kingaku, kingaku, memoEx]);
  const obj = getTotalSum();  // 合計金額取得
  sum=obj.sumex;

return JSON.stringify({
    record: { 
      dateEx: dateEx, 
      hinmei: hinmei, 
      kingaku: kingaku,
      memoEx: memoEx,
      date: "", 
      name: "", 
      count: 0, 
      unitPrice: 0, 
      total: 0,
      memo: ""
    },
    totalSumEx: sum ,
    balance: obj.balance
  });
}

function addRecordCr(data) {
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheet = ss.getSheetByName(SHEET_YEAR);

if (!sheet) {
    throw new Error('シート名「' + SHEET_YEAR + '」は存在しません');
  }

sheet.appendRow([
    data.cultivationRecordsDate,
    data.weather,
    data.tempMax,
    data.tempMin,
    data.precipitation,
    data.windMax,
    data.cultivationRecordsPerspective,
    data.cultivationRecordsComment,
    data.imageUrl
  ]);

return "保存しました";
}

function getTotalSum() {
  const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheet = ss.getSheetByName(SHEET_NAME);
  const data = sheet.getRange(2, 5, sheet.getLastRow() - 1).getValues(); // 合計金額列
  const lastRow = sheet.getRange("A:A").getValues().filter(String).length;
  const lastValue = sheet.getRange(lastRow, 1).getValue();
  const total=data.reduce((sum, row) => sum + (Number(row[0]) || 0), 0);

const sheetEx = ss.getSheetByName(SHEET_NAME_EX);
  const dataEx = sheetEx.getRange(2, 5, sheetEx.getLastRow() - 1).getValues(); // 合計金額列
  const lastRowEx = sheetEx.getRange("A:A").getValues().filter(String).length;
  const lastValueEx = sheetEx.getRange(lastRowEx, 1).getValue();
  const totalEx=dataEx.reduce((sumex, rowex) => sumex + (Number(rowex[0]) || 0), 0);

return {sum:total,last:lastValue,sumex:totalEx  ,lastex:lastValueEx    ,balance: total-totalEx  };
 
}
  
  *******index.html
  <!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>

body {
  font-family: "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background-color: #f4f7f4;
}

table {
  border-collapse: separate;
  border-spacing: 20px;
  margin: 20px auto;
}

td {
  vertical-align: top;
}

.card {
  background: #ffffff;
  padding: 20px 24px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  min-width: 300px;
}

h2 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #2f6f4e;
  border-bottom: 2px solid #e0eee6;
  padding-bottom: 6px;
}

label {
  display: block;
  margin-top: 10px;
  font-weight: 600;
  color: #444;
}

input, select, textarea {
  width: 100%;
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}

textarea {
  resize: vertical;
}

button {
  margin-top: 14px;
  padding: 8px 16px;
  background-color: #4caf75;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

button:hover {
  background-color: #3f9a66;
}

h3 {
  margin-top: 16px;
  color: #333;
}

.total {
  font-weight: bold;
  color: #2f6f4e;
}

.balance {
  background: #fffbe6;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
</style>

</head>
  <body>
    <table>
    <tr>
　　　<td>
      <h2>栽培記録</h2>
            　記録検索
        <input
         type="text"
         id="keyword"
         placeholder="キーワードをスペース区切り yyyyないと今年">
　　　　　<button onclick="search()">検索</button>
<h2>検索結果</h2>
<div id="resultSrch">
</div>
    
    
      <div id="resultCr"></div>
      <label>年月日：</label>
      <input type="date" id="CultivationRecordsDate">
    
      <label>天気：</label>
      <select id="Weather"></select> 
      <br> 
    
      <label>最高気温(℃)：</label>
      <input type="number" id="TempMax" value="0" />

<button type="button" onclick="uploadImage()">
  画像アップロード(数秒かかります)
</button>

<label>画像URL：</label>
<input type="text" id="ImageUrl" size="60">

</dt>

<td>
      <h2>畑の収穫記録</h2>
      <label>野菜：</label>
      <select id="vege"></select> 
    
      <label>個数：</label>
      <input type="number" id="count" min="1" value="1" />
      <br> 
    
      <label>メモ：</label>
      <ｔｅｘｔａｒｅａ id="memo" name="memo" rows="5" cols="40"></ｔｅｘｔａｒｅａ> 
    
      <button onclick="submitData()">収穫登録</button> 
    
      <div id="result"></div>
      <h3 id="totalSum">合計金額: -- 円</h3>
    </dt>
    <td>
      <h2>支出記録</h2>
      <label>品名:</label>
      <input type="text" id="hinmei"></select> 
    
      <label>金額：</label>
      <input type="number" id="kingaku" min="0" value="0" />
      <br> 
    
      <label>メモ：</label>
      <ｔｅｘｔａｒｅａ id="memoEx" name="memoEx" rows="5" cols="40"></ｔｅｘｔａｒｅａ> 
    
      <button onclick="submitDataEx()">支出登録</button> 
    
      <div id="resultEx"></div>
      <h3 id="totalSumEx">合計支出金額: -- 円</h3>
        <h3 id="balance">差引計算: -- 円</h3>
      <br>
    </td>
 
    </tr>
    </table><table>
 
    
    <a href='***********'>Sheet</a>
    
    <script>
      
      
      function search(){
  const keyword =
    document.getElementById("keyword").value;

google.script.run
  .withSuccessHandler(showResults)
  .withFailureHandler(showError)
  .searchRecords(keyword);

}

function showError(error){

console.error(error);

document.getElementById("resultSrch")
    .innerHTML =
      "エラー: " + error.message;
}

function showResults(results){

const div =
    document.getElementById("resultSrch");
  div.innerHTML = "";
  if(results.length === 0){
    div.innerHTML = "該当なし";
    return;
  }

results.forEach(r => {

console.log(r);

let imageHtml = "";

if(r.image && typeof r.image === "string"){

imageHtml = `
      <div>
        <img
          src="${r.image}"
          style="max-width:300px;">
      </div>
    `;
  }

const html = `
    <div class="card">

<div>${r.date}</div>
      <div>${r.comment}</div>

${imageHtml}

</div>
  `;

div.innerHTML += html;
});

}
      
      
      
      
      
      function setToday() {
  const today = new Date();

// ローカル日付を YYYY-MM-DD に
  const yyyy = today.getFullYear();
  const mm = String(today.getMonth() + 1).padStart(2, '0');
  const dd = String(today.getDate()).padStart(2, '0');

document.getElementById("CultivationRecordsDate").value =
    `${yyyy}-${mm}-${dd}`;
}

function uploadImage() {
  alert("uploadImage開始");

const file = document.getElementById("ImageFile").files[0];

if (!file) {
    alert("画像なし");
    return;
  }

const reader = new FileReader();

reader.onload = function(e) {
    alert("reader.onload");

google.script.run
      .withSuccessHandler(function(url) {
        console.log("SUCCESS");
        console.log(url);
        alert("SUCCESS: " + url);

const el =
          document.getElementById("ImageUrl");

alert("el=" + el);

el.value = url;
      })
      .withFailureHandler(function(err) {
        console.log("FAIL");
        console.log(err);
        alert("FAIL: " + err.message);
      })
      .uploadImageToDrive(
        e.target.result,
        file.name
      );
  };

reader.readAsDataURL(file);
}

document.getElementById("CultivationRecordsDate")
  .addEventListener("change", fetchWeather);

window.onload = function() {
         google.script.run.withSuccessHandler(displayResult2).init();
    };

data.forEach(function(item) {
      const opt = document.createElement("option");
      opt.value = item;
      opt.text = item;
      select.appendChild(opt);
    });

}).getWeatherOptions();
}

function fetchWeather() {
  const date = document.getElementById("CultivationRecordsDate").value;
  google.script.run
    .withSuccessHandler(function(result) {
      document.getElementById("Weather").value = result.weather;
      document.getElementById("TempMax").value = result.tempMax;
      document.getElementById("TempMin").value = result.tempMin;
      document.getElementById("Precipitation").value = result.precipitation;
      document.getElementById("WindMax").value = result.windMax;
    })
    .getWeatherData(date);
}

function submitDataCr() {
  const cultivationRecordsDate =
    document.getElementById("CultivationRecordsDate").value;
  const weather =
    document.getElementById("Weather").value;
  const tempMax =
    document.getElementById("TempMax").value;
  const tempMin =
    document.getElementById("TempMin").value;
  const precipitation =
    document.getElementById("Precipitation").value;
  const windMax =
    document.getElementById("WindMax").value;
  const cultivationRecordsPerspective =
    document.getElementById("CultivationRecordsPerspective").value;
  const cultivationRecordsComment =
    document.getElementById("memo").value;
  const imageUrl =
  document.getElementById("ImageUrl").value;

google.script.run
    .withSuccessHandler(displayResultCr)
    .addRecordCr({
      cultivationRecordsDate: cultivationRecordsDate,
      weather: weather,
      tempMax: tempMax,
      tempMin: tempMin,
      precipitation: precipitation,
      windMax: windMax,
      cultivationRecordsPerspective: cultivationRecordsPerspective,
      cultivationRecordsComment: cultivationRecordsComment,
      imageUrl:imageUrl
    });
}

function displayResult(res) {
        let response = JSON.parse(res);
        const r = response.record;

if (r.hinmei==""){
           const div = document.getElementById("result");
        const entry = document.createElement("div");
        entry.className = "result-entry";
        entry.innerHTML = `<strong>${new Date(r.date).toLocaleString()}</strong> - ${r.name} (${r.count}個 × ${r.unitPrice}円) = <strong>${r.total}円</strong><br>MEMO:<BR>${r.memo.replace(/\r?\n/g, "<br>")}`;
        //entry.innerHTML = `<strong>date</strong> - name  1個 × 100円) = <strong>200円</strong>`;
        div.appendChild(entry);
        
        document.getElementById("totalSum").innerText = `合計金額: ${response.totalSum} 円`;
        document.getElementById("balance").innerText = `差引計算: ${response.balance} 円`;

}else{
        const div = document.getElementById("resultEx");
        const entry = document.createElement("div");
        entry.className = "result-entry";
        entry.innerHTML = `<strong>${new Date(r.dateEx).toLocaleString()}</strong> - ${r.hinmei} (${r.kingaku}円</strong><br>MEMO:<BR>${r.memoEx.replace(/\r?\n/g, "<br>")}`;
       
        div.appendChild(entry);
        
        document.getElementById("totalSumEx").innerText = `合計金額: ${response.totalSumEx} 円`;

}
        
        document.getElementById("balance").innerText = `差引計算: ${response.balance} 円`;
     
      }

function displayResultCr(result) {
  document.getElementById("resultCr").innerText = result;
}
      
      loadVegetables();
      loadCultivationRecordsPerspective();
      loadWeather();
        setToday();
        fetchWeather();
        
    </script>
  </body>
</html>

※textareaのみ全角を半角にする必要あります。

※検索機能追加しました。

2026年3月17日火曜日

ESP32にマイクとアンプは、負荷が高く断念

esp32C3のハードの能力ではデジタルで音声処理は難しそうで、せっかくの部品購入ではありましたが、諦めて、別の方法に切り替えました。esp32はテキスト処理にとどめておいたほうがい無難なようです。目的は音声認識英英辞典だったので、GithubPagesに、Javascriptでこちらにサイトをつくってみました。スマホなどからアクセスすると便利に使えそうです。

最初からこの方法を思いついていれば、わざわざesp32で難しいことしなくても、実現できたのですが、、、。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Voice Dict</title>
    <style>
        body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background: #f0f2f5; font-family: sans-serif; text-align: center; }
        #btn,#repeat { width: 200px; height: 200px; border-radius: 50%; border: 8px solid #fff; background: #007bff; color: white; font-size: 22px; font-weight: bold; cursor: pointer; box-shadow: 0 8px 15px rgba(0,0,0,0.1); transition: 0.2s; -webkit-tap-highlight-color: transparent; }
        #btn:active { transform: scale(0.9); background: #0056b3; }
        #status { margin-top: 15px; color: #666; font-size: 14px; height: 20px; }
        #result-box { margin: 20px; padding: 20px; background: white; border-radius: 15px; width: 85%; max-width: 500px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); min-height: 120px; }
        #word-text { font-size: 26px; color: #333; margin-bottom: 10px; font-weight: bold; text-transform: capitalize; }
        #def-text { font-size: 17px; color: #555; line-height: 1.6; text-align: left; }
    </style>
</head>
<body>

<button id="btn">PUSH & SPEAK</button>
    <div id="status">Ready</div>

<div id="result-box">
        <div id="word-text">English Dictionary</div>
        <div id="def-text">Tap the button and say a word. (e.g., "Apple")</div>
        <button id="repeat">Repeat</button>
    </div>

// 音声認識の設定
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        const recognition = new SpeechRecognition();
        recognition.lang = 'en-US';
        recognition.interimResults = false;

btn.onclick = () => {
            window.speechSynthesis.cancel(); // 再生中の音声を停止
            try {
                recognition.start();
                status.innerText = "Listening...";
                btn.style.background = "#ff4757";
            } catch (e) {
                console.log("Recognition already started");
            }
        };
        
         repeat.onclick = () => {
             speak(word + ". " + meaning);
        };

recognition.onresult = async (event) => {
            word = event.results[0][0].transcript.toLowerCase().trim();
            wordText.innerText = word;
            defText.innerText = "Searching...";
            btn.style.background = "#007bff";

try {
                //const res = await fetch(`https://dictionaryapi.dev{word}`);
                const res = await fetch('https://api.dictionaryapi.dev/api/v2/entries/en/' + word);
                
                const data = await res.json();
                 //speak("Under analysis");
                
                // APIが配列で返ってこない（エラー）場合
                if (!Array.isArray(data) || data.length === 0) {
                    const msg = "Sorry, no definition found for " + word;
                    defText.innerText = msg;
                    speak(msg);
                } else {
                    // ★重要：階層を安全にたどる
                    meaning = data[0].meanings[0].definitions[0].definition;
                    defText.innerText = meaning;
                    speak(word + ". " + meaning);
                }
            } catch (e) {
                defText.innerText = "Error: Check your internet connection.";
                speak("Connection error.");
            }
            status.innerText = "Done";
        };

recognition.onend = () => {
            btn.style.background = "#007bff";
            if (status.innerText === "Listening...") status.innerText = "Ready";
        };

function speak(text) {
            const uttr = new SpeechSynthesisUtterance(text);
            uttr.lang = 'en-US';
            uttr.rate = 0.9;
            window.speechSynthesis.speak(uttr);
        }
    </script>
</body>
</html>

2025年6月26日木曜日

GASではJSON.stringfyをつかったほうがいいようです

畑の収穫記録をGASで管理（収穫の個数を記録しその都度、合計の確認）しようかと、ChatGPTにコード頼んでみたけど、なかなか一筋縄ではいかない。AIにより、だいぶコーディングは楽になっているが、やはり、ある程度やりとりしながら、人間側が修正してあげないと動かなかった。

　最初、ChatGPTはサーバ（GAS）からのレスポンスデータを単純にオブジェクトで渡すコードを提示してくれたけれど、それではうまくいかず、やはり、JSON.stringfyを使わないとだめだった。

//***********************html.index**************************
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body { font-family: sans-serif; margin: 20px; }
      label, select, input, button { margin: 5px; }
      div.result-entry { margin-top: 10px; }
    </style>
  </head>
  <body>
    <h2>畑の収穫記録</h2>
    <label>野菜：</label>
    <select id="vege"></select>

<label>メモ：</label>
    <ttextarea id="memo" name="memo" rows="5" cols="40"></ttextarea>　←ttextareaをtextareaに変更必要

<div id="result"></div>
    <h3 id="totalSum">合計金額: -- 円</h3>
<br /> <a href="https://docs.google.com/spreadsheets/d/シートID/edit?gid=0#gid=0">Sheet</a>
    <script>
      let vegeData = {};

console.log("name:", name, "count:", count);

if (!name || !count || count < 1) {
          alert("野菜と個数を正しく入力してください。");
          return;
        }

google.script.run.withSuccessHandler(displayResult).addRecord({ name: name, count: count,memo: memo });
      }

function displayResult(res) {

let response = JSON.parse(res);         
 
        const r = response.record;
        
        const div = document.getElementById("result");

document.getElementById("totalSum").innerText = `合計金額: ${response.totalSum} 円`;
      }

loadVegetables();
    </script>

//*************コード.js****************
const SPREADSHEET_ID = 'シートID';
const SHEET_NAME = 'Records'; // シート名（1枚目なら "Sheet1" のままでもOK）

// 野菜マスタ（名前と単価）
const vegetablePrices = {
  "トマト": 100,
  "ナス": 80,
  "キュウリ": 50,
  "ピーマン": 60,
    "ゴーヤ": 60,
      "インゲン": 5,
        "スイカ": 300,
          "ミニトマト": 10,
            "サツマイモ": 130,
              "サトイモ": 60,
                "シソ": 5,
                  "エダマメ": 10,

};

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function getVegetables() {
  return vegetablePrices;
}

function addRecord(data) {
    const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
 // const ss = SpreadsheetApp.getActiveSpreadsheet();
  const sheet = ss.getSheetByName(SHEET_NAME);

if (!sheet) {
    Logger.log('シート名「' + SHEET_NAME + '」は存在しません');
  } else {
    Logger.log('シート名「' + SHEET_NAME + '」が見つかりました');
  }

const name = data.name;
  const count = Number(data.count);
  const unitPrice = vegetablePrices[name] || 0;
  const total = unitPrice * count;
  const date = new Date();
  const memo = data.memo

sheet.appendRow([date, name, count, unitPrice, total,memo]);

const sum = getTotalSum();  // 合計金額取得

// return {
  //  record: { date: date, name: name, count: count, unitPrice: unitPrice, total: total },totalSum: sum
 // };

return JSON.stringify({record: { date: date, name: name, count: count, unitPrice: unitPrice, total: total ,memo : memo},totalSum: sum });
}

function getTotalSum() {

const ss = SpreadsheetApp.openById(SPREADSHEET_ID);
  const sheet = ss.getSheetByName(SHEET_NAME);
  const data = sheet.getRange(2, 5, sheet.getLastRow() - 1).getValues(); // 合計金額列
  return data.reduce((sum, row) => sum + (Number(row[0]) || 0), 0);
}

※　MEMO欄を追加しました。2025/6/27

2024年11月19日火曜日

GAS版のHamlog作ってみた

GoogleAppScriptでクラウド版のハムログを作ってみた。raspiサーバに構築も考えたが、ハードがいつまで持つか心配もあったので、とりあえずクラウドで試してみた。最近は、ChatGPTにも助けてもらっているので、比較的短時間でコーディングができるようになった。

　スプレッドシートやGASは無料で使える。その分、スピードが遅いが、個人で使う分には、問題ないと思う。

　移動運用の時などもその場で記録できて便利かもしれない。過去に交信しているかコールサインで検索できるようにした。jcc検索機能も追加した、ただし、シートに自分で作ったjcc番号と市郡名の対応表を用意する必要があった。ネットからの情報を加工した。

GAS と　index.htmlは以下の通りです。

Gasのほうのコードは以下のようなもの。シートIDを入れると使えると思います。*********************************************
function doGet(e) {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function JccCheck(jcc) {

function CallCheck(call) {

const url = `https://www.tele.soumu.go.jp/musen/list?ST=1&OF=2&DA=1&OW=AT&SK=2&DC=1&SC=1&MA=${encodeURIComponent(call)}`;
  let licQth="";
  try {
    const response = UrlFetchApp.fetch(url);
    const data = JSON.parse(response.getContentText());
    
    if (data && data.musen && data.musen.length > 0) {
      const musenInfo = data.musen[0].detailInfo;
      const radioSpec1 = musenInfo.radioSpec1;
      const radioEquipmentLocation = musenInfo.radioEuipmentLocation;

// 必要なデータを返す
      licQth=`${radioSpec1} ${radioEquipmentLocation}`;
    } else {
      liqQth= "No data";
    }
  } catch (error) {
    licQth="Error!";
  }

function Set(hiduke,jikoku,jikokuE,call,callRes,hisRST,myRST,waveType,freq,power,biko,qslS,qslR,qra,page, itemsPerPage) {

let spreadSheet = SpreadsheetApp.openById('1jdqJ9Eq4KrBpYczGE-MdabngvJ1wDl9mdm8rS0UtL5o');
   let sheet = spreadSheet.getSheetByName('シート1');

let lastrow = sheet.getLastRow();

sheet.getRange(lastrow+1, 1).setValue(hiduke);
   sheet.getRange(lastrow+1, 2).setValue(jikoku);
   sheet.getRange(lastrow+1, 3).setValue(jikokuE);
   sheet.getRange(lastrow+1, 4).setValue(call);
   sheet.getRange(lastrow+1, 5).setValue(callRes);
   sheet.getRange(lastrow+1, 6).setValue(hisRST);
   sheet.getRange(lastrow+1, 7).setValue(myRST);
   sheet.getRange(lastrow+1, 8).setValue(waveType);
   sheet.getRange(lastrow+1, 9).setValue(freq);
   sheet.getRange(lastrow+1, 10).setValue(power);
   sheet.getRange(lastrow+1, 11).setValue(biko);
   sheet.getRange(lastrow+1, 12).setValue(qslS);
   sheet.getRange(lastrow+1, 13).setValue(qslR);
   sheet.getRange(lastrow+1, 14).setValue(qra);

//return "送信済み"

return LoadPage(page, itemsPerPage);
  }

function LoadPage(page, itemsPerPage) {
  let spreadSheet = SpreadsheetApp.openById('1jdqJ9Eq4KrBpYczGE-MdabngvJ1wDl9mdm8rS0UtL5o');
  let sheet = spreadSheet.getSheetByName('シート1');
  let lastrow = sheet.getLastRow();
  let startRow = Math.max(lastrow - page * itemsPerPage, 1);
  let endRow = Math.max(startRow - itemsPerPage + 1, 1);
　let totalPages = Math.ceil(lastrow / itemsPerPage);

let data = [];
  
  for (let i = startRow; i >= endRow; i--) {
    data.push({
      hiduke: Utilities.formatDate(new Date(sheet.getRange(i, 1).getValue()), "Asia/Tokyo", "yyyy/MM/dd"),
      jikoku: Utilities.formatDate(new Date(sheet.getRange(i, 2).getValue()), "Asia/Tokyo", "HH:mm"),
      jikokuE: Utilities.formatDate(new Date(sheet.getRange(i, 3).getValue()), "Asia/Tokyo", "HH:mm"),
      call: sheet.getRange(i, 4).getValue(),
      callRes: sheet.getRange(i, 5).getValue(),
      hisRST: sheet.getRange(i, 6).getValue(),
      myRST: sheet.getRange(i, 7).getValue(),
      waveType: sheet.getRange(i, 8).getValue(),
      freq: sheet.getRange(i, 9).getValue(),
      power: sheet.getRange(i, 10).getValue(),
      biko: sheet.getRange(i, 11).getValue(),
      qslS: sheet.getRange(i, 12).getValue(),
      qslR: sheet.getRange(i, 13).getValue(),
      qra: sheet.getRange(i, 14).getValue()
    });
  }

return { data: data ,totalPages:totalPages};
}

function uploadAdifData(adifData, page, itemsPerPage) {
  const spreadSheetId = '1jdqJ9Eq4KrBpYczGE-MdabngvJ1wDl9mdm8rS0UtL5o';
  const sheetName = 'シート1';

let spreadSheet = SpreadsheetApp.openById(spreadSheetId);
  let sheet = spreadSheet.getSheetByName(sheetName);

// ADIFデータを行ごとに分割
  const lines = adifData.trim().split('\n');

lines.forEach(line => {
    const data = parseAdifLine(line);
    if (data) {
      const lastRow = sheet.getLastRow() + 1;

const utcDate = new Date(data.qso_date.substring(0, 4), data.qso_date.substring(4, 6) - 1, data.qso_date.substring(6, 8));
      const utcTime = data.time_on.match(/.{1,2}/g);
      utcDate.setHours(utcTime[0]);
      utcDate.setMinutes(utcTime[1]);
      utcDate.setSeconds(0);

const jstDate = new Date(utcDate);
      jstDate.setHours(jstDate.getHours() + 9);

// JSTの日付と時刻を計算
      const hiduke = `${jstDate.getFullYear()}/${('0' + (jstDate.getMonth() + 1)).slice(-2)}/${('0' + jstDate.getDate()).slice(-2)}`;
      const jikoku = `${('0' + jstDate.getHours()).slice(-2)}:${('0' + jstDate.getMinutes()).slice(-2)}`;

// スプレッドシートにデータを挿入
      sheet.getRange(lastRow, 1).setValue(hiduke);
      sheet.getRange(lastRow, 2).setValue(jikoku);
      sheet.getRange(lastRow, 3).setValue(''); // jikokuE
      sheet.getRange(lastRow, 4).setValue(data.call);
      sheet.getRange(lastRow, 5).setValue(''); // callRes
      sheet.getRange(lastRow, 6).setValue(data.rst_rcvd);
      sheet.getRange(lastRow, 7).setValue(data.rst_sent);
      sheet.getRange(lastRow, 8).setValue(data.mode);
      sheet.getRange(lastRow, 9).setValue(data.freq);
      sheet.getRange(lastRow, 10).setValue(''); // power
      sheet.getRange(lastRow, 11).setValue(''); // biko
      sheet.getRange(lastRow, 12).setValue(''); // qslS
      sheet.getRange(lastRow, 13).setValue(''); // qslR
      sheet.getRange(lastRow, 14).setValue(''); // qra
    }
  });

return LoadPage(page, itemsPerPage);
}

index.htmlは以下のようなものです。*******************************************************

<html>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <head>
    <base target="_top">
      <script src="https://code.jquery.com/jquery-3.6.1.slim.min.js"  integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA="  crossorigin="anonymous">
      </script>
       <style>
    table {
      border-collapse: collapse; /* 枠線を1本にする */
      margin: auto;
      border: 1px solid black; /* テーブル全体の枠線 */
    }
    th, td {
      border: 1px solid black; /* 各セルの枠線 */
      padding: 2px;
      text-align: center;
    }
    #callChekResp {
      color:red;
    }
    fieldset {
  border: none; /* 枠線を消す */
}

/* PC向けのデザイン */
body {
  font-size: 24px;
  margin: 2px;

}

input,select,button {
     font-size:20px;
      margin: 1px;
     
  }

table,#pagination {
       font-size:18px;
  }

.for-pc {
    display: block;
  }
  .for-mobile {
    display: none;
  }

/* スマートフォン向けのデザイン */
@media (max-width: 1100px) {
  body {
    font-size: 40px;
    margin: 2px;

}

input,select,button {
     font-size:40px;
      margin: 1px;
      
  }
      table,#pagination,#prevPage,#nextPage {
       font-size:11px;
  }
  .special-item {
  display: block; /* 改行が適用される */
 }
  
    .for-pc {
    display: none;
  }
  .for-mobile {
    display: block;
  }
}
 </style>
</head>
  <body>
    <center>
   <div >   
    <fieldset>
     <input type="text" id="hiduke" value="" style="width: 250px;">
     <input type="text" id="jikoku" value="" style="width: 180px;">
      <button id='Start' onclick="StartSave()" >始</button>
           <input type="text" id="jikokuE" value="" style="width: 180px;">
     <button id='End' onclick="EndSave()" >終</button>  
    </fieldset>

<fieldset>    
  
     CALL<input type="text" id="call" value="" style=" text-transform: uppercase;width: 250px;">
     <span id="licQth"></span>
     <button id='callCheck' onclick="CallCheck()" >検索</button>
      <span id='callChekResp'></span><br>
     
      JCC<input type="text" id="jcc" value="" style=" text-transform: uppercase;width: 250px;">
     <span id="jccR"></span>
     <button id='jccCheck' onclick="JccCheck()" >JCC</button>
        <table id="myTable">
      <thead>
       <tr>
         <th>Date</th>
         <th>Call</th>
         <th>Type</th>
          <th>Freq</th>
         <th>Remarks</th>
         <th>Qra</th>
      </tr>
      </thead>
       <tbody>
         
       </tbody>
      </table>
     </fieldset>

<div id="pagination">
        <button id="prevPage" onclick="loadPage(currentPage - 1)">前へ</button>
        <span id="pageNumber">ページ 1</span>
        <button id="nextPage" onclick="loadPage(currentPage + 1)">次へ</button>
      </div><br>

<div class="for-pc">
      <table id="dataTable" class="logTable">
        <thead>
          <tr>
            <th>Date</th>
            <th>Time(始)</th>
            <th>TIme(終)</th>
            <th>Call</th>
            <th>呼/応</th>
            <th>HisRST</th>
            <th>MyRST</th>
            <th>Type</th>
            <th>Freq.</th>
            <th>Power</th>
            <th>備考</th>
            <th>QSL(S)</th>
            <th>QSL(R)</th>
            <th>QRA</th>
          </tr>
        </thead>
        <tbody id="dataBody">
          
        </tbody>
      </table>
      <button id="sheetLink" onclick="sheetLink()">シートへ</button>
      <br>ADIFファイルのアップロード:
  <input type="file" id="adifFile" accept=".adi" />
      </div>

</div>

</center>
  </body>
</html>

document.getElementById('call').addEventListener('input', function() {
      this.value = this.value.toUpperCase();
  });

document.getElementById('call').addEventListener('focus', function() {
document.getElementById('myTable').style.display = 'none';
$('#callChekResp').text("");
  });

document.getElementById('adifFile').addEventListener('change', handleFileUpload);

window.onload =   function(){  
document.getElementById('myTable').style.display = 'none';
loadPage(currentPage);
let today=new Date();

$('#hiduke').val(formatDate_dateOnly(today));
$('#jikoku').val(formatDate_jikoku(today));
$('#hisRST').val('59');
$('#myRST').val('59');

const waveTypes = ['SSB', 'FT8', 'FM', 'CW', 'AM'];
waveTypes.forEach(type => {
    $('#waveType').append($('<option>').html(type).val(type));
});

//  $('#callRes').append($('<option>').html('呼').val('Call'));
 // $('#callRes').append($('<option>').html('応').val('Res'));

const callResOptions = [
  { label: 'CQ(R)', value: 'CQ(R)' },
  { label: 'Call(R)', value: 'Call(R)' },
  { label: 'Test', value: 'Test' },
  { label: 'CQ(No)', value: 'CQ(No)' },
  { label: 'Call(No)', value: 'Call(No)' }
];

callResOptions.forEach(option => {
  $('#callRes').append(
    $('<option>').html(option.label).val(option.value)
  );
});

$('#qslS').append($('<option>').html('No').val('NoQSL'));
  $('#qslS').append($('<option>').html('送').val('Send'));   
  
  $('#qslR').append($('<option>').html('__').val('__'));
  $('#qslR').append($('<option>').html('受').val('Rcvd'));

}

function formatDate_jikoku(dt) {
  var y = dt.getFullYear();

var h=('00' + dt.getHours()).slice(-2);
  var mi=('00' + dt.getMinutes()).slice(-2);
  return (h+':'+mi);
}

function formatDate_dateOnly(dt) {
  var y = dt.getFullYear();
  var m = ('00' + (dt.getMonth()+1)).slice(-2);
  var d = ('00' + dt.getDate()).slice(-2);  
  return (y + '/' + m + '/' + d);
}

function StartSave() {
  var now = new Date();
  $('#jikoku').val(formatDate_jikoku(now));
}

function EndSave() {
  var now = new Date();
  $('#jikokuE').val(formatDate_jikoku(now));
}

function JccCheck() {

let jcc=$('#jcc').val();          
      google.script.run.withSuccessHandler(onSuccessJ).withFailureHandler(onFailure).JccCheck(jcc); 
  }

function onSuccessJ(res){
   
   if(res.data.length>0){
   $('#jccR').text(res.data);
  }else{
   $('#jccR').text("該当jcc/gはありません");
  }
  
  }

function CallCheck() {

let call=$('#call').val();          
      google.script.run.withSuccessHandler(onSuccessC).withFailureHandler(onFailure).CallCheck(call); 
  }

function onSuccessC(res){
   // res は JSON 形式の文字列と仮定
   let rdata= JSON.parse(res);  // もし res が文字列ならパースする
  let data =rdata.data;
  
  $('#licQth').text(rdata.licQth);

// テーブルの tbody を取得
  let tbody = $('#myTable tbody');
  
  // tbody の内容をクリア（新しいデータを追加する前に）
  tbody.empty();

if(data.length>0){
   document.getElementById('myTable').style.display = 'table';
  // data は複数の行データの配列と仮定
  data.forEach(item => {
    // 新しい行を作成
    let row = $('<tr>');

// 各列のデータを追加
    row.append('<td>' + item.col1 + '</td>');
    row.append('<td>' + item.col4 + '</td>');
     row.append('<td>' + item.col8 + '</td>');
    row.append('<td>' + item.col9 + '</td>');
    row.append('<td>' + item.col11 + '</td>');
    row.append('<td>' + item.col14 + '</td>');
    // 行を tbody に追加
    tbody.append(row);
  });
 }else{
   $('#callChekResp').text("該当局はありません");
 }
  
  }

function Enter() {
        let hiduke =$('#hiduke').val();
         let jikoku =$('#jikoku').val();
         let jikokuE =$('#jikokuE').val();
         let call=$('#call').val();
            let callRes =$('#callRes').val();
            let hisRST =$('#hisRST').val();
            let myRST=$('#myRST').val();
             let waveType =$('#waveType').val();
           let freq =$('#freq').val();
            let power =$('#power').val();
            let biko =$('#biko').val();
            let qslS=$('#qslS').val();
            let qslR=$('#qslR').val();
            let qra=$('#qra').val();

if(call==""){
               $('#callChekResp').text("コールサインを入力してください");
            }else{
                 
                    google.script.run.withSuccessHandler(onSuccessL).withFailureHandler(onFailure).Set(hiduke,jikoku,jikokuE,call,callRes,hisRST,myRST,waveType,freq,power,biko,qslS,qslR,qra,currentPage,itemsPerPage); 
            }   
}
  function onSuccess(res){
    $('#msg').text(res);
  }
      // ページのデータをロードする関数
      function loadPage(page) {
        currentPage = page;  
        google.script.run.withSuccessHandler(onSuccessL).withFailureHandler(onFailure).LoadPage(page, itemsPerPage);
        $('#pageNumber').text('ページ ' + (currentPage+1));
      }

function updatePaginationButtons(totalPages) {
    // 最初のページなら "prevButton" を無効化
    if (currentPage === 0) {
        $('#prevPage').prop('disabled', true);
    } else {
        $('#prevPage').prop('disabled', false);
    }

// 最後のページなら "nextButton" を無効化
    if (currentPage === totalPages - 1) {
        $('#nextPage').prop('disabled', true);
    } else {
        $('#nextPage').prop('disabled', false);
    }
　　}

// レスポンスデータを処理
      function onSuccessL(res) {
         totalPages=res.totalPages;
         updatePaginationButtons(totalPages);
        let data = res.data;
        let tableBody = $('#dataBody');
        tableBody.empty(); // テーブルをリセット
                let tableBody2 = $('#dataBody2');
        tableBody2.empty(); // テーブルをリセット

data.forEach(row => {
          tableBody.append(`
            <tr>
              <td>${row.hiduke}</td>
              <td>${row.jikoku}</td>
              <td>${row.jikokuE}</td>
              <td>${row.call}</td>
              <td>${row.callRes}</td>
              <td>${row.hisRST}</td>
              <td>${row.myRST}</td>
              <td>${row.waveType}</td>
              <td>${row.freq}</td>
              <td>${row.power}</td>
              <td>${row.biko}</td>
              <td>${row.qslS}</td>
              <td>${row.qslR}</td>
              <td>${row.qra}</td>
            </tr>
          `);
          tableBody2.append(`
            <tr>
              <td>${row.hiduke}</td>
              <td>${row.call}</td>
              <td>${row.waveType}</td>
              <td>${row.freq}</td>
              <td>${row.biko}</td>
              <td>${row.qra}</td>
            </tr>
          `);
        });
        const lastRowL = data[0];
        $('#callRes').val(lastRowL.callRes);
        $('#waveType').val(lastRowL.waveType);
        $('#freq').val(lastRowL.freq);
        $('#power').val(lastRowL.power);
      }
      // エラーハンドリング
      function onFailure(res) {
        $('#msg').text('データの取得に失敗しました: ' + res);
      }
    
function sheetLink(){
  window.open('https://docs.google.com/spreadsheets/d/1jdqJ9Eq4KrBpYczGE-MdabngvJ1wDl9mdm8rS0UtL5o/edit?gid=0#gid=0', '_blank');
}
        
function handleFileUpload(event) {
      const file = event.target.files[0]; // 選択されたファイル
      if (!file) {
        alert("ファイルが選択されていません！");
        return;
      }

const reader = new FileReader();
      reader.onload = function(e) {
        const adifData = e.target.result;
        sendDataToServer(adifData);
      };
      reader.readAsText(file, "UTF-8");
    }

// Google Apps Script にデータを送信
    function sendDataToServer(adifData) {
      google.script.run
        .withSuccessHandler(() => alert("アップロード成功！"))
        .withFailureHandler(err => alert("エラーが発生しました: " + err.message))
        .uploadAdifData(adifData, 1, 10); // ページ番号と表示件数は適宜変更
    }

</script>

※追加情報：wsjt-xのログをADIFデータに変換するツールをc#でつくり（https://github.com/gh6141/adifCreate.git)、そのADIFをアップロードできるようにしてみた。FT8のログ記録がだいぶスムーズになった。QRZ.comやeQSLへのアップロードにも使えそうだ。

　wsjt-xにADIFで保存する機能もあったが、うっかり保存を忘れてしまうことが多かったので、ログからも日付・時刻を指定してそれ以降のデータを抽出できるようにツールを作ってみた。

2024年4月19日金曜日

reactを使ってみた

sudo npx create-react-app react-sample --template typescript

では、だめで、sudoなしだと、うまくいくようだった。

node関連のインストールを行うが、バージョンが合わないといろいろ設定に手間がかかるようだった。

なお、警告が出たので

npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

npm install tar@6 -gtar　としたら、解決

Next.jsのほうは、細かい変更もあるらしく書籍の情報だと動かなかったりする。

pagesフォルダがappフォルダに変わってルール違っていたりする。

現在進行形の技術なので、ネットの最新情報も大事なようだ。

　　pages/sample.tsx ではなく app/sample/page.tsx で/sampleのURLに対応

それから、getStaticProps 相応のものは不要らしい。コンポーネントの中に直接書いてもOkになったらしい。

　また、動的ページの場合　localhost:3000/posts/**ここの部分**

ならばapp/posts/[id]/page.tsxの中身は

　　export default function Test({ params }: { params: { id: string } }) {

return (

<div>

<p>Test: {params.id}</p>

</div>

);

}としてやれば、**ここの部分**が、idに取り込まれ表示される。

2023年11月11日土曜日

和文モールス読み取り練習　 HTML5で

以前作ったHTML5によるCW練習ソフトを少し改良した。ランダム再生できるようにしてみた。

Mlearn.html　←公開しています。 <ｔｅｘｔａｒｅａ></ｔｅｘｔａｒｅａ>のタグは半角にする必要あります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Web Audio Beep Morse Code</title>
    <style>

#texta {
    font-size: 25px;

}
  
   /* Optional: Style the buttons */
    .surrounding-char {
      cursor: pointer;
      padding: 2px;
      margin: 0px;
      border: 1px solid #ccc;
      border-radius: 2px;
      background-color: #dcdcdc;
    }
    
 　  .surrounding-none {
 　    border: 1px solid#000;
      background-color: #000000;
    }

*, ::before, ::after { box-sizing: border-box; }
html { font-family: sans-serif; }

.wPractice {
      font-size :30px;
  }
    </style>
 
  </head>
  <body>

<h1>和文 Morse Code</h1>

<div>表示された文字をクリックして符号音を確認できます。
テキストボックス内の文字や単語は、編集可能で実行ボタンクリックで各自のＰＣに保存（クッキーとして）されます。</div>
<input type="button" value="一時停止" onclick="pauseMorse() title="spaceでも停止・再開可">
<input type="button" value="再開" onclick="resumeMorse()">
<p>

<ｔｅｘｔａｒｅａ id="txtsonomama" style="width:400px; height:120px;"></ｔｅｘｔａｒｅａ>
   <input type="button" value="テキスト（そのまま）" onclick="sonomama('txtsonomama');">　<br>

<ｔｅｘｔａｒｅａ id="txtsonomama2" style="width:400px; height:120px;"></ｔｅｘｔａｒｅａ>
   <input type="button" value="テキスト（そのまま）" onclick="sonomama('txtsonomama2');">　<br>

<input type="button" value="ランダム(64文字)" onclick="random();">　<input type="button" value="リプレイ" onclick="replay59()"><br>
   <input type="text" value="40" id="mojisu">文字<input type="button" value="ランダム" onclick="randomx()"> <input type="button" value="リプレイ" onclick="replayx()"><br>
   <input type="text" value="ヲ12ク3?ミツセヤ°" placeholder="10文字以上入力" id="tbox">からランダムに<input type ="button" value="10文字抽出" onclick="sitei()">
   　<input type="button" value="リプレイ" onclick="replay()"><br>
   <input type="text" value="テンキ　アリガトウゴザイマス　コンニチハ　デンパ　コンデイシヨン　オハヨウゴザイマス　マタヨロシクオネガイシマス" id="wbox" style="width: 400px;">
   <input type ="button" value="単語練習" onclick="word()" class="wPractice">
   <br><input type="button" value="単語練習の各文字数の確認" onclick="checkMoji()"><br>
   <span id="check"></span>
   <br>
  <label for="speed">Speed (0.4~1):</label><input type="text" id="speed" name="speed"  size="5" value="0.6"><br>
    <label for="speedControl">WPMでスピードを変更:</label>
    <input type="number" id="speedControl" min="5" max="40" value="20">
</p>

参照させていただいたサイト:<a href="https://neos21.net/blog/2021/03/30-01.html">https://neos21.net/blog/2021/03/30-01.html</a><br>
<a href="https://rasp.cld9.work/py/MLearn2.html">欧文練習</a>
  </body>

}}
  
  const rmv=()=>　{ 
       var myDiv = document.getElementById("texta");
    var lastSpan = myDiv.lastElementChild; // 最後の子要素を取得

if (lastSpan) {
      // 最後の子要素が存在する場合にのみ削除
      myDiv.removeChild(lastSpan);
    }
  }
  
  
  
  
  function insertSurroundingChar(char) {
      if(char=='＊'){
           Promise.resolve().then(cwf('＊')).then(rmv);
      }else{
           Promise.resolve().then(cwf(char)).then(rmv);
      }

}

const chc= (moji)=> Promise.resolve().then(short4Gap).then(()=>{document.getElementById('texta').innerHTML=document.getElementById('texta').innerHTML+mh(moji);});

const ch = async (moji, ...tasks) => {
  for (let i = 0; i < tasks.length; i++) {
    await tasks[i](); // タスクを実行

if (i < tasks.length - 1) {
        await interGap(); // 最後以外は interGap
    } else {
        await shortGap(); // 最後だけ shortGap
    }
  }
   document.getElementById('texta').innerHTML += mh(moji);
};

const cwf=(moji)=> {
  　 switch (moji) {
  　  case 'E':
      case 'e':
      case 'ヘ':
         return ()=>ch(moji,dit);
         break;
      case 'T':
      case 't':
      case 'ム':
         return ()=>ch(moji,dah);
         break;
      case 'A':
      case 'a':
      case 'イ':
      case 'ィ':
         return ()=> ch(moji,dit,dah);
         break;
      case 'N':
      case 'n':
      case 'タ':
         return () => ch(moji,dah,dit);
         break;
      case 'I':
      case 'i':
      case '\"':
      case '＊':
         return ()=>ch(moji,dit,dit);
         break;
      case 'M':
      case 'm':
      case 'ヨ':
      case 'ョ':
         return ()=>ch(moji,dah,dah);
         break;
      case 'S':
      case 's':
      case 'ラ':
         return ()=>ch(moji,dit,dit,dit);
         break;
      case 'U':
      case 'u':
      case 'ウ':
         return ()=>ch(moji,dit,dit,dah);
         break;
      case 'W':
      case 'w':
      case 'ヤ':
      case 'ャ':
         return ()=>ch(moji,dit,dah,dah);
         break;
      case 'K':
      case 'k':
      case 'ワ':
         return ()=>ch(moji,dah,dit,dah);
         break;
      case 'R':
      case 'r':
      case 'ナ':
         return ()=>ch(moji,dit,dah,dit);
         break;
      case 'G':
      case 'g':
      case 'リ':
         return ()=>ch(moji,dah,dah,dit);
         break;
      case 'O':
      case 'o':
      case 'レ':
         return ()=>ch(moji,dah,dah,dah);
         break;
      case 'D':
      case 'd':
      case 'ホ':
         return ()=>ch(moji,dah,dit,dit);
         break;
      case 'コ':
         return ()=>ch(moji,dah,dah,dah,dah);
         break;
      case 'J':
      case 'j':
      case 'ヲ':
         return ()=>ch(moji,dit,dah,dah,dah);
         break;
      case 'ノ':
         return ()=>ch(moji,dit,dit,dah,dah);
         break;
      case 'V':
      case 'v':
      case 'ク':
         return ()=>ch(moji,dit,dit,dit,dah);
         break;
      case 'H':
      case 'h':
      case 'ヌ':
         return ()=>ch(moji,dit,dit,dit,dit);
         break;
      case 'X':
      case 'x':
      case 'マ':
         return ()=>ch(moji,dah,dit,dit,dah);
         break;
      case 'B':
      case 'b':
      case 'ハ':
         return ()=>ch(moji,dah,dit,dit,dit);
         break;
      case 'Q':
      case 'q':
      case 'ネ':
         return ()=>ch(moji,dah,dah,dit,dah);
         break;
      case 'Z':
      case 'z':
      case 'フ':
         return ()=>ch(moji,dah,dah,dit,dit);
         break;
      case 'ソ':
         return ()=>ch(moji,dah,dah,dah,dit);
         break;
      case 'Y':
      case 'y':
      case 'ケ':
         return ()=>ch(moji,dah,dit,dah,dah);
         break;
      case 'P':
      case 'p':
      case 'ツ':
      case 'ッ':
         return ()=>ch(moji,dit,dah,dah,dit);
         break;
      case 'C':
      case 'c':
      case 'ニ':
         return ()=>ch(moji,dah,dit,dah,dit);
         break;
      case 'ロ':
         return ()=>ch(moji,dit,dah,dit,dah);
         break;
      case 'L':
      case 'l':
      case 'カ':
         return ()=>ch(moji,dit,dah,dit,dit);
         break;
      case 'F':
      case 'f':
      case 'チ':
         return ()=>ch(moji,dit,dit,dah,dit);
         break;
      case 'サ':
         return ()=>ch(moji,dah,dit,dah,dit,dah);
         break;
      case 'シ':
         return ()=>ch(moji,dah,dah,dit,dah,dit);
         break;
      case 'ス':
         return ()=>ch(moji,dah,dah,dah,dit,dah);
         break;
      case 'セ':
         return ()=>ch(moji,dit,dah,dah,dah,dit);
         break;
      case 'ル':
         return ()=>ch(moji,dah,dit,dah,dah,dit);
         break;
      case 'ァ':
      case 'ア':
         return ()=>ch(moji,dah,dah,dit,dah,dah);
         break;
      case 'エ':
         return ()=>ch(moji,dah,dit,dah,dah,dah);
         break;
      case 'オ':
         return ()=>ch(moji,dit,dah,dit,dit,dit);
         break;
      case 'ヒ':
         return ()=>ch(moji,dah,dah,dit,dit,dah);
         break;
      case 'ユ':
         return ()=>ch(moji,dah,dit,dit,dah,dah);
         break;
      case 'ュ':
         return ()=>ch(moji,dah,dit,dit,dah,dah);
         break;
      case 'キ':
         return ()=>ch(moji,dah,dit,dah,dit,dit);
         break;
      case 'ミ':
         return ()=>ch(moji,dit,dit,dah,dit,dah);
         break;
      case 'ン':
         return ()=>ch(moji,dit,dah,dit,dah,dit);
         break;
      case 'テ':
         return ()=>ch(moji,dit,dah,dit,dah,dah);
         break;
      case 'ト':
         return ()=>ch(moji,dit,dit,dah,dit,dit);
         break;
      case '/':
      case '／':
      case 'モ':
         return ()=>ch(moji,dah,dit,dit,dah,dit);
         break;
      case 'メ':
         return ()=>ch(moji,dah,dit,dit,dit,dah);
         break;
      case '」':
         return ()=>ch(moji,dit,dah,dit,dah,dit,dit);
         break;
      case '、':
         return ()=>ch(moji,dit,dah,dit,dah,dit,dah);
         break;
      case '(':
      case '（':
         return ()=>ch(moji,dah,dit,dah,dah,dit,dah);
         break;
      case ')':
      case '）':
         return ()=>ch(moji,dit,dah,dit,dit,dah,dit);
         break;
      case '?':
         return ()=>ch6(moji,dit,dit,dah,dah,dit,dit);
         break;
      case '@':
         return ()=>ch(moji,dit,dah,dah,dit,dah,dit);
         break;
      case 'ヰ':
         return ()=>ch(moji,dit,dah,dit,dit,dah);
         break;
      case 'ヱ':
         return  ()=>ch(moji,dit,dah,dah,dit,dit);
         break;
      case '°':
         return ()=>ch(moji,dit,dit,dah,dah,dit);
         break;
      case 'ー':
         return ()=>ch(moji,dit,dah,dah,dit,dah);
         break;
      case '1':
         return ()=>ch(moji,dit,dah,dah,dah,dah);
         break;
      case '2':
         return ()=>ch(moji,dit,dit,dah,dah,dah);
         break;
      case '3':
         return ()=>ch(moji,dit,dit,dit,dah,dah);
         break;
      case '4':
         return ()=>ch(moji,dit,dit,dit,dit,dah);
         break;
      case '5':
         return ()=>ch(moji,dit,dit,dit,dit,dit);
         break;
      case '6':
         return ()=>ch(moji,dah,dit,dit,dit,dit);
         break;
      case '7':
         return ()=>ch(moji,dah,dah,dit,dit,dit);
         break;
      case '8':
         return ()=>ch(moji,dah,dah,dah,dit,dit);
         break;
      case '9':
         return ()=>ch(moji,dah,dah,dah,dah,dit);
         break;
      case '0':
         return ()=>ch(moji,dah,dah,dah,dah,dah);
         break;
      case '　':
         return ()=>chc(" ");
         break;
      case ' ':
         return ()=>chc(" ");
         break;
      case '。':
         return ()=>chc(" ");
         break;
      case '\n':
         return ()=>chc("\n");
         break;

};
  　}
  
    openc=()=>{ audioContext.close();   audioContext = new window.AudioContext();}

const random=() =>{
      speed = document.getElementById("speed").value;
      saveValue();
      const inputString = 'イロハニホヘトチリヌルヲワカヨタレソツネナラムウノオクヤマケフコエテアサキユメミシヒモセスン?ー°1234567890」、＊（）';
      rcsx59 =insertSpaces(getRandomChars(inputString, 64),5).map(char => char.replace(/＊/g, '\"')); 
        promiseResolve(rcsx59)
 
    }
    
    const randomx=() =>{
      saveValue();
      speed = document.getElementById("speed").value;
      const mojisu = document.getElementById("mojisu").value;
      
      const inputString = 'イロハニホヘトチリヌルヲワカヨタレソツネナラムウノオクヤマケフコエテアサキユメミシヒモセスン?ー°1234567890」、＊（）';
      rcsxx = getRandomChars(inputString, Number(mojisu)).map(char => char.replace(/＊/g, '\"')); 
        promiseResolve(rcsxx)
 
    }

const replay59= ()=>{

speed = document.getElementById("speed").value;
           promiseResolve(rcsx59);
         }
         
  const replayx= ()=>{
      speed = document.getElementById("speed").value;
       promiseResolve(rcsxx);
         }
         
  const sitei=() =>{
   saveValue();
      speed = document.getElementById("speed").value;
        rcsx = getRandomChars(document.getElementById('tbox').value, 10).map(char => char.replace(/＊/g, '\"')); 
     promiseResolve(rcsx)
   }
   
   const sonomama=(id) =>{
   saveValue();
      speed = document.getElementById("speed").value;
      rcsx = getArray(document.getElementById(id).value).map(char => char.replace(/＊/g, '\"')); 
     promiseResolve(rcsx)
   }

const word=() =>{
    saveValue();
      speed = document.getElementById("speed").value;
        rcsx = getRandomWordsAndCharacters(document.getElementById('wbox').value).map(char => char.replace(/＊/g, '\"')); 
     promiseResolve(rcsx)
   }

runPromises(promises);

} 
    
  function checkMoji() {
   const result = countJapaneseCharacters(document.getElementById('wbox').value);
   var tmp="";
   for (const [character, count] of Object.entries(result)) {
    tmp=tmp+`${character}: ${count}`;
   }
   document.getElementById('check').textContent=tmp;
  }

function getArray(inputString) {
  const rcs = [];

for (const char of inputString) {
    const decomposed = decomposeDiacritics(char); // 濁音・半濁音は2文字配列になる
    rcs.push(...decomposed); // 配列を展開して rcs に追加
  }
 
  return rcs;
}

function getRandomChars(inputString, count) {
   if (inputString.length < count) {
    console.error('指定された文字列に十分な文字が含まれていません。');
    return null;
   }

const rcs = [];
   const availableIndices = Array.from({ length: inputString.length }, (_, index) => index);

for (let i = 0; i < count; i++) {
    const randomIndex = Math.floor(Math.random() * availableIndices.length);
    const selectedIndex = availableIndices.splice(randomIndex, 1)[0];
    const decomposed = decomposeDiacritics(inputString[selectedIndex]); // 濁音・半濁音は2文字配列になる
    rcs.push(...decomposed); // 配列を展開して rcs に追加
   
   }

return rcs;
}

function decomposeDiacritics(char) {
  const diacriticMap = {
    "ガ": ["カ", "\""],
    "ギ": ["キ", "\""],
    "グ": ["ク", "\""],
    "ゲ": ["ケ", "\""],
    "ゴ": ["コ", "\""],
    "ザ": ["サ", "\""],
    "ジ": ["シ", "\""],
    "ズ": ["ス", "\""],
    "ゼ": ["セ", "\""],
    "ゾ": ["ソ", "\""],
    "ダ": ["タ", "\""],
    "ヂ": ["チ", "\""],
    "ヅ": ["ツ", "\""],
    "デ": ["テ", "\""],
    "ド": ["ト", "\""],
    "バ": ["ハ", "\""],
    "ビ": ["ヒ", "\""],
    "ブ": ["フ", "\""],
    "ベ": ["ヘ", "\""],
    "ボ": ["ホ", "\""],
    "パ": ["ハ", "°"],
    "ピ": ["ヒ", "°"],
    "プ": ["フ", "°"],
    "ペ": ["ヘ", "°"],
    "ポ": ["ホ", "°"]
  };
  
  return diacriticMap[char] || [char];
}

// ローカルストレージから値を取得してinput要素にセットする関数
 function setInitialValue() {
      const savedTxt = localStorage.getItem('savedTxt');
      if (savedTxt !== null) {
        document.getElementById('txtsonomama').value = savedTxt;
      }

const savedTxt2 = localStorage.getItem('savedTxt2');
      if (savedTxt2 !== null) {
        document.getElementById('txtsonomama2').value = savedTxt2;
      }
     
     
      const savedValue = localStorage.getItem('savedValue');
      if (savedValue !== null) {
        document.getElementById('wbox').value = savedValue;
      }

const savedMojisu= localStorage.getItem('savedMojisu');
      if (savedMojisu !== null) {
        document.getElementById('mojisu').value = savedMojisu;
      }

const savedTbox = localStorage.getItem('savedTbox');
      if (savedTbox !== null) {
        document.getElementById('tbox').value = savedTbox;
      }

const valueToSave = document.getElementById('wbox').value;
      localStorage.setItem('savedValue', valueToSave);

const valueToMojisu = document.getElementById('mojisu').value;
      localStorage.setItem('savedMojisu', valueToMojisu);

const valueToTbox = document.getElementById('tbox').value;
      localStorage.setItem('savedTbox', valueToTbox);

const valueToSpeed = document.getElementById('speed').value;
      localStorage.setItem('savedSpeed', valueToSpeed);
    　
    　const valueToSpeedC = document.getElementById('speedControl').value;
      localStorage.setItem('savedSpeedCO', valueToSpeedC);
    }
    
    
        // WPMの変更（スピード調整用）
const updateWPM = (newWPM) => {
    wpm = newWPM;
    unitTime = 570 / wpm / 50;
    document.getElementById('speed').value=unitTime;
};

document.getElementById('speedControl').addEventListener('change', (event) => {
    const newWPM = parseInt(event.target.value, 10);
    updateWPM(newWPM);
});
    
    // ロード時に初期値をセット
    setInitialValue();

function insertSpaces(inputString, interval) {
 // const chars = inputString.split(',');
  const chars=inputString;
  const result = [];

for (let i = 0; i < chars.length; i++) {
    result.push(chars[i]);
    if ((i + 1) % interval === 0 && i !== chars.length - 1) {
      result.push('　');
    }
  }

// return result.join(',');
 return result;
}

function countJapaneseCharacters(input) {
    const japaneseCharacters = [
        'ア', 'イ', 'ウ', 'エ', 'オ',
        'カ', 'キ', 'ク', 'ケ', 'コ',
        'サ', 'シ', 'ス', 'セ', 'ソ',
        'タ', 'チ', 'ツ', 'テ', 'ト',
        'ナ', 'ニ', 'ヌ', 'ネ', 'ノ',
        'ハ', 'ヒ', 'フ', 'ヘ', 'ホ',
        'マ', 'ミ', 'ム', 'メ', 'モ',
        'ヤ', 'ユ', 'ヨ',
        'ラ', 'リ', 'ル', 'レ', 'ロ',
        'ワ', 'ヲ', 'ン'
    ];

const countMap = {};

// Initialize the countMap with all characters set to 0
    japaneseCharacters.forEach(ch => countMap[ch] = 0);

// Count characters
    for (const ch of input) {
        if (countMap.hasOwnProperty(ch)) {
            countMap[ch]++;
        }
    }

return countMap;
}

function pauseMorse() {
    isPaused = true;
}

function resumeMorse() {
    isPaused = false;
}
    
    function togglePause() {
    isPaused = !isPaused; // 現在の状態を反転させる (trueならfalse、falseならtrue)
    console.log("isPaused:", isPaused);
}

window.addEventListener('keydown', (event) => {
    if (event.code === 'Space') {
        event.preventDefault();
        togglePause();
    }
});

</script>

</html>

※その後、再度、ChatGPTに２～３回質問したところ、以下の修正で、文字数を動的に変えることができるようになった。

const promiseResolve = (rcs) => {

const promises = rcs.map(rc => cwf(rc));

promises.push(() => document.getElementById('texta').innerHTML += "
");

promises.reduce((chain, promise) => chain.then(() => promise()), Promise.resolve());

}

※ver3で、設定保存できるように、また、単語練習もできるようにした。

※ver4で、WPMで設定できるようにした。

※その後、細々と変更追加（欧文にも対応しました。）まだ、リファクタリング必要なところはいろいろありそうですが。

※spaceキーで停止・再開可能にしました。

2022年12月22日木曜日

Gasで血圧記録

gasで即席でつくってみた。値を選択式にすると、もう少し使いやすかも。

<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://code.jquery.com/jquery-3.6.1.slim.min.js" integrity="sha256-w8CvhFs7iHNVUtnSP0YKEg00p9Ih13rlL9zGqvLdePA=" crossorigin="anonymous">
</script>
</head>
<body>
<div style="font-size:large;">
<input type="text" id="hiduke" value="" style="font-size:large;">
<input type="text" id="jikoku" value="" style="font-size:large;">
<br>High
<input type="text" id="high" value="" style="font-size:large;"><br>
Low
<input type="text" id="low" value="" style="font-size:large;"><br>
脈
<input type="text" id="myaku" value="" style="font-size:large;">
<button id='Enter' onclick="Enter()">保存</button>
<div id="msg"></div>
</div>
<div><a href="https://docs.google.com/spreadsheets/d/シートID/edit#gid=0">シート</a></div>
</body>
</html>
<script>
window.onload = function(){
let today=new Date();
$('#hiduke').val(formatDate_dateOnly(today));
$('#jikoku').val(formatDate_jikoku(today));
}

function formatDate_jikoku(dt) {
var y = dt.getFullYear();
var h=('00' + dt.getHours()).slice(-2);
var mi=('00' + dt.getMinutes()).slice(-2);
return (h+':'+mi);
}

function formatDate_dateOnly(dt) {
var y = dt.getFullYear();
var m = ('00' + (dt.getMonth()+1)).slice(-2);
var d = ('00' + dt.getDate()).slice(-2);
return (y + '/' + m + '/' + d);
}

function Enter() {
let hiduke =$('#hiduke').val();
let jikoku =$('#jikoku').val();
let high =$('#high').val();
let low =$('#low').val();
let myaku =$('#myaku').val();
google.script.run.withSuccessHandler(onSuccess).withFailureHandler(onFailure).Set(hiduke,jikoku,high,low,myaku);
}
function onSuccess(res){
$('#msg').text(res);
}
function onFailure(res){
$('#msg').text(res);
}

</script>

＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊

function doGet(e) {
  return HtmlService.createTemplateFromFile("index").evaluate();
}


function Set(hiduke,jikoku,high,low,myaku) {

  let spreadSheet = SpreadsheetApp.openById(シ－トID);
   let sheet = spreadSheet.getSheetByName('シート1');

   let lastrow = sheet.getLastRow();

   sheet.getRange(lastrow+1, 1).setValue(hiduke);
   sheet.getRange(lastrow+1, 2).setValue(jikoku);
   sheet.getRange(lastrow+1, 3).setValue(high);
   sheet.getRange(lastrow+1, 4).setValue(low);
   sheet.getRange(lastrow+1, 5).setValue(myaku);


   return "送信済み"
  }

2022年12月11日日曜日

GASによるグループウエア

グループウエアをGASで作ってみた。

データベースが使えないので、いろいろ制限があり大変だった。無料だから仕方ないとは思う。

回覧メッセージの未読チェック機能をスプレッドシートで、宛先の選択の工夫をJqueryで、という具合に。

表示遅い分少しでも、和らぐようにSPAにしてみた。

エクセルは、PCのGdriveリンクを共有で使うようにして、エクセルからスプレッドシートへの変換は、トリガーで毎分変更をチェックしながら行っている。

その他、文字修飾可能にすること、メッセージを２週間分に制限するため、自動削除機能をつけたこと。削除までの日数は、投稿者が選択できるようにしたこと。メッセージは、必要に応じて、GmailにPDFで送って、自分で保管もできるようにしたこと。

　等々、いろいろ対処したおかげで、完成まで数か月かかった。あと少し調整が必要かも。残念ながら、OSのせいか、自分のPCでは、C＃のツールチップによる未読お知らせ機能を入れようとしたが、なぜか反応しない。仕方ないので、画面はFormにして、透明度を時間とともに変えるような実装にした。また、GASで作ったサイトをWebAPIとして、C＃から読み取ろうとしたが、非常に面倒なのであきらめた。Gdriveにユーザーごとのファイルを作成して、それを経由して未読情報を、Gdriveの共有から読み取るようにしてみたらなんとかうまくいった。力技という感じだが、そもそもGASという言語を使っているので、このぐらいは仕方ないのでないかと思う。

2022年11月3日木曜日

jquery 動的にイベント追加

appnedした場合、動的なイベントの追加には、工夫がいるようだ。

$("親要素").on('click', '該当する要素', function(e){

var tmp=e.target.id;

});

のように利用できる。

ちなみに、以下の方法はだめだった。

$("該当する要素").change(function(e) {

var tmp=e.target.id;

});

2022年10月22日土曜日

GAS使ってグループの名前リストを作成

権限の関係でグループのEmaiアドレスは取得できても、名前が取得できないことがあるようだ。画面上では表示されているが、ダウンロードはEmaiのみ。ただし、Chromeで、「名前を付けて保存」＞ファイルの種類を「ウエブページ、完全」　を選択して保存すると、UTF8で全角文字できちんと保存されるので、面倒だが、このデータをGdriveに持って行って、GASでパースすることにした。

GASは、データを保存したいスプレッドシートに、スクリプトを作成する。この場合、Parseというライブラリの追加が必要。2022.7現在、ライブラリのIDは

1Mc8BthYthXx6CoIz90-JiSzSafVnT6U3t0z_W3hLTAX5ek4w0G_EIrNw

もっと簡単な方法がありそうだが、とりあえず、以下のスクリプトで、無事　Emailと名前のリストが取得できた。

function member_parse() {

var contents = DriveApp.getFolderById('ここにフォルダのID')
.getFilesByName('メンバーリスト.html')
.next()
.getBlob()
.getDataAsString("utf8");
//Logger.log(contents); let mList= new Array();
let eList= new Array(); names = Parser.data(contents).from('<div class="LnLepd">').to('</div>').iterate();
emails=Parser.data(contents).from('Sq3iG" href="mailto:').to('</a>').iterate(); for(nm of names){
mList.push(nm);
} var ci=0;
for(em of emails){
if (ci % 2 ==0){ eList.push(em.split('>')[1]);}
ci++;
}
//console.log(zip(eList,mList));
NameEmailList=zip(eList,mList); var sheet = SpreadsheetApp.openById('ここにスプレッドシートのID').getSheetByName('shokuin'); for (gyo of NameEmailList){
sheet.appendRow(gyo);
} } const zip = (...arrays) => {
const length = Math.min(...(arrays.map(arr => arr.length)))
return new Array(length).fill().map((_, i) => arrays.map(arr => arr[i]))

}

GASとスプレッドシートを組み合わせて、コードを書いていると、ちょうどエクセルのマクロを使っているような感覚になる。ちょっとした操作で、シートの動作が変わって、コードがうまく動かなくなることも。無料なので、手間はかかるのは仕方ない。半面、シートで実際のデータがどうなっているか、すぐ確認できるよさはある。

2022年1月10日月曜日

和文モールス受信練習

Javascriptで参考になるサイトがあったので、参考にさせていただき

それをもとに、受信練習ソフトをつくってみた。

https://rasp.cld9.work/py/MLearn.html

文字数が多くなると、フリーズしてしまうようだったので、適当なところに以下の処理を入れたところ、連続して再生できるようになった。

openc=()=>{ audioContext.close(); audioContext = new window.AudioContext();}

2021年9月26日日曜日

WebRTC　LAN用P2P

WebRTCをシグナリングサーバを使い、P2P通信を試してみた。Node.jsを使用。

Websocketの使い方に慣れてないため、苦労した。JSON.parseなど、エンコード関係が大変。

https://moewe-net.com/webrtc/p2p-single

https://dangerous-animal141.hatenablog.com/entry/2013/03/27/002818

Herokuに、HTMLとNode.jsを置いて、どのローカルネットワークでも、使えるようにしてみた。ビデオスタート、通信開始などスムーズにいくように、サンプルに少し手を入れてみた。

StreamデータはLan内のP2Pなので、わりとスムーズに通信できている。

Chromeではうまくいったが、Safariでうまくいかない。そこで、WindowsでiOSのsafariをデバッグする方法があった（うまく動作させるまでけっこう手がかかりましたが）ので、デバッグしたところ、peer.addStreamが古いらしく、peer.addTrackにする必要があることが判明。修正したところ、うまく動作しました。

https://qiita.com/massie_g/items/e1ba90637acb060772bb

**************signaling server**************
  var WebSocketServer = require("ws").Server
var http = require("http")
var express = require("express")

const {TextEncoder, TextDecoder} = require("util")

var app = express()
var port = process.env.PORT || 5000
app.use(express.static(__dirname + "/"))
var server = http.createServer(app)
server.listen(port)
console.log("http server listening on %d", port)

var wss = new WebSocketServer({server: server})
console.log("websocket server created")

wss.on("connection", function(ws) {
  console.log("websocket connection open")
   ws.on('message', function incoming(msg,flag) {
      wss.clients.forEach( (client)=>{
           if (isSame(ws, client)) {
               // let decodeS=new TextDecoder().decode(JSON.stringify(msg.data));
                console.log('- skip sender -'+msg);
               
            } else {
                client.send(msg,{binary:flag.binary});
               
                console.log('msg='+msg);
            }
      });
  });

ws.on("close", function() {
    console.log("websocket connection close")
  })
})

.outlined-button {
            background-color: #2196f3;
            border-radius: 1px;
            border: none;
            color: #fff;
            font-size: 24px;
            font-weight: 600;
            line-height: 26px;
            margin-left: 1px;
            outline: none;
            padding: 0 1px;
            text-align: center;
        }
        
        .setumei {
             font-size: 1vw;
              margin-left: 0.1vw;
            outline: none;
            padding: 0 0.1vw;
        }
    </style>
</head>
<body>
    <table width="100%" hight="70%"  >
        <tr>
            <td >
               <p style="font-size:2vw,text-align:center" title="両者のカメラをOnにすると、いずれか一方から接続できます。(LocalNetwork P2P専用)"><B>Webrtc For LAN</B> ver0.7β </p>
            </td>
            <td>
                  <button onclick="startVideo()" class="outlined-button" id="startB" >ビデオOn</button>
                  <button onclick="stopVideo()" class="outlined-button" id="stopB" >ビデオOff</button>
                  <label id="msgL"></label>
                  <button type="button" onclick="connect()" class="outlined-button" id="connectB" >接続</button>
                  <button type="button" onclick="hangUp()" class="outlined-button" id="hangupB" >切断</button> 
                  <input type="checkbox" id="echo"   name="echo" value="echo"  checked><label for="echo" title="スピーカの音量を下げるとハウリング防止になります。話すとき以外はマイクをオフにするのもいい方法です。" id="echo2" >エコー除去</label>
                  <input type="checkbox" id="videoflg"   name="videoflg" value="videoflg"  checked><label for="videoflg" title="画像を送信するかしないか設定できます" id="echo2" >カメラ</label>
                  <input type="checkbox" id="audioflg"   name="audioflg" value="audioflg"  checked><label for="audioflg" title="音声を送信するかしないか設定できます" id="echo2" >マイク</label>
            </td>
        </tr>
        <tr>
            <td colspan="2" width="100%">
                <table  width="100%">
                    <tr>
                        <td >
                            <div>
                                 <input type="checkbox" id="sosinhyoji"   name="sosinhyoji" value="sosinhyoji"  checked>
                                送信音声表示:<canvas width="20" height="20" id="canvas" title="自分のMICの音声が入っているか状況が確認できます">
                                  level meter
                                </canvas>
                            </div>
                            <div>
                                 <video id="local-video" autoplay control class="video-box-local" muted ></video>
                            </div>
                            <div>
                                <input type="text" id="sendtxt" name="sendtxt" size="15"><input id="sendbtn" type="button" value="送信" title="左欄に入力したメッセージを送信">
                            </div>
                            <div>
                               <ｔextarea cols="17" rows="10" id="txta"></ｔextarea> ←ｔをtに変更必要
                            </div>
                          
                        </td>
                        
                        <td style="width:75%">
                            
                              <video id="remote-video" autoplay control class="video-box-remote" ></video>
                        </td>
                    </tr>
                   
                </table>
                
            
            </td>
        </tr>
    </table>

var startB=document.getElementById("startB");
      var stopB=document.getElementById("stopB");
      var msgL=document.getElementById("msgL");
      var connectB=document.getElementById("connectB");
      var hangupB=document.getElementById("hangupB");
      var echoB=document.getElementById("echo");
      var echoB2=document.getElementById("echo2");
      
      var obj2=document.getElementById('txta');
      var stbyflg=false;
      var sosinhyojiflg=true;
      
      const canvas = document.querySelector('#canvas');
      const drawContext = canvas.getContext('2d');
      
      startB.style.display="inline";
      stopB.style.display="none";
      connectB.style.display="none";
      hangupB.style.display="none";
      echoB.style.display="inline";
      echoB2.style.display="inline";

RTCPeerConnection = window.RTCPeerConnection;

// connect-server

let ws=new WebSocket('wss://*****.herokuapp.com:443');  //*****はプロジェクト名

ws.onopen = function(event) {
        // nop.
       console.log('ws open');
     
        hangupB.style.display="none";
       msgL.innerText="Video Onにして待機してください";
       msgL.textContent="Video Onにして待機してください";
     //  stbyflg=false;
     
      
         
    };

ws.onerror = function(error) {
        // nop.
        console.log('ws error');
       // connectB.style.display="inline";
         hangupB.style.display="none";
   
             msgL.innerText="エラー：サーバが見つかりません";
             msgL.textContent="エラー：サーバが見つかりません";
         
            
        
       // stbyflg=false;
    };

ws.onclose = function(event) {
        // nop.
        console.log('ws close:'+event);
       // connectB.style.display="inline";
       // hangupB.style.display="none";
       
         if (msgL.innerText=="接続済"||msgL.textContent=="接続済"){
             
         }else{
            msgL.innerText="切断されました。再読込してください。";
            msgL.textContent="切断されました。再読込してください。";
         }

// stbyflg=false;
    };

ws.onmessage = function(event) {
        console.log(' msg recv');
      var edata=event.data;
        edata=edata.toString().replace(/\r\n/g,'').replace(/\r/g,'').replace(/\n/g,'');
        let message = JSON.parse(edata);
      
        if (message.type === 'offer') {
            let offer = new window.RTCSessionDescription(message);
            setOffer(offer);
         
        }else  if (message.type === 'answer') {
            let answer = new window.RTCSessionDescription(message);
            setAnswer(answer);
         
        }else {
             let jusin=JSON.stringify(message);
             let stmp='';
             
             if (jusin=='"standby"'){
                  stbyflg=true;
                 if(startB.style.display=="inline"){
                     //  stmp='相手が待機しています。カメラOnにすると接続できます。';
                        msgL.innerText="相手が待機しています。カメラOnにすると接続できます。";
                        msgL.textContent="相手が待機しています。カメラOnにすると接続できます。";
                       
                 }else{
                      connectB.style.display="inline";
                  //    stmp='相手も待機しています。接続できます。';
                       ws.send(JSON.stringify('standby2'));
                       msgL.innerText="相手も待機しています。接続できます。";
                        msgL.textContent="相手も待機しています。接続できます。";
                 }
                 
                
             }else if(jusin=='"standby2"'  ){
                      connectB.style.display="inline";
                    //  stmp='相手も待機しています。接続できます。';
                    msgL.innerText="相手も待機しています。接続できます。";
                    msgL.textContent="相手も待機しています。接続できます。";

}else {
               
                   stmp="受:"+jusin;
             }
             obj2.value=obj2.value+stmp+'\r\n';
             obj2.scrollTop = obj2.scrollHeight;
        }
    };
    
     document.addEventListener('DOMContentLoaded',function(e){
         var objx=document.getElementById('sendtxt');
         document.getElementById('sendbtn').addEventListener('click',function(e){
            ws.send(JSON.stringify(objx.value));
            obj2.value=obj2.value+"送:"+objx.value+'\r\n';
            obj2.scrollTop = obj2.scrollHeight;
                        objx.value="";
        });
        
        var vckbox=document.getElementById('videoflg');
        vckbox.addEventListener('click',function(e){
            if (vckbox.checked) {
                 updateVideoEnabled(true);
            }else{
                 updateVideoEnabled(false);
            }
           
          });
        
        
        
        var ackbox=document.getElementById('audioflg');
        ackbox.addEventListener('click',function(e){
            if (ackbox.checked){
                updateAudioEnabled(true);
            }else{
                updateAudioEnabled(false);
            }
             
          });
        
        var sckbox=document.getElementById('sosinhyoji');
        sckbox.addEventListener('click',function(e){
            if (sckbox.checked){
                sosinhyojiflg=true;
            }else{
                sosinhyojiflg=false;
            }
             
          });
        
        
        
      });

navigator.mediaDevices.getUserMedia({ video:true, audio:nc})
        .then(function(stream) {
            localStream = stream;
            localVideo.srcObject = stream;
            localVideo.play();
            
            startB.style.display="none";
            stopB.style.display="inline";
            echoB.style.display="none";
            echoB2.style.display="none";
            ws.send(JSON.stringify("standby"));
            
             if( stbyflg    ){
                      connectB.style.display="inline";
                 }
                 
            msgL.innerText="相手の準備ができるまで待機しています";
            msgL.textContent="相手の準備ができるまで待機しています";
            
            //************canvas shori
           if (sosinhyojiflg) {
               
 
             drawLevel(stream)
              
           }
         
  
            
        }).catch(function(error) {
            console.error('mediaDevice.getUserMedia() error:', error);
            return;
        });
        
        
    }
    
    function drawLevel(stream){
                              const audioContext = new AudioContext();
  const sourceNode = audioContext.createMediaStreamSource(stream);
  const analyserNode = audioContext.createAnalyser();
  //analyserNode.fftSize = 2048;
  analyserNode.fftSize = 32;
  sourceNode.connect(analyserNode);

function draw() {
    const barWidth = canvas.width / analyserNode.fftSize;
    const array = new Uint8Array(analyserNode.fftSize);
    analyserNode.getByteTimeDomainData(array);
    drawContext.fillStyle = 'rgba(0, 0, 0, 1)';
    
    drawContext.fillRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < analyserNode.fftSize; ++i) {
      const value = array[i];
      const percent = value / 255;
      const height = canvas.height * percent;
      const offset = canvas.height - height;

drawContext.fillStyle = 'lime';
      drawContext.fillRect(i * barWidth, offset, barWidth, 2);
    }

requestAnimationFrame(draw);
  }

draw();
  
        
        
            
    }

function stopVideo() {
        if (localStream == null) {
            return;
        }
        for (let track of localStream.getTracks()) {
            track.stop();
        }
        localStream = null;

// kill local video.
        localVideo.pause();
        localVideo.srcObject = null;
        
        stopB.style.display="none";
        startB.style.display="inline";
        echoB.style.display="inline";
        echoB2.style.display="inline";
    }

function connect() {
        if (peerConnection) {
            console.log('already connecting.')
            msgL.innerText="";
            msgL.textContent="";
            return;
        }
        makeOffer();

msgL.innerText="接続中...しばらくお待ちください";
        msgL.textContent="接続中...しばらくおまちください";

}

function makeAnswer() {
        if (!peerConnection) {
            return;
        }
        peerConnection.createAnswer()
        .then(function(sessionDescription) {
            return peerConnection.setLocalDescription(sessionDescription);
        }).then(function() {
            console.log('5 6 7--setLocalDescription() succsess in promise');
            msgL.innerText="接続済";
            msgL.textContent="接続済";
            connectB.style.display="none";
            hangupB.style.display="inline";
             obj2.value="";

}).catch(function(error) {
            console.log(error);
        });
    }

function prepareNewConnection() {
        let pcConfig = {"iceServers":[]};
        let peer = new RTCPeerConnection(pcConfig);

if ('ontrack' in peer) {
            console.log('-- ontrack');
            peer.ontrack = function(event) {
                let stream = event.streams[0];
                remoteVideo.srcObject = stream;
                remoteVideo.play();
            };
        } else {
            console.log('-- onaddstream');
            peer.onaddstream = function(event) {
             // peer.ontrack = function(event) {
                let stream = event.stream;
                remoteVideo.srcObject = stream;
                remoteVideo.play();
            }
        }

peer.onicecandidate = function(event) {
            if (event.candidate) {
                //
            } else {
                sdpValue = peer.localDescription.sdp;
                // sending server.
                // オブジェクトをJSONの文字列に置き換え.
                let message = JSON.stringify(peer.localDescription);
                ws.send(message);
            }
        }

peer.oniceconnectionstatechange = function() {
            if (peer.iceConnectionState === 'disconnected') {
                hangUp();
            }
        };

peer.onremovestream = function(event) {
            // kill remote video.
            remoteVideo.pause();
            remoteVideo.srcObject = null;
        }

// localStreamの追加.
        if (localStream) {
            //peer.addStream(localStream); //deprecated
           // peer.addTrack(localStream);
           // --- 新しい MediaTrack単位の追加 ---
           let videoSender = peer.addTrack(localStream.getVideoTracks()[0], localStream);
           let audioSender = peer.addTrack(localStream.getAudioTracks()[0], localStream);
        }

return peer;
    }

function hangUp() {
        if (peerConnection) {
            peerConnection.close();
            peerConnection = null;
            // kill remote video.
            remoteVideo.pause();
            remoteVideo.srcObject = null;
            
            hangupB.style.display="none";
            connectB.style.display="inline";
           // stbyflg=true;
            
            msgL.innerText="チャットのみ可";
            msgL.textContent="チャットのみ可";

}
    }
    
    //****************
    const updateVideoEnabled = (enabled) => {
     if (localStream) {
      localStream.getVideoTracks()[0].enabled = enabled
      }
     }
    const updateAudioEnabled = (enabled) => {
     if (localStream) {
      localStream.getAudioTracks()[0].enabled = enabled
      }
     }
    
</script>
</body>
</html>

登録: 投稿 (Atom)