소개

하고 싶은 일

스마트 폰에 말하면 메일, 슬랙, 라인, 캘린더에 알리고 싶습니다

기본 사용법은 관련 기사를 참조하십시오.

Node-RED 요약 기사

Node-RED 계열의 기사 정리

운영 환경

IBM bluemix Node-RED : v0.20.5

면책 조항

검증을 해 확실하다고 생각되는 정보를 올리고 있습니다만, 잘못되어 있을 가능성도 제로가 아니기 때문에, 참고 정도에 이용해 주세요

본래는 코드와 실행 결과의 콘솔 로그도 올려야 합니다만, 수와 양이 많기 때문에, 일단은 화면 이미지까지로 시켜 주세요.

본편

화면

처리 흐름

화면을 열면 WebSocket을 사용하여 서버와의 통신 설정

버튼을 누르면 음성을 인식 할 수있는 상태가됩니다

WebSpeechAPI를 사용하여 브라우저를 향해 말한 내용을 문자열화

문자열을 서버로 보내기

문자열을 기반으로 조건 분기 등을 수행하여 대상 SNS와 전송할 데이터를 결정합니다

SNS로 보내기

보낸 메시지를 WebSocket을 사용하여 브라우저로 반환

WebSpeechAPI를 사용하여 말하기

흐름

각 SNS에 대한 액세스

실제로 구구하면 산정에서 와서 여기에 써도 곧 낡아지므로 각 API를 참조하십시오.
일단 지금 시점에서 어떤 일을 했는지는 남겨 둡니다.

slack : IncommingWebHook을 사용하여 실현. URL에 데이터를 보내는 중

Line : Developer의 Messaging API를 사용하여 실현. WebHook에 데이터 보내기

메일 : 간단하게 메일 노드로 실현.

google 캘린더 : google 캘린더의 노드를 사용하여 실현. node-red-node-google의 지침에 따라 계정 및 사용 권한 등을 설정

보충

보내는 문장은 번거롭기 때문에 문장 전체. ↑의 예라고 遅刻しますって LINE して 라고 모두 보내집니다.

캘린더는 지금부터 1시간(기본값)으로 일정이 만들어지므로 덜 실용적입니다.

분명히 Node-RED에서 보면 문자열을 받고 SNS에 알리고 문자열을 다시 보내고 있습니다!

브라우저 측 구현

이 근처를 참고로했습니다.
* 브라우저에서 음성 조작을 한다. (Speech Recognition API)
* 웹 페이지에서 브라우저의 음성 인식 기능 사용 - Web Speech API Speech Recognition

본가의 분과 거의 다르지 않기 때문에, 오리지날을 보는 것이 좋을까 생각합니다만, 일단 중요한 부분의 소스입니다

브라우저 html의 js

    const startBtn = document.querySelector('#start-btn');
    const resultDiv = document.querySelector('#speak-text');

    SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
    let recognition = new SpeechRecognition();

    recognition.lang = 'ja-JP';
    recognition.interimResults = true;
    recognition.continuous = false;

    let finalTranscript = ''; 
    recognition.onresult = (event) => {
      let interimTranscript = '';
      for (let i = event.resultIndex; i < event.results.length; i++) {
        let transcript = event.results[i][0].transcript;
        if (event.results[i].isFinal) {
          finalTranscript += transcript;
        } else {
          interimTranscript = transcript;
        }
      }
      resultDiv.innerHTML = finalTranscript + '<i style="color:#ddd;">' + interimTranscript + '</i>';
    }

    // 文字列の送信
    recognition.onend = (event) => {
      recognition.stop();
      const speakText = $("#speak-text").text()
      sock.send(speakText);
    }

    // 開始ボタンのクリック
    startBtn.onclick = () => {
      speechSynthesis.cancel();
      $('#status').text('please speak');
      $("#speak-text").empty();
      $("#response-text").empty();
      finalTranscript = '';
      recognition.start();
    }

    //Websocketの確立と各種イベント
    var socketaddy = "wss://" + window.location.host + "/ws/speaker";
    $(document).ready(function () {
      sock = new WebSocket(socketaddy);
      sock.onopen = function () {
        $('#status').text('connected');
      };
      sock.onerror = function () {
        $('#status').text('error');
      };
      sock.onclose = function () {
        $('#status').text('closed please reload page!!')
      }
      sock.onmessage = function (evt) {
        $('#status').text('response received');
        $("#response-text").html(evt.data);
        var speakText = $("#response-text").text();

        // 発言を作成
        const uttr = new SpeechSynthesisUtterance(speakText);
        uttr.rate = 1.3;
        uttr.lang = "ja-JP";
        speechSynthesis.speak(uttr);
      };
    });

말하는 데이터를 일단 html로 하고 나서 꺼내고 있는 것은, br태그 등을 말할 수 없게 하기 위해서(웃음)
보기에는 2행으로 하고 싶지만, 태그를 말할 수 있으면 기분이 나쁘기 때문에. . .